/**
 * Aurea — main component & utility stylesheet.
 * Default palette: white + dark sky blue. Dark "bands" (hero, footer, CTA)
 * use the .fse-section-dark context for premium contrast.
 * Built on theme.json tokens (--wp--preset--* / --wp--custom--*). Prefix: fse-
 *
 * @package Aurea
 */

@layer aurea-base, aurea-blocks, aurea-components, aurea-utilities;

/* ------------------------------------------------------------------ *
 * BASE
 * ------------------------------------------------------------------ */
@layer aurea-base {

	:root {
		--fse-radius-sm: var(--wp--custom--radius--sm, 8px);
		--fse-radius-md: var(--wp--custom--radius--md, 14px);
		--fse-radius-lg: var(--wp--custom--radius--lg, 22px);
		--fse-radius-xl: var(--wp--custom--radius--xl, 32px);
		--fse-radius-pill: var(--wp--custom--radius--pill, 999px);
		--fse-ease-out: var(--wp--custom--ease--out, cubic-bezier(0.16, 1, 0.3, 1));
		--fse-ease-spring: var(--wp--custom--ease--spring, cubic-bezier(0.34, 1.56, 0.64, 1));
		--fse-dur-fast: var(--wp--custom--duration--fast, 160ms);
		--fse-dur-base: var(--wp--custom--duration--base, 280ms);
		--fse-dur-slow: var(--wp--custom--duration--slow, 520ms);
		--fse-glass: var(--wp--preset--color--glass, rgba(10,37,64,0.04));
		--fse-line: var(--wp--preset--color--line, rgba(10,37,64,0.12));
		--fse-accent: var(--wp--preset--color--accent, #0C63A6);
		scroll-behavior: smooth;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		overflow-x: clip;
		background-color: var(--wp--preset--color--base, #FBFCFE);
		/* Faint sky wash anchored to the top of the page. */
		background-image:
			radial-gradient(120% 80% at 85% -10%, rgba(56,189,248,0.10) 0%, rgba(251,252,254,0) 55%),
			radial-gradient(90% 60% at 5% -5%, rgba(12,99,166,0.08) 0%, rgba(251,252,254,0) 50%);
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	::selection {
		background: var(--fse-accent);
		color: #ffffff;
	}

	:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
		outline: 2px solid var(--wp--preset--color--accent, #0C63A6);
		outline-offset: 2px;
		border-radius: 3px;
	}

	:where(img, svg, video) {
		max-width: 100%;
		height: auto;
	}

	.skip-link {
		position: absolute;
		left: -9999px;
		top: 0;
		z-index: 999;
		padding: 0.75rem 1.25rem;
		background: var(--fse-accent);
		color: #ffffff;
		border-radius: 0 0 var(--fse-radius-sm) 0;
		font-weight: 600;
	}
	.skip-link:focus {
		left: 0;
	}
}

/* ------------------------------------------------------------------ *
 * BLOCK REFINEMENTS
 * ------------------------------------------------------------------ */
@layer aurea-blocks {

	.wp-block-button__link {
		position: relative;
		overflow: hidden;
		transition: transform var(--fse-dur-fast) var(--fse-ease-out),
			box-shadow var(--fse-dur-base) var(--fse-ease-out),
			background-color var(--fse-dur-fast) var(--fse-ease-out);
		will-change: transform;
	}
	.wp-block-button__link:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 30px -12px rgba(12,99,166,0.55);
	}

	/* Ghost button — adapts to light or dark context. */
	.wp-block-button.is-style-aurea-ghost .wp-block-button__link {
		background: transparent;
		color: var(--wp--preset--color--contrast);
		box-shadow: inset 0 0 0 1px var(--fse-line);
	}
	.wp-block-button.is-style-aurea-ghost .wp-block-button__link:hover {
		background: var(--fse-glass);
		box-shadow: inset 0 0 0 1px var(--fse-accent);
		color: var(--fse-accent);
	}
	.fse-section-dark .wp-block-button.is-style-aurea-ghost .wp-block-button__link {
		color: var(--wp--preset--color--on-dark);
		box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
	}
	.fse-section-dark .wp-block-button.is-style-aurea-ghost .wp-block-button__link:hover {
		background: rgba(255,255,255,0.06);
		box-shadow: inset 0 0 0 1px var(--wp--preset--color--electric);
		color: #ffffff;
	}

	/* Underline link button. */
	.wp-block-button.is-style-aurea-underline .wp-block-button__link {
		background: transparent;
		color: var(--wp--preset--color--contrast);
		padding-left: 0;
		padding-right: 0;
		border-radius: 0;
	}
	.fse-section-dark .wp-block-button.is-style-aurea-underline .wp-block-button__link {
		color: var(--wp--preset--color--on-dark);
	}
	.wp-block-button.is-style-aurea-underline .wp-block-button__link::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 4px;
		width: 100%;
		height: 1px;
		background: var(--fse-accent);
		transform: scaleX(0.35);
		transform-origin: left;
		transition: transform var(--fse-dur-base) var(--fse-ease-out);
	}
	.wp-block-button.is-style-aurea-underline .wp-block-button__link:hover {
		transform: none;
		box-shadow: none;
	}
	.wp-block-button.is-style-aurea-underline .wp-block-button__link:hover::after {
		transform: scaleX(1);
	}

	/* Gold/sky shine sweep. */
	.wp-block-button.is-style-aurea-shine .wp-block-button__link::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
		transform: translateX(-120%);
		transition: transform var(--fse-dur-slow) var(--fse-ease-out);
	}
	.wp-block-button.is-style-aurea-shine .wp-block-button__link:hover::before {
		transform: translateX(120%);
	}

	/* Gradient text heading (sky). */
	.is-style-aurea-gradient-text {
		background: var(--wp--preset--gradient--gold, linear-gradient(135deg,#38BDF8,#0C63A6));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	/* Checklist. */
	.wp-block-list.is-style-aurea-check {
		list-style: none;
		padding-left: 0;
	}
	.wp-block-list.is-style-aurea-check li {
		position: relative;
		padding-left: 1.9rem;
		margin-bottom: 0.6rem;
	}
	.wp-block-list.is-style-aurea-check li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.15em;
		width: 1.2rem;
		height: 1.2rem;
		border-radius: var(--fse-radius-pill);
		background:
			var(--fse-accent)
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
			center / 0.75rem no-repeat;
	}

	.wp-block-quote.is-style-aurea-plain {
		border: 0;
		padding-left: 0;
	}

	.wp-block-separator.is-style-aurea-gold {
		border: 0;
		height: 1px;
		max-width: 100%;
		background: var(--wp--preset--gradient--gold-fade, linear-gradient(90deg, transparent, rgba(12,99,166,0.5), transparent));
		opacity: 1;
	}

	.wp-block-image.is-style-aurea-rounded img {
		border-radius: var(--fse-radius-lg);
	}
	.wp-block-image.is-style-aurea-frame img {
		border-radius: var(--fse-radius-lg);
		box-shadow: 0 0 0 1px var(--fse-line), 0 30px 60px -30px rgba(10,37,64,0.35);
	}
	.wp-block-image.is-style-aurea-tilt img {
		border-radius: var(--fse-radius-lg);
		transition: transform var(--fse-dur-base) var(--fse-ease-out), box-shadow var(--fse-dur-base) var(--fse-ease-out);
	}
	.wp-block-image.is-style-aurea-tilt:hover img {
		transform: perspective(900px) rotateX(3deg) rotateY(-4deg) scale(1.02);
		box-shadow: 0 40px 80px -35px rgba(10,37,64,0.45);
	}

	.wp-block-columns.is-style-aurea-dividers > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--fse-line);
		padding-left: clamp(1rem, 3vw, 2.5rem);
	}
}

/* ------------------------------------------------------------------ *
 * COMPONENTS
 * ------------------------------------------------------------------ */
@layer aurea-components {

	/* Glass / surface cards (light frosted). */
	.is-style-aurea-glass {
		background: rgba(255,255,255,0.7);
		border: 1px solid var(--fse-line);
		border-radius: var(--fse-radius-lg);
		-webkit-backdrop-filter: blur(var(--wp--custom--blur--md, 14px));
		backdrop-filter: blur(var(--wp--custom--blur--md, 14px));
		box-shadow: var(--wp--preset--shadow--soft, 0 2px 10px rgba(10,37,64,0.08));
	}
	.fse-section-dark .is-style-aurea-glass {
		background: rgba(255,255,255,0.05);
		box-shadow: var(--wp--preset--shadow--inset-line, inset 0 1px 0 0 rgba(255,255,255,0.08));
	}
	.is-style-aurea-surface {
		background: var(--wp--preset--color--surface-2, #F1F6FB);
		border: 1px solid var(--fse-line);
		border-radius: var(--fse-radius-lg);
	}
	.is-style-aurea-spotlight {
		position: relative;
		background:
			radial-gradient(120% 120% at 50% -20%, rgba(12,99,166,0.10), rgba(251,252,254,0) 60%),
			var(--wp--preset--color--surface, #FFFFFF);
		border: 1px solid var(--fse-line);
		border-radius: var(--fse-radius-xl);
		overflow: hidden;
	}
	.fse-section-dark .is-style-aurea-spotlight {
		background:
			radial-gradient(120% 120% at 50% -20%, rgba(56,189,248,0.18), rgba(6,24,43,0) 60%),
			var(--wp--preset--color--navy-2, #0A2540);
		border-color: rgba(255,255,255,0.10);
	}

	.is-style-aurea-gradient-border {
		position: relative;
		background: var(--wp--preset--color--surface, #FFFFFF);
		border-radius: var(--fse-radius-lg);
		border: 1px solid transparent;
	}
	.is-style-aurea-gradient-border::before {
		content: "";
		position: absolute;
		inset: 0;
		padding: 1px;
		border-radius: inherit;
		background: linear-gradient(135deg, rgba(12,99,166,0.7), rgba(56,189,248,0.4), rgba(10,37,64,0.06));
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		pointer-events: none;
	}

	.fse-card {
		transition: transform var(--fse-dur-base) var(--fse-ease-out),
			box-shadow var(--fse-dur-base) var(--fse-ease-out),
			border-color var(--fse-dur-base) var(--fse-ease-out);
	}
	.fse-card:hover {
		transform: translateY(-6px);
		border-color: rgba(12,99,166,0.4);
		box-shadow: var(--wp--preset--shadow--elevated, 0 20px 50px -18px rgba(10,37,64,0.22));
	}

	.fse-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--xs);
		letter-spacing: var(--wp--custom--tracking--eyebrow, 0.16em);
		text-transform: uppercase;
		color: var(--fse-accent);
	}
	.fse-section-dark .fse-eyebrow { color: var(--wp--preset--color--electric); }
	.fse-eyebrow::before {
		content: "";
		width: 1.75rem;
		height: 1px;
		background: currentColor;
		opacity: 0.7;
	}

	.fse-chip {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.4rem 0.9rem;
		border-radius: var(--fse-radius-pill);
		border: 1px solid var(--fse-line);
		background: var(--fse-glass);
		font-size: var(--wp--preset--font-size--xs);
		color: var(--wp--preset--color--muted);
	}
	.fse-section-dark .fse-chip {
		border-color: rgba(255,255,255,0.14);
		background: rgba(255,255,255,0.05);
		color: var(--wp--preset--color--on-dark);
	}

	/* Sticky, blurred header (light). */
	.fse-header {
		position: sticky;
		top: 0;
		z-index: 100;
		background: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		border-bottom: 1px solid transparent;
		transition: border-color var(--fse-dur-base) var(--fse-ease-out),
			background-color var(--fse-dur-base) var(--fse-ease-out);
	}
	body.fse-scrolled .fse-header {
		border-bottom-color: var(--fse-line);
		background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
		box-shadow: 0 8px 30px -20px rgba(10,37,64,0.3);
	}

	.fse-header .wp-block-navigation-item__content {
		position: relative;
		padding-block: 0.25rem;
		color: var(--wp--preset--color--contrast);
	}
	.fse-header .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -2px;
		width: 100%;
		height: 1px;
		background: var(--fse-accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--fse-dur-base) var(--fse-ease-out);
	}
	.fse-header .current-menu-item .wp-block-navigation-item__content::after,
	.fse-header .wp-block-navigation-item:hover .wp-block-navigation-item__content::after {
		transform: scaleX(1);
	}

	/* Footer — dark navy band to bookend the site. */
	.fse-footer {
		border-top: 1px solid rgba(255,255,255,0.08);
		background:
			radial-gradient(80% 120% at 50% 140%, rgba(56,189,248,0.14), rgba(6,24,43,0) 60%),
			var(--wp--preset--color--navy, #06182B);
		color: var(--wp--preset--color--on-dark);
	}
	.fse-footer :is(h1,h2,h3,h4,h5,h6),
	.fse-footer .wp-block-site-title a { color: #ffffff; }
	.fse-footer a { color: var(--wp--preset--color--on-dark); }
	.fse-footer a:hover { color: var(--wp--preset--color--electric); }
	.fse-footer .has-muted-color { color: #9DB0C4 !important; }
	.fse-footer .has-faint-color { color: #6E8299 !important; }

	/* ------- Dark section context (hero, CTA, any navy band) ------- */
	.fse-section-dark {
		background: var(--wp--preset--color--navy, #06182B);
		color: var(--wp--preset--color--on-dark);
	}
	.fse-section-dark :is(h1,h2,h3,h4,h5) { color: #ffffff; }
	.fse-section-dark .has-muted-color { color: #A7B8CC !important; }
	.fse-section-dark .has-faint-color { color: #7387A0 !important; }
	.fse-section-dark a { color: var(--wp--preset--color--on-dark); }
	.fse-section-dark a:hover { color: var(--wp--preset--color--electric); }

	/* Decorative floating shapes (sky glow). */
	.fse-floating-shape {
		position: absolute;
		border-radius: var(--fse-radius-pill);
		filter: blur(48px);
		opacity: 0.55;
		pointer-events: none;
		z-index: 0;
	}
	.fse-floating-shape--gold {
		background: radial-gradient(circle, rgba(56,189,248,0.55), rgba(56,189,248,0));
	}
	.fse-floating-shape--electric {
		background: radial-gradient(circle, rgba(12,99,166,0.5), rgba(12,99,166,0));
	}

	/* Stat number (sky gradient text). */
	.fse-stat {
		font-family: var(--wp--preset--font-family--display);
		font-weight: 700;
		letter-spacing: -0.03em;
		line-height: 1;
		background: var(--wp--preset--gradient--gold);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	/* FAQ (native details/summary). */
	.fse-faq details {
		border-bottom: 1px solid var(--fse-line);
		padding: 1.25rem 0;
	}
	.fse-faq summary {
		cursor: pointer;
		list-style: none;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		font-family: var(--wp--preset--font-family--display);
		font-weight: 600;
		font-size: var(--wp--preset--font-size--lg);
		color: var(--wp--preset--color--contrast);
	}
	.fse-faq summary::-webkit-details-marker { display: none; }
	.fse-faq summary::after {
		content: "+";
		font-size: 1.5rem;
		color: var(--fse-accent);
		transition: transform var(--fse-dur-base) var(--fse-ease-out);
		line-height: 1;
	}
	.fse-faq details[open] summary::after { transform: rotate(45deg); }
	.fse-faq details > *:not(summary) {
		margin-top: 0.85rem;
		color: var(--wp--preset--color--muted);
	}

	/* ---------------- ILLUMINATED HERO GLOW ------------------------ *
	 * Ported natively from the provided React component: an SVG multi-blur
	 * filter (defined inline in the hero pattern as #fse-glow) applied to an
	 * editable heading, plus a soft on-load bloom. No React required.        */
	.fse-glow-text {
		filter: url(#fse-glow);
		color: #fffaf6;
		text-wrap: balance;
	}
	.fse-glow-highlight {
		background: linear-gradient(0deg, #cfe8ff 0%, #ffffff 55%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	@supports not (filter: url(#fse-glow)) {
		.fse-glow-text { text-shadow: 0 0 24px rgba(56,189,248,0.45), 0 0 2px rgba(255,255,255,0.6); }
	}

	/* ---------------- INFINITE GRID BACKGROUND --------------------- *
	 * Ported from the provided React "Infinite Grid": an endlessly scrolling
	 * grid, a cursor-revealed brighter layer, and blurred colour blobs.
	 * Cursor position is fed via --fse-mx/--fse-my (set by main.js).        */
	.fse-grid {
		position: absolute;
		inset: 0;
		overflow: hidden;
		z-index: 0;
		pointer-events: none;
		--fse-grid-color: rgba(125,211,252,0.55);
	}
	.fse-grid__layer {
		position: absolute;
		inset: -40px;
		background-image:
			linear-gradient(to right, var(--fse-grid-color) 1px, transparent 1px),
			linear-gradient(to bottom, var(--fse-grid-color) 1px, transparent 1px);
		background-size: 40px 40px;
		animation: fse-grid-scroll 6s linear infinite;
	}
	.fse-grid__base { opacity: 0.06; }
	.fse-grid__reveal {
		opacity: 0.5;
		-webkit-mask-image: radial-gradient(300px circle at var(--fse-mx, 50%) var(--fse-my, 30%), #000, transparent 70%);
		mask-image: radial-gradient(300px circle at var(--fse-mx, 50%) var(--fse-my, 30%), #000, transparent 70%);
	}
	.fse-grid__blobs { position: absolute; inset: 0; }
	.fse-grid__blob {
		position: absolute;
		border-radius: 50%;
		filter: blur(120px);
	}
	.fse-grid__blob--sky { right: -18%; top: -20%; width: 42%; height: 42%; background: rgba(56,189,248,0.30); }
	.fse-grid__blob--deep { left: -12%; bottom: -22%; width: 44%; height: 44%; background: rgba(12,99,166,0.35); }
	.fse-grid__blob--accent { right: 8%; top: -8%; width: 22%; height: 22%; background: rgba(29,122,191,0.30); }
}

/* ------------------------------------------------------------------ *
 * UTILITIES
 * ------------------------------------------------------------------ */
@layer aurea-utilities {

	.fse-relative { position: relative; z-index: 1; }
	.fse-overflow-clip { overflow: clip; }
	.fse-text-balance { text-wrap: balance; }
	.fse-text-pretty { text-wrap: pretty; }
	.fse-measure { max-width: var(--wp--custom--container--narrow, 760px); }
	.fse-center { margin-inline: auto; }
	.fse-cq { container-type: inline-size; }
	.fse-sticky { position: sticky; top: calc(72px + 1.5rem); }

	/* Reading progress bar for single posts. */
	.fse-progress {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 3px;
		z-index: 200;
		background: transparent;
		pointer-events: none;
	}
	.fse-progress > span {
		display: block;
		height: 100%;
		width: 0;
		background: var(--wp--preset--gradient--gold);
	}
}

/* ------------------------------------------------------------------ *
 * WOOCOMMERCE COMPATIBILITY
 * ------------------------------------------------------------------ */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	border: 1px solid var(--fse-line);
	border-radius: var(--fse-radius-lg);
	padding: 1rem;
	background: var(--wp--preset--color--surface);
	transition: transform var(--fse-dur-base) var(--fse-ease-out), box-shadow var(--fse-dur-base) var(--fse-ease-out);
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--elevated);
}
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.wc-block-components-button {
	border-radius: var(--fse-radius-pill) !important;
	background: var(--fse-accent) !important;
	color: #ffffff !important;
	font-weight: 600;
}
.woocommerce span.price,
.woocommerce ins .amount {
	color: var(--wp--preset--color--accent-deep);
}