/*
Theme Name:   Warmer Bills — Child
Theme URI:    https://warmerbills.co.uk/
Description:  Child theme for warmerbills.co.uk. Archetype G · Problem Board. Palette derived from the UK heating trade's own materials — cast iron, gas flame, mineral wool, galvanised steel. Signature device: the capillary solder ring.
Author:       Warmer Bills
Template:     generatepress
Version:      1.0.0
Text Domain:  wb-child
*/

/* ==========================================================================
   1 · DESIGN TOKENS
   Every colour is a real thing in this trade, measured as it actually looks
   in a cold plant room, not as an idealised swatch. If a value here cannot be
   traced to a physical object, it is decoration and does not belong.

   To reuse this file on another site, change this block and the matching
   token function in the mu-plugin. Both, together, or the articles will
   clash with the site.
   ========================================================================== */

:root {

	/* --- ink family: a painted cast iron radiator, chipped at the top edge --- */
	--wb-ink:        #212A2F;   /* the iron itself — headings */
	--wb-body:       #3D4850;   /* the same iron under a work lamp — body copy */
	--wb-muted:      #646F75;   /* pencil marks on steel — meta, captions */

	/* --- accent: the inner cone of a natural gas flame (hue family: blue) --- */
	--wb-flame:      #1C6E9C;   /* links, primary, the lit segment */
	--wb-flame-d:    #145272;   /* the same flame through the sight glass — hover */
	--wb-flame-bg:   #E8F1F6;   /* flame seen through condensation — washed */

	/* --- accent-2: mineral wool loft insulation fibre (hue family: amber) --- */
	--wb-wool:       #C08A2E;   /* rules, eyebrow marks — never body text */
	--wb-wool-d:     #8A6018;   /* wool under dust — text weight of the same hue */
	--wb-wool-bg:    #F7EFDD;   /* wool batt, unrolled */

	/* --- surfaces: galvanised steel meter box, daylight and shadow --- */
	--wb-paper:      #F2F5F6;   /* background — mode: cool-light */
	--wb-panel:      #E6EBED;   /* cards, tables, the seasonal band */
	--wb-white:      #FFFFFF;   /* the enamel face of a gauge */
	--wb-line:       #D2DADD;   /* the score line a pipe slice leaves */
	--wb-line-soft:  #E2E8EA;

	/* --- signals --- */
	--wb-good:       #2F6B4A;   /* the green LED on a smart meter display */
	--wb-good-bg:    #E6F0EA;
	--wb-alert:      #A33C2E;   /* the red zone on a boiler pressure gauge */
	--wb-alert-bg:   #F7E9E6;

	/* --- type --- */
	--wb-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--wb-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
	--wb-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

	/* --- measure and rhythm --- */
	--wb-radius:  4px;
	--wb-radius-lg: 6px;
	--wb-wrap:    1160px;
	--wb-read:    720px;
	--wb-gap:     clamp(1.25rem, 3vw, 2rem);
	--wb-block:   clamp(2.75rem, 6vw, 4.5rem);

	--wb-shadow:  0 1px 2px rgba(33, 42, 47, 0.06);
	--wb-shadow-l:0 2px 10px rgba(33, 42, 47, 0.08);
}

/* ==========================================================================
   2 · THE SIGNATURE DEVICE — the capillary solder ring
   How this trade joins its material: two lengths of copper are heated and a
   bright ring of solder is drawn into the joint. Rendered as a rule that is
   quiet everywhere except for one short lit segment.
   Four placements only: under the active nav item, between homepage sections,
   along the top edge of the cost table, and down the left edge of the article
   quick-answer block. Nowhere else.
   ========================================================================== */

.wb-solder {
	position: relative;
	height: 3px;
	background: var(--wb-line);
	border: 0;
	margin: 0;
}

.wb-solder::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 3px;
	background: var(--wb-flame);
}

/* centred variant, for section dividers that sit under a heading */
.wb-solder--mid::after { left: 50%; transform: translateX(-50%); }

/* vertical variant, for the left edge of a block */
.wb-solder-edge {
	position: relative;
	border-left: 3px solid var(--wb-line);
}

.wb-solder-edge::before {
	content: "";
	position: absolute;
	left: -3px;
	top: 22px;
	width: 3px;
	height: 34px;
	background: var(--wb-flame);
}

/* ==========================================================================
   3 · BASE
   Body copy is 17px because blueprint section 3 puts the reader on a phone,
   in a cold room, worried about money. 16px is a desk size.
   ========================================================================== */

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

body {
	background: var(--wb-paper);
	color: var(--wb-body);
	font-family: var(--wb-sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: tabular-nums;
}

.site-content,
.wb-wrap {
	max-width: var(--wb-wrap);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

h1, h2, h3, h4 {
	font-family: var(--wb-display);
	color: var(--wb-ink);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.85rem, 4.6vw, 2.85rem); }
h2 { font-size: clamp(1.4rem, 3.1vw, 1.9rem); }
h3 { font-size: clamp(1.14rem, 2.2vw, 1.32rem); }
h4 { font-size: 1.05rem; }

p  { margin: 0 0 1.15em; }

a {
	color: var(--wb-flame);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover, a:focus { color: var(--wb-flame-d); }

:focus-visible {
	outline: 3px solid var(--wb-flame);
	outline-offset: 2px;
	border-radius: 2px;
}

strong { color: var(--wb-ink); font-weight: 600; }

/* the eyebrow label — a meter faceplate legend */
.wb-eyebrow {
	font-family: var(--wb-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wb-muted);
	display: block;
	margin-bottom: 0.65rem;
}

.wb-eyebrow--flame { color: var(--wb-flame); }

/* every cost, rate and unit on this site is set in the mono face with
   tabular figures, so columns of money line up down the page */
.wb-figure {
	font-family: var(--wb-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--wb-ink);
}

.wb-figure--good  { color: var(--wb-good); }
.wb-figure--alert { color: var(--wb-alert); }

.wb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wb-ink);
	color: var(--wb-white);
	padding: 0.7rem 1.1rem;
	z-index: 9999;
	font-family: var(--wb-mono);
	font-size: 0.8rem;
}

.wb-skip-link:focus { left: 0; color: var(--wb-white); }

/* ==========================================================================
   4 · HEADER AND NAVIGATION
   Six categories plus one persistent route into the cost table. The active
   item carries the solder ring.
   ========================================================================== */

.site-header {
	background: var(--wb-white);
	border-bottom: 1px solid var(--wb-line);
}

.inside-header {
	max-width: var(--wb-wrap);
	margin-inline: auto;
	padding: 0.85rem clamp(1rem, 4vw, 2rem);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.wb-logo { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--wb-ink); text-decoration: none; }
.wb-logo:hover { color: var(--wb-ink); }
.wb-logo svg { display: block; height: 40px; width: auto; }
.wb-logo-lit { stroke: var(--wb-flame); }
.wb-logo-scale { stroke: currentColor; opacity: 0.26; }
.wb-logo-word { font-family: var(--wb-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.02em; }

.main-navigation, .main-navigation .inside-navigation { background: transparent; }

.main-navigation .main-nav ul li a {
	font-family: var(--wb-display);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--wb-body);
	padding: 0.55rem 0.85rem;
	position: relative;
}

.main-navigation .main-nav ul li a:hover { color: var(--wb-ink); background: transparent; }

/* active item — signature device placement 1 of 4 */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-parent > a,
.main-navigation .main-nav ul li.current-post-ancestor > a {
	color: var(--wb-ink);
	background: transparent;
}

.main-navigation .main-nav ul li.current-menu-item > a::after,
.main-navigation .main-nav ul li.current-menu-parent > a::after {
	content: "";
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0;
	height: 3px;
	background: var(--wb-line);
}

.main-navigation .main-nav ul li.current-menu-item > a::before,
.main-navigation .main-nav ul li.current-menu-parent > a::before {
	content: "";
	position: absolute;
	left: 0.85rem;
	bottom: 0;
	width: 28px;
	height: 3px;
	background: var(--wb-flame);
	z-index: 1;
}

.wb-nav-load a {
	font-family: var(--wb-mono) !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wb-flame) !important;
}

/* ==========================================================================
   5 · HOMEPAGE — archetype G · Problem Board
   Section order is the archetype's, not blueprint 10's. Blueprint 10 supplies
   the copy for each slot.
   5.1 problem board (hero)      5.2 circuit strip     5.3 start here trio
   5.4 the load table            5.5 seasonal band     5.6 latest guides
   5.7 checks band (trust)       5.8 signup            5.9 categories, listed
   ========================================================================== */

/* --- 5.1 The board. A consumer unit is called a board in this trade, and the
       reader arrives with a fault, not with a shopping list. --------------- */

.wb-hero {
	background: var(--wb-white);
	border-bottom: 1px solid var(--wb-line);
	padding: clamp(2.25rem, 6vw, 3.5rem) 0 clamp(2rem, 5vw, 3rem);
}

.wb-hero h1 { max-width: 20ch; margin-bottom: 0.5rem; }

.wb-hero-line {
	font-size: clamp(1.02rem, 2.2vw, 1.15rem);
	color: var(--wb-body);
	max-width: 56ch;
	margin-bottom: 1.6rem;
}

.wb-ask {
	display: flex;
	gap: 0;
	max-width: 540px;
	border: 2px solid var(--wb-ink);
	border-radius: var(--wb-radius);
	background: var(--wb-white);
	overflow: hidden;
	margin-bottom: 2.2rem;
}

.wb-ask input[type="search"] {
	flex: 1;
	border: 0;
	padding: 0.8rem 0.95rem;
	font-family: var(--wb-sans);
	font-size: 1rem;
	color: var(--wb-ink);
	background: transparent;
	min-width: 0;
}

.wb-ask input[type="search"]:focus { outline: none; }
.wb-ask:focus-within { outline: 3px solid var(--wb-flame); outline-offset: 2px; }

.wb-ask button {
	border: 0;
	background: var(--wb-ink);
	color: var(--wb-white);
	font-family: var(--wb-mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0 1.1rem;
	cursor: pointer;
}

.wb-ask button:hover { background: var(--wb-flame-d); }

.wb-board {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--wb-line);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	overflow: hidden;
}

/* a fault card: the reader's own words as the title, a small category tag,
   no image, no excerpt. This is the whole routing device. */
.wb-fault {
	background: var(--wb-white);
	padding: 1.15rem 1.2rem 1.05rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.9rem;
	text-decoration: none;
	min-height: 118px;
	transition: background 0.15s ease;
}

.wb-fault:hover { background: var(--wb-flame-bg); }

.wb-fault-q {
	font-family: var(--wb-display);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.32;
	color: var(--wb-ink);
	letter-spacing: -0.01em;
}

.wb-fault:hover .wb-fault-q { color: var(--wb-flame-d); }

.wb-tag {
	font-family: var(--wb-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wb-muted);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.wb-tag::before {
	content: "";
	width: 14px;
	height: 3px;
	background: var(--wb-wool);
	display: inline-block;
}

/* --- 5.2 Circuit strip. Six categories, one per circuit. Text and a line
       icon, no tiles — the board above is the router, this is the fallback. */

/* the homepage runs full bleed so the bands can carry their own background;
   .wb-wrap inside each section restores the measure */
.wb-front { max-width: none; padding-inline: 0; width: 100%; }

.wb-section { padding: var(--wb-block) 0; }
.wb-section--panel { background: var(--wb-panel); }

.wb-section-head { margin-bottom: 1.8rem; max-width: 62ch; }
.wb-section-head p { color: var(--wb-body); margin-bottom: 0; }

/* signature device placement 2 of 4 */
.wb-divider { margin-bottom: 1.6rem; max-width: 240px; }

.wb-circuits {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	background: var(--wb-line);
	border-block: 1px solid var(--wb-line);
}

.wb-circuit {
	background: var(--wb-paper);
	padding: 1.05rem 0.85rem;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	align-items: flex-start;
}

.wb-circuit:hover { background: var(--wb-white); }
.wb-circuit svg { width: 26px; height: 26px; color: var(--wb-flame); }

.wb-circuit-name {
	font-family: var(--wb-display);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--wb-ink);
	line-height: 1.25;
}

.wb-circuit-count {
	font-family: var(--wb-mono);
	font-size: 0.7rem;
	color: var(--wb-muted);
	letter-spacing: 0.06em;
}

/* --- 5.3 Start here. Three cornerstone routes for a reader who does not yet
       know what their question is. --------------------------------------- */

.wb-starts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem;
}

.wb-start {
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	padding: 1.4rem 1.35rem;
	text-decoration: none;
	display: block;
}

.wb-start:hover { border-color: var(--wb-flame); }

.wb-start-n {
	font-family: var(--wb-mono);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--wb-wool);
	display: block;
	line-height: 1;
	margin-bottom: 0.7rem;
}

.wb-start h3 { margin-bottom: 0.4rem; font-size: 1.1rem; }
.wb-start p  { color: var(--wb-body); font-size: 0.94rem; margin-bottom: 0; }

/* --- 5.4 The load table. Blueprint 10 calls this the reason to visit. It is
       a content block here, not the router — that is the structural
       difference between this homepage and a comparison-led one. ---------- */

.wb-load {
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	overflow: hidden;
}

/* signature device placement 3 of 4 */
.wb-load::before {
	content: "";
	display: block;
	height: 3px;
	background:
		linear-gradient(to right, var(--wb-flame) 0 34px, transparent 34px),
		var(--wb-line);
}

.wb-load-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.wb-load table { width: 100%; border-collapse: collapse; min-width: 620px; }

.wb-load th {
	font-family: var(--wb-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wb-muted);
	text-align: left;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--wb-line);
	background: var(--wb-panel);
	white-space: nowrap;
}

.wb-load th:not(:first-child), .wb-load td:not(:first-child) { text-align: right; }

.wb-load td {
	padding: 0.72rem 1rem;
	border-bottom: 1px solid var(--wb-line-soft);
	font-size: 0.95rem;
}

.wb-load tbody tr:last-child td { border-bottom: 0; }
.wb-load tbody tr:hover { background: var(--wb-flame-bg); }
.wb-load td a { text-decoration: none; font-weight: 500; color: var(--wb-ink); }
.wb-load tbody tr:hover td a { color: var(--wb-flame-d); text-decoration: underline; }

.wb-load td.wb-cost { font-family: var(--wb-mono); font-variant-numeric: tabular-nums; color: var(--wb-ink); font-weight: 600; white-space: nowrap; }

.wb-load-foot {
	padding: 0.8rem 1rem;
	background: var(--wb-panel);
	font-family: var(--wb-mono);
	font-size: 0.74rem;
	color: var(--wb-muted);
	border-top: 1px solid var(--wb-line);
}

.wb-watt { font-family: var(--wb-mono); font-size: 0.86rem; color: var(--wb-muted); }

/* --- 5.5 Seasonal band. One PHP array, changed four times a year. -------- */

.wb-season {
	background: var(--wb-ink);
	color: #C6D0D5;
	border-radius: var(--wb-radius);
	padding: 1.6rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
	justify-content: space-between;
}

.wb-season h2 { color: var(--wb-white); font-size: 1.32rem; margin-bottom: 0.35rem; }
.wb-season p  { margin-bottom: 0; max-width: 62ch; font-size: 0.97rem; }
.wb-season .wb-eyebrow { color: #7FB4D3; }

.wb-season a.wb-btn { flex-shrink: 0; }

.wb-btn {
	display: inline-block;
	font-family: var(--wb-mono);
	font-size: 0.8rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.7rem 1.15rem;
	border-radius: var(--wb-radius);
	background: var(--wb-flame);
	color: var(--wb-white);
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.wb-btn:hover { background: var(--wb-flame-d); color: var(--wb-white); }

.wb-btn--ghost {
	background: transparent;
	color: var(--wb-flame);
	border: 1px solid var(--wb-line);
}

.wb-btn--ghost:hover { background: var(--wb-flame-bg); color: var(--wb-flame-d); }

/* --- 5.6 Latest guides. Same card shape as the archives and search, from one
       shared PHP function, so the shape changes in one place. ------------- */

.wb-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem;
}

.wb-card {
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	padding: 1.15rem 1.2rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.wb-card:hover { border-color: var(--wb-flame); }

.wb-card h3 { font-size: 1.05rem; margin: 0; line-height: 1.32; }
.wb-card h3 a { text-decoration: none; color: var(--wb-ink); }
.wb-card h3 a:hover { color: var(--wb-flame-d); }

.wb-card-meta {
	font-family: var(--wb-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--wb-muted);
	margin-top: auto;
	display: flex;
	gap: 0.65rem;
	flex-wrap: wrap;
}

/* --- 5.7 The checks band. What a brand reads before emailing. ------------ */

.wb-checks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--wb-line);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	overflow: hidden;
}

.wb-check {
	background: var(--wb-white);
	padding: 1.5rem 1.4rem;
	text-decoration: none;
	display: block;
}

.wb-check:hover { background: var(--wb-flame-bg); }
.wb-check h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.wb-check p  { margin-bottom: 0; font-size: 0.94rem; color: var(--wb-body); }

/* --- 5.8 Signup. One inline field. Never a popup. ----------------------- */

.wb-signup {
	background: var(--wb-panel);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	padding: clamp(1.5rem, 4vw, 2.2rem);
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 1.6rem;
	align-items: center;
}

.wb-signup h2 { font-size: 1.32rem; margin-bottom: 0.4rem; }
.wb-signup p  { margin-bottom: 0; font-size: 0.96rem; }

.wb-signup-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.wb-signup-form input[type="email"] {
	flex: 1 1 200px;
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	padding: 0.72rem 0.85rem;
	font-family: var(--wb-sans);
	font-size: 0.97rem;
	background: var(--wb-white);
	color: var(--wb-ink);
	min-width: 0;
}

.wb-signup-note { font-family: var(--wb-mono); font-size: 0.72rem; color: var(--wb-muted); flex-basis: 100%; margin: 0; }

/* --- 5.9 Categories as a plain list, with their real descriptions and their
       pillar articles. The internal-linking engine. ---------------------- */

.wb-cats { border-top: 1px solid var(--wb-line); }

.wb-cat {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 1.6rem;
	padding: 1.7rem 0;
	border-bottom: 1px solid var(--wb-line);
}

.wb-cat h3 { margin-bottom: 0.5rem; }
.wb-cat h3 a { text-decoration: none; color: var(--wb-ink); }
.wb-cat h3 a:hover { color: var(--wb-flame-d); }
.wb-cat p { font-size: 0.95rem; margin-bottom: 0; }

.wb-pillars { list-style: none; margin: 0; padding: 0; }

.wb-pillars li { border-bottom: 1px solid var(--wb-line-soft); }
.wb-pillars li:last-child { border-bottom: 0; }

.wb-pillars a {
	display: flex;
	gap: 0.7rem;
	align-items: baseline;
	padding: 0.5rem 0;
	text-decoration: none;
	color: var(--wb-body);
	font-size: 0.95rem;
}

.wb-pillars a:hover { color: var(--wb-flame-d); }
.wb-pillars .wb-n { font-family: var(--wb-mono); font-size: 0.72rem; color: var(--wb-wool-d); flex-shrink: 0; }

/* ==========================================================================
   6 · ARTICLE
   Archetype G puts the answer above the meta strip: the reader arrived with
   something wrong and gets the figure before they get the byline.
   ========================================================================== */

.single-post .site-content,
.page .site-content { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

.wb-article-head { max-width: var(--wb-read); margin-inline: auto; }
.wb-article-head h1 { margin-bottom: 0.7rem; }

.wb-crumbs {
	font-family: var(--wb-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--wb-muted);
	margin-bottom: 0.9rem;
}

.wb-crumbs a { color: var(--wb-muted); text-decoration: none; }
.wb-crumbs a:hover { color: var(--wb-flame); }

.wb-meta {
	font-family: var(--wb-mono);
	font-size: 0.74rem;
	letter-spacing: 0.04em;
	color: var(--wb-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.1rem;
	padding: 0.7rem 0;
	border-block: 1px solid var(--wb-line);
	margin: 1.5rem 0;
}

.wb-meta .wb-meta-cat { color: var(--wb-flame); text-decoration: none; }
.wb-meta .wb-meta-updated { color: var(--wb-wool-d); }

.entry-content { max-width: var(--wb-read); margin-inline: auto; }
.entry-content > * { max-width: 100%; }

.entry-content h2 { margin-top: 2.1em; scroll-margin-top: 90px; }
.entry-content h3 { margin-top: 1.6em; scroll-margin-top: 90px; }

.entry-content ul, .entry-content ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.entry-content li { margin-bottom: 0.45em; }

.entry-content img { border-radius: var(--wb-radius); height: auto; }

.entry-content blockquote {
	margin: 1.8em 0;
	padding: 0.2em 0 0.2em 1.4em;
	border-left: 3px solid var(--wb-wool);
	font-size: 1.06rem;
	color: var(--wb-ink);
}

.entry-content blockquote p:last-child { margin-bottom: 0; }

/* --- table of contents --- */

.wb-toc {
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	padding: 1.1rem 1.25rem;
	margin: 2rem 0 2.2rem;
}

.wb-toc-title {
	font-family: var(--wb-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wb-muted);
	margin-bottom: 0.75rem;
}

.wb-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: wbtoc; }
.wb-toc li { margin-bottom: 0.35rem; counter-increment: wbtoc; }
.wb-toc li:last-child { margin-bottom: 0; }
.wb-toc .wb-toc-sub { padding-left: 1.4rem; }

.wb-toc a { text-decoration: none; font-size: 0.95rem; color: var(--wb-body); }
.wb-toc a:hover { color: var(--wb-flame-d); text-decoration: underline; }

.wb-toc > ol > li > a::before {
	content: counter(wbtoc, decimal-leading-zero) " ";
	font-family: var(--wb-mono);
	font-size: 0.78rem;
	color: var(--wb-wool-d);
	margin-right: 0.35rem;
}

/* --- author box --- */

.wb-author {
	max-width: var(--wb-read);
	margin: 2.6rem auto 0;
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	padding: 1.4rem;
	display: flex;
	gap: 1.15rem;
	align-items: flex-start;
}

.wb-author img { border-radius: 50%; flex-shrink: 0; }
.wb-author h2 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.wb-author p  { font-size: 0.94rem; margin-bottom: 0; }

/* --- policy strip: what a brand looks for before paying --- */

.wb-policy {
	max-width: var(--wb-read);
	margin: 1.1rem auto 0;
	padding: 0.9rem 1.1rem;
	background: var(--wb-panel);
	border-radius: var(--wb-radius);
	font-family: var(--wb-mono);
	font-size: 0.74rem;
	letter-spacing: 0.03em;
	color: var(--wb-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.2rem;
}

.wb-policy a { color: var(--wb-flame); text-decoration: none; }
.wb-policy a:hover { text-decoration: underline; }

/* ==========================================================================
   7 · CATEGORY AND TAG ARCHIVES
   The term description is indexed and printed in full. Never truncated.
   ========================================================================== */

.wb-archive-head {
	background: var(--wb-white);
	border-bottom: 1px solid var(--wb-line);
	padding: clamp(2rem, 5vw, 3rem) 0;
	margin-bottom: var(--wb-gap);
}

.wb-archive-head .wb-wrap { max-width: var(--wb-wrap); }
.wb-archive-head h1 { margin-bottom: 0.7rem; }
.wb-archive-desc { max-width: 68ch; font-size: 1.02rem; color: var(--wb-body); margin-bottom: 1.1rem; }
.wb-archive-count { font-family: var(--wb-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wb-muted); }

.wb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

/* GeneratePress prints archive pagination itself; these two selectors put it
   into the theme's own shape rather than printing a second set of links */
.wb-pagination,
.paging-navigation .nav-links {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin: 2.4rem 0 1rem;
	font-family: var(--wb-mono);
	font-size: 0.85rem;
}

.wb-pagination .page-numbers,
.paging-navigation .nav-links .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.8rem;
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	background: var(--wb-white);
	text-decoration: none;
	color: var(--wb-body);
}

.wb-pagination .page-numbers.current,
.paging-navigation .nav-links .page-numbers.current { background: var(--wb-ink); color: var(--wb-white); border-color: var(--wb-ink); }
.wb-pagination a.page-numbers:hover,
.paging-navigation .nav-links a.page-numbers:hover { border-color: var(--wb-flame); color: var(--wb-flame-d); }

/* ==========================================================================
   8 · SEARCH
   ========================================================================== */

.wb-searchbar { max-width: 540px; margin: 0 0 1.4rem; }

.wb-search-empty {
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	padding: 1.6rem;
	max-width: 720px;
}

.wb-search-empty h2 { font-size: 1.2rem; }

/* ==========================================================================
   9 · 404
   Route the reader into the categories. An empty screen is an invitation to
   leave; a list of circuits is an invitation to act.
   ========================================================================== */

.wb-404 { padding: clamp(2.5rem, 7vw, 4.5rem) 0; }
.wb-404 h1 { max-width: 18ch; }
.wb-404 p { max-width: 58ch; font-size: 1.05rem; }
.wb-404 .wb-circuits { margin-top: 2rem; }

/* ==========================================================================
   10 · STATIC PAGE BASE
   ========================================================================== */

.wb-page-head {
	background: var(--wb-white);
	border-bottom: 1px solid var(--wb-line);
	padding: clamp(2rem, 5vw, 3.2rem) 0;
	margin-bottom: clamp(1.5rem, 4vw, 2.4rem);
}

.page .entry-content { max-width: var(--wb-read); }

.wb-updated {
	font-family: var(--wb-mono);
	font-size: 0.73rem;
	letter-spacing: 0.06em;
	color: var(--wb-muted);
	text-transform: uppercase;
}

/* ==========================================================================
   11 · PAGE BLOCK LIBRARY
   Twelve classes. Every one works on every page. These are theme chrome —
   the erb-* article classes are separate and must not be used on pages.
   ========================================================================== */

.wb-lede { font-size: 1.16rem; line-height: 1.6; color: var(--wb-ink); margin-bottom: 1.3em; }

.wb-callout {
	background: var(--wb-flame-bg);
	border: 1px solid #C8DEEB;
	border-radius: var(--wb-radius);
	padding: 1.15rem 1.25rem;
	margin: 1.6em 0;
}

.wb-callout > *:last-child { margin-bottom: 0; }

.wb-note { font-size: 0.9rem; color: var(--wb-muted); margin-bottom: 1.2em; }

.wb-deflist { margin: 1.5em 0; }
.wb-deflist dt { font-family: var(--wb-display); font-weight: 600; color: var(--wb-ink); margin-top: 1.1em; }
.wb-deflist dt:first-child { margin-top: 0; }
.wb-deflist dd { margin: 0.3em 0 0; padding-left: 0; border-left: 3px solid var(--wb-line); padding-left: 0.9em; }

.wb-legal { list-style: none; counter-reset: wblegal; margin: 1.5em 0; padding: 0; }
.wb-legal > li { counter-increment: wblegal; padding-left: 2.9em; position: relative; margin-bottom: 1em; }
.wb-legal > li::before {
	content: counter(wblegal) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--wb-mono);
	font-size: 0.86rem;
	color: var(--wb-muted);
	width: 2.4em;
}

.wb-steps { list-style: none; counter-reset: wbstep; margin: 1.7em 0; padding: 0; }
.wb-steps > li { counter-increment: wbstep; padding-left: 3.4em; position: relative; margin-bottom: 1.35em; }
.wb-steps > li::before {
	content: counter(wbstep, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -0.12em;
	font-family: var(--wb-mono);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--wb-wool);
	line-height: 1;
}

.wb-checklist { list-style: none; margin: 1.4em 0; padding: 0; }
.wb-checklist > li { padding-left: 1.9em; position: relative; margin-bottom: 0.6em; }
.wb-checklist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--wb-good);
	border-bottom: 2px solid var(--wb-good);
	transform: rotate(-45deg);
}

.wb-datatable { overflow-x: auto; margin: 1.7em 0; border: 1px solid var(--wb-line); border-radius: var(--wb-radius); background: var(--wb-white); }
.wb-datatable table { width: 100%; border-collapse: collapse; min-width: 480px; }
.wb-datatable th {
	font-family: var(--wb-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--wb-muted);
	background: var(--wb-panel);
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--wb-line);
}
.wb-datatable td { padding: 0.68rem 0.9rem; border-bottom: 1px solid var(--wb-line-soft); font-size: 0.94rem; }
.wb-datatable tr:last-child td { border-bottom: 0; }

.wb-person { display: flex; gap: 1.15rem; align-items: flex-start; margin: 1.6em 0; }
.wb-person img { border-radius: 50%; flex-shrink: 0; width: 84px; height: 84px; object-fit: cover; }
.wb-person h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.wb-person p { font-size: 0.94rem; margin-bottom: 0; }

.wb-contact-card {
	display: block;
	background: var(--wb-white);
	border: 1px solid var(--wb-line);
	border-radius: var(--wb-radius);
	padding: 1.15rem 1.2rem;
	text-decoration: none;
	margin: 0 0 1rem;
}

.wb-contact-card:hover { border-color: var(--wb-flame); }
.wb-contact-card strong { display: block; font-family: var(--wb-mono); font-size: 0.98rem; color: var(--wb-flame); margin-bottom: 0.25rem; word-break: break-word; }
.wb-contact-card span { display: block; font-size: 0.9rem; color: var(--wb-muted); }

.wb-cta {
	background: var(--wb-ink);
	color: #C6D0D5;
	border-radius: var(--wb-radius);
	padding: 1.8rem 1.6rem;
	margin: 2em 0 0;
}

.wb-cta h2 { color: var(--wb-white); font-size: 1.28rem; }
.wb-cta p { margin-bottom: 1.1rem; }
.wb-cta a.wb-btn { color: var(--wb-white); }

.wb-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin: 1.6em 0; }
.wb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 1.6em 0; }
.wb-grid-2 > *, .wb-grid-3 > * { margin-top: 0; }

/* ==========================================================================
   12 · PAGE VARIANTS
   page-{slug} is put on <body> by wb_body_class() in functions.php — WordPress
   core does not add it. Each page gets its own hero, its own rhythm and one
   accent decision. The blocks inside stay identical.
   ========================================================================== */

/* --- about: wide, editorial, portrait beside the lede, generous rhythm --- */
.page-about .wb-page-head { padding-block: clamp(2.6rem, 7vw, 4.2rem); }
.page-about .wb-page-head.wb-has-portrait .wb-wrap { display: grid; grid-template-columns: 128px 1fr; gap: 1.8rem; align-items: center; }
.page-about .wb-page-head.wb-has-portrait img { border-radius: 50%; width: 128px; height: 128px; object-fit: cover; }
.page-about .entry-content { max-width: 760px; font-size: 1.05rem; line-height: 1.78; }
.page-about .entry-content h2 { margin-top: 2.4em; }

/* --- contact: compact hero, tight, partnership card in the accent -------- */
.page-contact .wb-page-head { padding-block: clamp(1.6rem, 4vw, 2.2rem); }
.page-contact .entry-content { max-width: 640px; }
.page-contact .wb-contact-card:first-of-type { border-color: var(--wb-flame); background: var(--wb-flame-bg); }
.page-contact .wb-grid-2 { gap: 0.9rem; }

/* --- write for us: confident band, sectioned, accent CTA ----------------- */
.page-write-for-us .wb-page-head { background: var(--wb-ink); border-bottom: 0; }
.page-write-for-us .wb-page-head h1 { color: var(--wb-white); max-width: 20ch; }
.page-write-for-us .wb-page-head .wb-updated,
.page-write-for-us .wb-page-head .wb-eyebrow { color: #7FB4D3; }
.page-write-for-us .wb-page-head p { color: #C6D0D5; max-width: 58ch; font-size: 1.06rem; margin-bottom: 0; }
.page-write-for-us .entry-content h2 { margin-top: 2.3em; padding-top: 1.3em; border-top: 1px solid var(--wb-line); }
.page-write-for-us .entry-content h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1em; }

/* --- editorial policy: plain title on the surface, even rhythm ---------- */
.page-editorial-policy .wb-page-head { background: var(--wb-panel); }
.page-editorial-policy .entry-content h2 { margin-top: 1.9em; font-size: 1.24rem; }
.page-editorial-policy .wb-callout { background: var(--wb-wool-bg); border-color: #E7D3AB; }

/* --- how we test (published as How We Calculate): process-led, stepped --- */
.page-how-we-test .entry-content { max-width: 700px; }
.page-how-we-test .wb-steps > li::before { color: var(--wb-flame); }

/* --- calculator hub: the tenth page, briefed in blueprint 11 ------------- */
.page-calculator .wb-page-head { background: var(--wb-white); }
.page-calculator .entry-content { max-width: 760px; }
.page-calculator .wb-datatable th { background: var(--wb-ink); color: #C6D0D5; }

/* --- the three legal pages share a treatment on purpose ----------------- */
.page-privacy-policy .wb-page-head,
.page-terms .wb-page-head,
.page-cookie-policy .wb-page-head {
	padding-block: clamp(1.4rem, 3.5vw, 2rem);
	background: var(--wb-paper);
}

.page-privacy-policy .entry-content,
.page-terms .entry-content,
.page-cookie-policy .entry-content {
	max-width: 680px;
	font-size: 0.97rem;
	line-height: 1.6;
}

.page-privacy-policy .entry-content h2,
.page-terms .entry-content h2,
.page-cookie-policy .entry-content h2 { font-size: 1.14rem; margin-top: 1.8em; }

.page-privacy-policy .wb-datatable th,
.page-cookie-policy .wb-datatable th { color: var(--wb-flame); }

.page-terms .wb-callout { background: var(--wb-alert-bg); border-color: #E8C4BD; }
.page-terms .wb-callout strong { color: var(--wb-alert); }

/* --- affiliate disclosure: compact, short, deliberately plain ----------- */
.page-affiliate-disclosure .wb-page-head { padding-block: clamp(1.6rem, 4vw, 2.2rem); }
.page-affiliate-disclosure .entry-content { max-width: 640px; }

/* ==========================================================================
   13 · FOOTER
   ========================================================================== */

.site-footer { background: var(--wb-ink); color: #A7B4BA; margin-top: var(--wb-block); }

.wb-footer { padding: clamp(2.2rem, 5vw, 3.2rem) 0 1.6rem; }

.wb-footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }

.wb-footer h2 {
	font-family: var(--wb-mono);
	font-size: 0.72rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #7FB4D3;
	font-weight: 400;
	margin-bottom: 0.9rem;
}

.wb-footer-brand svg { height: 40px; width: auto; display: block; margin-bottom: 0.9rem; }
.wb-footer-brand p { font-size: 0.94rem; max-width: 34ch; }

.wb-footer-mail {
	font-family: var(--wb-mono);
	font-size: 0.86rem;
	color: #7FB4D3;
	text-decoration: none;
	display: inline-block;
	margin-top: 0.35rem;
}

.wb-footer-mail:hover { color: var(--wb-white); }

.wb-footer ul { list-style: none; margin: 0; padding: 0; }
.wb-footer li { margin-bottom: 0.45rem; }
.wb-footer li a { color: #A7B4BA; text-decoration: none; font-size: 0.93rem; }
.wb-footer li a:hover { color: var(--wb-white); text-decoration: underline; }

.site-info {
	border-top: 1px solid #34424A;
	padding: 1.1rem 0;
	font-family: var(--wb-mono);
	font-size: 0.73rem;
	color: #7C8A91;
}

.site-info .wb-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; justify-content: space-between; }
.site-info a { color: #7C8A91; text-decoration: none; }
.site-info a:hover { color: var(--wb-white); }

/* ==========================================================================
   14 · RESPONSIVE
   Below 768 the wordmark hides and the mark shows alone. Most of this site's
   traffic is a phone in a cold room, so that is the logo most people see.
   ========================================================================== */

@media (max-width: 1024px) {
	.wb-board    { grid-template-columns: repeat(2, 1fr); }
	.wb-circuits { grid-template-columns: repeat(3, 1fr); }
	.wb-cards, .wb-grid, .wb-starts, .wb-checks { grid-template-columns: repeat(2, 1fr); }
	.wb-footer-cols { grid-template-columns: 1fr 1fr; }
	.wb-signup { grid-template-columns: 1fr; }
	.wb-cat { grid-template-columns: 1fr; gap: 0.9rem; }
}

@media (max-width: 768px) {
	body { font-size: 17px; }
	.wb-logo-word { display: none; }         /* mark alone from here down */
	.wb-logo svg  { height: 34px; }
	.inside-header { gap: 0.9rem; }
	.wb-board    { grid-template-columns: 1fr; }
	.wb-circuits { grid-template-columns: repeat(2, 1fr); }
	.wb-cards, .wb-grid, .wb-starts, .wb-checks { grid-template-columns: 1fr; }
	.wb-checks .wb-check { border-bottom: 0; }
	.wb-season { flex-direction: column; align-items: flex-start; }
	.page-about .wb-page-head .wb-wrap { grid-template-columns: 1fr; }
	.page-about .wb-page-head img { width: 96px; height: 96px; }
	.wb-grid-2, .wb-grid-3 { grid-template-columns: 1fr; }
	.wb-author { flex-direction: column; }
	.entry-content h2 { scroll-margin-top: 72px; }
	.entry-content h3 { scroll-margin-top: 72px; }
}

@media (max-width: 420px) {
	.wb-footer-cols { grid-template-columns: 1fr; gap: 1.6rem; }
	.wb-circuits { grid-template-columns: 1fr; }
	.wb-fault { min-height: 0; }
	.wb-ask { flex-wrap: nowrap; }
	.wb-ask button { padding: 0 0.8rem; font-size: 0.72rem; }
	.wb-meta { gap: 0.35rem 0.8rem; font-size: 0.7rem; }
	.wb-cta, .wb-season { padding: 1.3rem 1.15rem; }
}

/* ==========================================================================
   15 · ACCESSIBILITY AND PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media print {
	body { background: #FFF; color: #000; font-size: 11pt; }
	.site-header, .site-footer, .wb-signup, .wb-season, .wb-checks,
	.wb-board, .wb-circuits, .wb-pagination, .paging-navigation, .wb-ask, .wb-policy { display: none !important; }
	.entry-content, .wb-article-head { max-width: 100%; }
	.wb-toc { border: 1px solid #999; }
	a { color: #000; text-decoration: underline; }
	.entry-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
	.wb-load table { min-width: 0; }
	h2, h3 { page-break-after: avoid; }
	table, .wb-datatable { page-break-inside: avoid; }
}