/**
 * 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 master 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 {
	--ww-ink: #0d1f2d;
	--ww-navy: #12293f;
	--ww-navy-2: #1d3d5c;
	--ww-body-copy: #43565f;
	--ww-muted: #4a5d68;
	--ww-faint: #6b7f89;
	--ww-accent: #ffb020;
	--ww-accent-soft: #ffd97a;
	--ww-accent-deep: #8a4e0b;
	--ww-paper: #f6f8fa;
	--ww-surface: #ffffff;
	--ww-tint: #eef2f6;
	--ww-line: #dbe3ea;
	--ww-positive: #1e7f4f;
	--ww-radius-md: 12px;
	--ww-shell-width: 1200px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ww-block--hero.ww-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(--ww-accent);
}

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

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

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

/* ---------- one shell, one rhythm ----------

   Header, bands, cards and footer share one 1136px content column with
   the same 32px gutters at every breakpoint. Page heroes are full-bleed
   bands whose inner copy aligns to the same left edge. */

.ww-page-hero,
.ww-archive-intro,
[data-ww-page-key="ww-guides"] .ww-page-intro {
	padding-inline: max(var(--ww-gutter-mobile), calc(50vw - 568px));
}

.ww-page-hero {
	margin: 0 0 48px calc(50% - 50vw);
	background: var(--ww-tint);
	border-bottom: 1px solid var(--ww-line);
	text-align: left;
}

.ww-page-hero__inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 52px 0 54px;
}

.ww-page-hero h1 {
	margin: 10px 0 0;
	max-width: 820px;
}

.ww-page-hero .ww-lede {
	margin: 14px 0 0;
	max-width: 680px;
}

.ww-page-hero .ww-breadcrumbs {
	justify-content: flex-start;
}

.ww-shell > .ww-grid,
.ww-shell > .ww-pagination,
.ww-shell > .ww-list-meta,
.ww-shell > .ww-empty,
.ww-shell > .ww-calculator-selector,
.ww-shell > .ww-topic-nav,
.ww-shell > .ww-calculator-category-nav,
.ww-calculator-directory > .ww-grid,
.ww-calculator-directory > .ww-topic-nav,
.ww-calculator-directory > .ww-pagination {
	padding-right: var(--ww-gutter);
	padding-left: var(--ww-gutter);
}

/* ---------- section headings ---------- */

.ww-eyebrow,
.ww-card__label {
	color: var(--ww-accent-deep);
	letter-spacing: 0.1em;
}

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

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

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

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

.ww-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--ww-line);
	border-radius: 18px;
	background: var(--ww-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ww-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(--ww-accent);
	color: #cfdae2;
	font-size: 0.85rem;
}

.ww-site-footer__primary {
	max-width: var(--ww-shell-width);
	margin: 0 auto;
	padding-right: var(--ww-gutter);
	padding-left: var(--ww-gutter);
}

.ww-site-footer__copy > p {
	color: #aebdc7;
	max-width: 44ch;
}

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

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

.ww-footer-nav__title {
	color: #ffffff;
	letter-spacing: 0.1em;
}

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

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

.ww-site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	max-width: var(--ww-shell-width);
	margin: 0 auto;
	padding-right: var(--ww-gutter);
	padding-left: var(--ww-gutter);
	padding-top: 18px;
	border-top: 1px solid rgb(255 255 255 / 0.15);
}

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


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

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

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

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

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

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

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

.ww-status-pill--watch {
	background: rgb(255 176 32 / 0.16);
	border-color: var(--ww-accent-deep);
	color: var(--ww-ink);
}

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

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

.ww-calculator-content table thead th {
	background: var(--ww-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. */

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 560px) {
	.ww-footer-nav__list {
		columns: 1;
	}
}
/* ---------- hidden-until-focus controls ---------- */

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

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

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

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

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

@media (max-width: 1040px) {
	.ww-grid--cards,
	.ww-grid--guides {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ww-home-hero__inner {
		grid-template-columns: 1fr;
	}
}

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

	.ww-site-footer {
		padding-right: var(--ww-gutter-mobile);
		padding-left: var(--ww-gutter-mobile);
	}

	.ww-site-footer__primary,
	.ww-site-footer__bottom {
		padding-right: 0;
		padding-left: 0;
	}
}

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

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

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

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

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

.ww-shell--wide,
.ww-shell--content,
.ww-shell--reading {
	padding-right: var(--ww-gutter);
	padding-left: var(--ww-gutter);
}

@media (max-width: 760px) {
	.ww-shell--wide,
	.ww-shell--content,
	.ww-shell--reading,
	.ww-grid,
	.ww-methodology-page,
	.ww-content-narrow,
	.ww-auth-layout,
	.ww-page-shell {
		padding-right: var(--ww-gutter-mobile);
		padding-left: var(--ww-gutter-mobile);
	}

	.ww-block--section .ww-home-grid {
		padding-right: 0;
		padding-left: 0;
	}
}