/*
Theme Name: WPB Basic
Theme URI: https://localhost/wordpress-basic
Author: WPB
Description: Minimal hand-built B2B theme. Pure HTML content via core/html blocks, zero page builder.
Version: 0.7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: wpb
*/

/* ============================================================
   1. TOKENS — NOT defined here.
   The canonical token source is wpb_design_tokens() in
   functions.php, injected as inline :root after this sheet.
   Do NOT add a :root copy in this file: a second copy would
   drift from get_site_design (what agents are told) and break
   the single-source contract.
   ============================================================ */

/* ============================================================
   2. BASE
   ============================================================ */
* { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	/* Keep anchor targets clear of the sticky header. */
	scroll-padding-top: calc(var(--header-h) + var(--space-2));
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	color: var(--ink);
	background: var(--bg);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; transition: color .18s ease; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 var(--space-2);
	color: var(--brand-dark);
}
h1 { font-size: 40px; letter-spacing: -.2px; }
h2 { font-size: 30px; letter-spacing: -.1px; }
h3 { font-size: 21px; }
h4 { font-size: 17px; }
p { margin: 0 0 var(--space-2); }
ul { padding-left: 20px; }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3); }
.section { padding: var(--space-5) 0; }
.section-alt { background: var(--bg-alt); }
.product-detail { margin-top: var(--space-5); }
.section--related { padding-top: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
main.site-main { min-height: 50vh; padding-bottom: var(--space-4); }

/* ============================================================
   4. HEADER / FOOTER
   ============================================================ */
.site-header {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 0;
	z-index: 100;
	/* min-height (not height) so a wrapped mobile nav can never be clipped. */
	min-height: var(--header-h);
}
.header-inner { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); }

.logo {
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.05;
	color: var(--brand-dark);
	letter-spacing: 2px;
	white-space: nowrap;
}
.logo span {
	display: block;
	font-family: var(--font-sans);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 2.6px;
	color: var(--muted);
	text-transform: uppercase;
	margin-top: 3px;
}
.logo:hover { color: var(--brand); text-decoration: none; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.site-nav ul { list-style: none; display: flex; gap: var(--space-3); margin: 0; padding: 0; }
.site-nav a {
	position: relative;
	display: inline-block;
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
	padding: 6px 2px;
	/* A nav label must never wrap: when the header ran out of room it broke
	   "Contact Us" into two lines, which grew .site-nav's <ul> from 37px to
	   62px and dragged the CTA out of vertical alignment. The drawer sets
	   white-space: normal again, where wrapping is harmless. */
	white-space: nowrap;
	transition: color .18s ease;
}
.site-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}
.site-nav a:hover { color: var(--brand); text-decoration: none; }
.site-nav a:hover::after { transform: scaleX(1); }

/* Mobile-nav toggle (injected by the plugin, wrapping .site-nav's <ul>).
   Desktop: the <details> is transparent and the hamburger hidden, so the nav
   looks exactly as the agent wrote it. <=600px: it becomes the drawer. */
.site-nav .nav-toggle { display: contents; }
.site-nav .burger-icon {
	display: none;
	list-style: none;
}
.site-nav .burger-icon::-webkit-details-marker { display: none; }
.site-nav .burger-icon::marker { content: none; }

/* Search form (injected by wpb-core into .site-nav when search_enabled=on).
   Icon-only until it has focus: the <label for> focuses the field and
   :focus-within expands it, so the box works with no JavaScript at all.
   `order` keeps the icon after the menu links even though the markup puts it
   before the <ul>. <=600px: it rides inside the drawer (the plugin moves the
   node into the <details>), pinned above the full-screen list. */
.wpb-search {
	display: flex;
	align-items: center;
	order: 2;
	position: relative;
	margin: 0;
}
.wpb-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	color: var(--ink);
	transition: background .18s ease, color .18s ease;
}
.wpb-search-toggle:hover { background: var(--bg-alt, #f3efea); color: var(--brand); }
.wpb-search-icon {
	display: block;
	position: relative;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-radius: 50%;
}
.wpb-search-icon::after {
	content: "";
	position: absolute;
	right: -5px;
	bottom: -3px;
	width: 7px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transform: rotate( 45deg );
}
.wpb-search-input {
	width: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid transparent;
	background: transparent;
	color: var(--ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	opacity: 0;
	transition: width .22s ease, opacity .18s ease, border-color .18s ease;
}
.wpb-search-input::-webkit-search-cancel-button { cursor: pointer; }
.wpb-search:focus-within .wpb-search-input {
	width: 190px;
	padding: 4px 2px;
	border-bottom-color: var(--line);
	opacity: 1;
}

/* Opening the field needs ~150px the header row does not have: .container is
   capped, so the extra 190px pushed the menu into three lines at EVERY viewport
   width (navH and the CTA both measured 37/44 -> 62 at 1280, 1440 and 1920 -
   the problem was never "too narrow a screen"). The social links are decorative
   and also live in the footer, so they step aside only while the field holds
   focus, and come back on blur. Same "header that ships its own markup" caveat
   as the .mobile-nav rules below: this class comes from the site's header part. */
.header-inner:has(.wpb-search-input:focus) .header-social { display: none; }

/* Second copy, for headers that ship their own drawer: those sites hide
   .site-nav on phones with site-level CSS, so the box has to live inside their
   .mobile-nav as well. Always open there - a drawer is already a deliberate
   action, an extra icon to tap would be one tap too many. */
.nav-toggle .mobile-nav .wpb-search { order: 0; width: 100%; padding: 0 0 12px; }
.nav-toggle .mobile-nav .wpb-search-toggle { display: none; }
.nav-toggle .mobile-nav .wpb-search-input {
	width: 100%;
	padding: 10px 2px;
	border-bottom-color: var(--line);
	opacity: 1;
}

/* Current-page marker. The header is a stored wpb_part (static HTML), so the
   active state is derived from the page-id-N class WordPress puts on <body>. */
body.home .site-nav li:first-child a,
body.page-id-28 .site-nav a[href*="page_id=28"],
body.page-id-29 .site-nav a[href*="page_id=29"],
body.page-id-30 .site-nav a[href*="page_id=30"],
body.page-id-31 .site-nav a[href*="page_id=31"] { color: var(--brand); }
body.home .site-nav li:first-child a::after,
body.page-id-28 .site-nav a[href*="page_id=28"]::after,
body.page-id-29 .site-nav a[href*="page_id=29"]::after,
body.page-id-30 .site-nav a[href*="page_id=30"]::after,
body.page-id-31 .site-nav a[href*="page_id=31"]::after { transform: scaleX(1); }

.header-cta { margin-left: var(--space-2); padding: 10px 22px; font-size: 14px; }

.site-footer { background: var(--brand-dark); color: #cfc7bd; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-4); padding: var(--space-4) 0 var(--space-3); }
/* Footer markup uses <h3>; style h3 and h4 so either heading level works. */
.site-footer h3,
.site-footer h4 {
	color: #fff;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: var(--space-2);
}
.site-footer p { color: #cfc7bd; }
.site-footer a { color: #cfc7bd; transition: color .18s ease; }
.site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 8px; }
.site-footer .logo { color: #fff; }
.site-footer .logo span { color: #b9afa3; }
.site-footer .logo:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .15); padding: var(--space-2) 0; font-size: 13px; color: #a89f93; }

/* ============================================================
   5. COMPONENTS
   ============================================================ */
.btn {
	display: inline-block;
	padding: 12px 28px;
	border-radius: var(--radius);
	background: var(--brand);
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	border: 1px solid var(--brand);
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:hover {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-light { background: #fff; color: var(--brand-dark); border-color: #fff; }
.btn-light:hover { background: var(--brand-tint); border-color: #fff; color: var(--brand-dark); }

.badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--bg);
	border: 1px solid var(--line);
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.badge:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); text-decoration: none; }

.hero {
	background-color: var(--brand-dark);
	/* Brand-tinted scrim instead of neutral black — keeps product photos warm. */
	background-image: linear-gradient(rgba(61, 43, 31, .70), rgba(61, 43, 31, .55));
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 140px 0;
	text-align: center;
}
.hero h1 {
	color: #fff;
	font-size: 48px;
	line-height: 1.15;
	letter-spacing: -.5px;
	max-width: 800px;
	margin: 0 auto var(--space-2);
	text-shadow: 0 2px 12px rgba(28, 26, 23, .35);
}
.hero p { color: #ece5dc; font-size: 19px; max-width: 640px; margin: 0 auto var(--space-4); }
.hero .btn { margin: 0 6px; }

.card {
	position: relative;
	display: block;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.card-media { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--bg-alt); transition: transform .35s ease; }
.card:hover .card-media { transform: scale(1.04); }
.card-body { padding: var(--space-3); }
.card-body h3 {
	margin-bottom: 6px;
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	transition: color .18s ease;
}
.card:hover .card-body h3 { color: var(--brand); }
/* Summary is capped at 90 chars server-side; clamp the box too so a longer
   excerpt (legacy data, another language) cannot make one card taller than its
   neighbours in the grid. */
.card-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card-meta { font-size: 13px; color: var(--muted); line-height: 1.55; }

.kv-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 15px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.kv-table th, .kv-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kv-table th { width: 200px; color: var(--ink); font-weight: 600; background: var(--brand-tint); white-space: nowrap; }
.kv-table tr:last-child th, .kv-table tr:last-child td { border-bottom: none; }

.section-head { text-align: center; max-width: 680px; margin: 0 auto var(--space-4); }
.section-head h1, .section-head h2 { margin-bottom: var(--space-2); }
.section-head p { color: var(--muted); font-size: 17px; margin-bottom: 0; }
/* Short brand rule under the heading — the workshop "maker's mark" motif. */
.section-head h1::after, .section-head h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background: var(--brand);
	opacity: .5;
	margin: 0 auto;
}

/* News / archive */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-item { border-bottom: 1px solid var(--line); padding: var(--space-3) 0; }
.post-item:first-child { padding-top: 0; }
.post-item h2 { font-size: 22px; margin-bottom: 4px; }
.post-item h2 a { color: var(--brand-dark); }
.post-item h2 a:hover { color: var(--brand); text-decoration: none; }
.post-meta { font-size: 13px; color: var(--muted); margin-bottom: 8px; letter-spacing: .3px; }
/* Two-column item only when a featured image exists - articles without one
   keep the original single-column markup and spacing untouched. */
.post-item.has-thumb { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-3); align-items: start; }
.post-thumb { display: block; overflow: hidden; border-radius: var(--radius); background: var(--bg-alt); }
.post-thumb-img { display: block; width: 100%; height: auto; }
.post-hero { overflow: hidden; border-radius: var(--radius); background: var(--bg-alt); }
.post-hero-img { display: block; width: 100%; height: auto; }

/* Breadcrumb (rendered by the wpb-core plugin via wpb_breadcrumb_html). */
/* The trail is a utility line, not a hero: it gets the container's own
   --space-3 above and below, and a section that opens with it must not stack
   its hero-sized padding-top on top of that. Both shapes are neutralised:
   (a) single / single-product / archive / index render the trail as the
       section's first child (used to be 80px above, 16px below);
   (b) page.php renders it in its own .container above the body's first
       section (used to be 0px above, 96px below).
   :has() keeps this automatic -- a new breadcrumb-led template needs no class. */
.container:has(> .wpb-breadcrumb:first-child) { padding-top: var(--space-3); }
.section:has(> .container > .wpb-breadcrumb:first-child),
.container:has(> .wpb-breadcrumb:first-child) + .section { padding-top: 0; }
.wpb-breadcrumb { margin: 0 0 var(--space-3); font-size: 13px; color: var(--muted); }
.wpb-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.wpb-breadcrumb li { display: inline-flex; align-items: center; }
.wpb-breadcrumb li + li::before { content: "/"; margin: 0 6px; color: var(--line); }
.wpb-breadcrumb a { color: var(--muted); text-decoration: none; }
.wpb-breadcrumb a:hover { color: var(--brand); }
.wpb-breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* Contact page — spec-sheet rows, not a flex row: the markup is
   <strong>Label</strong><br>value, and <br> inside a flex container
   becomes its own flex item and breaks the layout. */
.contact-line {
	display: block;
	padding: 0 0 var(--space-2) var(--space-2);
	border-left: 2px solid var(--line);
	margin-bottom: var(--space-2);
}
.contact-line strong,
.contact-line .k {
	display: block;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 2px;
}
.contact-line .k { width: auto; }

/* Product detail */
.product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
/* 'minimal' hero: no gallery, right column is just the <h1>. Must stay AFTER
   the rule above - same specificity, so source order decides. */
.product-hero--minimal { grid-template-columns: 1fr; }

/* ============================================================
   6. UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.mt-0 { margin-top: 0; } .mt-24 { margin-top: var(--space-3); } .mt-48 { margin-top: var(--space-4); }
.mb-0 { margin-bottom: 0; } .mb-24 { margin-bottom: var(--space-3); } .mb-48 { margin-bottom: var(--space-4); }
/* block, not `initial` (initial resolves to inline and breaks block children). */
.hide-mobile { display: block; }

/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* The single-row header needs 1027px of content: measured, not guessed. Below
   that width the menu wraps onto three lines and pushes the CTA past the right
   edge (the page reported scrollWidth 1027 at a 985px viewport; before the nav
   labels were pinned to one line the same measurement was 985). Fold it into
   two rows instead: logo (+social, +CTA) on top, menu on the line below.
   Phones keep the drawer; the drawer breakpoint stays at 600. */
@media (max-width: 1026px) {
	.site-header { padding-top: 10px; }
	.header-inner { flex-wrap: wrap; gap: var(--space-2); min-height: 0; padding-bottom: 8px; }
	.site-nav { order: 3; width: 100%; margin-left: 0; }
	.header-cta { margin-left: auto; padding: 9px 18px; font-size: 14px; }
}

@media (max-width: 900px) {
	:root { --space-5: 64px; --space-4: 40px; }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
	.product-hero { grid-template-columns: 1fr; gap: var(--space-3); }
	.hero { padding: 110px 0; }
	.hero h1 { font-size: 36px; }
	.hero p { font-size: 17px; }
	h1 { font-size: 30px; } h2 { font-size: 24px; }
}

@media (max-width: 600px) {
	:root { --space-5: 48px; --space-4: 32px; --space-3: 20px; }
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
	/* Related products stay 2x2 on phones: 4 columns are unreadable, 1 column is far too tall. */
	.related-grid { grid-template-columns: repeat(2, 1fr); }
	/* Stack the News thumbnail above the text instead of squeezing it to 160px. */
	.post-item.has-thumb { grid-template-columns: 1fr; }
	.footer-inner { grid-template-columns: 1fr; }

	/* Two-row header geometry lives at <=1026; phones only shrink the logo. */
	.logo { font-size: 20px; }

	/* Hamburger toggle replaces the horizontal nav (geometry from <=1026). */
	.site-nav .nav-toggle { display: block; }

	.site-nav .burger-icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 10px;
		cursor: pointer;
		user-select: none;
	}
	.site-nav .burger-bar {
		display: block;
		height: 2px;
		width: 100%;
		background: var(--ink);
		border-radius: 2px;
		transition: transform .18s ease, opacity .18s ease;
	}
	/* Open: the three bars morph into an X. */
	.site-nav .nav-toggle[open] .burger-bar--top { transform: translateY(7px) rotate(45deg); }
	.site-nav .nav-toggle[open] .burger-bar--mid { opacity: 0; }
	.site-nav .nav-toggle[open] .burger-bar--bot { transform: translateY(-7px) rotate(-45deg); }

	/* Full-screen drawer: the SAME <ul>, now fixed to the viewport. */
	.site-nav .nav-toggle ul {
		position: fixed;
		inset: 0;
		top: 0;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: 0;
		width: auto;
		padding: calc(var(--header-h) + var(--space-3)) var(--space-4) var(--space-4);
		margin: 0;
		background: var(--bg);
		overflow-y: auto;
		z-index: 200;
	}
	.site-nav .nav-toggle ul li { border-bottom: 1px solid var(--line); }
	.site-nav .nav-toggle ul a {
		display: block;
		font-size: 18px;
		padding: 14px 0;
		white-space: normal;
	}

	/* Search inside the drawer: always open (no icon to click), pinned above
	   the full-screen list. The plugin already moved the node into <details>,
	   so a closed drawer hides it natively. */
	.site-nav .nav-toggle .wpb-search {
		position: fixed;
		top: calc(var(--header-h) + var(--space-3));
		left: var(--space-4);
		right: var(--space-4);
		z-index: 201;
		order: 0;
	}
	.site-nav .nav-toggle .wpb-search-toggle { display: none; }
	.site-nav .nav-toggle .wpb-search-input {
		width: 100%;
		padding: 10px 2px;
		border-bottom-color: var(--line);
		opacity: 1;
	}
	/* Leave room for the pinned field so the first link is never covered. */
	.site-nav .nav-toggle ul { padding-top: calc(var(--header-h) + var(--space-3) + 48px); }

	/* Open/close animation: fade + slight rise. content-visibility's discrete
	   toggle needs allow-discrete or the panel snaps shut without a fade-out. */
	.site-nav .nav-toggle::details-content {
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .18s ease, transform .18s ease,
			content-visibility .18s allow-discrete;
	}
	.site-nav .nav-toggle[open]::details-content {
		opacity: 1;
		transform: none;
	}

	.kv-table th { width: 40%; white-space: normal; }
	.hide-mobile { display: none; }

	/* Lock background scroll while the drawer is open (no JS, one line). */
	html:has(.nav-toggle[open]) { overflow: hidden; }
}

/* ============================================================
   8. MOTION & PRINT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
	}
	.site-nav .nav-toggle::details-content,
	.site-nav .burger-bar {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
	}
}

/* Buyers print spec sheets — drop the chrome, keep the tables. */
@media print {
	.site-header, .site-footer, .header-cta, .hero { display: none !important; }
	body { background: #fff; }
	.section { padding: 12px 0; }
	.card, .kv-table { box-shadow: none; }
}

/* ============================================================
   9. SERIES NAV (sidebar layout)
   Opt-in through MCP set_site_info series_nav="sidebar"; badges mode
   never emits these classes, so existing sites are unaffected.
   ============================================================ */
.series-layout { display: flex; align-items: flex-start; gap: var(--space-4); }
.series-layout.series-nav-right { flex-direction: row-reverse; }
.series-main { flex: 1 1 auto; min-width: 0; }

.series-nav, .case-nav {
	flex: 0 0 240px;
	width: 240px;
	position: sticky;
	top: calc(var(--header-h) + var(--space-2));
	max-height: calc(100vh - var(--header-h) - var(--space-4));
	overflow-y: auto;
	padding: var(--space-2);
	background: var(--bg-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.series-nav-list, .series-nav-sub, .case-nav-list, .case-nav-sub { list-style: none; margin: 0; padding: 0; }
.series-nav-sub, .case-nav-sub { padding-left: var(--space-2); margin-top: 2px; }
.series-nav-link, .case-nav-link {
	display: block;
	padding: 7px 10px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink);
}
.series-nav-link:hover, .case-nav-link:hover { background: var(--brand-tint); color: var(--brand); text-decoration: none; }
.series-nav-active, .case-nav-active { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }
.series-nav-active:hover, .case-nav-active:hover { color: var(--brand-dark); }

/* Below 900 the sticky column is replaced by a collapsed panel. */
.series-nav-m, .case-nav-m { display: none; margin-bottom: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); }
.series-nav-m > summary, .case-nav-m > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--brand-dark); }
.series-nav-m ul, .case-nav-m ul { padding: 0 8px 12px; }

@media (max-width: 900px) {
	.series-nav, .case-nav { display: none; }
	.series-nav-m, .case-nav-m { display: block; }
}

/* ============================================================
   10. CASE STUDIES
   Archive and industry hub share archive-case.php; the industry sidebar
   reuses the series-nav component (section 9), so only the bits that are
   specific to cases live here.
   ============================================================ */
.case-meta a { color: var(--brand-dark); font-weight: 600; text-decoration: none; }
.case-meta a:hover { text-decoration: underline; }
.case-lede { font-size: 18px; color: var(--muted); margin: 12px 0 0; }
.case-body img { border-radius: var(--radius); }
.section--cases .case-grid { margin-top: var(--space-3); }
.case-layout .case-main { min-width: 0; }