/*
Theme Name: FON Marketplace
Theme URI: https://mp.fon.network
Author: Family Office Networks
Author URI: https://fon.network
Description: Block theme for the FON Marketplace — member directories of family offices, high net worth individuals, and staff, built for Family Office Networks. Restrained-luxury brand system: navy surfaces, DM Serif Display headings, thin gold rules.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fon-marketplace
Tags: block-theme, full-site-editing, one-column, custom-colors
*/

/* ==========================================================================
   Design tokens live in theme.json. This file carries ONLY the helpers
   theme.json cannot express: sticky header, nav underline animation,
   focus rings, the hero search bar, and small brand accents.
   ========================================================================== */

:root {
	--fon-ease: cubic-bezier(.2, .7, .2, 1);
	--fon-nav-h: 80px;
	/* Decorative hairlines (section rules, row separators). Not required to
	   meet 1.4.11 — they never carry state or identify a control. */
	--fon-line: rgba(12, 20, 48, .10);
	--fon-line-2: rgba(12, 20, 48, .18);
	/* Form-control boundaries. These DO identify a component, so they clear
	   3:1 (3.44:1 on white, 3.34:1 on ivory). */
	--fon-field-line: rgba(12, 20, 48, .50);
	--fon-shadow-sm: 0 1px 2px rgba(12, 20, 48, .06), 0 1px 3px rgba(12, 20, 48, .08);
	--fon-shadow-md: 0 8px 24px rgba(12, 20, 48, .10), 0 2px 6px rgba(12, 20, 48, .06);
	--fon-shadow-lg: 0 24px 60px rgba(12, 20, 48, .18);
}

html {
	scroll-padding-top: calc(var(--fon-nav-h) + 1rem);
}

/* Sections own their own padding, so kill the root block-gap between
   header / main / footer. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Accessible-hidden label text. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Focus visibility — royal-500 ring on light, gold-300 on navy surfaces.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--royal-500);
	outline-offset: 2px;
}

/* Navy surfaces: the royal ring only clears 3:1 on navy-900 (3.29:1) and fails
   on navy-800 (2.95:1), so every dark band switches to gold-300 (12.17:1 on
   navy-900, 10.93:1 on navy-800).
   `fon-title-band` is a defensive alias only — every template ships the
   canonical `fon-titleband` spelling.

   The `:is(...)` wrapper is deliberate: it lifts these selectors to (0,3,0) so
   they outrank the ring rules shipped by the mu-plugins — `.fon-profile-fields
   a:focus-visible` is (0,2,1) and would otherwise repaint the ring royal-500
   for any plugin-rendered link that lands inside a navy band. */
.fon-header :is(a, area, button, input, select, textarea, summary, details, [tabindex], [contenteditable]):focus-visible,
.fon-footer :is(a, area, button, input, select, textarea, summary, details, [tabindex], [contenteditable]):focus-visible,
.fon-hero :is(a, area, button, input, select, textarea, summary, details, [tabindex], [contenteditable]):focus-visible,
.fon-cta :is(a, area, button, input, select, textarea, summary, details, [tabindex], [contenteditable]):focus-visible,
.fon-titleband :is(a, area, button, input, select, textarea, summary, details, [tabindex], [contenteditable]):focus-visible,
.fon-title-band :is(a, area, button, input, select, textarea, summary, details, [tabindex], [contenteditable]):focus-visible,
.fon-statband :is(a, area, button, input, select, textarea, summary, details, [tabindex], [contenteditable]):focus-visible,
.fon-header :focus-visible,
.fon-footer :focus-visible,
.fon-hero :focus-visible,
.fon-cta :focus-visible,
.fon-titleband :focus-visible,
.fon-title-band :focus-visible,
.fon-statband :focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-300);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Header — navy, sticky, 80px tall.
   -------------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.fon-header {
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.fon-header__inner {
	min-height: var(--fon-nav-h);
	flex-wrap: nowrap;
}

.fon-header__right {
	flex-wrap: nowrap;
}

/* Pure-CSS scroll shadow (progressive enhancement, motion-safe only). */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.wp-site-blocks > header.wp-block-template-part {
			animation: fon-header-shadow linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 120px;
		}

		@keyframes fon-header-shadow {
			from { box-shadow: 0 0 0 0 rgba(12, 20, 48, 0); }
			to { box-shadow: 0 10px 28px rgba(4, 8, 20, .45); }
		}
	}
}

/* Logo — white mark, always on navy. */
.wp-block-image.fon-logo {
	margin: 0;
	flex: none;
}

.wp-block-image.fon-logo a {
	display: inline-flex;
	line-height: 0;
}

.wp-block-image.fon-logo img {
	height: 50px;
	width: auto;
	max-width: none;
	display: block;
}

/* --------------------------------------------------------------------------
   Navigation — uppercase DM Sans, gold underline indicator.

   Everything here is scoped `…__container > li > .…-item__content`, i.e. to
   TOP-LEVEL items only. The dropdown panels core renders into
   `.wp-block-navigation__submenu-container` are a light-on-paper surface and
   are styled separately, in the "Desktop dropdowns" section below; they must
   not inherit this white-on-navy treatment or the gold underline.
   -------------------------------------------------------------------------- */
.wp-block-navigation.fon-nav {
	--fon-nav-gap: 1.85rem;
	gap: var(--fon-nav-gap);
}

.wp-block-navigation.fon-nav .wp-block-navigation__container {
	gap: var(--fon-nav-gap);
}

/* padding-block keeps the hit area at ~46px tall inside the 80px bar; the
   underline is positioned relative to the padded box, not the text. */
.wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	display: inline-block;
	padding-block: .9rem;
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	transition: color .25s var(--fon-ease);
}

.wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: .5rem;
	height: 2px;
	background-color: var(--wp--preset--color--gold-500);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s var(--fon-ease);
}

/* `[aria-expanded="true"]` is the open dropdown parent: core writes it onto the
   submenu toggle, so an open panel keeps its label lit and underlined. */
.wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-expanded="true"],
.wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
	color: #fff;
	text-decoration: none;
}

.wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-expanded="true"]::after,
.wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Mobile overlay. Core ships the toggles with zero padding, i.e. a 24px
   target; 44px is the minimum comfortable touch size. */
.wp-block-navigation.fon-nav .wp-block-navigation__responsive-container-open,
.wp-block-navigation.fon-nav .wp-block-navigation__responsive-container-close {
	color: #fff;
	/* No `display` here: core hides these with display:none at >=600px from a
	   lower-specificity selector, and overriding it would pin the hamburger
	   open on desktop. Buttons centre their content already. */
	min-width: 44px;
	min-height: 44px;
}

.wp-block-navigation.fon-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--navy-900);
	color: #fff;
	padding-top: calc(var(--fon-nav-h) + 1rem);
}

/* Same `> li >` scoping as above, plus `.is-menu-open`, so these keep winning
   over the top-level rules now that those sit at (0,4,0). */
.wp-block-navigation.fon-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: #fff;
	font-size: 1.05rem;
	letter-spacing: .06em;
}

.wp-block-navigation.fon-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	display: none;
}

@media (max-width: 900px) {
	.wp-block-navigation.fon-nav {
		--fon-nav-gap: 1.1rem;
	}
}

/* --------------------------------------------------------------------------
   Desktop dropdowns — a copy of the parent navbar's `.nav-sub` panel.
   ≥1081px ONLY. Below that the whole nav is display:none (see the mobile
   header block further down) and the FON Remote tab bar owns navigation, so
   every rule in this section is fenced behind `min-width: 1081px` and cannot
   reach the phone layout.

   Mechanism: the Navigation block is saved with `submenuVisibility:"click"`
   (WP 7.0's successor to `openSubmenusOnClick`). Core therefore renders each
   dropdown parent as a real disclosure <button aria-expanded> instead of a
   link, and drives it with the Interactivity API — one tap opens on touch,
   Enter/Space opens on a keyboard, Escape closes and returns focus to the
   button. On top of that we re-add the parent site's hover-to-open, which
   core only ships for its non-click modes.
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) {

	/* The ▾ indicator ---------------------------------------------------- */

	/* Core's own chevron <span> goes; the parent site uses a solid "▾", so we
	   draw one with borders instead of the glyph — same silhouette, no
	   dependency on DM Sans covering U+25BE. ::before, because ::after is
	   already carrying the gold underline. */
	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__submenu-icon {
		display: none;
	}

	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
		padding-right: 1.1em;
		cursor: pointer;
	}

	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle::before {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		width: 0;
		height: 0;
		margin-top: -.13em;
		border-inline: .26em solid transparent;
		border-block-start: .26em solid currentColor;
		opacity: .7;
		transition: opacity .25s var(--fon-ease);
	}

	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle:hover::before,
	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle:focus-visible::before,
	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"]::before {
		opacity: 1;
	}

	/* The panel ---------------------------------------------------------- */

	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		/* Core right-aligns submenus under an `items-justified-right` nav; both
		   dropdowns sit 1st and 4th of seven, so there is room to hang them
		   left like the parent does. */
		left: -1rem;
		right: auto;
		top: calc(100% + 12px);
		min-width: 220px;
		gap: 0;
		padding: .5rem;
		/* !important is unavoidable, not laziness: core copies the block's
		   overlay colours onto the submenu <ul> as `has-navy-900-background-
		   color has-paper-color`, and theme.json emits those preset classes
		   with !important. Without this the desktop panel would render navy.
		   The overlay itself is unreachable above 1080px, so nothing that
		   those classes exist for is being overridden here. */
		background-color: var(--wp--preset--color--paper) !important;
		color: var(--wp--preset--color--ink) !important;
		border: 1px solid rgba(12, 20, 48, .10);
		border-radius: 14px;
		box-shadow: 0 8px 24px rgba(12, 20, 48, .10), 0 2px 6px rgba(12, 20, 48, .06);
		transform: translateY(8px);
		transition: opacity .25s var(--fon-ease), transform .25s var(--fon-ease);
	}

	/* The invisible bridge. The panel starts 12px below the item, so a pointer
	   travelling down crosses dead space and `:hover` on the <li> drops out
	   mid-flight. This spans that band; it is a child of the panel, which is a
	   child of the <li>, so the <li> stays hovered the whole way. It only
	   exists while the panel is open — the closed panel is visibility:hidden
	   and overflow:hidden, which clips it. */
	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -12px;
		height: 12px;
	}

	/* Open state.
	   1. the disclosure button is expanded — click, tap, Enter/Space;
	   2. focus is inside the panel — a belt-and-braces `:focus-within` so a
	      focused link can never sit in an invisible panel.
	   Deliberately NOT `li:focus-within`: core returns focus to the toggle on
	   Escape, and the toggle lives inside the <li>, so that selector would
	   re-open the panel the instant Escape closed it and would leave
	   aria-expanded="false" describing a visible menu. */
	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container:focus-within {
		opacity: 1;
		visibility: visible;
		overflow: visible;
		width: auto;
		height: auto;
		transform: none;
	}

	/* Panel links -------------------------------------------------------- */

	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: .65rem .85rem;
		font-size: .85rem;
		font-weight: 400;
		line-height: 1.35;
		/* The bar is uppercase/.04em; the panel is sentence case, like the
		   parent's `.nav-sub li a`. */
		text-transform: none;
		letter-spacing: .03em;
		color: var(--wp--preset--color--ink);
		text-decoration: none;
		border-radius: 6px;
		transition: background-color .2s var(--fon-ease), color .2s var(--fon-ease);
	}

	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background-color: var(--wp--preset--color--ivory);
		color: var(--wp--preset--color--royal-600);
		text-decoration: none;
	}

	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--ivory);
		color: var(--wp--preset--color--royal-600);
		font-weight: 600;
	}

	/* Focus ring. The header-wide rule paints gold-300, which is right on navy
	   and invisible on the panel's white (1.55:1). Royal-500 clears 3:1 on both
	   paper (5.49:1) and the ivory hover fill (4.80:1). */
	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__submenu-container :focus-visible {
		outline-color: var(--wp--preset--color--royal-500);
	}
}

/* Hover-to-open, the parent navbar's signature. Fenced to real pointers so a
   phone or a hybrid never gets a phantom hover state, and suppressed once the
   item holds focus, so that after any interaction the button's own state (and
   Escape) is the single source of truth — otherwise a second click could set
   aria-expanded="false" under a pointer that keeps the panel visible.

   `:active` is the exception that keeps a mouse press from flickering the
   panel: mousedown focuses the button one paint before `click` runs the
   toggle, and without this the panel would fade out and straight back in. */
@media (min-width: 1081px) and (hover: hover) and (pointer: fine) {
	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover:not(:focus-within) > .wp-block-navigation__submenu-container,
	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover:active > .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		overflow: visible;
		width: auto;
		height: auto;
		transform: none;
	}
}

/* No script: the disclosure buttons are inert, so fall back to opening the
   panel on focus. Safe here precisely because Escape has nothing to undo. */
@media (min-width: 1081px) and (scripting: none) {
	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		overflow: visible;
		width: auto;
		height: auto;
		transform: none;
	}
}

/* Reduced motion: no slide, no fade — the panel just appears. */
@media (min-width: 1081px) and (prefers-reduced-motion: reduce) {
	.fon-header .wp-block-navigation.fon-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		transform: none;
		transition: none;
	}
}

/* The 1081–1180px band: seven labels plus "My Account" will not take the
   parent's full 1.85rem rhythm. */
@media (min-width: 1081px) and (max-width: 1180px) {
	.wp-block-navigation.fon-nav {
		--fon-nav-gap: 1rem;
	}
}

/* --------------------------------------------------------------------------
   Buttons — gold CTA + ghost outline on navy.
   -------------------------------------------------------------------------- */
.wp-block-button.fon-btn-gold > .wp-block-button__link:hover,
.wp-block-button.fon-btn-gold > .wp-block-button__link:focus,
.wp-block-button.fon-btn-gold > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--gold-600) !important;
	color: var(--wp--preset--color--navy-900) !important;
}

.fon-header__cta {
	flex: none;
	gap: .5rem;
}

/* "Log In" swaps to "My Account" once WordPress adds .logged-in to <body>. */
.fon-cta-account {
	display: none;
}

body.logged-in .fon-cta-account {
	display: block;
}

body.logged-in .fon-cta-login {
	display: none;
}

@media (max-width: 600px) {
	.fon-header__cta .wp-block-button__link {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* --------------------------------------------------------------------------
   Mobile header — logo only.

   At/below 1080px the "FON Remote" bottom tab bar and slide-up sheet
   (mu-plugins/fon-mobile-nav.php) own navigation entirely: the directories,
   the board, My Account and Log in/out all live there. So the header sheds
   both the core Navigation block (and with it the hamburger toggle) and the
   account CTA, leaving the mark alone on the navy bar.

   1080px is not arbitrary — it is the exact breakpoint fon-mobile-nav.php
   uses to reveal the tab bar. The two MUST stay in step: raise one without
   the other and the site is left with no navigation at all in the gap. */
@media (max-width: 1080px) {
	/* Belt and braces: the parent alone would do it, but the account button is
	   also targeted directly, and both carry !important. `body.logged-in
	   .fon-cta-account { display: block }` above is (0,2,1) — higher than the
	   plain container selector — so anything that ever lifts that rule into a
	   matching media context, or any third-party CSS, would otherwise resurrect
	   the button on phones. */
	.fon-header .wp-block-navigation.fon-nav,
	.fon-header__cta,
	.fon-header .fon-cta-account,
	.fon-header .fon-cta-login,
	body.logged-in .fon-header .fon-cta-account {
		display: none !important;
	}
}

/* Above the PWA breakpoint the CTA simply tightens on narrow viewports. */
@media (max-width: 400px) {
	.fon-header__cta .wp-block-button__link {
		padding-left: .7rem;
		padding-right: .7rem;
		letter-spacing: .02em;
	}
}

.fon-cta .wp-block-button.is-style-outline > .wp-block-button__link,
.fon-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .38);
}

.fon-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.fon-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--wp--preset--color--gold-300);
	border-color: var(--wp--preset--color--gold-300);
}

/* --------------------------------------------------------------------------
   Thin gold rule (core/separator).
   -------------------------------------------------------------------------- */
hr.wp-block-separator.fon-rule,
hr.wp-block-separator.fon-rule.has-background {
	width: 56px;
	max-width: 56px;
	height: 2px;
	border: 0;
	opacity: 1;
	margin-left: auto;
	margin-right: auto;
}

hr.wp-block-separator.fon-rule.is-left,
hr.wp-block-separator.fon-rule.is-left.has-background {
	margin-left: 0;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   Section rhythm helpers.
   -------------------------------------------------------------------------- */
/* Eyebrows are paragraphs, not <h6>: they sit above an <h1>/<h2> and an h6
   there would skip four heading levels (WCAG 1.3.1 / 2.4.10). The typography
   below reproduces the theme.json h6 element style. */
.fon-eyebrow {
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--royal-600);
}

.fon-hero .fon-eyebrow,
.fon-cta .fon-eyebrow,
.fon-titleband .fon-eyebrow,
.fon-title-band .fon-eyebrow,
.fon-statband .fon-eyebrow {
	color: var(--wp--preset--color--gold-300);
}

.fon-sectionhead {
	max-width: 720px;
}

.fon-lead {
	font-size: 1.12rem;
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Hero + search bar.
   -------------------------------------------------------------------------- */
.fon-hero {
	background-image: radial-gradient(60% 60% at 50% 0%, rgba(37, 64, 153, .30), transparent 70%);
	text-align: center;
}

.fon-hero__title {
	margin-bottom: .35rem;
}

.fon-hero__sub {
	color: var(--wp--preset--color--royal-100);
	margin-bottom: 2rem;
	max-width: 40ch;
	margin-left: auto;
	margin-right: auto;
}

.fon-search {
	display: flex;
	align-items: stretch;
	max-width: 680px;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, .07);
	/* .24 gave the field boundary only 2.14:1 on navy-900; .40 is 3.8:1. */
	border: 1px solid rgba(255, 255, 255, .40);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color .2s var(--fon-ease), box-shadow .2s var(--fon-ease);
}

.fon-search:focus-within {
	border-color: var(--wp--preset--color--gold-500);
	box-shadow: 0 0 0 3px rgba(201, 169, 97, .55);
}

.fon-search__input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: inherit;
	font-size: 1.0625rem;
	line-height: 1.4;
	padding: 1.05rem 1.25rem;
	background-color: transparent;
	border: 0;
	color: #fff;
	-webkit-appearance: none;
	appearance: none;
}

.fon-search__input::placeholder {
	color: rgba(255, 255, 255, .72);
	opacity: 1;
}

.fon-search__input:focus,
.fon-search__input:focus-visible {
	outline: 0;
}

.fon-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	flex: none;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: .85rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 1.05rem 1.6rem;
	background-color: var(--wp--preset--color--gold-500);
	color: var(--wp--preset--color--navy-900);
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .2s var(--fon-ease);
}

.fon-search__submit:hover {
	background-color: var(--wp--preset--color--gold-600);
}

.fon-search__icon {
	flex: none;
}

@media (max-width: 480px) {
	.fon-search {
		flex-wrap: wrap;
	}

	.fon-search__input,
	.fon-search__submit {
		flex: 1 0 100%;
	}
}

.fon-hero__jump {
	color: rgba(255, 255, 255, .78);
	margin-top: 1.25rem;
	letter-spacing: .02em;
}

.fon-hero__jump a {
	color: var(--wp--preset--color--gold-300);
	text-decoration: none;
	border-bottom: 1px solid rgba(230, 211, 154, .45);
	padding-bottom: 1px;
}

.fon-hero__jump a:hover,
.fon-hero__jump a:focus-visible {
	color: #fff;
	border-bottom-color: var(--wp--preset--color--gold-500);
}

/* --------------------------------------------------------------------------
   Stats band.
   -------------------------------------------------------------------------- */
.fon-statband {
	border-top: 1px solid rgba(255, 255, 255, .08);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.fon-stats {
	gap: 1.5rem;
}

.fon-stat {
	text-align: center;
}

.fon-stat__num {
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	margin: 0 0 .4rem;
}

.fon-stat__lbl {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .14em;
	line-height: 1.4;
}

@media (min-width: 782px) {
	.fon-stats > .wp-block-column + .wp-block-column {
		border-left: 1px solid rgba(255, 255, 255, .10);
	}
}

/* --------------------------------------------------------------------------
   Directory cards.
   -------------------------------------------------------------------------- */
.fon-cards > .wp-block-column {
	display: flex;
}

.wp-block-group.fon-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	transition: transform .3s var(--fon-ease), box-shadow .3s var(--fon-ease), border-color .3s var(--fon-ease);
}

.wp-block-group.fon-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--fon-shadow-md);
	border-color: var(--wp--preset--color--gold-500);
}

.fon-card > .wp-block-heading {
	margin-top: 0;
}

.fon-arrowlink {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: .5rem;
}

/* The gold rule is this link's only non-colour distinguisher, so it uses
   gold-700 (4.3:1 on ivory) rather than gold-500 (1.96:1). padding-block
   lifts the hit area to ~32px. */
.fon-arrowlink .fon-arrow {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-900);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--gold-700);
	padding-top: .35rem;
	padding-bottom: .25rem;
	transition: color .2s var(--fon-ease);
}

.fon-arrowlink .fon-arrow:hover,
.fon-arrowlink .fon-arrow:focus-visible {
	color: var(--wp--preset--color--royal-700);
	text-decoration: none;
}

.fon-arrowlink .fon-arrow::after {
	content: "";
	width: .85em;
	height: .85em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .25s var(--fon-ease);
}

.fon-arrowlink .fon-arrow:hover::after {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   fon/us-map band. The front page passes title:"" so the block renders no
   heading of its own — the "Browse by state" section head above it is the
   heading, and announcing it twice helped nobody. This rule stays as a
   defensive no-op in case a block instance is added back with a title.
   -------------------------------------------------------------------------- */
.fon-mapwrap .fon-usmap__title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Body copy links inside main.
   -------------------------------------------------------------------------- */
/* The underline is what tells an in-text link apart from body copy, so it
   has to be visible: royal-200 was 2.28:1 on white, royal-500 is 5.49:1. */
.fon-main a:not(.wp-element-button):not(.fon-arrow):not(.wp-block-navigation-item__content) {
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--royal-500);
	transition: color .2s var(--fon-ease), text-decoration-color .2s var(--fon-ease);
}

.fon-main a:not(.wp-element-button):not(.fon-arrow):not(.wp-block-navigation-item__content):hover {
	text-decoration-color: var(--wp--preset--color--gold-700);
}

/* Post titles should not carry a body underline. */
.fon-main .wp-block-post-title a,
.fon-main .wp-block-query-title a {
	text-decoration: none;
	color: var(--wp--preset--color--navy-900);
}

.fon-main .wp-block-post-title a:hover {
	color: var(--wp--preset--color--royal-600);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold-700);
}

/* --------------------------------------------------------------------------
   Title bands (page / archive / search / index / 404).

   Two class spellings are in use across the templates — `fon-titleband` on
   archive/index/search/404 and `fon-title-band` on the directory archives and
   single views. Both are matched here; previously the hyphenated set matched
   nothing, so those pages lost the white heading colour, the description
   width cap and (worse) the gold focus ring on the navy band.
   -------------------------------------------------------------------------- */
.fon-titleband .wp-block-post-title,
.fon-titleband .wp-block-query-title,
.fon-titleband .wp-block-heading,
.fon-title-band .wp-block-post-title,
.fon-title-band .wp-block-query-title,
.fon-title-band .wp-block-heading {
	color: #fff;
	margin: 0;
}

.fon-titleband--center,
.fon-title-band--center {
	text-align: center;
}

.fon-titleband .wp-block-term-description,
.fon-title-band .wp-block-term-description {
	color: var(--wp--preset--color--royal-100);
	max-width: 62ch;
}

/* Directory bands stack eyebrow / title / description / count on blockGap, so
   the intro paragraph and the result count carry no margins of their own.
   (Their colours come from the preset classes in the templates.) */
.fon-titleband__desc,
.fon-title-band__desc {
	max-width: 62ch;
	margin: 0;
}

.fon-titleband .wp-block-query-total,
.fon-title-band .wp-block-query-total {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Result rows + pagination.
   -------------------------------------------------------------------------- */
.fon-resultrow:first-child {
	padding-top: 0 !important;
}

.fon-pagination {
	margin-top: 2.5rem;
	gap: .75rem;
	font-family: var(--wp--preset--font-family--dm-sans);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.fon-pagination a,
.fon-pagination .current {
	text-decoration: none;
	padding: .4rem .7rem;
	border-bottom: 2px solid transparent;
}

/* State indicators, so gold-700 (4.9:1 on white) rather than gold-500 (2.25:1). */
.fon-pagination .current {
	border-bottom-color: var(--wp--preset--color--gold-700);
	color: var(--wp--preset--color--navy-900);
}

.fon-pagination a:hover {
	border-bottom-color: var(--wp--preset--color--gold-700);
}

/* --------------------------------------------------------------------------
   core/search block.
   -------------------------------------------------------------------------- */
.fon-searchblock .wp-block-search__inside-wrapper {
	border: 0;
	gap: 0;
}

.fon-searchblock .wp-block-search__input {
	font-family: inherit;
	font-size: 1rem;
	padding: .9rem 1.1rem;
	border: 1px solid var(--fon-field-line);
	border-right: 0;
	border-radius: 3px 0 0 3px;
	background-color: #fff;
	color: var(--wp--preset--color--ink);
}

.fon-searchblock .wp-block-search__button {
	margin-left: 0;
	border: 0;
	border-radius: 0 3px 3px 0;
}

.fon-searchblock--dark .wp-block-search__input {
	background-color: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .40);
	color: #fff;
}

.fon-searchblock--dark .wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, .72);
	opacity: 1;
}

.fon-searchblock--dark .wp-block-search__button {
	background-color: var(--wp--preset--color--gold-500);
	color: var(--wp--preset--color--navy-900);
}

.fon-searchblock--dark .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--gold-600);
	color: var(--wp--preset--color--navy-900);
}

/* --------------------------------------------------------------------------
   Footer.
   -------------------------------------------------------------------------- */
.fon-footer {
	color: rgba(255, 255, 255, .78);
}

.fon-footer .wp-block-image.fon-logo--footer {
	margin-bottom: 1.25rem;
}

.fon-footer__blurb {
	color: rgba(255, 255, 255, .70);
	max-width: 34ch;
	margin: 0;
}

.fon-footer__head.wp-block-heading {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1.25rem;
}

.fon-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.fon-footer__list li {
	margin-bottom: .2rem;
}

/* inline-block + vertical padding takes each footer link from a ~24px to a
   ~36px hit area without changing the visual rhythm. */
.fon-footer__list a {
	display: inline-block;
	color: rgba(255, 255, 255, .78);
	font-size: .9rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-block: .35rem;
	transition: color .2s var(--fon-ease), border-color .2s var(--fon-ease);
}

.fon-footer__list a:hover,
.fon-footer__list a:focus-visible {
	color: var(--wp--preset--color--gold-300);
	border-bottom-color: var(--wp--preset--color--gold-500);
}

.fon-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding-top: 1.6rem;
	margin-top: 1rem;
}

.fon-footer__copy {
	color: rgba(255, 255, 255, .62);
	margin: 0;
	font-size: .8rem;
	letter-spacing: .02em;
}

@media (max-width: 781px) {
	.fon-footer__cols > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   Overflow safety. Imported records carry long unbroken strings (emails,
   firm names, URLs) that would otherwise push the page sideways at 375px.
   -------------------------------------------------------------------------- */
.fon-main,
.fon-footer {
	overflow-wrap: break-word;
}

.fon-main :where(td, th, dd, figcaption),
.fon-main :where(.wp-block-post-title, .wp-block-query-title) {
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Prose (page content).
   -------------------------------------------------------------------------- */
.fon-prose blockquote {
	border-left: 3px solid var(--wp--preset--color--gold-500);
	padding-left: 1.25rem;
	margin-left: 0;
}

.fon-prose :where(ul, ol) {
	padding-left: 1.5rem;
}

/* --------------------------------------------------------------------------
   Motion preferences.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.wp-block-group.fon-card:hover {
		transform: none;
	}

	.fon-arrowlink .fon-arrow:hover::after {
		transform: none;
	}
}