/* =========================================================================
   CU*PAY — supplementary front-end stylesheet
   -------------------------------------------------------------------------
   theme.json owns the design system (palette, typography, spacing, element
   defaults, block defaults). This file is everything that can't be
   expressed in theme.json:

     §1  Theme switching: dark (default) + light override via [data-theme]
     §2  Theme-aware logo + theme-toggle button
     §3  Skip link
     §4  Sticky header behavior
     §5  Footer legal (3-column disclosure grid)
     §6  Animated sine-wave background + hero glow + starfield twinkle
     §7  Accent text (gradient fill)
     §8  Block-style variants (eyebrow, card, manifesto, hairline, accent/ghost buttons)
     §9  Leader grid + Owner logo wall
     §10 Section-internal helpers (cupay-hero__inner, cupay-mark, …)
     §11 Gravity Forms styling
     §12 Selection
   ========================================================================= */


/* =========================================================================
   §1  Theme switching: dark (default) + light override
   ========================================================================= */

:root {
	/* Custom props for hardcoded rgba values used by the effects below. Each
	   one has a light-mode override in the [data-theme="light"] block. */
	--cupay-header-bg:           rgba(6, 8, 28, 0.78);
	--cupay-header-bg-scrolled:  rgba(6, 8, 28, 0.94);
	--cupay-hero-glow:           radial-gradient(1200px 700px at 80% -10%, rgba(246, 139, 31, 0.22), transparent 60%),
	                              radial-gradient(900px 600px at -10% 30%, rgba(28, 117, 188, 0.32), transparent 55%);
	--cupay-cta-glow:            radial-gradient(700px 400px at 100% 0%, rgba(28, 117, 188, 0.18), transparent 70%);
	--cupay-starfield-opacity:   0.5;
	--cupay-starfield-color:     rgba(255, 255, 255, 0.55);
	--cupay-wave-a:              rgba(28, 117, 188, 0.22);
	--cupay-wave-b:              rgba(246, 139, 31, 0.16);
	--cupay-wave-c:              rgba(28, 117, 188, 0.14);
	--cupay-card-tint-top:       rgba(255, 255, 255, 0.02);
	--cupay-card-tint-hover:     rgba(255, 255, 255, 0.04);
}

:root[data-theme="light"] {
	/* Override the palette CSS variables emitted by theme.json. */
	--wp--preset--color--base:              #ffffff;
	--wp--preset--color--surface:           #f7f8fc;
	--wp--preset--color--surface-elevated:  #ffffff;
	--wp--preset--color--contrast:          #0e1330;
	--wp--preset--color--text-soft:         rgba(14, 19, 48, 0.72);
	--wp--preset--color--text-muted:        rgba(14, 19, 48, 0.55);
	--wp--preset--color--text-faint:        rgba(14, 19, 48, 0.42);
	--wp--preset--color--line:              rgba(14, 19, 48, 0.08);
	--wp--preset--color--line-strong:       rgba(14, 19, 48, 0.18);

	--cupay-header-bg:           rgba(255, 255, 255, 0.82);
	--cupay-header-bg-scrolled:  rgba(255, 255, 255, 0.96);
	--cupay-hero-glow:           radial-gradient(1200px 700px at 80% -10%, rgba(246, 139, 31, 0.18), transparent 60%),
	                              radial-gradient(900px 600px at -10% 30%, rgba(28, 117, 188, 0.16), transparent 55%);
	--cupay-cta-glow:            radial-gradient(700px 400px at 100% 0%, rgba(28, 117, 188, 0.10), transparent 70%);
	--cupay-starfield-opacity:   0.18;
	--cupay-starfield-color:     rgba(14, 19, 48, 0.35);
	--cupay-wave-a:              rgba(28, 117, 188, 0.28);
	--cupay-wave-b:              rgba(246, 139, 31, 0.22);
	--cupay-wave-c:              rgba(28, 117, 188, 0.18);
	--cupay-card-tint-top:       rgba(14, 19, 48, 0.015);
	--cupay-card-tint-hover:     rgba(14, 19, 48, 0.035);
}


/* =========================================================================
   §2  Theme-aware logo + theme-toggle button
   ========================================================================= */

.cupay-theme-toggle {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line-strong);
	background: transparent;
	color: var(--wp--preset--color--text-soft);
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
}
.cupay-theme-toggle:hover {
	color: var(--wp--preset--color--brand-orange-warm);
	border-color: var(--wp--preset--color--brand-orange);
}
.cupay-theme-toggle:active { transform: scale(0.94); }
.cupay-theme-toggle__icon {
	width: 18px;
	height: 18px;
	display: block;
	pointer-events: none;
}
:root[data-theme="dark"]  .cupay-theme-toggle__icon--sun  { display: none; }
:root[data-theme="light"] .cupay-theme-toggle__icon--moon { display: none; }

.cupay-themed-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.cupay-themed-logo__img {
	display: block;
	width: 150px;
	height: auto;
	max-height: 32px;
	object-fit: contain;
	object-position: left center;
}
.cupay-themed-logo--footer .cupay-themed-logo__img {
	width: 120px;
	max-height: 28px;
}
:root[data-theme="dark"]  .cupay-themed-logo__img--light { display: none; }
:root[data-theme="light"] .cupay-themed-logo__img--dark  { display: none; }


/* =========================================================================
   §3  Skip link
   ========================================================================= */

.cupay-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 9999;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 0.7rem 1rem;
	font-weight: 600;
	border-radius: var(--wp--custom--radius--sm);
	text-decoration: none;
}
.cupay-skip-link:focus {
	top: 1rem;
	clip: auto !important;
	width: auto !important;
	height: auto !important;
}


/* =========================================================================
   §4  Sticky site header
   -------------------------------------------------------------------------
   WP applies position:sticky to the INNER block, but its containing block
   is too short to actually stick. We move the sticky onto the outer
   template-part wrapper, which spans the whole page.
   ========================================================================= */

header.wp-block-template-part:has(> .cupay-site-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.cupay-site-header {
	z-index: 50;
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	background-color: var(--cupay-header-bg) !important;
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: border-color 0.25s ease, background-color 0.25s ease;
}
.cupay-site-header[data-scroll="scrolled"] {
	background-color: var(--cupay-header-bg-scrolled) !important;
	border-bottom-color: var(--wp--preset--color--line-strong);
}
.cupay-site-header .wp-block-site-logo img,
.cupay-site-header .custom-logo {
	max-height: 32px;
	width: auto;
	height: auto;
}
.cupay-site-footer .wp-block-site-logo img,
.cupay-site-footer .custom-logo {
	max-height: 28px;
	width: auto;
	height: auto;
}

.cupay-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-soft);
	transition: color 0.18s ease;
}
.cupay-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--contrast);
}

.cupay-site-header__cta {
	margin: 0 !important;
}
.cupay-site-header__cta .wp-block-button {
	margin: 0;
}


/* =========================================================================
   §5  Footer legal: 3-column disclosure grid
   ========================================================================= */

.cupay-site-footer-legal a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--line-strong);
	text-underline-offset: 2px;
	transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.cupay-site-footer-legal a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration-color: var(--wp--preset--color--brand-orange-warm);
}

.wp-block-group.cupay-legal-disclaimers-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) !important;
}
.wp-block-group.cupay-legal-disclaimers-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

@media (max-width: 1024px) {
	.wp-block-group.cupay-legal-disclaimers-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
	.wp-block-group.cupay-legal-disclaimers-grid { grid-template-columns: 1fr !important; }
}

.cupay-legal-disclaimer {
	max-width: none;
}
.cupay-legal-disclaimer strong {
	color: var(--wp--preset--color--text-muted);
	font-weight: 600;
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 0.35rem;
}
.cupay-legal-disclaimer em {
	font-style: italic;
	color: var(--wp--preset--color--brand-orange);
	opacity: 0.7;
}


/* =========================================================================
   §6  Hero + CTA decorative effects: wave background, radial glow, starfield
   ========================================================================= */

.cupay-bg-waves {
	position: absolute !important;
	inset: 0 !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.cupay-bg-waves svg {
	width: 100%;
	height: 100%;
	display: block;
}
.cupay-bg-waves__layer {
	fill: none;
	vector-effect: non-scaling-stroke;
}
.cupay-bg-waves__layer path {
	stroke-width: 1.25;
}
.cupay-bg-waves__layer--a path { stroke: var(--cupay-wave-a); }
.cupay-bg-waves__layer--b path { stroke: var(--cupay-wave-b); stroke-width: 1; }
.cupay-bg-waves__layer--c path { stroke: var(--cupay-wave-c); }

/* The section containing a wave-background pattern reference must be
   positioned so the absolute wave layer pins to it. */
.cupay-hero,
.cupay-cta {
	position: relative;
	overflow: hidden;
}

.cupay-hero {
	background-image: var(--cupay-hero-glow) !important;
	background-color: var(--wp--preset--color--base) !important;
}

.cupay-cta {
	background-image: var(--cupay-cta-glow) !important;
	background-color: var(--wp--preset--color--base) !important;
}

.cupay-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(1px 1px at 20% 30%, var(--cupay-starfield-color) 50%, transparent 51%),
		radial-gradient(1px 1px at 70% 70%, var(--cupay-starfield-color) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 40% 80%, var(--cupay-starfield-color) 50%, transparent 51%),
		radial-gradient(1px 1px at 85% 20%, var(--cupay-starfield-color) 50%, transparent 51%);
	background-size: 220px 220px;
	opacity: var(--cupay-starfield-opacity);
	pointer-events: none;
	z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cupay-bg-waves { display: none; }
}


/* =========================================================================
   §7  Accent text (orange gradient fill)
   ========================================================================= */

.cupay-accent-text,
.is-style-accent-text {
	background: linear-gradient(135deg, var(--wp--preset--color--brand-orange-warm) 0%, var(--wp--preset--color--brand-orange) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}


/* =========================================================================
   §8  Block-style variants
   ========================================================================= */

.is-style-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-weight: 500;
	font-size: 0.76rem !important;
}

.wp-block-group.is-style-card {
	background: linear-gradient(180deg, var(--cupay-card-tint-top), transparent);
	transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.wp-block-group.is-style-card:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--line-strong) !important;
	background: linear-gradient(180deg, var(--cupay-card-tint-hover), transparent);
}

.wp-block-quote.is-style-manifesto {
	border-left: 2px solid var(--wp--preset--color--brand-orange);
	padding-left: 0.9rem;
	font-style: italic;
}

.wp-block-separator.is-style-hairline {
	background-color: var(--wp--preset--color--line) !important;
	border: none;
	height: 1px;
	margin-block: 2rem;
}

.wp-block-button.is-style-accent .wp-block-button__link,
.wp-block-button.is-style-accent > a.wp-element-button {
	background: linear-gradient(135deg, var(--wp--preset--color--brand-orange-warm) 0%, var(--wp--preset--color--brand-orange) 100%) !important;
	color: var(--wp--preset--color--base) !important;
	box-shadow: var(--wp--preset--shadow--glow);
}
.wp-block-button.is-style-accent .wp-block-button__link:hover {
	color: var(--wp--preset--color--base) !important;
	transform: translateY(-1px);
}

.wp-block-button.is-style-ghost .wp-block-button__link,
.wp-block-button.is-style-ghost > a.wp-element-button {
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--wp--preset--color--line-strong) !important;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: var(--wp--preset--color--contrast) !important;
}


/* =========================================================================
   §9  Leader grid + Owner logo wall
   ========================================================================= */

/* Specificity bumped (.wp-block-group.cupay-…) + !important on grid-template
   so we beat WP's wp-container-* and is-layout-flow inline rules. Without
   this, WP's flow-layout container CSS wins and the grid collapses to one
   column. */
.wp-block-group.cupay-leader-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 2.5rem 1.5rem !important;
}
/* WP's is-layout-flow gives every child except the first a top margin. In
   flow that's rhythm; in a grid it pushes the first cell up. Reset on every
   cell so all rows start at the same grid-cell baseline. */
.wp-block-group.cupay-leader-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
.cupay-leader { align-self: start; }
@media (max-width: 1024px) {
	.wp-block-group.cupay-leader-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
	.wp-block-group.cupay-leader-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

.wp-block-group.cupay-owner-grid {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	gap: 1px !important;
	background: var(--wp--preset--color--line);
	overflow: hidden;
}
.cupay-owner-grid .cupay-owner-tile,
.cupay-owner-grid .wp-block-image {
	margin: 0 !important;
	background: var(--wp--preset--color--base);
	min-height: 100px;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	transition: background 0.25s ease;
}
.cupay-owner-grid .wp-block-image img {
	opacity: 0.55;
	max-width: 100%;
	height: auto;
	transition: opacity 0.25s ease;
}
.cupay-owner-grid .wp-block-image:hover { background: var(--wp--preset--color--surface); }
.cupay-owner-grid .wp-block-image:hover img { opacity: 1; }

@media (max-width: 960px) {
	.wp-block-group.cupay-owner-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 600px) {
	.wp-block-group.cupay-owner-grid { grid-template-columns: repeat(3, 1fr) !important; }
}


/* =========================================================================
   §10 Section-internal helpers
   -------------------------------------------------------------------------
   These rules used to live as inline `style="..."` on rendered HTML, which
   Gutenberg's serializer couldn't reproduce from block attrs and so tripped
   the editor's block validator. Moved out to keep patterns canonically valid.
   ========================================================================= */

.cupay-hero {
	padding-top:    clamp(7rem, 14vw, 11rem);
	padding-right:  var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--70);
	padding-left:   var(--wp--preset--spacing--40);
}

.cupay-hero__inner,
.cupay-cta__inner {
	position: relative;
	z-index: 1;
}

.cupay-hero__eyebrow  { margin-bottom: var(--wp--preset--spacing--40); letter-spacing: 0.2em; }
.cupay-hero__headline { margin-bottom: var(--wp--preset--spacing--50); }
.cupay-hero__subhead  { margin-bottom: 0; line-height: 1.55; }

.cupay-thesis-strip > p { max-width: 32ch; }
.cupay-thesis-strip > p.has-text-align-right { margin-left: auto; }

.cupay-mark {
	display: inline-block;
	align-self: flex-start;
	max-width: fit-content;
}

.cupay-portrait img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

.cupay-leader__portrait img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	display: block;
	filter: grayscale(0.4);
}

.cupay-conviction-item__num { min-width: 110px; }


/* =========================================================================
   §11 Gravity Forms styling
   -------------------------------------------------------------------------
   Gravity Forms is the canonical form plugin for the site. These selectors
   style its Gutenberg block output to match the theme — input underlines,
   brand-orange focus, gradient submit button.

   The selectors are stable across GF 2.5+. Wrapped in :where() for
   compatibility-friendly low specificity wherever possible.
   ========================================================================= */

.gform_wrapper {
	color: var(--wp--preset--color--text-soft);
}
.gform_wrapper .gform_heading { display: none; } /* GF emits a redundant title */

.gform_wrapper .gform_fields {
	display: grid;
	gap: 1rem;
}

.gform_wrapper .gfield_label {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--text-muted);
	font-weight: 500;
	margin-bottom: 0.45rem;
	display: block;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--line-strong);
	padding: 0.55rem 0;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 1rem;
	border-radius: 0;
	box-shadow: none;
	transition: border-color 0.15s ease;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: var(--wp--preset--color--text-faint);
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--brand-orange-warm);
}

.gform_wrapper textarea {
	resize: vertical;
	min-height: 80px;
}

/* Submit button — same look as .is-style-accent. */
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
	background: linear-gradient(135deg, var(--wp--preset--color--brand-orange-warm) 0%, var(--wp--preset--color--brand-orange) 100%);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.85rem 1.5rem;
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: -0.005em;
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--glow);
	transition: transform 0.15s ease;
	margin-top: 0.75rem;
	justify-self: start;
}
.gform_wrapper .gform_button:hover {
	transform: translateY(-1px);
}

/* Validation messages */
.gform_wrapper .validation_message,
.gform_wrapper .gfield_error .gfield_label {
	color: var(--wp--preset--color--brand-orange);
	font-size: 0.85rem;
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
	border-bottom-color: var(--wp--preset--color--brand-orange);
}

/* Required-field marker */
.gform_wrapper .gfield_required {
	color: var(--wp--preset--color--brand-orange);
	margin-left: 0.25rem;
}

/* Confirmation message after submit */
.gform_confirmation_message {
	padding: 1rem 0;
	color: var(--wp--preset--color--text-soft);
	border-top: 1px solid var(--wp--preset--color--line);
}


/* =========================================================================
   §12 Selection
   ========================================================================= */

::selection {
	background: rgba(246, 139, 31, 0.4);
	color: #fff;
}