/**
 * Finewerk global header — Version 2.
 *
 * Reference: refferences/header-v2-noscroll.png (initial state) and
 * refferences/header-v2-scroll.png (stuck state). The dark backdrop in
 * those screenshots is NOT part of the design; the header is glass over
 * whatever page content sits behind it.
 *
 * Layered over site-header.css (same markup, same state classes). Every
 * rule is scoped under `.fwsc-header--v2` / `#fwsc-header`, so nothing can
 * reach page content, and Version 1 installs never load this file.
 *
 * Model
 * -----
 * - The header is `position: sticky` (≥992px) at its natural position in
 *   the page flow. Its box height is the same in both states: the navbar
 *   container has a fixed height and all state changes happen inside it,
 *   so sticking/unsticking never shifts the page (no CLS).
 * - `.is-top`   → initial state: ONE glass bar (`.fwsc-surface--bar`),
 *   transparent pills, logo left, navigation + CTA grouped right, the CTA
 *   is a solid dark pill with the icon button (`.fwsc-cta-extra`).
 * - `.is-scrolled` → stuck state: the bar surface fades out while the
 *   three pill surfaces fade in, the navigation glides to the centre, the
 *   icon button collapses and the CTA becomes the glass pill of Version 1.
 * - Movement is animated with flex-grow on two zero-width spacers around
 *   the navigation pill plus a handful of small internal transitions
 *   (padding / gap / height) — the same technique the base header already
 *   uses for its container max-width. Everything that appears/disappears
 *   uses opacity + transform.
 * - Below 992px the Version 1 mobile layout applies unchanged (fixed
 *   header, glass pills, hamburger overlay); only the sticky detection
 *   feeds the `is-scrolled` class.
 */

/* ------------------------------------------------------------------
 * Tokens (overridable per device from Header → Styles → Header Version 2;
 * admin values are written on #fwsc-header and therefore win)
 * ---------------------------------------------------------------- */

.fwsc-header--v2 {
	--fwsc-v2-bar-height: 86px;
	--fwsc-v2-bar-radius: 22px;
	/* Stuck-state pills are as tall as the initial bar, so the header keeps
	   exactly one height in both states and the three groups line up. */
	--fwsc-v2-pill-height: var(--fwsc-v2-bar-height);
	--fwsc-v2-nav-color: var(--fwsc-glass-fg); /* follows the backdrop verdict */
	--fwsc-v2-dot: #1f3e3a;
	--fwsc-v2-cta-bg: #1f3e3a;
	--fwsc-v2-cta-color: #fff;
	--fwsc-v2-cta-height: 62px;
	--fwsc-v2-cta-radius: 18px;
	--fwsc-v2-extra-bg: #fff;
	--fwsc-v2-extra-color: #111;
	--fwsc-v2-extra-size: 50px;
	--fwsc-v2-extra-radius: 14px;
	--fwsc-v2-extra-inset: 6px;
	--fwsc-v2-move: 0.45s;
	--fwsc-v2-fade: 0.3s;
}

/* ------------------------------------------------------------------
 * Sticky sentinel — a 1px marker at the header's natural position that
 * costs no layout space (negative bottom margin). The script observes it
 * with an IntersectionObserver; CSS only keeps it inert.
 * ---------------------------------------------------------------- */

.fwsc-header__sentinel {
	position: relative;
	display: block;
	height: 1px;
	margin: 0 0 -1px;
	padding: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ------------------------------------------------------------------
 * Desktop layout (≥992px): sticky in-flow header
 * ---------------------------------------------------------------- */

@media (min-width: 992px) {
	.fwsc-header--v2 {
		/* Stuck-state pills use the V2 pill height (= bar height by default). */
		--fwsc-pill-height: var(--fwsc-v2-pill-height);

		position: -webkit-sticky;
		position: sticky;
		top: var(--fwsc-sticky-offset, 0px); /* Set by the script when a fixed admin bar exists. */
		left: auto;
		right: auto;
		/* flow-root keeps the container's top margin INSIDE the header box,
		   so the box height is exactly margin + bar height in both states. */
		display: flow-root;
		padding: 0 30px;
	}

	/* Deterministic sizing whatever the theme's global box-sizing is: every
	   height/padding below is meant as the OUTER size (reference pixels). */
	.fwsc-header--v2 .fwsc-header__inner,
	.fwsc-header--v2 .fwsc-pill,
	.fwsc-header--v2 .fwsc-nav__link,
	.fwsc-header--v2 .fwsc-cta-extra {
		box-sizing: border-box;
	}

	/* The navbar container is the single bar of the initial state. */
	.fwsc-header--v2 .fwsc-header__inner {
		height: var(--fwsc-v2-bar-height);
		padding: 0 14px 0 32px;
		gap: 10px;
		border-radius: var(--fwsc-v2-bar-radius);
		transition:
			max-width var(--fwsc-v2-move) var(--fwsc-ease),
			padding var(--fwsc-v2-move) var(--fwsc-ease),
			gap var(--fwsc-v2-move) var(--fwsc-ease);
	}

	/* Stuck: same container width (the three pills need the room to sit
	   logo / centred navigation / CTA with clear gaps), no bar padding. */
	.fwsc-header--v2.is-scrolled .fwsc-header__inner {
		max-width: 1260px; /* Overrides the V1 condensed 1088px. */
		padding: 0;
		gap: 30px;
	}

	/* The navigation zone may never overflow into the CTA: if a very long
	   menu does not fit, the links shrink rather than the spacers. */
	.fwsc-header--v2 .fwsc-header__zone--nav {
		min-width: 0;
	}

	.fwsc-header--v2 .fwsc-nav-pill {
		min-width: 0;
		flex: 0 1 auto;
	}

	/* Bar glass surface: visible at rest, fades out once stuck while the
	   pill surfaces (site-header.css) fade in — a cross-fade, not a swap. */
	.fwsc-header--v2 .fwsc-surface--bar {
		opacity: 1;
		transition: opacity var(--fwsc-v2-fade) var(--fwsc-ease);
	}

	.fwsc-header--v2.is-scrolled .fwsc-surface--bar {
		opacity: 0;
	}

	/* Zones paint above the (absolutely positioned) bar surface. */
	.fwsc-header--v2 .fwsc-header__zone {
		position: relative;
		z-index: 1;
	}

	/* Pills are invisible in the initial state — the bar is the surface.
	   Low specificity on purpose (:where) so administrator CTA/logo/nav
	   background styles, written after this sheet, still win. */
	#fwsc-header:where(.fwsc-header--v2:not(.is-scrolled)) .fwsc-pill--bar {
		background: rgba(255, 255, 255, 0);
		box-shadow: none;
		color: var(--fwsc-v2-nav-color);
	}

	/* ---- Logo ------------------------------------------------------ */

	.fwsc-header--v2 .fwsc-logo {
		padding: 0;
		transition:
			background-color 0.35s var(--fwsc-ease),
			box-shadow 0.35s var(--fwsc-ease),
			color var(--fwsc-fg-dur) var(--fwsc-ease),
			padding var(--fwsc-v2-move) var(--fwsc-ease);
	}

	.fwsc-header--v2.is-scrolled .fwsc-logo {
		padding: 0 16px;
	}

	.fwsc-header--v2 .fwsc-logo__img {
		height: 48px;
		max-width: 220px;
	}

	/* ---- Navigation ------------------------------------------------- */

	/* Two zero-width spacers around the navigation pill. Only the trailing
	   one grows in the stuck state, which glides the pill from the right
	   group to the centre of the leftover space (the V1 arrangement). */
	.fwsc-header--v2 .fwsc-header__zone--nav {
		justify-content: normal;
	}

	.fwsc-header--v2 .fwsc-header__zone--nav::before,
	.fwsc-header--v2 .fwsc-header__zone--nav::after {
		content: "";
		display: block;
		flex: 1 1 0px;
		min-width: 0;
		height: 1px;
		transition: flex-grow var(--fwsc-v2-move) var(--fwsc-ease);
	}

	.fwsc-header--v2 .fwsc-header__zone--nav::after {
		flex-grow: 0;
	}

	.fwsc-header--v2.is-scrolled .fwsc-header__zone--nav::after {
		flex-grow: 1;
	}

	.fwsc-header--v2 .fwsc-nav-pill {
		padding: 0;
		transition:
			background-color 0.35s var(--fwsc-ease),
			box-shadow 0.35s var(--fwsc-ease),
			color var(--fwsc-fg-dur) var(--fwsc-ease),
			padding var(--fwsc-v2-move) var(--fwsc-ease);
	}

	.fwsc-header--v2.is-scrolled .fwsc-nav-pill {
		padding: 6px;
	}

	.fwsc-header--v2 .fwsc-nav {
		gap: 0;
		transition: gap var(--fwsc-v2-move) var(--fwsc-ease);
	}

	.fwsc-header--v2.is-scrolled .fwsc-nav {
		gap: 6px;
	}

	.fwsc-header--v2 .fwsc-nav-pill .fwsc-nav__link {
		height: 44px;
		padding: 0 18px;
		border-radius: 12px;
		font-size: 18px;
		line-height: 22px;
		color: var(--fwsc-v2-nav-color);
		transition:
			background-color 0.2s var(--fwsc-ease),
			color var(--fwsc-fg-dur) var(--fwsc-ease),
			height var(--fwsc-v2-move) var(--fwsc-ease),
			padding var(--fwsc-v2-move) var(--fwsc-ease),
			border-radius var(--fwsc-v2-move) var(--fwsc-ease);
	}

	.fwsc-header--v2.is-scrolled .fwsc-nav-pill .fwsc-nav__link {
		height: calc(var(--fwsc-pill-height) - 12px); /* pill minus its 6px padding */
		padding: 0 24px;
		border-radius: 16px;
	}

	/* Links sit on glass in both states: hover wash follows the theme. */
	.fwsc-header--v2 .fwsc-nav-pill .fwsc-nav__link:hover,
	.fwsc-header--v2 .fwsc-nav-pill .fwsc-nav__link:focus-visible {
		background: var(--fwsc-glass-hover);
	}

	/* Glass in both V2 states → the logo follows the verdict in both. */
	.fwsc-header--v2 .fwsc-logo__img--for-dark {
		opacity: var(--fwsc-logo-dark-bg);
	}

	.fwsc-header--v2 .fwsc-logo__img--for-light {
		opacity: calc(1 - var(--fwsc-logo-dark-bg));
	}

	.fwsc-header--v2 .fwsc-nav__toggle,
	.fwsc-header--v2 .fwsc-nav__link--button .fwsc-icon--caret {
		color: var(--fwsc-glass-fg-soft);
	}

	/* Separator dots between links (initial state only). */
	.fwsc-header--v2 .fwsc-nav__item + .fwsc-nav__item::before {
		content: "";
		display: block;
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--fwsc-v2-dot);
		opacity: 1;
		transition:
			opacity var(--fwsc-v2-fade) var(--fwsc-ease),
			width var(--fwsc-v2-move) var(--fwsc-ease);
	}

	.fwsc-header--v2.is-scrolled .fwsc-nav__item + .fwsc-nav__item::before {
		width: 0;
		opacity: 0;
	}

	/* Active page chip, scaled to the 18px navigation. */
	.fwsc-header--v2 .fwsc-nav__item.is-active .fwsc-nav__label {
		height: 30px;
		padding: 0 12px;
		border-radius: 15px;
		font-size: 18px;
	}

	/* ---- CTA -------------------------------------------------------- */

	.fwsc-header--v2 .fwsc-cta-group {
		position: relative;
		display: inline-flex;
		align-items: center;
		flex: 0 0 auto;
	}

	.fwsc-header--v2 .fwsc-cta--bar {
		height: var(--fwsc-v2-cta-height);
		padding: 0 20px 0 calc(var(--fwsc-v2-extra-size) + var(--fwsc-v2-extra-inset) + 18px);
		gap: 0;
		border-radius: var(--fwsc-v2-cta-radius);
		font-size: 17px;
		letter-spacing: 0.2px;
		color: var(--fwsc-v2-cta-color);
		transition:
			background-color 0.35s var(--fwsc-ease),
			box-shadow 0.35s var(--fwsc-ease),
			color var(--fwsc-fg-dur) var(--fwsc-ease),
			height var(--fwsc-v2-move) var(--fwsc-ease),
			padding var(--fwsc-v2-move) var(--fwsc-ease),
			gap var(--fwsc-v2-move) var(--fwsc-ease),
			border-radius var(--fwsc-v2-move) var(--fwsc-ease);
	}

	.fwsc-header--v2 .fwsc-cta-group--no-extra .fwsc-cta--bar {
		padding-left: 20px;
	}

	/* Initial state: solid dark pill (the only pill with a background).
	   Its label keeps its own token instead of the backdrop verdict's
	   foreground: the plate is solid, so what is behind the header says
	   nothing about the contrast on it. The rule above (same specificity,
	   earlier in the sheet) also matches this pill because the CTA is a
	   `.fwsc-pill--bar` too — this re-asserts the CTA colour, which is what
	   the reduced-transparency block at the end of this file already
	   assumes ("the solid dark CTA keeps its white label"). */
	#fwsc-header:where(.fwsc-header--v2:not(.is-scrolled)) .fwsc-cta--bar {
		background: var(--fwsc-v2-cta-bg);
		color: var(--fwsc-v2-cta-color);
	}

	/* Stuck state: the Version 1 glass CTA pill. */
	.fwsc-header--v2.is-scrolled .fwsc-cta--bar {
		height: var(--fwsc-pill-height);
		padding: 0 36px;
		gap: 14px;
		border-radius: var(--fwsc-pill-radius);
	}

	/* Trailing diagonal arrow: collapsed at rest, revealed once stuck. */
	.fwsc-header--v2 .fwsc-cta--bar .fwsc-icon--arrow {
		max-width: 24px;
		transition:
			max-width var(--fwsc-v2-move) var(--fwsc-ease),
			opacity var(--fwsc-v2-fade) var(--fwsc-ease),
			transform 0.25s var(--fwsc-ease);
	}

	.fwsc-header--v2:not(.is-scrolled) .fwsc-cta--bar .fwsc-icon--arrow {
		max-width: 0;
		opacity: 0;
		transform: translate(-4px, 4px);
	}

	/* Icon button of the initial state, overlaying the CTA's leading
	   padding; scales/fades away when the header sticks. */
	.fwsc-header--v2 .fwsc-cta-extra {
		pointer-events: auto;
		position: absolute;
		left: var(--fwsc-v2-extra-inset);
		top: 50%;
		z-index: 2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--fwsc-v2-extra-size);
		height: var(--fwsc-v2-extra-size);
		border-radius: var(--fwsc-v2-extra-radius);
		background: var(--fwsc-v2-extra-bg);
		color: var(--fwsc-v2-extra-color);
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		opacity: 1;
		visibility: visible;
		transform: translateY(-50%);
		transition:
			opacity var(--fwsc-v2-fade) var(--fwsc-ease),
			transform var(--fwsc-v2-fade) var(--fwsc-ease),
			visibility 0s linear 0s;
	}

	.fwsc-header--v2 .fwsc-cta-extra .fwsc-icon--arrow-right {
		display: block;
		transition: transform 0.25s var(--fwsc-ease);
	}

	.fwsc-header--v2 .fwsc-cta-extra:hover .fwsc-icon--arrow-right,
	.fwsc-header--v2 .fwsc-cta-extra:focus-visible .fwsc-icon--arrow-right {
		transform: translateX(2px);
	}

	.fwsc-header--v2.is-scrolled .fwsc-cta-extra {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-50%) scale(0.5);
		transition:
			opacity var(--fwsc-v2-fade) var(--fwsc-ease),
			transform var(--fwsc-v2-fade) var(--fwsc-ease),
			visibility 0s linear var(--fwsc-v2-fade);
	}
}

/* Compressed desktop range (992–1199px): same layout, tighter type. */
@media (min-width: 992px) and (max-width: 1199px) {
	.fwsc-header--v2 .fwsc-header__inner {
		padding: 0 12px 0 22px;
	}

	.fwsc-header--v2 .fwsc-nav-pill .fwsc-nav__link {
		padding: 0 12px;
		font-size: 16px;
	}

	.fwsc-header--v2.is-scrolled .fwsc-header__inner {
		gap: 16px;
	}

	.fwsc-header--v2.is-scrolled .fwsc-nav-pill .fwsc-nav__link {
		padding: 0 14px;
	}

	.fwsc-header--v2 .fwsc-nav__item.is-active .fwsc-nav__label {
		font-size: 16px;
	}

	.fwsc-header--v2 .fwsc-cta--bar {
		font-size: 16px;
	}

	.fwsc-header--v2.is-scrolled .fwsc-cta--bar {
		padding: 0 24px;
	}

	.fwsc-header--v2 .fwsc-logo__img {
		height: 40px;
		max-width: 170px;
	}
}

/* ------------------------------------------------------------------
 * Below 992px: Version 1 mobile layout (fixed header, glass pills,
 * hamburger) — the bar surface is not part of it.
 * ---------------------------------------------------------------- */

@media (max-width: 991px) {
	.fwsc-header--v2 .fwsc-surface--bar {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Accessibility preferences
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fwsc-header--v2 .fwsc-header__inner,
	.fwsc-header--v2 .fwsc-surface--bar,
	.fwsc-header--v2 .fwsc-header__zone--nav::before,
	.fwsc-header--v2 .fwsc-header__zone--nav::after,
	.fwsc-header--v2 .fwsc-logo,
	.fwsc-header--v2 .fwsc-nav-pill,
	.fwsc-header--v2 .fwsc-nav,
	.fwsc-header--v2 .fwsc-nav-pill .fwsc-nav__link,
	.fwsc-header--v2 .fwsc-nav__item + .fwsc-nav__item::before,
	.fwsc-header--v2 .fwsc-cta--bar,
	.fwsc-header--v2 .fwsc-cta--bar .fwsc-icon--arrow,
	.fwsc-header--v2 .fwsc-cta-extra,
	.fwsc-header--v2.is-scrolled .fwsc-cta-extra,
	.fwsc-header--v2 .fwsc-cta-extra .fwsc-icon--arrow-right {
		transition: none !important;
	}
}

/* The glass material goes near-solid white under prefers-contrast /
   reduced transparency: text on the bar flips to ink (the solid dark
   CTA keeps its white label). */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
	.fwsc-header--v2 {
		--fwsc-v2-nav-color: var(--fwsc-ink);
	}
}