/* =========================================================================
   FIND N FORM — Global Design System
   Design tokens live in theme.json (colors, type, spacing, radii, motion)
   and are exposed here as CSS custom properties (--wp--preset--*,
   --wp--custom--*). This file implements layout, components and the
   category-accent system on top of those tokens.
   ========================================================================= */

:root {
	--fnf-space-1: var( --wp--custom--space--1, 4px );
	--fnf-space-2: var( --wp--custom--space--2, 8px );
	--fnf-space-3: var( --wp--custom--space--3, 12px );
	--fnf-space-4: var( --wp--custom--space--4, 16px );
	--fnf-space-5: var( --wp--custom--space--5, 24px );
	--fnf-space-6: var( --wp--custom--space--6, 32px );
	--fnf-space-7: var( --wp--custom--space--7, 48px );
	--fnf-space-8: var( --wp--custom--space--8, 64px );
	--fnf-space-9: var( --wp--custom--space--9, 96px );

	--fnf-radius-sm: var( --wp--custom--radius--sm, 8px );
	--fnf-radius-md: var( --wp--custom--radius--md, 14px );
	--fnf-radius-lg: var( --wp--custom--radius--lg, 20px );
	--fnf-radius-xl: var( --wp--custom--radius--xl, 24px );
	--fnf-radius-pill: var( --wp--custom--radius--pill, 999px );

	--fnf-ease: var( --wp--custom--motion--ease, cubic-bezier( 0.22, 1, 0.36, 1 ) );
	--fnf-dur-fast: var( --wp--custom--motion--duration-fast, 0.15s );
	--fnf-dur-base: var( --wp--custom--motion--duration-base, 0.3s );
	--fnf-dur-slow: var( --wp--custom--motion--duration-slow, 0.6s );

	--fnf-accent: var( --wp--preset--color--violet, #7b2cff );
	--fnf-header-height: 76px;
}

/* Category accent wiring — every element carrying data-accent="slug" (or a
   body/section with .fnf-accent-{slug}) picks up the right brand color. */
[data-accent="violet"], .fnf-accent-fashion { --fnf-accent: var( --wp--preset--color--violet, #7b2cff ); }
[data-accent="coral"],  .fnf-accent-beauty { --fnf-accent: var( --wp--preset--color--coral, #ff3f68 ); }
[data-accent="blue"],  .fnf-accent-personal-care { --fnf-accent: var( --wp--preset--color--blue, #245bff ); }
[data-accent="lime"],   .fnf-accent-lifestyle { --fnf-accent: var( --wp--preset--color--lime, #8fea45 ); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
	background: var( --wp--preset--color--canvas, #faf9f6 );
	color: var( --wp--preset--color--ink, #07152f );
	overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

.fnf-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var( --fnf-space-5 ); }
.fnf-section { padding-block: var( --fnf-space-8 ); }
.fnf-prose { max-width: 68ch; margin-inline: auto; }
.fnf-prose img { border-radius: var( --fnf-radius-md ); }
.fnf-prose > * + * { margin-top: 1.25em; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

.fnf-skip-link {
	position: absolute; left: -999px; top: 0; z-index: 10000;
	background: var( --wp--preset--color--ink ); color: #fff; padding: 1em 1.5em; border-radius: 0 0 var( --fnf-radius-md ) 0;
}
.fnf-skip-link:focus { left: 0; }

/* Focus visibility everywhere — accessibility requirement */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var( --fnf-accent );
	outline-offset: 2px;
}

/* =========================================================================
   Buttons & pills
   ========================================================================= */
.fnf-button {
	display: inline-flex; align-items: center; gap: 0.4em; justify-content: center;
	padding: 0.85em 1.75em; border-radius: var( --fnf-radius-pill );
	font-weight: 600; text-decoration: none; border: 1px solid transparent;
	transition: transform var( --fnf-dur-fast ) var( --fnf-ease ), background-color var( --fnf-dur-fast ) var( --fnf-ease ), color var( --fnf-dur-fast ) var( --fnf-ease );
	cursor: pointer;
}
.fnf-button--cta { background: var( --wp--preset--color--violet ); color: #fff; }
.fnf-button--cta:hover, .fnf-button--cta:focus-visible { background: var( --wp--preset--color--ink ); color: #fff; transform: translateY( -1px ); }
.fnf-button--ghost { background: transparent; color: var( --wp--preset--color--ink ); border-color: var( --wp--preset--color--ink ); }
.fnf-button--ghost:hover { background: var( --wp--preset--color--ink ); color: #fff; }

.fnf-pill {
	display: inline-flex; align-items: center; padding: 0.5em 1.1em; border-radius: var( --fnf-radius-pill );
	font-size: var( --wp--preset--font-size--small ); font-weight: 600; text-decoration: none;
	background: var( --wp--preset--color--surface ); color: var( --wp--preset--color--ink );
	transition: background-color var( --fnf-dur-fast ) var( --fnf-ease ), color var( --fnf-dur-fast ) var( --fnf-ease );
}
.fnf-pill--outline { background: transparent; border: 1px solid var( --wp--preset--color--border ); }
.fnf-pill.is-active, .fnf-pill:hover { background: var( --fnf-accent ); color: var( --wp--preset--color--ink ); }
[data-accent="fashion"].fnf-pill.is-active, [data-accent="violet"].fnf-pill.is-active { color: #fff; }
[data-accent="blue"].fnf-pill.is-active { color: #fff; }

.fnf-tag {
	display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
	padding: 0.4em 0.9em; border-radius: var( --fnf-radius-pill ); background: var( --fnf-accent ); color: var( --wp--preset--color--ink );
	text-decoration: none;
}
.fnf-tag--outline { background: transparent; border: 1px solid var( --wp--preset--color--border ); color: var( --wp--preset--color--muted ); }
.fnf-tag--floating { position: absolute; top: var( --fnf-space-3 ); left: var( --fnf-space-3 ); }

/* =========================================================================
   Header
   ========================================================================= */
.fnf-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba( 251, 249, 245, 0.85 ); backdrop-filter: blur( 12px ); -webkit-backdrop-filter: blur( 12px );
	border-bottom: 1px solid var( --wp--preset--color--border );
	height: var( --fnf-header-height );
	transition: box-shadow var( --fnf-dur-fast ) var( --fnf-ease );
}
.fnf-header.is-scrolled { box-shadow: 0 4px 16px rgba( 7, 21, 47, 0.08 ); }
.fnf-header__inner { max-width: 1280px; margin-inline: auto; padding-inline: var( --fnf-space-5 ); height: 100%; display: flex; align-items: center; gap: var( --fnf-space-6 ); }
.fnf-header__logo {
	display: inline-flex; align-items: center; flex-shrink: 0;
}
.fnf-header__logo img { height: 44px; width: auto; display: block; }
.fnf-nav { flex: 1; min-width: 0; display: none; }
.fnf-nav__list { display: flex; align-items: center; justify-content: flex-end; gap: var( --fnf-space-5 ); list-style: none; margin: 0; padding: 0; }
.fnf-nav__list > li { position: relative; }
.fnf-nav__list > li > a { text-decoration: none; color: var( --wp--preset--color--ink ); font-weight: 600; font-size: 0.92rem; padding: 0.5em 0; display: inline-block; position: relative; }
.fnf-nav__list > li > a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var( --fnf-accent );
	transform: scaleX( 0 ); transform-origin: left; transition: transform var( --fnf-dur-fast ) var( --fnf-ease );
}
.fnf-nav__list > li > a:hover::after, .fnf-nav__item-has-menu:hover > a::after, .fnf-nav__item-has-menu:focus-within > a::after { transform: scaleX( 1 ); }

.fnf-mega-menu {
	position: absolute; top: 100%; left: 50%; transform: translate( -50%, 8px );
	background: #fff; border-radius: var( --fnf-radius-lg ); box-shadow: var( --wp--preset--shadow--raised, 0 16px 40px -16px rgba(7,21,47,0.28) );
	padding: var( --fnf-space-5 ); min-width: 320px;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity var( --fnf-dur-fast ) var( --fnf-ease ), transform var( --fnf-dur-fast ) var( --fnf-ease );
	border-top: 3px solid var( --fnf-accent );
}
.fnf-nav__item-has-menu:hover .fnf-mega-menu,
.fnf-nav__item-has-menu:focus-within .fnf-mega-menu {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translate( -50%, 0 );
}
.fnf-mega-menu__grid { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 0.25em 1.5em; list-style: none; margin: 0 0 var( --fnf-space-3 ); padding: 0; }
.fnf-mega-menu__grid a { text-decoration: none; color: var( --wp--preset--color--ink ); font-size: 0.9rem; padding: 0.4em 0; display: block; }
.fnf-mega-menu__grid a:hover { color: var( --fnf-accent ); }
.fnf-mega-menu__explore { font-size: 0.85rem; font-weight: 700; color: var( --fnf-accent ); text-decoration: none; }

.fnf-header__utility { display: flex; align-items: center; gap: var( --fnf-space-3 ); margin-left: auto; }
.fnf-icon-button {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	border-radius: 50%; border: 1px solid var( --wp--preset--color--border ); background: transparent; color: var( --wp--preset--color--ink );
	cursor: pointer; transition: background-color var( --fnf-dur-fast ) var( --fnf-ease );
}
.fnf-icon-button:hover { background: var( --wp--preset--color--surface ); }
.fnf-header__newsletter-cta { display: none; padding: 0.6em 1.3em; font-size: 0.85rem; }
.fnf-menu-toggle { display: inline-flex; }

@media ( min-width: 1024px ) {
	.fnf-nav { display: block; }
	.fnf-header__newsletter-cta { display: inline-flex; }
	.fnf-menu-toggle { display: none; }
}

/* =========================================================================
   Search overlay
   ========================================================================= */
.fnf-search-overlay {
	position: fixed; inset: 0; z-index: 200; background: rgba( 7, 21, 47, 0.6 ); backdrop-filter: blur( 4px );
	display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.fnf-search-overlay[hidden] { display: none; }
.fnf-search-overlay__panel { background: #fff; border-radius: var( --fnf-radius-lg ); padding: var( --fnf-space-6 ); width: min( 90vw, 640px ); box-shadow: var( --wp--preset--shadow--raised ); }
.fnf-search-overlay__form { display: flex; gap: var( --fnf-space-3 ); }
.fnf-search-overlay__form input[type="search"] { flex: 1; padding: 0.9em 1.2em; border-radius: var( --fnf-radius-pill ); border: 1px solid var( --wp--preset--color--border ); font-size: 1rem; }
.fnf-search-overlay__close { margin-top: var( --fnf-space-4 ); background: none; border: none; cursor: pointer; color: var( --wp--preset--color--muted ); font-size: 0.85rem; }

/* =========================================================================
   Mobile drawer
   ========================================================================= */
.fnf-mobile-drawer { position: fixed; inset: 0; z-index: 300; }
.fnf-mobile-drawer[hidden] { display: none; }
.fnf-mobile-drawer::before { content: ""; position: absolute; inset: 0; background: rgba( 7, 21, 47, 0.5 ); }
.fnf-mobile-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min( 86vw, 380px );
	background: var( --wp--preset--color--canvas ); padding: var( --fnf-space-5 );
	display: flex; flex-direction: column; box-shadow: -16px 0 40px rgba(7,21,47,0.2);
	animation: fnf-slide-in var( --fnf-dur-base ) var( --fnf-ease );
}
@keyframes fnf-slide-in { from { transform: translateX( 100% ); } to { transform: translateX( 0 ); } }
.fnf-mobile-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var( --fnf-space-5 ); }
.fnf-mobile-drawer__logo img { height: 36px; width: auto; display: block; }
.fnf-mobile-drawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25em; }
.fnf-mobile-drawer__list a, .fnf-mobile-drawer__search-trigger {
	display: block; padding: 0.85em 0.25em; font-size: 1.1rem; font-weight: 600; text-decoration: none; color: var( --wp--preset--color--ink );
	border-bottom: 1px solid var( --wp--preset--color--border ); width: 100%; text-align: left; background: none; border-left: none; border-right: none; border-top: none; cursor: pointer;
}
.fnf-mobile-drawer__newsletter { text-align: center; margin-top: var( --fnf-space-4 ); border: none; }

@media ( min-width: 1024px ) { .fnf-mobile-drawer, .fnf-menu-toggle { display: none !important; } }

/* =========================================================================
   Breadcrumbs
   ========================================================================= */
.fnf-breadcrumbs-row { padding-top: var( --fnf-space-4 ); font-size: 0.82rem; }
.fnf-breadcrumbs, .yoast-breadcrumb { color: var( --wp--preset--color--muted ); }
.fnf-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0; padding: 0; }
.fnf-breadcrumbs li:not( :last-child )::after { content: "/"; margin-left: 0.4em; opacity: 0.5; }
.fnf-breadcrumbs a { color: inherit; text-decoration: none; }
.fnf-breadcrumbs a:hover { color: var( --fnf-accent ); }

/* =========================================================================
   Hero — scroll-scrubbed image sequence ("camera entering the store")
   Default state (no JS, reduced motion, or Save-Data): a normal, static,
   full-height hero using the first frame as a CSS background. JS upgrades
   it to a pinned canvas that scrubs through the sequence as the page
   scrolls past it — see hero.js. Every rule below the animated-state
   comment only takes effect once JS adds html.fnf-hero-animated.
   ========================================================================= */
.fnf-hero {
	position: relative;
	background-color: var( --wp--preset--color--ink );
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.fnf-hero__pin {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 1;
}
.fnf-hero__canvas {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.fnf-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 7, 21, 47, 0.4 ) 0%, rgba( 7, 21, 47, 0.15 ) 45%, rgba( 7, 21, 47, 0.55 ) 100% );
	pointer-events: none;
}
/* Animated state — JS-enabled, motion allowed, sequence loaded. */
html.fnf-hero-animated .fnf-hero { height: 300vh; background-image: none; }
html.fnf-hero-animated .fnf-hero__pin { position: sticky; top: 0; height: 100vh; min-height: 0; }
html.fnf-hero-animated .fnf-hero__canvas { display: block; }

@media ( max-width: 640px ) {
	html.fnf-hero-animated .fnf-hero { height: 200vh; }
}

@media ( prefers-reduced-motion: reduce ) {
	/* Belt & suspenders: even if JS mis-detects, motion never renders. */
	html.fnf-hero-animated .fnf-hero { height: auto; }
	html.fnf-hero-animated .fnf-hero__pin { position: relative; top: auto; height: auto; min-height: 100vh; }
	html.fnf-hero-animated .fnf-hero__canvas { display: none; }
}

/* =========================================================================
   Brand intro — copy + mark, directly below the hero animation
   ========================================================================= */
.fnf-brand-intro { padding-block: var( --fnf-space-8 ); overflow: hidden; }
.fnf-brand-intro__inner { display: grid; gap: var( --fnf-space-7 ); align-items: center; }
@media ( min-width: 900px ) { .fnf-brand-intro__inner { grid-template-columns: 1.1fr 1fr; } }
.fnf-brand-intro__eyebrow { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var( --wp--preset--color--violet ); margin-bottom: var( --fnf-space-3 ); }
.fnf-brand-intro__title { font-size: var( --wp--preset--font-size--giant ); margin: 0 0 var( --fnf-space-4 ); }
.fnf-brand-intro__subtitle { font-size: var( --wp--preset--font-size--large ); color: var( --wp--preset--color--muted ); max-width: 42ch; margin: 0 0 var( --fnf-space-5 ); }
.fnf-brand-intro__ctas { display: flex; flex-wrap: wrap; gap: var( --fnf-space-3 ); }

.fnf-brand-intro__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 280px; }
.fnf-brand-intro__glow {
	position: absolute; inset: 8% 12%; border-radius: 50%; z-index: 0;
	background: radial-gradient( circle, rgba( 123, 44, 255, 0.16 ) 0%, rgba( 255, 77, 126, 0.1 ) 45%, rgba( 255, 255, 255, 0 ) 75% );
	filter: blur( 6px );
}
.fnf-brand-intro__icon { position: relative; z-index: 1; width: min( 100%, 260px ); height: auto; filter: drop-shadow( 0 12px 28px rgba( 7, 21, 47, 0.18 ) ); }

@media ( max-width: 640px ) {
	.fnf-brand-intro__visual { min-height: 200px; margin-top: var( --fnf-space-4 ); }
}

/* =========================================================================
   Category cards ("What Are You Looking For?")
   ========================================================================= */
.fnf-category-grid { display: grid; gap: var( --fnf-space-5 ); grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) ); }
.fnf-category-card {
	position: relative; display: block; text-decoration: none; color: inherit; border-radius: var( --fnf-radius-lg ); overflow: hidden;
	box-shadow: var( --wp--preset--shadow--card ); background: #fff;
	transition: transform var( --fnf-dur-base ) var( --fnf-ease ), box-shadow var( --fnf-dur-base ) var( --fnf-ease );
}
.fnf-category-card:hover, .fnf-category-card:focus-visible { transform: translateY( -4px ); box-shadow: var( --wp--preset--shadow--raised ); }
.fnf-category-card__media { display: block; aspect-ratio: 4 / 5; background: var( --wp--preset--color--surface ); position: relative; overflow: hidden; }
.fnf-category-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var( --fnf-dur-slow ) var( --fnf-ease ); }
.fnf-category-card:hover .fnf-category-card__media img { transform: scale( 1.05 ); }
.fnf-category-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(7,21,47,0) 5%, rgba(7,21,47,0.55) 55%, rgba(7,21,47,0.92) 100% ); }
.fnf-category-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var( --fnf-space-5 ); color: #fff; text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.35 ); }
.fnf-category-card__name { display: block; font-family: var( --wp--preset--font-family--display ); font-weight: 700; font-size: 1.4rem; margin-bottom: 0.3em; }
.fnf-category-card__desc { display: block; font-size: 0.88rem; opacity: 0.95; margin-bottom: 0.9em; }
.fnf-category-card__cta {
	display: inline-flex; align-items: center; gap: 0.4em;
	font-size: 0.8rem; font-weight: 700; text-shadow: none;
	background: #fff; color: var( --wp--preset--color--ink );
	padding: 0.6em 1.2em; border-radius: var( --fnf-radius-pill );
	transition: background-color var( --fnf-dur-fast ) var( --fnf-ease ), color var( --fnf-dur-fast ) var( --fnf-ease );
}
.fnf-category-card:hover .fnf-category-card__cta, .fnf-category-card:focus-visible .fnf-category-card__cta {
	background: var( --fnf-accent ); color: #fff;
}
/* Lime is too light for white text — keep it dark-on-lime for contrast. */
[data-accent="lime"].fnf-category-card:hover .fnf-category-card__cta,
[data-accent="lime"].fnf-category-card:focus-visible .fnf-category-card__cta { color: var( --wp--preset--color--ink ); }

/* =========================================================================
   Article cards & grids
   ========================================================================= */
.fnf-article-grid { display: grid; gap: var( --fnf-space-5 ); grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) ); }
.fnf-article-card { background: #fff; border-radius: var( --fnf-radius-lg ); overflow: hidden; box-shadow: var( --wp--preset--shadow--card ); transition: transform var( --fnf-dur-base ) var( --fnf-ease ); }
.fnf-article-card:hover { transform: translateY( -3px ); }
.fnf-article-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var( --wp--preset--color--surface ); overflow: hidden; }
.fnf-article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var( --fnf-dur-slow ) var( --fnf-ease ); }
.fnf-article-card:hover .fnf-article-card__media img { transform: scale( 1.06 ); }
.fnf-article-card__body { padding: var( --fnf-space-4 ) var( --fnf-space-5 ) var( --fnf-space-5 ); }
.fnf-article-card__category { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var( --fnf-accent ); text-decoration: none; }
.fnf-article-card__title { margin: 0.35em 0 0.4em; font-size: 1.15rem; line-height: 1.3; }
.fnf-article-card__title a { color: var( --wp--preset--color--ink ); text-decoration: none; }
.fnf-article-card__title a:hover { color: var( --fnf-accent ); }
.fnf-article-card__excerpt { font-size: 0.9rem; color: var( --wp--preset--color--muted ); margin: 0 0 0.75em; }
.fnf-article-card__cta { font-size: 0.8rem; font-weight: 700; color: var( --wp--preset--color--ink ); }

.fnf-featured-article { display: grid; gap: var( --fnf-space-5 ); background: #fff; border-radius: var( --fnf-radius-lg ); overflow: hidden; box-shadow: var( --wp--preset--shadow--raised ); margin-bottom: var( --fnf-space-6 ); }
@media ( min-width: 860px ) { .fnf-featured-article { grid-template-columns: 1.2fr 1fr; } }
.fnf-featured-article__media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.fnf-featured-article__media img { width: 100%; height: 100%; object-fit: cover; }
.fnf-featured-article__body { padding: var( --fnf-space-6 ); display: flex; flex-direction: column; justify-content: center; }
.fnf-featured-article__body h2 { margin: 0.4em 0 0.4em; }
.fnf-featured-article__body h2 a { color: inherit; text-decoration: none; }

/* =========================================================================
   Article layout: main column + sidebar
   ========================================================================= */
.fnf-article__featured-image { margin-block: var( --fnf-space-5 ) var( --fnf-space-6 ); }
.fnf-article__featured-image img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var( --fnf-radius-lg ); }

.fnf-article-layout { display: grid; grid-template-columns: 1fr; gap: var( --fnf-space-7 ); align-items: start; padding-bottom: var( --fnf-space-7 ); }
@media ( min-width: 960px ) {
	.fnf-article-layout { grid-template-columns: minmax( 0, 1fr ) 300px; }
}
.fnf-article-layout__main { min-width: 0; }

.fnf-article__header { margin-bottom: var( --fnf-space-5 ); }
.fnf-article__chips { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: var( --fnf-space-4 ); }
.fnf-article__intro { font-size: var( --wp--preset--font-size--large ); color: var( --wp--preset--color--ink-soft ); margin-bottom: var( --fnf-space-5 ); }

/* Table of contents */
.fnf-toc {
	background: var( --wp--preset--color--surface );
	border-radius: var( --fnf-radius-lg );
	padding: var( --fnf-space-5 );
	margin-bottom: var( --fnf-space-6 );
	max-width: 68ch;
	margin-inline: auto;
}
.fnf-toc h2 { margin: 0 0 0.6em; font-size: 1.05rem; }
.fnf-toc ol { margin: 0; padding-left: 1.25em; display: grid; gap: 0.4em; }
.fnf-toc a { color: var( --wp--preset--color--ink-soft ); text-decoration: none; font-size: 0.92rem; }
.fnf-toc a:hover { color: var( --fnf-accent ); text-decoration: underline; }

/* Section dividers: every H2 after the first gets a rule line above it. */
.fnf-article__content h2:not( :first-of-type ) {
	margin-top: 2.5em;
	padding-top: var( --fnf-space-6 );
	border-top: 1px solid var( --wp--preset--color--border );
}
.fnf-article__content h2:first-of-type { margin-top: 0; }

/* Sidebar */
.fnf-article-sidebar { display: grid; gap: var( --fnf-space-5 ); align-content: start; }
.fnf-sidebar-box { background: #fff; border-radius: var( --fnf-radius-lg ); padding: var( --fnf-space-5 ); box-shadow: var( --wp--preset--shadow--card ); }
.fnf-sidebar-box h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var( --fnf-space-3 ); color: var( --wp--preset--color--muted ); }

.fnf-sidebar-search__field { display: flex; border: 1px solid var( --wp--preset--color--border ); border-radius: var( --fnf-radius-pill ); overflow: hidden; }
.fnf-sidebar-search__field input { flex: 1; border: none; padding: 0.7em 1em; font-size: 0.9rem; background: transparent; }
.fnf-sidebar-search__field input:focus { outline: none; }
.fnf-sidebar-search__field button { border: none; background: var( --wp--preset--color--ink ); color: #fff; padding: 0 1em; cursor: pointer; display: flex; align-items: center; }

.fnf-sidebar-box--author { text-align: center; }
.fnf-sidebar-box__avatar { border-radius: 50%; margin-bottom: 0.5em; }
.fnf-sidebar-box__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var( --wp--preset--color--muted ); margin: 0; }
.fnf-sidebar-box__name { font-family: var( --wp--preset--font-family--display ); font-weight: 700; margin: 0.2em 0; }
.fnf-sidebar-box__role { font-size: 0.82rem; color: var( --wp--preset--color--muted ); margin: 0 0 0.6em; }
.fnf-sidebar-box__link { font-size: 0.82rem; font-weight: 700; color: var( --fnf-accent ); text-decoration: none; }

.fnf-sidebar-box--categories ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; }
.fnf-sidebar-box--categories a { text-decoration: none; color: var( --wp--preset--color--ink ); font-weight: 600; font-size: 0.92rem; padding-left: 0.75em; border-left: 3px solid var( --fnf-accent ); display: block; }
.fnf-sidebar-box--categories a:hover { color: var( --fnf-accent ); }

.fnf-sidebar-box--newsletter p { font-size: 0.85rem; color: var( --wp--preset--color--muted ); margin: 0 0 var( --fnf-space-3 ); }
.fnf-sidebar-box--newsletter form { display: grid; gap: 0.6em; }
.fnf-sidebar-box--newsletter input { padding: 0.7em 1em; border-radius: var( --fnf-radius-pill ); border: 1px solid var( --wp--preset--color--border ); font-size: 0.9rem; }
.fnf-sidebar-box--newsletter .fnf-button { width: 100%; }

/* =========================================================================
   Article meta / author box / disclosure
   ========================================================================= */
.fnf-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; font-size: 0.85rem; color: var( --wp--preset--color--muted ); margin-top: var( --fnf-space-3 ); }
.fnf-article-meta__author { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; color: var( --wp--preset--color--ink ); font-weight: 600; }
.fnf-article-meta__avatar { border-radius: 50%; }
.fnf-article-meta__sep { opacity: 0.4; }

.fnf-disclosure { font-size: 0.85rem; color: var( --wp--preset--color--muted ); background: var( --wp--preset--color--surface ); border-radius: var( --fnf-radius-md ); padding: var( --fnf-space-4 ); }

.fnf-author-box { display: flex; gap: var( --fnf-space-4 ); align-items: flex-start; background: #fff; border-radius: var( --fnf-radius-lg ); padding: var( --fnf-space-5 ); box-shadow: var( --wp--preset--shadow--card ); margin-block: var( --fnf-space-6 ); }
.fnf-author-box__avatar { border-radius: 50%; flex-shrink: 0; }
.fnf-author-box__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var( --wp--preset--color--muted ); margin: 0; }
.fnf-author-box__name { font-family: var( --wp--preset--font-family--display ); font-weight: 700; font-size: 1.1rem; margin: 0.15em 0 0.4em; }
.fnf-author-box__bio { font-size: 0.9rem; color: var( --wp--preset--color--muted ); margin: 0 0 0.5em; }
.fnf-author-box__link { font-size: 0.85rem; font-weight: 700; color: var( --fnf-accent ); text-decoration: none; }

/* =========================================================================
   Category hero (hub pages)
   ========================================================================= */
.fnf-category-hero { position: relative; color: #fff; }
/* theme.json's global heading color (styles.elements.heading) is emitted
   with equal specificity to a single class selector and lands after this
   stylesheet in the cascade, so it wins on tag inheritance alone — h1/p
   need an explicit, equally-specific rule here rather than relying on
   the inherited color from .fnf-category-hero. */
.fnf-category-hero:has(.fnf-category-hero__media) h1,
.fnf-category-hero:has(.fnf-category-hero__media) p { color: #fff; text-shadow: 0 1px 3px rgba( 7, 21, 47, 0.35 ); }
.fnf-category-hero__media { aspect-ratio: 21/8; overflow: hidden; }
.fnf-category-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.fnf-category-hero__media::after { content:""; }
.fnf-category-hero:has(.fnf-category-hero__media)::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,21,47,0.1), rgba(7,21,47,0.75)); }
.fnf-category-hero:not(:has(.fnf-category-hero__media)) { background: var( --fnf-accent ); padding-block: var( --fnf-space-8 ); }
.fnf-category-hero:not(:has(.fnf-category-hero__media)) h1, .fnf-category-hero:not(:has(.fnf-category-hero__media)) p { color: #fff; text-shadow: 0 1px 3px rgba( 7, 21, 47, 0.25 ); }
.fnf-category-hero__body { position: relative; z-index: 1; padding-block: var( --fnf-space-6 ); }
.fnf-category-hero:has(.fnf-category-hero__media) .fnf-category-hero__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: var( --fnf-space-6 ); }
.fnf-category-hero h1 { margin: 0 0 0.3em; }
.fnf-category-hero p { max-width: 60ch; font-size: 1.05rem; opacity: 0.9; }

/* Plain banner image above a page header (Guides/Reviews/Comparisons/
   Finds/Campaigns/Blog) that has no featured imagery of its own — unlike
   .fnf-category-hero, the title is not overlaid on it. */
.fnf-page-hero-image { margin-top: var( --fnf-space-5 ); }
.fnf-page-hero-image img { width: 100%; aspect-ratio: 21/7; object-fit: cover; border-radius: var( --fnf-radius-lg ); display: block; }
@media ( max-width: 640px ) {
	.fnf-page-hero-image img { aspect-ratio: 16/10; }
}

/* =========================================================================
   Newsletter thank-you page
   ========================================================================= */
.fnf-thankyou { padding-block: var( --fnf-space-8 ); text-align: center; }
.fnf-thankyou__inner { max-width: 640px; margin-inline: auto; }
.fnf-thankyou__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: 50%; margin-bottom: var( --fnf-space-5 );
	background: var( --wp--preset--color--lime ); color: var( --wp--preset--color--ink );
}
.fnf-thankyou__eyebrow { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var( --wp--preset--color--violet ); margin-bottom: var( --fnf-space-3 ); }
.fnf-thankyou__inner h1 { margin: 0 0 var( --fnf-space-4 ); }
.fnf-thankyou__message { font-size: var( --wp--preset--font-size--large ); color: var( --wp--preset--color--muted ); margin: 0 0 var( --fnf-space-6 ); }

.fnf-subcat-grid { display: grid; gap: var( --fnf-space-3 ); grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) ); }
.fnf-subcat-card {
	display: flex; align-items: center; justify-content: space-between; padding: var( --fnf-space-4 ) var( --fnf-space-5 );
	border-radius: var( --fnf-radius-md ); background: #fff; box-shadow: var( --wp--preset--shadow--card );
	text-decoration: none; color: var( --wp--preset--color--ink ); font-weight: 600;
	border-left: 3px solid var( --fnf-accent );
	transition: transform var( --fnf-dur-fast ) var( --fnf-ease );
}
.fnf-subcat-card:hover { transform: translateX( 4px ); color: var( --fnf-accent ); }

.fnf-section__heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: var( --fnf-space-4 ); margin-bottom: var( --fnf-space-5 ); flex-wrap: wrap; }
.fnf-link-more { font-size: 0.85rem; font-weight: 700; color: var( --fnf-accent ); text-decoration: none; white-space: nowrap; }

/* =========================================================================
   Blog hub filters
   ========================================================================= */
.fnf-blog-hub__intro { margin-bottom: var( --fnf-space-5 ); }
.fnf-blog-filters { display: grid; gap: var( --fnf-space-3 ); margin-bottom: var( --fnf-space-6 ); }
.fnf-blog-filters__row { display: flex; flex-wrap: wrap; gap: 0.5em; }

/* =========================================================================
   Pagination
   ========================================================================= */
.fnf-pagination { margin-top: var( --fnf-space-6 ); display: flex; justify-content: center; }
.fnf-pagination ul { display: flex; gap: 0.5em; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.fnf-pagination a, .fnf-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5em; height: 2.5em; padding-inline: 0.6em; border-radius: var( --fnf-radius-pill ); text-decoration: none; color: var( --wp--preset--color--ink ); font-weight: 600; font-size: 0.9rem; }
.fnf-pagination .current, .fnf-pagination a.is-active { background: var( --wp--preset--color--ink ); color: #fff; }
.fnf-pagination a:hover { background: var( --wp--preset--color--surface ); }

/* =========================================================================
   Author hero page
   ========================================================================= */
.fnf-author-hero { padding-block: var( --fnf-space-7 ); background: var( --wp--preset--color--surface ); }
.fnf-author-hero__inner { display: flex; gap: var( --fnf-space-5 ); align-items: center; flex-wrap: wrap; }
.fnf-author-hero__portrait { border-radius: 50%; }
.fnf-author-hero__role { font-weight: 700; color: var( --wp--preset--color--violet ); margin: 0.2em 0; }
.fnf-author-hero__statement { color: var( --wp--preset--color--muted ); }

/* =========================================================================
   404
   ========================================================================= */
.fnf-404 { text-align: center; }
.fnf-404__search { display: flex; gap: var( --fnf-space-3 ); max-width: 480px; margin: var( --fnf-space-5 ) auto; }
.fnf-404__search input { flex: 1; padding: 0.85em 1.2em; border-radius: var( --fnf-radius-pill ); border: 1px solid var( --wp--preset--color--border ); }
.fnf-404 .fnf-category-grid { margin: var( --fnf-space-6 ) 0; text-align: left; }

/* =========================================================================
   Newsletter section wrapper (sits between main content and footer,
   theme-owned; the form itself is the fnf/newsletter-form block)
   ========================================================================= */
.fnf-section--newsletter { padding-block: var( --fnf-space-7 ); }
.fnf-newsletter-eyebrow {
	display: block; text-align: center; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.06em; color: var( --wp--preset--color--violet ); margin-bottom: var( --fnf-space-3 );
}

/* =========================================================================
   Footer
   ========================================================================= */
.fnf-footer {
	background: var( --wp--preset--color--deep-navy );
	color: rgba( 255, 255, 255, 0.72 );
	padding-block: var( --fnf-space-8 ) var( --fnf-space-6 );
}
.fnf-footer__grid {
	display: grid;
	gap: var( --fnf-space-7 );
	grid-template-columns: 1fr;
	padding-bottom: var( --fnf-space-7 );
}
@media ( min-width: 720px ) {
	.fnf-footer__grid { grid-template-columns: 1.4fr repeat( 4, 1fr ); }
}
.fnf-footer__logo { display: inline-flex; margin-bottom: var( --fnf-space-4 ); }
.fnf-footer__logo img { height: 42px; width: auto; }
.fnf-footer__statement { font-size: 0.9rem; max-width: 34ch; margin: 0; }
.fnf-footer__col h2 { color: #fff; font-family: var( --wp--preset--font-family--display ); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var( --fnf-space-4 ); }
.fnf-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65em; }
.fnf-footer__col a { color: inherit; text-decoration: none; font-size: 0.92rem; }
.fnf-footer__col a:hover { color: var( --wp--preset--color--lime ); }
.fnf-footer__bottom {
	display: flex; flex-wrap: wrap; gap: var( --fnf-space-4 ); justify-content: space-between; align-items: center;
	padding-top: var( --fnf-space-5 ); border-top: 1px solid rgba( 255, 255, 255, 0.12 );
	font-size: 0.82rem;
}
.fnf-footer__disclosure { margin: 0; max-width: 60ch; }
.fnf-footer__copyright { margin: 0; white-space: nowrap; }
.fnf-footer__top {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba( 255, 255, 255, 0.3 );
	background: rgba( 255, 255, 255, 0.08 ); color: #fff; cursor: pointer; flex-shrink: 0;
	transition: transform var( --fnf-dur-fast ) var( --fnf-ease ), background-color var( --fnf-dur-fast ) var( --fnf-ease );
}
.fnf-footer__top:hover,
.fnf-footer__top:focus-visible { background: var( --wp--preset--color--lime ); color: var( --wp--preset--color--ink ); transform: translateY( -2px ); }

/* =========================================================================
   Trust statement band
   ========================================================================= */
.fnf-trust-band { background: var( --wp--preset--color--ink ); color: #fff; padding-block: var( --fnf-space-7 ); text-align: center; }
.fnf-trust-band p { font-family: var( --wp--preset--font-family--display ); font-size: var( --wp--preset--font-size--x-large ); max-width: 42ch; margin-inline: auto; line-height: 1.3; }

/* =========================================================================
   Front page section spacing (patterns render inside page.php's content
   zone, which has no fnf-container wrapper so full-bleed sections work)
   ========================================================================= */
.fnf-front-page .fnf-page__content > * { margin-bottom: 0; }