/**
 * Design tokens: light/dark CSS custom properties, set on the root element
 * via [data-theme]. See design-reference/README.md "Design Tokens" for the
 * source values -- these are locked, do not eyeball-adjust.
 */

:root,
:root[data-theme="light"] {
	--bg: oklch(97% 0.015 70);
	--surface: oklch(99% 0.008 70);
	--ink: oklch(22% 0.02 55);
	--muted: oklch(45% 0.02 55);
	--border: oklch(22% 0.02 55 / 0.09);
	--shadow: 0 12px 32px -12px oklch(22% 0.02 55 / 0.16);
	--accent: oklch(58% 0.14 45);
	--accent-ink: oklch(99% 0.01 70);
	/* Distill Navy as foreground text/dot on the theme's OWN (adaptive)
	   surface -- e.g. the Tech Journey label on a post card. Navy-on-cream
	   reads fine, so this equals --distill-navy in light mode; dark mode
	   needs a lighter stand-in (see below) since navy-on-near-black is
	   nearly invisible. Do NOT use this for text sitting on a fixed-navy
	   background (the brand band, the Tech Journey hero) -- those aren't
	   the problem and want the real navy/cream pairing untouched. */
	--distill-navy-readable: #1A2A3A;
}

:root[data-theme="dark"] {
	--bg: oklch(19% 0.02 55);
	--surface: oklch(24% 0.02 55);
	--ink: oklch(95% 0.015 70);
	--muted: oklch(70% 0.02 60);
	--border: oklch(95% 0.015 70 / 0.12);
	--shadow: 0 12px 32px -12px oklch(0% 0 0 / 0.55);
	--accent: oklch(70% 0.13 50);
	--accent-ink: oklch(15% 0.02 50);
	--distill-navy-readable: #8FA6BF;
}

:root {
	/* Aliases onto the theme.json-generated presets, so component CSS can
	   use --font-heading/--font-body/--radius-* without the --wp--preset
	   verbosity. */
	--font-heading: var( --wp--preset--font-family--heading );
	--font-body: var( --wp--preset--font-family--body );
	--radius-small: var( --wp--custom--radius--small );
	--radius-medium: var( --wp--custom--radius--medium );
	--radius-large: var( --wp--custom--radius--large );
	--radius-pill: var( --wp--custom--radius--pill );

	/* Fixed brand values -- do NOT follow the light/dark toggle. Used by the
	   Distill Digital/Rate It band and the Tech Journey hero. */
	--distill-navy: #1A2A3A;
	--distill-amber: #D4915A;
}

* {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
}

body {
	background: var( --bg );
	color: var( --ink );
	overflow-x: hidden;
}

/* Sticky footer: on short pages (Contact, an empty category, ...) the
   footer should sit at the viewport bottom, not float mid-page. Every
   template's <main> uses .chb-page-width, so growing that to fill
   leftover space and keeping .wp-site-blocks (WP's own top-level
   wrapper) a full-height flex column is enough -- no per-template
   changes needed. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main.chb-page-width {
	flex: 1 0 auto;
}

img,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

summary {
	list-style: none;
	cursor: pointer;
}
summary::-webkit-details-marker {
	display: none;
}

/* Stat pill row, used by every hero (home, category, about). */
.chb-hero__pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.chb-pill {
	background: var( --surface );
	border: 1px solid var( --border );
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 12.5px;
	font-weight: 600;
}
/* Editor-only preview hints for "Stat Pill"/"Hero Teaser" styled
   paragraphs live in assets/css/editor-only.css (loaded ONLY via
   add_editor_style(), never on the front end) -- NOT here. Those
   paragraphs' is-style-* classes survive into the rendered page in some
   cases (e.g. the hero teaser, kept as HTML to allow rich text), and
   this file loads on the live site, so any rule here for an
   .is-style-chb-* selector will visibly render on the real page. This
   already happened once (the hero teaser had a stray border on the
   live homepage) -- don't reintroduce it. */

/* Fixed dark text for score badges -- always sits on a bright category
   color background, so it must stay legible regardless of the light/dark
   toggle. */
:root {
	--badge-ink: #3a2c10;
}

/* Breadcrumb, used by category archive + article header. */
.chb-breadcrumb {
	font-size: 12px;
	color: var( --muted );
	margin-bottom: 14px;
}
.chb-breadcrumb a:hover {
	color: var( --accent );
}

/* Shared page-width wrapper, matches the header/footer max-width. As a
   flex child of .wp-site-blocks (flex-direction: column), this is
   supposed to fill the cross-axis via align-items: stretch -- but that
   isn't reliably kicking in for pages with little content in <main>
   (empty category grid, short hero), which collapse to shrink-to-fit
   around their own content instead of the full width. Setting width
   explicitly removes the dependency on that inherited stretch. */
.chb-page-width {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* Section heading used above every card grid ("Recent posts", etc). */
.chb-section {
	padding: 0 48px 64px;
}
/* When a .chb-section is the very first thing in <main> (e.g. the
   standalone /reviews category index, which has no hero above it), it
   needs its own top breathing room instead of relying on a hero's
   bottom padding. */
main.chb-page-width > .chb-section:first-child {
	padding-top: 56px;
}
.chb-section__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 22px;
	margin: 0 0 22px;
}
.chb-section__description {
	font-size: 15px;
	line-height: 1.6;
	color: var( --muted );
	max-width: 560px;
	margin: -12px 0 22px;
}
/* Same look, but for a real Heading block Chad places ahead of a
   chadhall/* section block (e.g. "Recent posts" before Recent Posts) --
   needs its own horizontal padding since .chb-section's wrapper no
   longer contains it. */
.is-style-chb-section-title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 22px;
	margin: 0 0 22px;
	padding: 0 48px;
}

/* Card grid, used by recent posts / category archives. */
.chb-card-grid {
	display: grid;
	gap: 22px;
}
.chb-card-grid--3 {
	grid-template-columns: repeat( 3, 1fr );
}

/* Card hover lift, used by post/review cards across templates. */
.chb-card {
	display: block;
	transition: transform 150ms ease;
}
.chb-card:hover {
	transform: translateY( -4px );
}
.chb-card--post {
	background: var( --surface );
	border: 1px solid var( --border );
	border-radius: var( --radius-large );
	padding: 24px;
	box-shadow: var( --shadow );
}
.chb-card__kicker {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 14px;
}
.chb-card__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.chb-card__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	margin-bottom: 10px;
}
.chb-card__excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var( --muted );
}
.chb-card__meta {
	font-size: 12px;
	color: var( --muted );
	margin-top: 16px;
}

/* Link hover -> accent, site-wide default. */
a {
	transition: color 150ms ease;
}

/* Hero floating dots. */
@keyframes chb-float {
	0%, 100% {
		transform: translateY( 0 );
	}
	50% {
		transform: translateY( -10px );
	}
}
.chb-float {
	animation: chb-float 6s ease-in-out infinite;
}
.chb-float.chb-float--slow {
	animation-duration: 7s;
}
.chb-float.chb-float--fast {
	animation-duration: 5s;
}

/* Light/dark segmented toggle: sun/moon icon pair, active side filled
   with --accent. Active state is keyed off [data-theme] on the root, not
   aria-pressed, so it's correct the instant the pre-paint inline script
   (inc/theme-tokens.php) sets the attribute -- no JS-timing flash. */
.chb-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: var( --radius-pill );
	background: var( --surface );
	border: 1px solid var( --border );
	flex: 0 0 auto;
}
.chb-theme-toggle__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var( --muted );
	cursor: pointer;
	padding: 0;
	transition: background 150ms ease, color 150ms ease;
}
.chb-theme-toggle__btn svg {
	width: 14px;
	height: 14px;
}
:root[data-theme="light"] .chb-theme-toggle__btn[data-theme-btn="light"],
:root[data-theme="dark"] .chb-theme-toggle__btn[data-theme-btn="dark"] {
	background: var( --accent );
	color: var( --accent-ink );
}

/* ---- Tablet ---- */
@media ( max-width: 900px ) {
	.chb-section {
		padding: 0 32px 48px;
	}
	.is-style-chb-section-title {
		padding: 0 32px;
	}
	.chb-card-grid--3 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* ---- Mobile ---- */
@media ( max-width: 600px ) {
	.chb-section {
		padding: 0 20px 40px;
	}
	.chb-section__title {
		font-size: 19px;
	}
	.is-style-chb-section-title {
		font-size: 19px;
		padding: 0 20px;
	}
	.chb-card-grid--3 {
		grid-template-columns: 1fr;
	}
}