/**
 * Industry pack: Generators — complete site design system.
 *
 * This file is the entire generator visual identity. It is intentionally
 * UNLAYERED so it wins over the layered base tokens and components
 * without touching any template markup.
 *
 * Design language
 * - Steel-navy surfaces, cool paper pages, safety-amber reserved for
 *   markers, focus, and large display accents — never for small text
 *   on light backgrounds.
 * - Buttons pair light-on-dark exclusively, so labels always clear
 *   7:1 contrast in every state, including :visited.
 * - Cards carry an amber caution-stripe top bar; the footer is a
 *   full-bleed navy panel with the disclosure pinned to the bottom.
 */

:root{
	--gc-ink: #0d1f2d;
	--gc-navy: #12293f;
	--gc-navy-2: #1d3d5c;
	--gc-body-copy: #43565f;
	--gc-muted: #4a5d68;
	--gc-faint: #6b7f89;
	--gc-accent: #ffb020;
	--gc-accent-soft: #ffd97a;
	--gc-accent-deep: #8a4e0b;
	--gc-paper: #f6f8fa;
	--gc-surface: #ffffff;
	--gc-tint: #eef2f6;
	--gc-line: #dbe3ea;
	--gc-positive: #1e7f4f;
	--gc-radius-md: 12px;
	--gc-shell-width: 1200px;
}

/* ---------- the one layout contract ----------

   Root cause of every "crooked" band on this site: the same content
   column was defined FOUR times and the definitions disagreed.

     1. header.php's critical <style> pinned `max-width:1200px` on the
        footer BAND. That block is unlayered, so it beat every layered
        theme rule: the band became a 1200px box pinned to the left edge
        instead of a full-bleed band, and its inner column had no spare
        width for `margin:auto` to distribute. Result: the footer sat at
        x=32 while the page column started at x=392.
     2. base.css treated the footer as a ONE-layer band (band carries the
        side padding); the skin treated it as a TWO-layer band (band full
        width, inner carries the padding). Each file was quietly
        compensating for the other.
     3. components.css gave `.gc-grid` / `.gc-block--section` their own
        gutters on top of the parent shell's gutters, so cards sat 32px
        inside the hero copy.
     4. Three different formulas decided where the column starts
        (calc(50vw - 600px), calc(50vw - 568px), a bare 32px padding).

   One column, declared once:

     BAND    spans the viewport (100vw + negative-margin escape) and owns
             no horizontal padding. Its inner element is the column.
     COLUMN  is the only inset point: max-width 1200, centered, 32px
             gutters (20px under 760px). Content edges therefore always
             land on 50vw - 568px, capped at the gutter.
     NESTED  content inside a column adds nothing back.

   Do not add width / max-width / margin-inline / padding-inline for these
   selectors anywhere else. If a band ends up nested inside a shell, move
   it out of the shell in the template instead of compensating here. */

/* BAND: full-bleed, zero horizontal padding. Bands are always top-level
   children of main (the templates never nest a band inside a shell), so
   width:100% + no max-width + no inline margin spans the viewport exactly,
   with no 100vw escape and no scrollbar-width overshoot.
   This MUST be declared here, unlayered: the layered `.gc-block` rule in
   components.css sets max-width:1200, and any layered rule loses to it.
   When the hero selectors lived only in base (a lower layer), every inner
   hero shrank to a centred 1200px box -- the "hero not full width" defect.
   The footer keeps its classic escape because it is not a .gc-block. */
.gc-home-hero, section.gc-page-hero-band{
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
	padding-right: 0;
	padding-left: 0;
	border-radius: 0;
}
.gc-site-footer{
	width: 100vw;
	max-width: none;
	margin-right: 0;
	margin-left: calc(50% - 50vw);
	padding-right: 0;
	padding-left: 0;
}

/* COLUMN: the single inset point. Every layout wrapper is listed here so a
   top-level instance (no shell above it) still lands on the column.
   `.gc-block--bleed` bands are excluded on purpose: a band must span the
   viewport (the BAND rule owns its geometry), and a column max-width here
   would shrink the band back to the content box.
   NOTE: this list uses plain classes at (0,1,0). The NESTED reset below uses
   `:is()` at (0,2,0) precisely so it can beat this list. Do not downgrade
   NESTED to `:where()` -- that was the dead-code regression that re-inset
   every nested shell by a second gutter. */
.gc-site-header__inner, .gc-bleed__inner, .gc-site-footer__primary, .gc-site-footer__bottom, .gc-shell--wide, .gc-shell--content, .gc-shell--reading, .gc-grid, .gc-block--section:not(.gc-block--bleed), .gc-empty, .gc-disclosure, .gc-pagination, .gc-list-meta, .gc-topic-nav, .gc-calculator-category-nav, .gc-article-figure, .gc-methodology-page, .gc-content-narrow, .gc-auth-layout, .gc-calculator-content, .gc-calculator-directory, .gc-calculator-shell{
	width: 100%;
	max-width: var(--gc-shell-width);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--gc-gutter);
	padding-left: var(--gc-gutter);
}

/* NESTED: inside a column, layout wrappers must not create a second inset.
   `:is()` (not `:where()`) is load-bearing here: it inherits the highest
   specificity of its arguments, so each side is (0,1,0) and the full
   selector is (0,2,0). That is the ONLY way this rule can beat the COLUMN
   rule above, which lives in the same unlayered file at (0,1,0). A `:where()`
   version has (0,0,0), loses to COLUMN by specificity, and silently becomes
   dead code -- every nested shell then keeps a second 32px inset, which is
   exactly what shrank the Related grid, compressed the calculator container
   below its two-column breakpoint, and ate the section rhythm. The skin is
   still unlayered, so this also keeps beating any layered component rule.
   NOTE: comma-separated selectors must never contain an empty entry (`, ,`):
   one empty entry invalidates the entire rule and the browser silently drops
   every nested de-inset on the site. */
:is(.gc-shell--wide, .gc-shell--content, .gc-calculator-directory, .gc-calculator-shell, .gc-block--section, .gc-home-main) > :is(.gc-grid, .gc-block--section, .gc-empty, .gc-disclosure, .gc-pagination, .gc-list-meta, .gc-topic-nav, .gc-calculator-category-nav, .gc-article-figure, .gc-methodology-page, .gc-content-narrow, .gc-auth-layout, .gc-calculator-content, .gc-calculator-directory, .gc-calculator-shell, .gc-calculator-relations, .gc-calculator-education, .gc-calculator-disclaimer){
	max-width: none;
	margin-right: 0;
	margin-left: 0;
	padding-right: 0;
	padding-left: 0;
}

/* Detail rhythm (unlayered follow-ups, so they win over the layered base
   without touching components.css): after the NESTED reset levels a section
   to the shell, these restore its own vertical spacing only. Horizontal
   padding stays zero so Related/education/disclaimer/actions all start and
   end on the same column edge as the calculator tool card. */
.gc-calculator-shell > .gc-calculator-education{
	margin-top: 44px;
}
.gc-calculator-shell > .gc-calculator-relations{
	margin-top: 44px;
	padding-top: 44px;
}
.gc-calculator-shell > .gc-calculator-disclaimer{
	margin-top: 36px;
	padding-bottom: 40px;
}
.gc-calculator-shell > .gc-calculator-actions{
	margin-top: 32px;
}

@media (max-width: 760px) {
	.gc-site-header__inner, .gc-bleed__inner, .gc-site-footer__primary, .gc-site-footer__bottom, .gc-shell--wide, .gc-shell--content, .gc-shell--reading, .gc-calculator-directory, .gc-calculator-shell{
		padding-right: var(--gc-gutter-mobile);
		padding-left: var(--gc-gutter-mobile);
	}
}

/* ---------- global rhythm ---------- */

body{
	background: var(--gc-paper);
}

a{
	color: var(--gc-accent-deep);
	text-underline-offset: 2px;
}

a:hover{
	color: var(--gc-navy);
}

/* ---------- buttons: never text-on-amber ---------- */

.gc-button{
	min-height: 50px;
	border-radius: 14px;
	padding: 0 24px;
	font-size: 0.9rem;
}

.gc-button-primary, .gc-button-primary:visited, a.gc-button-primary, a.gc-button-primary:visited{
	border: 2px solid var(--gc-navy);
	background: var(--gc-navy);
	color: #ffffff;
	box-shadow: 0 10px 24px rgb(18 41 63 / 0.25);
}

.gc-button-primary:hover, .gc-button-primary:focus-visible, a.gc-button-primary:hover{
	border-color: var(--gc-navy-2);
	background: var(--gc-navy-2);
	color: #ffffff;
}

.gc-button-secondary{
	border: 2px solid var(--gc-line);
	background: var(--gc-surface);
	color: var(--gc-navy);
}

.gc-button-secondary:hover{
	border-color: var(--gc-navy);
	color: var(--gc-navy);
}

/* ---------- header: steel-navy masthead ---------- */

.gc-site-header{
	background: var(--gc-navy);
	border-bottom: 3px solid var(--gc-accent);
}

.gc-brand, .gc-brand__name{
	color: #ffffff;
}

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

.gc-site-nav a{
	color: rgb(255 255 255 / 0.82);
	font-weight: 700;
}

.gc-site-nav a:hover, .gc-site-nav a[aria-current="page"]{
	color: #ffffff;
}

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

.gc-header-link{
	color: rgb(255 255 255 / 0.82);
}

.gc-header-link:hover{
	color: #ffffff;
}

.gc-header-cta, .gc-header-cta:visited{
	border: 2px solid var(--gc-accent);
	border-radius: 999px;
	background: var(--gc-accent);
	color: var(--gc-navy);
	box-shadow: none;
}

.gc-header-cta:hover, .gc-header-cta:focus-visible{
	background: var(--gc-accent-soft);
	border-color: var(--gc-accent-soft);
	color: var(--gc-navy);
}

.gc-site-header .gc-lang-switcher__link{
	color: rgb(255 255 255 / 0.65);
}

.gc-site-header .gc-lang-switcher__current{
	color: #ffffff;
}

.gc-menu-toggle{
	border: 1px solid rgb(255 255 255 / 0.3);
	background: transparent;
	color: #ffffff;
}

@media (hover: hover) {
	.gc-menu-toggle:hover{
		border-color: var(--gc-accent);
		background: rgb(255 255 255 / 0.08);
		color: #ffffff;
	}
}

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

@media (max-width: 1040px) {
	html.gc-has-menu .gc-menu-toggle{
		display: inline-flex;
	}

	.gc-has-menu .gc-site-nav{
		border-bottom: 1px solid rgb(255 255 255 / 0.12);
	}

	.gc-site-header__inner.is-menu-open .gc-header-actions{
		border-top: 1px solid rgb(255 255 255 / 0.12);
	}

	.gc-has-menu .gc-site-nav a{
		color: #ffffff;
	}
}

/* ---------- hero: steel gradient with caution glow ---------- */

.gc-home-hero{
	background-color: #12293f;
	background-image:
		radial-gradient(640px 420px at 82% 18%, rgb(255 176 32 / 0.28), transparent 65%),
		repeating-linear-gradient(
			-45deg,
			rgb(255 176 32 / 0.05) 0 12px,
			transparent 12px 24px
		),
		url('../img/hero-wave.svg');
	background-position: center;
	background-size: cover;
	border-bottom: 4px solid var(--gc-accent);
}

.gc-home-hero h1{
	color: #ffffff;
	letter-spacing: -0.02em;
}

.gc-home-hero .gc-lede{
	color: rgb(255 255 255 / 0.85);
}

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

/* Inner hero band: daylight surface with a hairline edge, so every page
   opens with the same shape as the home band, just on the light surface.
   NOTE: body eyebrows inside this band intentionally stay --gc-accent-deep
   (the rule above) because this surface is light; only the dark home band
   may use the bright accent. */

.gc-page-hero-band{
	background: #ffffff;
	border-bottom: 1px solid var(--gc-line);
}

.gc-page-hero-band .gc-breadcrumbs{
	margin-bottom: 18px;
}

/* Section headings share the column rhythm; nothing here sets geometry. */

/* Eyebrow color contract (two ramps, do not merge): body eyebrows sit on
   light surfaces, so they use --gc-accent-deep for text-on-light contrast.
   Inside .gc-home-hero the surface is dark navy, so the single hero override
   below reverts to the bright --gc-accent for light-on-dark contrast. Both
   rules must stay; deleting either breaks contrast on its own surface. */
.gc-eyebrow, .gc-card__label{
	color: var(--gc-accent-deep);
	letter-spacing: 0.1em;
}

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

.gc-section-heading h2{
	letter-spacing: -0.015em;
}

.gc-card__action, .gc-text-link{
	color: var(--gc-accent-deep);
	font-size: 0.85rem;
}

/* ---------- cards: caution-stripe top bar ---------- */

.gc-card{
	position: relative;
	overflow: hidden;
	border: 1px solid var(--gc-line);
	border-radius: 18px;
	background: var(--gc-surface);
	box-shadow: 0 2px 10px rgb(18 41 63 / 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.gc-card::before{
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--gc-accent), var(--gc-accent-soft) 55%, var(--gc-navy-2));
}

.gc-card:hover{
	transform: translateY(-4px);
	border-color: var(--gc-navy);
	box-shadow: 0 16px 34px rgb(18 41 63 / 0.14);
}

.gc-card__title{
	font-size: 1.12rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.gc-card__title a{
	color: var(--gc-navy);
	text-decoration: none;
}

.gc-card__title a:hover{
	color: var(--gc-navy-2);
	text-decoration: underline;
	text-decoration-color: var(--gc-accent);
	text-decoration-thickness: 3px;
}

.gc-card__body{
	color: var(--gc-body-copy);
}

/* ---------- category nav: pill rail ---------- */

.gc-topic-nav, .gc-calculator-category-nav{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
}

.gc-topic-nav a, .gc-calculator-category-nav a{
	border: 1px solid var(--gc-line);
	border-radius: 999px;
	background: var(--gc-surface);
	padding: 9px 16px;
	color: var(--gc-body-copy);
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
}

.gc-topic-nav a:hover, .gc-calculator-category-nav a:hover{
	border-color: var(--gc-navy);
	color: var(--gc-navy);
}

.gc-topic-nav a.is-current, .gc-calculator-category-nav a.is-current{
	border-color: var(--gc-navy);
	background: var(--gc-navy);
	color: #ffffff;
}

/* ---------- home section spacing ---------- */

.gc-home-main .gc-block--section{
	padding-top: 64px;
}

.gc-home-grid{
	gap: 24px;
}

/* ---------- footer: navy panel with amber rule ---------- */

.gc-site-footer{
	padding: 48px 0 32px;
	background-color: #12293f;
	background-image: linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(0 0 0 / 0.22));
	border-top: 4px solid var(--gc-accent);
	color: #cfdae2;
	font-size: 0.85rem;
}

.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 > p{
	color: #aebdc7;
	max-width: 44ch;
}

.gc-site-footer__brand{
	color: #ffffff;
}

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



.gc-footer-nav a{
	color: #d7e3e8;
	min-height: 40px;
	font-weight: 600;
}

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

.gc-site-footer__bottom{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-top: 18px;
	border-top: 1px solid rgb(255 255 255 / 0.15);
}

.gc-site-footer__disclosure{
	color: #aebdc7;
}


/* ---------- quiet microcopy: 4.5:1 on paper ---------- */

.gc-calculator-disclaimer__text, .gc-methodology-note{
	color: var(--gc-muted);
}

.gc-site-footer__copy > p, .gc-site-footer__disclosure{
	color: #aebdc7;
}

/* ---------- calculator tool surface ---------- */

.calculator-page{
	--calculator-line: var(--gc-line);
	--calculator-surface: var(--gc-surface);
	--calculator-soft: var(--gc-tint);
	--calculator-accent: var(--gc-accent-deep);
	--calculator-accent-dark: var(--gc-navy);
	--calculator-on-accent: #ffffff;
}

.calculator-page .calculator-output-value{
	font-variant-numeric: tabular-nums;
}

/* ---------- status pills: caution amber only as fill ---------- */



/* ---------- verdicts sit on a tinted panel ---------- */

.gc-calculator-content table tbody tr:nth-child(even){
	background: var(--gc-tint);
}

.gc-calculator-content table thead th{
	background: var(--gc-navy);
	color: #ffffff;
}

/* ---------- text on light surfaces ----------

   WordPress prints `a:where(:not(.wp-element-button)) { color:
   var(--wp--preset--color--accent) }` UNLAYERED, and `:where()` adds no
   specificity. Every theme stylesheet is layered, so that single global
   rule beats all of them and flattens every link on the site to the
   bright accent — unreadable on paper (1.8:1). theme.json now points the
   link colour at accent-deep; the rules below cover the components that
   paint their own colour from the raw accent token. */

.gc-pagination .page-numbers, .gc-pagination .page-numbers:visited{
	color: var(--gc-navy);
}

.gc-pagination .page-numbers.current, .gc-pagination .page-numbers:hover{
	border-color: var(--gc-accent);
	background: var(--gc-tint);
	color: var(--gc-navy);
}

.gc-methodology-step__number{
	color: var(--gc-accent-deep);
}

.calculator-page .calculator-panel-title, .calculator-page .calculator-pdf-lead-kicker{
	color: var(--gc-accent-deep);
}

.calculator-page .calculator-output[data-output-visibility="primary"] .calculator-output-value{
	color: var(--gc-navy);
}

.calculator-page .calculator-result-details > summary, .calculator-page .calculator-component > h2, .calculator-page .calculator-note-toggle{
	color: var(--gc-navy);
}

.calculator-page .calculator-formula-toggle, .calculator-page .calculator-feedback-toggle{
	color: var(--gc-navy);
}

.calculator-page .calculator-capsule input:checked + span{
	border-color: var(--gc-navy);
	background: var(--gc-navy);
	color: #ffffff;
}

.calculator-page .calculator-formula-band{
	background: var(--gc-tint);
}

/* ---------- footer navigation: columns, not a wrapped strip ---------- */

.gc-footer-nav__list{
	display: block;
	columns: 3;
	column-gap: 32px;
}

.gc-footer-nav__list li{
	break-inside: avoid;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1040px) {
	.gc-footer-nav__list{
		columns: 2;
	}
}

@media (max-width: 560px) {
	.gc-footer-nav__list{
		columns: 1;
	}

	/* Inline links cannot spill past the 20px mobile gutter. */
	.gc-footer-nav a{
		max-width: 100%;
		overflow-wrap: anywhere;
	}
}
/* ---------- hidden-until-focus controls ---------- */

.gc-skip-link{
	color: #ffffff;
}

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

/* ---------- focus visibility ---------- */

a:focus-visible, button:focus-visible{
	outline: 3px solid var(--gc-accent);
	outline-offset: 2px;
}

/* ---------- responsive ---------- */

@media (max-width: 1040px) {
	.gc-grid--cards, .gc-grid--guides{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* NOTE: no .gc-home-hero__inner rule here on purpose. The hero collapses
	   at 900px in base.css; a 1040px collapse would squeeze the two-up hero
	   across the whole 900-1040 tablet band into an orphan breakpoint. */
}

@media (max-width: 760px) {
	.gc-footer-nav__list{
		justify-content: flex-start;
	}
}

@media (max-width: 560px) {
	.gc-grid--cards, .gc-grid--guides{
		grid-template-columns: 1fr;
	}

	.gc-home-hero h1{
		font-size: 2.1rem;
	}

	.gc-topic-nav, .gc-calculator-category-nav{
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-right: calc(-1 * var(--gc-gutter-mobile));
		margin-left: calc(-1 * var(--gc-gutter-mobile));
		padding-right: var(--gc-gutter-mobile);
		padding-left: var(--gc-gutter-mobile);
		padding-bottom: 8px;
		scrollbar-width: none;
	}

	.gc-topic-nav::-webkit-scrollbar, .gc-calculator-category-nav::-webkit-scrollbar{
		display: none;
	}
}

/* ---------- one gutter everywhere ---------- */

/* Geometry lives in the contract; nothing to restate for shells here. */