@layer gc-tokens, gc-base, gc-components, gc-calculator, gc-workspace;

@layer gc-base {
:root{
	--gc-ink: var(--wp--preset--color--ink, #0f1a24);
	--gc-navy: var(--wp--preset--color--navy, #12293f);
	--gc-muted: var(--wp--preset--color--muted, #4a5d68);
	--gc-body-copy: var(--wp--preset--color--body-copy, #43565f);
	--gc-faint: var(--wp--preset--color--faint, #6b7f89);
	--gc-paper: var(--wp--preset--color--paper, #f7f9fb);
	--gc-surface: var(--wp--preset--color--surface, #ffffff);
	--gc-header-surface: rgba(17, 22, 29, 0.97);
	--gc-tint: var(--wp--preset--color--tint, #eef2f6);
	--gc-line: var(--wp--preset--color--line, #dbe3ea);
	--gc-accent: var(--wp--preset--color--accent, #ffb020);
	/* Legacy contrast ramps: darker companions kept for text-on-light
	   legibility (bright accent alone fails WCAG on white). Do not swap
	   these for --gc-accent without a contrast re-check. */
	--gc-accent-deep: var(--wp--preset--color--accent-deep, #8a4e0b);
	--gc-slate: var(--wp--preset--color--slate, #52616b);
	--gc-danger: var(--wp--preset--color--danger, #a32626);
	--gc-positive: var(--wp--preset--color--positive, #2d6f5e);
	--gc-caution: var(--wp--preset--color--caution, #8a4e0b);
	--gc-warning: var(--wp--preset--color--caution-strong, #7a5a15);
	--gc-caution-surface: var(--wp--preset--color--caution-surface, #fdf3dd);
	--gc-caution-ink: var(--wp--preset--color--caution-ink, #5e5b4d);
	--gc-caution-strong: var(--wp--preset--color--caution-strong, #7a5a15);
	--gc-negative: var(--wp--preset--color--negative, #9a4f42);
	--gc-danger-surface: var(--wp--preset--color--danger-surface, #fff4f2);
	--gc-focus: var(--wp--preset--color--focus, #1d6f82);
	--gc-radius-sm: 6px;
	--gc-radius-md: 8px;
	--gc-radius-lg: 12px;
	--gc-content: 1136px; /* single source: 1136 + 2x32 gutters = 1200 box */
	--gc-wide: 1200px; /* single source: page boxes are 1200 */
	--gc-gutter: 32px;
	--gc-gutter-mobile: 20px;
	--gc-shell-width: calc(var(--gc-content) + var(--gc-gutter) + var(--gc-gutter));
	--gc-reading: 1136px; /* unified: reading boxes align to the same 1200 grid */
	--gc-font: var(--wp--preset--font-family--generator-sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--gc-space-1: var(--wp--preset--spacing--space-1, 0.35rem);
	--gc-space-2: var(--wp--preset--spacing--space-2, 0.65rem);
	--gc-space-3: var(--wp--preset--spacing--space-3, 0.9rem);
	--gc-space-4: var(--wp--preset--spacing--space-4, 1.25rem);
	--gc-space-5: var(--wp--preset--spacing--space-5, 1.75rem);

	/* Hero rhythm. Every hero on the site reads these, so padding, type scale
	   and measure cannot drift apart between page types. */
	--gc-hero-pad-block: 56px;
	--gc-hero-pad-block-mobile: 40px;
	--gc-hero-h1-size: clamp(2.1rem, 1.2rem + 4.5vw, 3.72rem);
	--gc-hero-h1-size-mobile: 2.55rem;
	--gc-hero-h1-measure: 820px;
	--gc-hero-lede-measure: 650px;
	--gc-hero-copy-measure: 760px;
	--gc-hero-gap: 56px;
}

*, *::before, *::after{
	box-sizing: border-box;
}

html{
	background: var(--gc-paper);
	scroll-behavior: smooth;
}

body{
	margin: 0;
	background: var(--gc-paper);
	color: var(--gc-ink);
	font-family: var(--gc-font);
	font-size: 16px;
	line-height: 1.5;
}

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

a{
	color: var(--gc-accent);
}

button, input, select, textarea{
	font: inherit;
}

button{
	cursor: pointer;
}

.gc-site-main{
	min-height: 70vh;
}

.gc-icon{
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	stroke-width: 2;
}

.gc-skip-link{
	position: fixed;
	z-index: 100;
	top: 12px;
	left: 12px;
	padding: 10px 14px;
	background: var(--gc-navy);
	color: var(--gc-surface);
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-160%);
	transition: transform 160ms ease;
}

.gc-skip-link:focus{
	transform: translateY(0);
}

/* Global keyboard focus: low specificity so component-level
   focus-visible rules (calculator engine, menu toggle) win. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
	outline: 2px solid var(--gc-focus);
	outline-offset: 2px;
}

.gc-site-header{
	border-bottom: 1px solid var(--gc-line);
	background: var(--gc-header-surface);
	box-shadow: 0 1px 0 rgba(23, 40, 50, 0.03);
}

.gc-site-header__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: 100%;
	max-width: var(--gc-shell-width);
	margin: 0 auto;
	padding: 20px var(--gc-gutter);
}

.gc-brand, .gc-site-footer__brand{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--gc-ink);
	font-weight: 800;
	text-decoration: none;
}

.gc-brand__fallback{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	color: var(--gc-surface);
}

.gc-brand__fallback .gc-brand__mark{
	background: var(--gc-accent);
	color: var(--gc-ink);
}

.gc-site-header .gc-brand__fallback .gc-brand__name{
	color: var(--gc-surface);
}

.gc-site-footer .gc-brand__fallback .gc-brand__name{
	color: var(--gc-ink);
}

.gc-brand__mark{
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	background: var(--gc-ink);
	color: var(--gc-surface);
	border-radius: var(--gc-radius-sm);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0;
}

.gc-brand__name{
	font-size: 0.92rem;
	white-space: nowrap;
}

.gc-brand .custom-logo, .gc-site-footer__brand .custom-logo{
	display: block;
	width: auto;
	max-width: 220px;
	max-height: 42px;
}

.gc-site-nav{
	display: flex;
	align-items: center;
	gap: 22px;
}

.gc-site-nav > ul{
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gc-site-nav > li{
	list-style: none;
}

.gc-site-nav a{
	padding: 8px 0;
	color: var(--gc-muted);
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
}

.gc-site-nav a:hover, .gc-site-nav a[aria-current="page"]{
	color: var(--gc-ink);
}

.gc-header-actions{
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.gc-header-link{
	display: inline-flex;
	min-height: 40px;
	align-items: center;
	color: var(--gc-navy);
	font-size: 0.78rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

.gc-header-link:hover{
	color: var(--gc-accent);
}

.gc-header-cta{
	display: inline-flex;
	min-height: 40px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1px solid var(--gc-navy);
	border-radius: var(--gc-radius-md);
	background: var(--gc-navy);
	color: var(--gc-surface);
	padding: 0 14px;
	font-size: 0.78rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

.gc-header-cta:hover{
	background: var(--gc-ink);
	color: var(--gc-surface);
}



.gc-site-nav a[aria-current="page"]{
	border-bottom: 2px solid var(--gc-accent);
}

.gc-menu-toggle{
	display: none;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1px solid var(--gc-line);
	border-radius: var(--gc-radius-sm);
	background: var(--gc-surface);
	color: var(--gc-navy);
	padding: 8px 12px;
	font-size: 0.78rem;
	font-weight: 800;
}

/* Geometry lives in the generator skin's layout contract (it must beat the
   unlayered critical <style> in header.php, which layered rules cannot).
   This rule only reserves vertical rhythm when no skin is active. */
.gc-site-footer{
	display: grid;
	gap: 28px;
	padding-top: 42px;
	padding-bottom: 36px;
	font-size: 0.8rem;
}

.gc-site-footer__primary{
	display: grid;
	grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: 40px;
}

.gc-site-footer__copy{
	min-width: 0;
}

.gc-site-footer p{
	margin: 0;
	line-height: 1.55;
}

.gc-site-footer__brand{
	display: inline-block;
	margin-bottom: 4px;
	color: var(--gc-ink);
	font-weight: 800;
	text-decoration: none;
}

.gc-site-footer__brand:hover{
	color: var(--gc-accent);
}

.gc-site-footer__copy > p{
	max-width: 420px;
}

.gc-footer-nav{
	margin: 0;
	padding: 0;
}

.gc-footer-nav__list{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gc-footer-nav a{
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	color: var(--gc-navy);
	font-weight: 700;
	text-decoration: none;
}

.gc-footer-nav a:hover{
	color: var(--gc-ink);
}

.gc-site-footer__bottom{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--gc-line);
}

.gc-site-footer__disclosure{
	color: var(--gc-faint);
	font-size: 0.7rem;
}

@media (max-width: 1040px) {
	.gc-site-header__inner{
		padding: 16px var(--gc-gutter);
		gap: 14px;
	}

	/* Mobile bar: brand + quiet icon toggle only. Actions live in the open panel. */
	.gc-menu-toggle{
		display: none;
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 1px solid color-mix(in srgb, var(--gc-surface) 28%, transparent);
		border-radius: var(--gc-radius-md);
		background: transparent;
		color: var(--gc-surface);
	}

	@media (hover: hover) {
		.gc-menu-toggle:hover{
			border-color: var(--gc-accent);
			color: var(--gc-accent);
		}
	}

	.gc-menu-toggle:focus{
		outline: none;
	}

	.gc-menu-toggle:focus-visible{
		outline: 2px solid var(--gc-accent);
		outline-offset: 2px;
	}

	.gc-menu-toggle__label{
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.gc-has-menu .gc-menu-toggle{
		display: inline-flex;
	}

	.gc-has-menu .gc-site-nav{
		display: none;
		flex-basis: 100%;
		align-items: stretch;
		flex-direction: column;
		gap: 0;
		padding-top: 8px;
	}

	.gc-header-actions{
		order: initial;
		display: none;
		flex: 0 0 auto;
		gap: 8px;
		margin-inline-start: auto;
	}

	.gc-header-link{
		min-height: 44px;
		padding: 0 4px;
		font-size: 0.74rem;
	}

	.gc-site-nav{
		width: 100%;
		min-width: 0;
		flex-basis: 100%;
	}

	.gc-site-nav > ul{
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 0;
	}

	.gc-site-nav li{
		list-style: none;
	}

	.gc-site-nav a{
		display: flex;
		min-height: 50px;
		align-items: center;
		min-width: 0;
		overflow-wrap: anywhere;
		padding: 12px 2px;
		border-bottom: 1px solid color-mix(in srgb, var(--gc-surface) 14%, transparent);
		font-size: 0.95rem;
	}

	.gc-has-menu .gc-site-nav.is-open{
		display: flex;
	}

	.gc-site-header__inner.is-menu-open{
		flex-wrap: wrap;
		padding-bottom: 20px;
	}

	.gc-site-header__inner.is-menu-open .gc-header-actions{
		display: flex;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 10px;
		margin-inline-start: 0;
		margin-top: 4px;
		padding-top: 16px;
		border-top: 1px solid color-mix(in srgb, var(--gc-surface) 16%, transparent);
	}

	.gc-site-header__inner.is-menu-open .gc-header-link{
		justify-content: center;
		min-height: 44px;
	}

	.gc-site-header__inner.is-menu-open .gc-header-cta{
		width: 100%;
		min-height: 48px;
	}

	

	

	.gc-site-header__inner.is-menu-open{
		display: flex;
	}

	.gc-site-nav a[aria-current="page"]{
		border-bottom: 2px solid var(--gc-accent);
		text-shadow: none;
	}

	.gc-site-footer{
		gap: 18px;
		padding: 24px var(--gc-gutter);
	}

	.gc-site-footer__primary{
		grid-template-columns: 1fr;
		align-items: start;
		gap: 16px;
	}

	.gc-footer-nav__list{
		justify-content: flex-start;
	}
}

@media (max-width: 760px) {
	.gc-site-header__inner{
		padding-right: var(--gc-gutter-mobile);
		padding-left: var(--gc-gutter-mobile);
	}

	.gc-header-link{
		display: none;
	}

	.gc-site-footer__bottom{
		display: block;
		padding-top: 14px;
	}
}

@media (max-width: 400px) {
	.gc-site-header__inner{
		gap: 8px;
	}

	.gc-brand{
		gap: 6px;
		min-width: 0;
	}

	.gc-brand__name{
		font-size: 0.76rem;
	}

	.gc-brand__mark{
		width: 30px;
		height: 30px;
		font-size: 0.62rem;
	}

	.gc-header-cta{
		padding-right: 9px;
		padding-left: 9px;
		font-size: 0.68rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html{
		scroll-behavior: auto;
	}

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

.gc-site-header{
	border-bottom: 1px solid color-mix(in srgb, var(--gc-navy) 75%, var(--gc-line));
}
.gc-brand{
	color: var(--gc-surface);
}
.gc-brand__mark{
	background: var(--gc-accent);
	color: var(--gc-ink);
}
.gc-site-nav a{
	color: color-mix(in srgb, var(--gc-surface) 82%, var(--gc-muted));
}
.gc-site-nav a:hover, .gc-site-nav a[aria-current="page"]{
	color: var(--gc-surface);
}

.gc-site-nav a[aria-current="page"]{
	border-bottom: 2px solid var(--gc-accent);
	text-shadow: 0 0 14px color-mix(in srgb, var(--gc-accent) 45%, transparent);
}
.gc-header-link{
	color: color-mix(in srgb, var(--gc-surface) 82%, var(--gc-muted));
}
.gc-site-header .gc-lang-switcher__link{
	color: color-mix(in srgb, var(--gc-surface) 82%, var(--gc-muted));
}
.gc-site-header .gc-lang-switcher__current{
	color: var(--gc-surface);
}
.gc-header-cta{
	border: 2px solid var(--gc-accent);
	background: var(--gc-accent);
	color: var(--gc-ink);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--gc-accent) 24%, transparent);
}
.gc-header-cta:hover, .gc-header-cta:focus-visible{
	background: var(--gc-surface);
	border-color: var(--gc-accent);
	color: var(--gc-ink);
}

/* ---------------------------------------------------------------- hero bands

   One contract for every hero on the site, replacing four near-duplicates
   (home band, archive tint box, guides-only dark band, unused page-hero):

     BAND  full-bleed. Owns background and bottom edge only. Never a grid.
     INNER the single inset point: max-width 1200, centred, own padding, and
           the only place a hero may declare a grid.

   The previous split put a grid on the band AND a second grid on its column,
   so the band's first column swallowed the column and the hero rendered in
   half the page width. One grid owner removes that class of bug entirely. */

/* Bleed bands: geometry is owned by components.css (same block as `.gc-block`),
   because a lower layer (gc-base) can never beat the layered `.gc-block`
   max-width. The component-layer rule below is the live one. */

.gc-bleed__inner{
	width: 100%;
	max-width: var(--gc-shell-width);
	margin-inline: auto;
	padding-inline: var(--gc-gutter);
}

/* Home band: dark, brand-coloured bottom edge. */
.gc-home-hero{
	position: relative;
	isolation: isolate;
	background-color: var(--gc-navy);
	background-image:
		linear-gradient(90deg, rgb(12 18 24 / .78) 0%, rgb(12 18 24 / .34) 58%, rgb(12 18 24 / .14) 100%),
		url('../img/hero-wave.svg');
	background-position: center;
	background-size: cover;
	border-bottom: 4px solid var(--gc-accent);
	color: var(--gc-surface);
}

.gc-home-hero h1{
	color: var(--gc-surface);
}

.gc-home-hero .gc-lede{
	color: color-mix(in srgb, var(--gc-surface) 82%, var(--gc-muted));
}

.gc-home-hero .gc-eyebrow{
	color: var(--gc-accent);
}

/* Home column: a balanced two-up composition, centred as one group so the hero
   reads as a unit instead of drifting to one side of the page. */
.gc-home-hero__inner{
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--gc-hero-gap);
	align-items: center;
	padding-block: 64px 72px;
}

.gc-hero__copy{
	min-width: 0;
	max-width: 680px;
}

.gc-hero__media{
	min-width: 0;
}

.gc-hero__media img{
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
}

/* Inner band: light surface, hairline edge, same rhythm as the home band. */
.gc-page-hero-band{
	background: var(--gc-surface);
	border-bottom: 1px solid var(--gc-line);
	color: var(--gc-ink);
}

.gc-page-intro{
	min-width: 0;
}

@media (max-width: 900px) {
	.gc-home-hero__inner{
		grid-template-columns: 1fr;
		gap: 32px;
		padding-block: 48px 52px;
	}
	.gc-hero__copy{
		max-width: none;
	}
	.gc-hero__media{
		max-width: 420px;
	}
}

@media (max-width: 560px) {
	.gc-home-hero__inner{
		gap: 24px;
		padding-block: 40px 44px;
	}
	.gc-home-hero .gc-eyebrow{
		font-size: 0.68rem;
		line-height: 1.5;
	}
	.gc-home-hero .gc-lede{
		font-size: 0.95rem;
	}
	.gc-home-hero .gc-actions .gc-button{
		flex: 1 1 100%;
		justify-content: center;
	}
}

}

/* Advertising: consent notice and ad containers. Reserved space keeps layout
   stable when an ad does not fill, and the label keeps the unit from being
   mistaken for site content. */
.gc-consent{
	position: fixed;
	inset: auto 0 0;
	z-index: 60;
	padding: 1rem;
	background: var(--gc-surface, #fff);
	border-top: 1px solid var(--gc-line, #e0d9c6);
	box-shadow: 0 -8px 24px rgba( 17, 36, 51, .08 );
}

.gc-consent[hidden]{
	display: none;
}

.gc-consent__inner{
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	align-items: center;
	justify-content: space-between;
	max-width: var(--gc-measure, 72ch );
	margin: 0 auto;
}

.gc-consent__text{
	margin: 0;
	font-size: .95rem;
}

.gc-consent__actions{
	display: flex;
	gap: .5rem;
}

.gc-ad{
	display: block;
	min-height: 90px;
	margin: 1.5rem 0;
	overflow: hidden;
}

.gc-ad__label{
	display: block;
	margin-bottom: .25rem;
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gc-muted, #6c8094);
}