/* ===========================================================================
   FS — CHROME
   Header, navigation, mega menu, mobile panel, footer.

   Moved out of base.css: page furniture outgrew a section of the reset sheet
   the moment it gained dropdowns. base.css keeps the reset, type scale and
   layout primitives; everything the visitor navigates with lives here.

   Tokens only — no raw hex, no raw duration, no raw easing.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   HEADER

   Fixed and transparent over the hero, filling in once the page moves. The
   hairline is dashed, which is the template's one piece of real character in
   an otherwise plain bar — it reads as a technical drawing rather than a
   border, and it costs nothing.
   --------------------------------------------------------------------------- */

.fs-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 60;
	background: transparent;
	border-block-end: 1px dashed var(--fs-border-strong);
	transition:
		background var(--fs-duration-base) var(--fs-ease),
		backdrop-filter var(--fs-duration-base) var(--fs-ease),
		border-color var(--fs-duration-base) var(--fs-ease);
}

.fs-header.is-scrolled {
	background: color-mix(in srgb, var(--fs-bg) 86%, transparent);
	backdrop-filter: blur(12px) saturate(1.4);
	border-block-end-style: solid;
	border-block-end-color: var(--fs-border);
}

/* Transparency is a preference, not a given. */
@media (prefers-reduced-transparency: reduce) {
	.fs-header.is-scrolled {
		background: var(--fs-bg);
		backdrop-filter: none;
	}
}

/* WordPress's admin bar is itself fixed at the top of the viewport, so a
   fixed header sits underneath it for every logged-in user. WordPress only
   offsets themes that use position:sticky, not fixed. These are the admin
   bar's own two heights and its own breakpoint. */
body.admin-bar .fs-header {
	inset-block-start: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .fs-header {
		inset-block-start: 46px;
	}
}

/* The header is fixed, so it no longer occupies flow. Every page needs its
   height back at the top or the first section slides underneath it. */
:root {
	--fs-header-h: 76px;
}

.fs-main {
	padding-block-start: var(--fs-header-h);
}

/* The hero paints its own generous top padding and reads better tucked under
   a transparent bar, which is the whole point of the transparent state. */
.fs-main > .fs-hero-banner:first-child,
.fs-main > .fs-hero:first-child {
	margin-block-start: calc(var(--fs-header-h) * -1);
}

.fs-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fs-space-md);
	min-block-size: var(--fs-header-h);
}

.fs-header__brand a,
.fs-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

.fs-header__brand img,
.fs-header .custom-logo {
	max-block-size: 40px;
	inline-size: auto;
	object-fit: contain;
}

.fs-header__title {
	color: var(--fs-ink);
	font-family: var(--fs-font-display);
	font-size: var(--fs-t-h4);
	font-weight: var(--fs-weight-bold);
	letter-spacing: var(--fs-track-md);
	text-decoration: none;
}

.fs-header__actions {
	display: flex;
	align-items: center;
	gap: var(--fs-space-sm);
}

/* ---------------------------------------------------------------------------
   NAV
   --------------------------------------------------------------------------- */

.fs-nav__list {
	display: flex;
	align-items: center;
	gap: var(--fs-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs-nav__item {
	position: relative;
}

/* WCAG 2.2 SC 2.5.8 — the target, not just the text, must reach 44px. */
.fs-nav__link,
.fs-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--fs-space-3xs);
	min-block-size: 44px;
	padding: 0;
	border: 0;
	border-block-end: 1px solid transparent;
	background: none;
	color: var(--fs-ink);
	font-family: var(--fs-font-body);
	font-size: var(--fs-t-body);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--fs-duration-fast) var(--fs-ease);
}

.fs-nav__link:hover,
.fs-nav__toggle:hover,
.fs-nav__item--current > .fs-nav__link {
	color: var(--fs-rose-ink);
}

.fs-nav__chevron {
	flex: none;
	transition: transform var(--fs-duration-base) var(--fs-ease);
}

.fs-nav__toggle[aria-expanded="true"] .fs-nav__chevron {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   PANELS — simple dropdown and mega menu

   Closed state is opacity 0 + 10px down + visibility:hidden, matching the
   upstream fade-up. visibility (not display:none) is what makes the
   transition possible at all, and it still removes the panel from the tab
   order while closed.
   --------------------------------------------------------------------------- */

.fs-nav__panel {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 50%;
	z-index: 10;
	padding: var(--fs-space-md);
	background: var(--fs-bg);
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius-card);
	box-shadow: var(--fs-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px);
	transition:
		opacity var(--fs-duration-base) var(--fs-ease),
		transform var(--fs-duration-base) var(--fs-ease),
		visibility var(--fs-duration-base) var(--fs-ease);
}

.fs-nav__panel--simple {
	inline-size: 320px;
}

.fs-nav__panel--mega {
	inline-size: min(920px, calc(100vw - var(--fs-gutter) * 2));
}

/* Open on hover, on keyboard focus, and on explicit toggle. All three,
   because hover alone excludes keyboards and touch.

   Scoped to the desktop breakpoint deliberately. These selectors are two and
   three classes deep, so left unscoped they outrank the single-class mobile
   reset below and keep applying translate(-50%) to a panel that is no longer
   absolutely positioned - which drags the whole accordion off the left edge
   of the screen. Wrapping the rule is the fix; raising the mobile block's
   specificity to fight it would only invite the same bug back later. */
@media (min-width: 1024px) {
	.fs-nav__item--has-panel:hover > .fs-nav__panel,
	.fs-nav__item--has-panel:focus-within > .fs-nav__panel,
	.fs-nav__toggle[aria-expanded="true"] + .fs-nav__panel {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}
}

/* A hover gap between the trigger and the panel would drop the menu as the
   pointer crosses it. This bridges it without a visible offset. */
.fs-nav__item--has-panel::after {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	block-size: var(--fs-space-2xs);
}

.fs-nav__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fs-space-lg);
}

.fs-nav__coltitle {
	margin: 0 0 var(--fs-space-sm);
	font-family: var(--fs-font-mono);
	font-size: var(--fs-t-mono);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fs-muted);
}

.fs-nav__sublist {
	display: grid;
	gap: var(--fs-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs-nav__sublink {
	display: block;
	padding: var(--fs-space-xs) var(--fs-space-2xs);
	border-radius: var(--fs-radius-sm);
	color: var(--fs-ink);
	text-decoration: none;
	transition:
		background var(--fs-duration-fast) var(--fs-ease),
		color var(--fs-duration-fast) var(--fs-ease);
}

.fs-nav__sublink:hover {
	background: var(--fs-bg-alt);
	color: var(--fs-rose-ink);
}

.fs-nav__subnote {
	display: block;
	margin-block-start: 2px;
	font-size: var(--fs-t-small);
	color: var(--fs-muted);
}

/* A destination that does not exist yet. Rendered as text, never a link, so
   nobody is sent to a 404 — and marked so it cannot ship unnoticed. */
.fs-nav__sublink--todo {
	color: var(--fs-muted);
	cursor: default;
	outline: 1px dashed var(--fs-rose);
	outline-offset: -1px;
}

.fs-nav__sublink--todo:hover {
	background: none;
	color: var(--fs-muted);
}

/* ---------------------------------------------------------------------------
   MOBILE TOGGLE
   --------------------------------------------------------------------------- */

/* The mobile panel scrolls internally, so the page behind it must not.
   nav.js sets this on the root element only while the menu is open. */
.fs-nav-open,
.fs-nav-open body {
	overflow: hidden;
}

@media (min-width: 1024px) {
	.fs-nav-open,
	.fs-nav-open body {
		overflow: visible;
	}
}

/* Visually hidden but still announced. The footer's social links are
   icon-only; without this they reach a screen reader as unlabelled links. */
.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.fs-navtoggle {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--fs-border-strong);
	border-radius: var(--fs-radius-sm);
	background: transparent;
	color: var(--fs-ink);
	cursor: pointer;
}

.fs-navtoggle__bar {
	display: block;
	inline-size: 18px;
	block-size: 1.5px;
	margin-inline: auto;
	background: currentColor;
	border-radius: var(--fs-radius-pill);
	transition: transform var(--fs-duration-base) var(--fs-ease),
		opacity var(--fs-duration-fast) var(--fs-ease);
}

.fs-navtoggle__bar + .fs-navtoggle__bar {
	margin-block-start: 4px;
}

.fs-navtoggle[aria-expanded="true"] .fs-navtoggle__bar:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}

.fs-navtoggle[aria-expanded="true"] .fs-navtoggle__bar:nth-child(2) {
	opacity: 0;
}

.fs-navtoggle[aria-expanded="true"] .fs-navtoggle__bar:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

/* ---------------------------------------------------------------------------
   BELOW 1024 — the nav becomes a panel and the dropdowns become accordions.

   Hover is not available here, so every panel is driven purely by
   aria-expanded. That is also why the toggles are real buttons rather than
   links: this layout would be unusable otherwise.
   --------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.fs-navtoggle {
		display: flex;
		order: 3;
	}

	.fs-header__actions {
		order: 2;
		margin-inline-start: auto;
	}

	.fs-nav {
		position: fixed;
		inset: var(--fs-header-h) 0 auto;
		max-block-size: calc(100dvh - var(--fs-header-h));
		padding: var(--fs-space-md) var(--fs-gutter) var(--fs-space-xl);
		overflow-y: auto;
		background: var(--fs-bg);
		border-block-end: 1px solid var(--fs-border);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition:
			opacity var(--fs-duration-base) var(--fs-ease),
			transform var(--fs-duration-base) var(--fs-ease),
			visibility var(--fs-duration-base) var(--fs-ease);
	}

	.fs-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.fs-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.fs-nav__item {
		border-block-end: 1px solid var(--fs-border);
	}

	.fs-nav__link,
	.fs-nav__toggle {
		justify-content: space-between;
		inline-size: 100%;
		min-block-size: 52px;
		font-size: var(--fs-t-lede);
	}

	/* Accordion: closed panels collapse to nothing, open ones size to content.
	   grid-template-rows is what makes an auto-height panel animate at all. */
	.fs-nav__panel,
	.fs-nav__panel--simple,
	.fs-nav__panel--mega {
		position: static;
		display: grid;
		grid-template-rows: 0fr;
		inline-size: 100%;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: grid-template-rows var(--fs-duration-base) var(--fs-ease);
	}

	.fs-nav__panel > * {
		overflow: hidden;
	}

	.fs-nav__item--has-panel:hover > .fs-nav__panel,
	.fs-nav__item--has-panel:focus-within > .fs-nav__panel {
		grid-template-rows: 0fr;
	}

	.fs-nav__toggle[aria-expanded="true"] + .fs-nav__panel,
	.fs-nav__item--has-panel:focus-within
		> .fs-nav__toggle[aria-expanded="true"]
		+ .fs-nav__panel {
		grid-template-rows: 1fr;
	}

	.fs-nav__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fs-space-md);
		padding-block-end: var(--fs-space-md);
	}

	.fs-nav__item--has-panel::after {
		content: none;
	}
}

/* The in-panel CTA only exists below the point where the header bar runs out
   of room for it. */
.fs-nav__cta {
	display: none;
}

@media (max-width: 767px) {
	/* Measured: logo 149 + CTA ~200 + toggle 44 + gaps overflows a 390px bar,
	   which pushed the toggle off the edge. Below 768 the CTA moves into the
	   menu panel rather than shrinking into an unreadable chip. */
	.fs-header__actions {
		display: none;
	}

	.fs-nav__cta {
		display: block;
		margin-block-start: var(--fs-space-lg);
	}

	.fs-nav__cta .fs-btn {
		inline-size: 100%;
	}
}

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */

.fs-footer {
	background: var(--fs-surface-0);
	color: var(--fs-on-dark-ink);

	--fs-ink: var(--fs-on-dark-ink);
	--fs-muted: var(--fs-on-dark-muted);
	--fs-border: var(--fs-on-dark-border);
	--fs-border-strong: var(--fs-on-dark-border-strong);
}

.fs-footer a {
	color: var(--fs-on-dark-ink);
	text-decoration: none;
}

.fs-footer a:hover {
	color: var(--fs-rose-lift);
}

.fs-footer :focus-visible {
	outline-color: var(--fs-rose-lift);
}

/* --- Signup band ---------------------------------------------------------- */

.fs-footer__signup {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--fs-space-xl);
	align-items: center;
	padding-block: var(--fs-section-compact);
	border-block-end: 1px solid var(--fs-on-dark-border);
}

.fs-footer__signup-title {
	margin: 0;
	font-size: var(--fs-t-h3);
	max-inline-size: 22ch;
}

/* MC4WP renders its own markup, so the styling reaches into it rather than
   the other way round. Scoped to the footer so a signup form placed anywhere
   else on the site is untouched. */
.fs-footer__form form,
.fs-footer__form .mc4wp-form-fields {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--fs-space-sm);
}

.fs-footer__form input[type="email"],
.fs-footer__form input[type="text"] {
	flex: 1;
	min-inline-size: 0;
	block-size: 64px;
	padding: 0 var(--fs-space-xl) 0 0;
	background: transparent;
	border: 0;
	border-block-end: 1px solid var(--fs-on-dark-border-strong);
	color: var(--fs-on-dark-ink);
	font-family: var(--fs-font-display);
	font-size: var(--fs-t-h4);
	font-weight: 700;
	letter-spacing: var(--fs-track-md);
	transition: border-color var(--fs-duration-base) var(--fs-ease);
}

.fs-footer__form input::placeholder {
	color: var(--fs-on-dark-muted);
	font-weight: 400;
}

.fs-footer__form input[type="email"]:focus {
	border-block-end-color: var(--fs-rose-lift);
	outline: none;
}

.fs-footer__form input[type="submit"],
.fs-footer__form button[type="submit"] {
	flex: none;
	min-block-size: 44px;
	padding-inline: var(--fs-space-md);
	background: var(--fs-rose);
	border: 0;
	border-radius: var(--fs-radius-btn);
	color: var(--fs-white);
	font-family: var(--fs-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--fs-duration-fast) var(--fs-ease);
}

.fs-footer__form input[type="submit"]:hover,
.fs-footer__form button[type="submit"]:hover {
	background: var(--fs-rose-hover);
}

.fs-footer__form .mc4wp-alert,
.fs-footer__form .mc4wp-response {
	margin-block-start: var(--fs-space-xs);
	font-size: var(--fs-t-small);
	color: var(--fs-on-dark-muted);
}

/* --- Link columns --------------------------------------------------------- */

.fs-footer__main {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: var(--fs-space-xl);
	padding-block: var(--fs-section-compact);
}

.fs-footer__coltitle {
	margin: 0 0 var(--fs-space-md);
	font-family: var(--fs-font-mono);
	font-size: var(--fs-t-mono);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fs-on-dark-muted);
}

.fs-footer__list {
	display: grid;
	gap: var(--fs-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs-footer__list a {
	display: inline-flex;
	align-items: center;
	min-block-size: 32px;
}

.fs-footer__contact {
	display: grid;
	gap: var(--fs-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--fs-on-dark-muted);
}

/* --- Bottom bar ----------------------------------------------------------- */

.fs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fs-space-sm);
	padding-block: var(--fs-space-lg);
	border-block-start: 1px solid var(--fs-on-dark-border);
}

.fs-footer__legal {
	margin: 0;
	color: var(--fs-on-dark-muted);
	font-size: var(--fs-t-small);
}

.fs-footer__social {
	display: flex;
	align-items: center;
	gap: var(--fs-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs-footer__social a {
	display: grid;
	place-content: center;
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid var(--fs-on-dark-border);
	border-radius: var(--fs-radius-pill);
	transition:
		background var(--fs-duration-fast) var(--fs-ease),
		border-color var(--fs-duration-fast) var(--fs-ease);
}

.fs-footer__social a:hover {
	background: var(--fs-rose);
	border-color: var(--fs-rose);
	color: var(--fs-white);
}

@media (max-width: 767px) {
	.fs-footer__signup {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fs-space-md);
	}

	.fs-footer__form form,
	.fs-footer__form .mc4wp-form-fields {
		flex-wrap: wrap;
	}

	.fs-footer__form input[type="submit"],
	.fs-footer__form button[type="submit"] {
		inline-size: 100%;
	}
}