/* FlowCalc v2 component overrides — applied after ww-theme / ww-components /
   ww-calculator. Blueprint language: hairline borders, teal data accents,
   amber reserved for primary actions and key figures, mono for numbers. */

/* ---------- type ---------- */
body {
	font-family: var(--ww-font);
	background:
		radial-gradient(1200px 500px at 50% -8%, rgba(14, 124, 140, 0.06), transparent 65%),
		var(--ww-paper);
}
h1, h2, h3,
.ww-card__title,
.ww-section-heading h2,
.ww-page-intro h1,
.ww-home-hero h1 {
	font-family: var(--ww-display);
	letter-spacing: -0.015em;
}
code, kbd, pre, samp,
.calculator-page .calculator-output-value,
.calculator-page .calculator-formula-band,
.ww-formula,
.ww-stat__number {
	font-family: var(--ww-mono);
	font-variant-numeric: tabular-nums;
}

/* ---------- eyebrow / lede ---------- */
.ww-eyebrow {
	font-family: var(--ww-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ww-teal);
}
.ww-home-hero .ww-eyebrow,
[data-ww-page-key="ww-guides"] .ww-page-intro .ww-eyebrow {
	color: var(--ww-amber);
}
.ww-lede {
	font-size: 1.06rem;
	line-height: 1.65;
	max-width: 62ch;
}

/* ---------- hero: deep-navy blueprint ---------- */
.ww-block--hero.ww-home-hero {
	background:
		radial-gradient(1000px 420px at 82% 12%, rgba(14, 124, 140, 0.28), transparent 62%),
		radial-gradient(700px 320px at 8% 88%, rgba(245, 158, 11, 0.1), transparent 60%),
		linear-gradient(180deg, #10333f 0%, #0e2a38 58%, #0c2531 100%);
	border-bottom: 3px solid var(--ww-amber);
}
.ww-home-hero h1 {
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	line-height: 1.08;
	max-width: 18ch;
}
.ww-home-hero .ww-lede {
	color: #cfd9de;
}
.ww-hero__media {
	position: relative;
}
.ww-hero__media img {
	border-radius: var(--ww-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: var(--ww-shadow-lg);
	background: #0f303d;
}

/* hero proof strip: 32 tools · 6 families · 8 guides · tested */
.ww-hero-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 1.4rem;
	padding: 0;
	list-style: none;
	font-family: var(--ww-mono);
	font-size: 0.76rem;
	color: #a9bcc4;
}
.ww-hero-proof li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.ww-hero-proof li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ww-amber);
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}

/* ---------- buttons ---------- */
.ww-button {
	border-radius: 8px;
	font-weight: 700;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.ww-button-primary {
	background: var(--ww-amber) !important;
	border-color: var(--ww-amber) !important;
	color: #14202a !important;
	box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}
.ww-button-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(245, 158, 11, 0.42);
}
.ww-button-secondary {
	border: 1px solid var(--ww-line);
	background: var(--ww-surface);
	color: var(--ww-navy);
}
.ww-home-hero .ww-button-secondary {
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

/* ---------- cards ---------- */
.ww-card,
.ww-grid--cards .ww-card {
	border: 1px solid var(--ww-line);
	border-radius: var(--ww-radius-md);
	box-shadow: var(--ww-shadow-sm);
	transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
	overflow: hidden;
}
.ww-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ww-shadow-md);
	border-color: #a9c6cd;
}
.ww-card__label {
	font-family: var(--ww-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ww-teal);
}
.ww-card__meta {
	font-family: var(--ww-mono);
	font-size: 0.74rem;
	color: var(--ww-faint);
}

/* category color tab per family */
.ww-card--cat-control-valves { border-top: 3px solid #0e7c8c; }
.ww-card--cat-piping-head-loss { border-top: 3px solid #2563eb; }
.ww-card--cat-pumps { border-top: 3px solid #7c3aed; }
.ww-card--cat-flow-metering { border-top: 3px solid #059669; }
.ww-card--cat-tanks-level { border-top: 3px solid #d97706; }
.ww-card--cat-control-loops { border-top: 3px solid #db2777; }

/* ---------- calculator tool ---------- */
.calculator-page .calculator-tool-shell {
	border-radius: var(--ww-radius-lg);
	box-shadow: var(--ww-shadow-md);
}
.calculator-page .calculator-tool-panel--inputs {
	background:
		linear-gradient(180deg, rgba(14, 124, 140, 0.05), transparent 220px),
		var(--ww-surface);
}
.calculator-page .calculator-panel-title {
	font-family: var(--ww-display);
	letter-spacing: 0;
}
.calculator-page .calculator-field input:focus-visible,
.calculator-page .calculator-field select:focus-visible {
	outline-color: rgba(14, 124, 140, 0.35);
	border-color: var(--ww-teal);
}
/* (primary-card + formula-band rules relocated to ww-calculator.css R11: single owner) */
/* ---------- guide article ---------- */
.single-post .ww-content-narrow h2,
.page .ww-content-narrow h2 {
	font-family: var(--ww-display);
}
.ww-content-narrow .ww-lede {
	border-left: 3px solid var(--ww-amber);
	padding-left: 1rem;
}

/* ---------- footer ---------- */
.ww-site-footer {
	background: #0c2531;
	color: #c3cfd5;
}
.ww-site-footer a {
	color: #e8eff2;
}
.ww-site-footer .ww-site-footer__disclosure {
	color: #93a5ad;
}

/* ---------- header ---------- */
.ww-site-header {
	background: var(--ww-header-surface);
	backdrop-filter: blur(8px);
}

/* ---------- category nav pills ---------- */
.ww-calculator-category-nav,
.ww-category-nav,
.ww-topic-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.ww-calculator-category-nav a,
.ww-category-nav a,
.ww-topic-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	border: 1px solid var(--ww-line);
	border-radius: 999px;
	background: var(--ww-surface);
	color: var(--ww-navy);
	font-weight: 600;
	font-size: 0.86rem;
	text-decoration: none;
	box-shadow: var(--ww-shadow-sm);
	transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.ww-calculator-category-nav a:hover,
.ww-category-nav a:hover,
.ww-topic-nav a:hover {
	border-color: var(--ww-teal);
	transform: translateY(-1px);
	box-shadow: var(--ww-shadow-md);
}
.ww-calculator-category-nav a.is-current,
.ww-category-nav a.is-current,
.ww-topic-nav a.is-current {
	background: var(--ww-navy);
	border-color: var(--ww-navy);
	color: #fff;
}
.ww-calculator-category-nav a img,
.ww-category-nav a img,
.ww-topic-nav a img {
	width: 22px;
	height: 22px;
}
.ww-calculator-category-nav a.is-current img,
.ww-category-nav a.is-current img,
.ww-topic-nav a.is-current img {
	filter: brightness(0) invert(1);
}

/* ---------- guide cards ---------- */
.ww-home-guide-row {
	border: 1px solid var(--ww-line);
	border-radius: var(--ww-radius-md);
	background: var(--ww-surface);
	box-shadow: var(--ww-shadow-sm);
	padding: 1.1rem 1.25rem;
}
.ww-home-guide-row:hover {
	box-shadow: var(--ww-shadow-md);
	border-color: #a9c6cd;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.ww-home-hero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.ww-hero__media {
		max-width: 560px;
	}
}

/* ---------- GLOBAL UNIFICATION v3: single button/card/intro/footer system ---------- */
.ww-button, .ww-header-cta, .calculator-page .calculator-step-button--next, .calculator-page .calculator-tab.is-active {
	border-radius: 8px !important;
	font-weight: 700 !important;
}
.ww-button-primary, .ww-header-cta {
	background: var(--ww-amber) !important; border-color: var(--ww-amber) !important; color: #14202a !important;
	box-shadow: 0 6px 18px rgba(245,158,11,.35);
}
.ww-intro, .ww-intro--navy, .ww-intro--dark, .ww-tool-header, .ww-guide-intro, .ww-article-intro, .ww-archive-intro {
	background: linear-gradient(180deg,#10333f,#0e2a38) !important; color: #eef3f5 !important;
	border-bottom: 3px solid var(--ww-amber) !important;
}
.ww-intro h1, .ww-intro .ww-lede, .ww-tool-header h1, .ww-guide-intro h1 { color: #fff !important; }
.ww-intro .ww-eyebrow { color: var(--ww-amber) !important; }
.ww-page-intro__inner { max-width: 1000px; margin: 0 auto; padding: 56px 32px 64px; text-align: center; }
.ww-page-intro__inner .ww-page-intro__copy { max-width: 760px; margin: 0 auto; }
.ww-page-intro__media img, .ww-detail-hero__media img { border-radius: 12px; border: 1px solid rgba(255,255,255,.16); object-fit: cover; }
.ww-site-footer { width: 100% !important; max-width: none !important; }
.ww-calculator-category-nav a img { width: 22px; height: 22px; flex: none; }
.ww-pagination .page-numbers.current, .pagination .page-numbers.current { background: var(--ww-navy) !important; border-color: var(--ww-navy) !important; }

/* ---------- primary nav + mega menu (single source) ---------- */
.ww-site-nav .ww-nav-menu { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.ww-site-nav .ww-nav-item { list-style: none; position: relative; }
.ww-site-nav .ww-nav-item > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; font-size: .8rem; font-weight: 800; text-decoration: none; color: inherit; }
.ww-site-nav .ww-nav-item > a span[aria-hidden] { font-size: .65rem; }
.ww-site-nav .ww-mega { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; display: none; min-width: min(880px, 90vw); background: #0e2a38; border-top: 3px solid var(--ww-amber, #f59e0b); border-radius: 0 0 12px 12px; box-shadow: 0 24px 48px rgba(0,0,0,.35); z-index: 60; }
.ww-site-nav .ww-nav-has-mega:hover .ww-mega, .ww-site-nav .ww-nav-has-mega:focus-within .ww-mega { display: block; }
.ww-site-nav .ww-mega > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 28px; padding: 28px 32px 32px; }
.ww-site-nav .ww-mega p { margin: 0 0 10px; }
.ww-site-nav .ww-mega p a { color: var(--ww-amber, #f59e0b); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.ww-site-nav .ww-mega ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ww-site-nav .ww-mega ul a { display: block; padding: 6px 0; color: #e6e9ee; font-size: .82rem; font-weight: 600; text-decoration: none; }
.ww-site-nav .ww-mega ul a:hover { color: #fff; text-decoration: underline; }
/* ---------- hero media: natural photo ratio ---------- */
.ww-hero__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* ---------- home workspace band ---------- */
.ww-home-workspace { background: #0e2a38; border-top: 3px solid var(--ww-amber, #f59e0b); }
.ww-home-workspace .ww-bleed__inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 32px; align-items: center; padding-top: 44px; padding-bottom: 36px; }
.ww-home-workspace .ww-eyebrow { color: var(--ww-amber, #f59e0b); }
.ww-home-workspace h2 { color: #fff; }
.ww-home-workspace .ww-lede { color: #c8cdd5; }
/* ---------- mobile nav ---------- */
.ww-mobile-nav { flex-basis: 100%; }
.ww-mobile-nav summary { cursor: pointer; padding: 10px 0; font-size: .82rem; font-weight: 800; }
.ww-mobile-nav > div { display: grid; gap: 4px; padding: 4px 0 12px; }
.ww-mobile-nav > div a { font-weight: 800; padding: 6px 0; }

/* ===== v3 root-cause pass: one section rhythm, one button truth, one card language, full-bleed footer ===== */
/* R1 section rhythm (replaces stripped inline paddings): every content section breathes the same */
.ww-block--section { padding-top: 72px; }
.ww-home-principles { padding-top: 72px; padding-bottom: 72px; }
.ww-home-tools { padding-top: 8px; }
.ww-guides-section { padding-top: 64px; padding-bottom: 72px; }
.ww-section-heading { margin: 0 0 28px; }
.ww-block--section .ww-section-heading h2 { margin: 8px 0 0; }
/* R2 hero secondary: base class paints white bg; on dark hero that = white-on-white. Transparent truth here */
.ww-home-hero .ww-button-secondary { background: transparent !important; border: 1px solid rgba(255,255,255,.55) !important; color: #fff !important; }
.ww-home-hero .ww-button-secondary:hover { background: rgba(255,255,255,.12) !important; border-color: #fff !important; color: #fff !important; }
/* R3 method strip: kill joined-band (gap:0 + side hairlines) vs card-radius fight; separate cards win */
.ww-home-principles .ww-grid { gap: 20px; border: 0; }
.ww-home-principles .ww-home-principle { border: 1px solid var(--ww-line); border-radius: var(--ww-radius-md); background: var(--ww-surface); padding: 24px; box-shadow: var(--ww-shadow-sm); }
.ww-home-principles .ww-home-principle:first-child { border-left: 1px solid var(--ww-line); padding-left: 24px; }
.ww-home-principles .ww-home-principle:last-child { padding-right: 24px; }
.ww-home-principles .ww-home-principle:hover { border-color: #a9c6cd; box-shadow: var(--ww-shadow-md); transform: translateY(-2px); }
/* R4 guide rows: kill hairline-table language, same card language as calculators */
.ww-guides-section .ww-home-guide-list { border-top: 0; display: grid; gap: 16px; }
.ww-guides-section .ww-home-guide-row:first-child { border-top: 1px solid var(--ww-line); }
.ww-home-guide-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid var(--ww-line) !important; border-radius: var(--ww-radius-md); background: var(--ww-surface); box-shadow: var(--ww-shadow-sm); padding: 20px 24px !important; }
.ww-home-guide-row:hover { border-color: #a9c6cd; box-shadow: var(--ww-shadow-md); }
.ww-home-guide-row:last-child { border-bottom: 1px solid var(--ww-line); }
/* R5 footer: full-bleed band, content capped inside (critical CSS loses to stylesheets, so !important here) */
.ww-site-footer { width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; border-top: 3px solid var(--ww-amber, #f59e0b); background: #0c2531; display: grid; gap: 20px; padding: 40px 0 30px; }
.ww-site-footer__primary, .ww-site-footer__bottom { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 32px; }
/* R6 header nav: dark bar needs light links (inherit pulled body-ink onto navy = invisible) */
.ww-site-header { background: #0e2a38; }
.ww-site-header .ww-site-nav .ww-nav-item > a { color: #e6e9ee !important; }
.ww-site-header .ww-site-nav .ww-nav-item > a:hover { color: #fff !important; }
.ww-site-header .ww-header-link { color: #e6e9ee !important; }
.ww-site-header .ww-header-link:hover { color: #fff !important; }

/* ===== R7: mega full-band, intro full-bleed, single filter language ===== */
/* R7.1 mega: full-width band under header (anchoring to the li was the bug) */
.ww-site-header__inner { position: relative; }
.ww-site-nav, .ww-site-nav .ww-nav-item { position: static; }
.ww-site-nav .ww-mega { position: absolute; left: 0; right: 0; top: 100%; transform: none; min-width: 0; width: 100%; border-radius: 0; }
.ww-site-nav .ww-mega > div { max-width: 1200px; margin: 0 auto; }
/* R7.2 intro bands: full-bleed navy everywhere (boxed inset was the bug); typographic, no media */
/* Full-bleed intro bands, nested or top-level: scoped under .ww-site-main (0,2,0) to beat base .ww-shell .ww-page-intro; breakout math is exact for centered shells and identity otherwise. */
.ww-site-main .ww-page-intro, .ww-site-main .ww-tool-header, .ww-site-main .ww-guide-banner, .ww-site-main .ww-guide-banner .ww-guide-intro, .ww-site-main .ww-article-intro { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0; border-radius: 0; background: linear-gradient(180deg,#10333f,#0e2a38) !important; border-bottom: 3px solid var(--ww-amber,#f59e0b); color: #eef3f5; }
.ww-page-intro h1, .ww-tool-header h1, .ww-guide-intro h1, .ww-article-intro h1 { color: #fff; }
.ww-page-intro .ww-eyebrow, .ww-tool-header .ww-eyebrow, .ww-guide-intro .ww-eyebrow { color: var(--ww-amber,#f59e0b); }
.ww-page-intro .ww-lede, .ww-tool-header .ww-lede { color: #cfd9de; }
.ww-page-intro__inner { max-width: 1000px; margin: 0 auto; padding: 60px 32px 68px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ww-page-intro__media, .ww-detail-hero__media { display: none !important; }
.ww-tool-header__copy { display: flex; flex-direction: column; align-items: center; }
.ww-breadcrumbs { display: flex; justify-content: center; gap: 8px; font-size: .8rem; }
.ww-breadcrumbs a { color: #9fb6bf; }
/* R7.3 filter bar: one pill language (44px, 18px icon, navy active) */
.ww-list-meta { display: flex; align-items: center; gap: 10px; margin: 28px 0 18px; }
.ww-list-meta span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid var(--ww-line); border-radius: 999px; background: var(--ww-surface); font-family: var(--ww-mono); font-size: .74rem; font-weight: 600; color: var(--ww-navy); }
.ww-calculator-category-nav a, .ww-topic-nav a { min-height: 44px; }
.ww-calculator-category-nav a img, .ww-topic-nav a img { width: 18px; height: 18px; }
.ww-calculator-category-nav { margin-bottom: 32px; }
/* R7.4 intro bottom rhythm: full-bleed intros must carry the gap (followers have none) */
.ww-page-intro, .ww-tool-header, .ww-guide-banner .ww-guide-intro, .ww-article-intro { margin-bottom: 56px; }
/* R8 calculator learn (education) block: formula(tool) -> education -> disclaimer */
.ww-calculator-learn { padding: 40px 0 8px; }
.ww-calculator-learn h2 { margin: 8px 0 0; font-size: clamp(1.4rem,2vw,1.7rem); }
.ww-calculator-learn .ww-lede { margin: 12px 0 0; }
.ww-calculator-learn h3 { margin: 24px 0 10px; font-size: 1.02rem; }
.ww-calculator-learn ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--ww-body-copy); font-size: .95rem; line-height: 1.6; }
.ww-calculator-disclaimer { margin-top: 32px; border-left: 3px solid var(--ww-amber,#f59e0b); padding-left: 16px; color: var(--ww-muted); font-size: .86rem; }
/* R9 stacking truth: header (with mega) always above page content.
   Root cause: header had z-index auto, so the later-in-DOM hero painted over
   the mega panel; the panel's own z-index is trapped inside the header's
   backdrop-filter stacking context and can never escape it. */
.ww-site-header { position: relative; z-index: 200; }
.ww-site-main { position: relative; z-index: 1; }
/* R10 home six: 3-col grid shows all cards on every breakpoint (old rule hid n+4 on mobile) */
.ww-home-tools .ww-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 900px) { .ww-home-tools .ww-home-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .ww-home-tools .ww-home-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .ww-home-tools .ww-home-grid .ww-card:nth-child(n + 4) { display: flex; } }
/* R12 tool-header rail: base defined it as a 2-col grid (copy + 300-420px media rail).
   Illustrations were removed, the rail stayed empty on the right, content squeezed left.
   Headers are single-column centered bands now. */
.ww-tool-header { display: block; }