/*
Theme Name: TheDartScout
Theme URI: https://thedartscout.com
Author: TheDartScout
Author URI: https://thedartscout.com
Description: A lightweight custom theme for TheDartScout.com — darts gear reviews matched to how you play.
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thedartscout
*/

/*
  ISSUES FIXED IN THIS VERSION:
  ─────────────────────────────
  1. DUPLICATE overflow-x rules — html/body had overflow-x:hidden at top AND overflow-x:clip at bottom. Conflicting. Consolidated to one rule using clip (bottom wins anyway, so top was dead code).
  2. DUPLICATE table scroll rules — table overflow appeared in TABLE HORIZONTAL SCROLL section AND in OVERFLOW FIX section. Merged into one block.
  3. DUPLICATE image rules — .wp-block-image img !important overrides appeared twice (in ARTICLE CONTENT IMAGES and OVERFLOW FIX). Merged.
  4. ORPHANED .wp-caption-text rule — sat outside the image section after being replaced by figcaption rules. Removed.
  5. DEAD .article-featured-image — template switched to .page-hero-image but old rules remained. Kept for backwards compatibility but marked.
  6. .page-hero-overlay mobile margin bug — margin: 0 var(--spacing-md) on an absolutely positioned element with inset:0 doesn't offset correctly. Removed margin, overlay now follows parent's border-radius and padding handles inset.
  7. INCONSISTENT indentation in mobile breakpoint — all rules now use tabs consistently.
  8. .page-hero missing desktop padding — added back for inset hero on desktop, removed on mobile for edge-to-edge.
*/


/* ══════════════════════════════════════
   SELF-HOSTED FONTS
   Eliminates Google Fonts CSS → woff2 chain (2 hops → 0).
   Only latin subset — covers English content.
   ══════════════════════════════════════ */
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/outfit-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/sourceserif4-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback fonts with adjusted metrics for CLS prevention */
@font-face {
	font-family: 'Outfit Fallback';
	src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
	font-display: swap;
	size-adjust: 100.4%;
	ascent-override: 101%;
	descent-override: 25%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Source Serif 4 Fallback';
	src: local('Georgia'), local('Times New Roman');
	font-display: swap;
	size-adjust: 113%;
	ascent-override: 89%;
	descent-override: 22%;
	line-gap-override: 0%;
}


/* ══════════════════════════════════════
   BRAND TOKENS
   ══════════════════════════════════════ */
:root {
	--color-charcoal: #141414;
	--color-ink: #1E1E1E;
	--color-slate: #2A2A2A;
	--color-mid: #595959;
	--color-silver: #BDBDBD;
	--color-light: #E8E8E8;
	--color-cream: #F7F6F3;
	--color-white: #FFFFFF;
	--color-crimson: #B71C1C;
	--color-crimson-dark: #8B1515;
	--color-crimson-glow: rgba(183, 28, 28, 0.08);

	--font-primary: 'Outfit', 'Outfit Fallback', sans-serif;
	--font-body: 'Source Serif 4', 'Source Serif 4 Fallback', serif;
	--font-mono: 'JetBrains Mono', monospace;

	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;

	--content-width: 680px;
	--page-width: 1120px;

	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 48px;
	--spacing-3xl: 64px;
	--spacing-4xl: 96px;
}


/* ══════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════ */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body,
#page,
.site {
	overflow-x: clip;
	max-width: 100vw;
}

body {
	font-family: var(--font-primary);
	background: var(--color-white);
	color: var(--color-charcoal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.5;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}

body.nav-open {
	overflow: hidden;
}


/* ══════════════════════════════════════
   SKIP LINK
   ══════════════════════════════════════ */
.skip-link {
	position: absolute;
	top: -100px;
	left: var(--spacing-md);
	background: var(--color-crimson);
	color: var(--color-white);
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--radius-sm);
	z-index: 300;
	text-decoration: none;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: var(--spacing-md);
}


/* ══════════════════════════════════════
   HEADER
   ══════════════════════════════════════ */
.site-header {
	position: relative;
	z-index: 100;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-light);
}

.header-inner {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0 var(--spacing-xl);
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}


/* ── Logo ── */
.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.logo-text {
	font-family: var(--font-primary);
	font-size: 20px;
	line-height: 1;
	color: var(--color-charcoal);
	font-weight: 300;
}

.logo-text .the {
	color: var(--color-mid);
}

.logo-text .dart {
	font-weight: 700;
}


/* ── Desktop Nav ── */
.nav-desktop {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
}

.nav-links,
.nav-links ul {
	display: flex;
	gap: var(--spacing-xl);
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-links li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-links li a {
	font-size: 13px;
	font-weight: 500;
	color: var(--color-mid);
	letter-spacing: 0.3px;
	transition: color 0.15s;
	padding: 4px 0;
	position: relative;
	text-decoration: none;
	display: block;
}

.nav-links li a:hover {
	color: var(--color-charcoal);
}

.nav-links li a:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 4px;
	border-radius: 2px;
}

.nav-links li.current-menu-item a,
.nav-links li.current_page_item a {
	color: var(--color-charcoal);
}

.nav-links li.current-menu-item a::after,
.nav-links li.current_page_item a::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--color-crimson);
}


/* ── Search Button ── */
.nav-search {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid #C0C0C0;
	border-radius: var(--radius-sm);
	font-size: 13px;
	color: var(--color-mid);
	cursor: pointer;
	transition: border-color 0.2s ease;
	min-height: 36px;
}

.nav-search:hover {
	border-color: var(--color-mid);
}

.nav-search:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 2px;
}


/* ── Mobile Toggle ── */
.mobile-toggle {
	display: none;
	padding: 8px;
	color: var(--color-charcoal);
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* ══════════════════════════════════════
   PRODUCT REVIEW COMPONENTS
   ══════════════════════════════════════ */

/* ── Amazon CTA Button ── */
.cta-amazon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--color-crimson);
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 600;
	padding: 14px 28px;
	border-radius: var(--radius-sm);
	min-height: 44px;
	text-decoration: none;
	transition: background 0.2s ease;
	letter-spacing: 0.3px;
}

.cta-amazon:hover {
	background: var(--color-crimson-dark);
	color: var(--color-white);
	text-decoration: none;
}

.cta-amazon:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 2px;
}

.cta-amazon svg {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.cta-amazon:hover svg {
	transform: translateX(3px);
}

.cta-amazon--full {
	width: 100%;
}

.cta-amazon--secondary {
	background: var(--color-charcoal);
	color: var(--color-white);
}

.cta-amazon--secondary:hover {
	background: var(--color-ink);
	color: var(--color-white);
}

/* Override article-body link styles on CTA buttons */
.article-body .cta-amazon,
.article-body .cta-amazon:hover {
	color: var(--color-white);
	text-decoration: none;
}


/* ── Product Card ── */
.product-card {
	background: var(--color-cream);
	border: 1px solid var(--color-light);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin: var(--spacing-xl) 0;
}

.product-card-badge {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 4px 6px;
	border-radius: 3px;
	color: var(--color-white);
	margin-bottom: var(--spacing-sm);
	line-height: 1;
	width: fit-content;
}

.product-card-badge--top { background: var(--color-crimson); }
.product-card-badge--value { background: var(--color-charcoal); }
.product-card-badge--budget { background: var(--color-mid); }

.product-card-inner {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--spacing-lg);
	padding: var(--spacing-lg);
	align-items: start;
}

.product-card-image {
	aspect-ratio: 1/1;
	background: var(--color-white);
	border: 1px solid var(--color-light);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.product-card-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	padding: var(--spacing-md);
	box-sizing: border-box;
}

.product-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.product-card-title {
	font-family: var(--font-primary);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-charcoal);
	margin: 0;
}

.product-card-subtitle {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-mid);
	line-height: 1.5;
	margin: 0;
}

.product-card-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-xs);
}

.product-card-stat {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 500;
	color: var(--color-mid);
	background: var(--color-white);
	border: 1px solid var(--color-light);
	padding: 4px 10px;
	border-radius: 4px;
	white-space: nowrap;
}

.product-card-stat strong {
	color: var(--color-charcoal);
	font-weight: 600;
}

.product-card-cta {
	margin-top: var(--spacing-md);
	display: flex;
	gap: var(--spacing-sm);
	align-items: center;
	flex-wrap: wrap;
}

.product-card-price {
	font-family: var(--font-primary);
	font-size: 13px;
	color: var(--color-mid);
	margin-left: var(--spacing-sm);
}


/* ── Pros & Cons ── */
.pros-cons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	margin: var(--spacing-xl) 0;
}

.pros-col,
.cons-col {
	border-radius: var(--radius-md);
	padding: var(--spacing-lg);
}

.pros-col {
	background: #f0faf0;
	border: 1px solid #d4ecd4;
}

.cons-col {
	background: #fdf0f0;
	border: 1px solid #f0d4d4;
}

.pros-cons-label {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: var(--spacing-md);
}

/* Contrast: #2e7d32 on #f0faf0 = 5.0:1 (AA) */
.pros-col .pros-cons-label {
	color: #2e7d32;
}

/* Contrast: #B71C1C on #fdf0f0 = 5.4:1 (AA) */
.cons-col .pros-cons-label {
	color: var(--color-crimson);
}

.pros-cons-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
}

.pros-cons-list li {
	padding: var(--spacing-xs) 0;
	padding-left: 24px;
	position: relative;
	color: var(--color-charcoal);
	margin-bottom: 0;
}

.pros-cons-list li::before {
	position: absolute;
	left: 0;
	font-weight: 700;
	font-size: 14px;
}

/* Unicode escapes for cross-platform rendering */
.pros-col .pros-cons-list li::before {
	content: '\2713';
	color: #2e7d32;
}

.cons-col .pros-cons-list li::before {
	content: '\2717';
	color: var(--color-crimson);
}

/* Override article-body list margins inside pros-cons */
.article-body .pros-cons-list {
	margin: 0;
	padding: 0;
}

.article-body .pros-cons-list li {
	margin-bottom: 0;
}


/* ── Verdict Box ── */
.verdict-box {
	background: var(--color-charcoal);
	border-radius: var(--radius-lg);
	padding: var(--spacing-2xl) var(--spacing-xl);
	margin: var(--spacing-xl) 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--spacing-xl);
	align-items: center;
}

.verdict-score {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 3px solid var(--color-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.verdict-score-number {
	font-family: var(--font-primary);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-white);
	line-height: 1;
}

.verdict-score-label {
	font-family: var(--font-primary);
	font-size: 10px;
	font-weight: 500;
	color: var(--color-silver);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.verdict-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

/* Contrast: #EF5350 on #141414 = 4.6:1 (AA) — matches .method-tag */
.verdict-tag {
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #EF5350;
	margin: 0;
}

.verdict-title {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 700;
	color: var(--color-white);
	line-height: 1.3;
	margin: 0;
}

.verdict-text {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-silver);
	line-height: 1.7;
	margin: 0;
}

.verdict-cta {
	margin-top: var(--spacing-sm);
}

/* Override article-body link/paragraph styles inside verdict-box */
.article-body .verdict-box a {
	color: var(--color-white);
	text-decoration: none;
}

.article-body .verdict-box p {
	margin-bottom: 0;
}


/* ── Spec Sheet ── */
.spec-sheet {
	margin: var(--spacing-xl) 0;
	border: 1px solid var(--color-light);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.spec-sheet-title {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-white);
	background: var(--color-charcoal);
	padding: 12px var(--spacing-lg);
	margin: 0;
}

.spec-sheet-row {
	display: flex;
	justify-content: space-between;
	padding: 10px var(--spacing-lg);
	font-size: 14px;
	border-bottom: 1px solid var(--color-light);
}

.spec-sheet-row:last-child {
	border-bottom: none;
}

.spec-sheet-row:nth-child(even) {
	background: var(--color-cream);
}

.spec-sheet-key {
	font-family: var(--font-primary);
	font-weight: 600;
	color: var(--color-charcoal);
}

.spec-sheet-value {
	font-family: var(--font-primary);
	font-weight: 400;
	color: var(--color-mid);
	text-align: right;
}


/* ── Score Bars ── */
.score-bars {
	margin: var(--spacing-xl) 0;
}

.score-bar-row {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-sm);
}

.score-bar-label {
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-charcoal);
	min-width: 100px;
}

.score-bar-track {
	flex: 1;
	height: 8px;
	background: var(--color-light);
	border-radius: 4px;
	overflow: hidden;
}

.score-bar-fill {
	height: 100%;
	background: var(--color-crimson);
	border-radius: 4px;
}

.score-bar-value {
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-mid);
	min-width: 32px;
	text-align: right;
}


/* ── Winner Banner ── */
.winner-banner {
	background: var(--color-cream);
	border: 2px solid var(--color-crimson);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	margin: var(--spacing-xl) 0;
	display: grid;
	grid-template-columns: 140px 1fr auto;
	gap: var(--spacing-lg);
	align-items: center;
}

.winner-banner-image {
	aspect-ratio: 1/1;
	background: var(--color-white);
	border: 1px solid var(--color-light);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.winner-banner-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	padding: var(--spacing-sm);
	box-sizing: border-box;
}

.winner-banner-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.winner-banner-label {
	font-family: var(--font-primary);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-crimson);
}

.winner-banner-title {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 700;
	color: var(--color-charcoal);
	line-height: 1.3;
	margin: 0;
}

.winner-banner-desc {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-mid);
	line-height: 1.5;
	margin: 0;
}


/* ── Quick Stats Strip ── */
.quick-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: var(--spacing-xl) 0;
	border: 1px solid var(--color-light);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.quick-stat {
	flex: 1;
	min-width: 120px;
	padding: var(--spacing-md) var(--spacing-lg);
	text-align: center;
	border-right: 1px solid var(--color-light);
	background: var(--color-cream);
}

.quick-stat:last-child {
	border-right: none;
}

.quick-stat-value {
	font-family: var(--font-primary);
	font-size: 22px;
	font-weight: 700;
	color: var(--color-charcoal);
	line-height: 1;
	margin-bottom: var(--spacing-xs);
}

.quick-stat-label {
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: 500;
	color: var(--color-mid);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}


/* ── Who Is This For? ── */
.who-for {
	background: var(--color-cream);
	border: 1px solid var(--color-light);
	border-radius: var(--radius-md);
	padding: var(--spacing-lg);
	margin: var(--spacing-xl) 0;
}

.who-for-label {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-crimson);
	margin-bottom: var(--spacing-md);
}

.who-for-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md);
}

.who-for-item {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-sm);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-charcoal);
}

.who-for-icon {
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 700;
	margin-top: 2px;
}

/* Contrast: #2e7d32 on #F7F6F3 = 5.7:1 (AA) */
.who-for-icon--yes { color: #2e7d32; }
/* Contrast: #B71C1C on #F7F6F3 = 5.4:1 (AA) */
.who-for-icon--no { color: var(--color-crimson); }


/* ── Price Tier ── */
.price-tier {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 600;
}

.price-tier-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-light);
}

.price-tier-dot--active {
	background: var(--color-crimson);
}

.price-tier-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--color-mid);
	margin-left: var(--spacing-xs);
}


/* ── Responsive: Product Review Components ── */
@media (max-width: 767px) {
	.product-card-inner {
		grid-template-columns: 1fr;
	}

	.product-card-image {
		aspect-ratio: 4/3;
		max-height: 240px;
	}

	.product-card-cta .cta-amazon {
		width: 100%;
	}

	.pros-cons {
		grid-template-columns: 1fr;
	}

	.verdict-box {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.verdict-score {
		margin: 0 auto;
	}

	.winner-banner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.winner-banner-image {
		max-width: 160px;
		margin: 0 auto;
	}

	.winner-banner .cta-amazon {
		width: 100%;
	}

	.quick-stat {
		min-width: 50%;
		border-bottom: 1px solid var(--color-light);
	}

	.quick-stat:nth-child(even) {
		border-right: none;
	}

	.who-for-grid {
		grid-template-columns: 1fr;
	}

	.score-bar-label {
		min-width: 80px;
		font-size: 12px;
	}
}
/* ══════════════════════════════════════
   MOBILE NAV
   ══════════════════════════════════════ */
.mobile-nav {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--color-charcoal);
	z-index: 200;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xl);
}

.mobile-nav[aria-hidden="false"] {
	display: flex;
}

.mobile-nav a,
.mobile-nav .mobile-nav-links a {
	font-size: 24px;
	font-weight: 500;
	color: var(--color-white);
	text-decoration: none;
	padding: 8px 16px;
	min-height: 44px;
	display: flex;
	align-items: center;
	transition: color 0.15s;
}

.mobile-nav a:hover {
	color: var(--color-crimson);
}

.mobile-nav a:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 4px;
	border-radius: 2px;
}

.mobile-nav-links {
	display: contents;
}

.mobile-nav-links ul {
	list-style: none;
	display: contents;
}

.mobile-nav-links li {
	display: contents;
}

.mobile-close {
	position: absolute;
	top: 20px;
	right: 20px;
	color: var(--color-white);
	padding: 10px;
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-close:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 2px;
}


/* ══════════════════════════════════════
   HERO (homepage)
   ══════════════════════════════════════ */
.hero {
	padding: var(--spacing-4xl) var(--spacing-xl) var(--spacing-3xl);
	text-align: center;
	background: linear-gradient(180deg, var(--color-crimson-glow) 0%, transparent 60%);
	position: relative;
	min-height: 340px; /* Reserve space — prevents CLS when fonts swap */
}

.hero-content {
	max-width: 640px;
	margin: 0 auto;
	position: relative;
}

.hero-tag {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--color-crimson);
	text-transform: uppercase;
	margin-bottom: var(--spacing-lg);
}

.hero h1 {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -1px;
	margin-bottom: var(--spacing-lg);
}

.hero h1 .accent {
	color: var(--color-crimson);
}

.hero-desc {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--color-mid);
	margin-bottom: var(--spacing-xl);
}

@media (prefers-reduced-motion: no-preference) {
	.hero-tag,
	.hero-desc,
	.hero-cta {
		opacity: 0;
		animation: fadeUp 0.6s ease forwards;
	}
	.hero-tag  { animation-delay: 0.1s; }
	.hero-desc { animation-delay: 0.25s; }
	.hero-cta  { animation-delay: 0.4s; }
}

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}


/* ══════════════════════════════════════
   BUTTONS / CTA
   ══════════════════════════════════════ */
.hero-cta,
.method-cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--color-crimson);
	color: var(--color-white);
	font-size: 14px;
	font-weight: 600;
	padding: 14px 28px;
	border-radius: var(--radius-sm);
	min-height: 44px;
	transition: background 0.2s ease;
	text-decoration: none;
}

.hero-cta:hover {
	background: var(--color-crimson-dark);
}

.hero-cta:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 2px;
}

.hero-cta svg {
	transition: transform 0.2s ease;
}

.hero-cta:hover svg {
	transform: translateX(3px);
}

.method-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-white);
	border: 1px solid var(--color-white);
	padding: 12px 24px;
	border-radius: var(--radius-sm);
	min-height: 44px;
	transition: opacity 0.2s ease;
	text-decoration: none;
}

.method-cta:hover {
	background: var(--color-white);
	color: var(--color-charcoal);
	opacity: 0.95;
}

.method-cta:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
}


/* ══════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════ */
.section {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: var(--spacing-3xl) var(--spacing-xl);
}

.section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--spacing-xl);
	flex-wrap: wrap;
	gap: var(--spacing-md);
}

.section-title {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.section-link {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-crimson);
	text-decoration: underline;
	transition: color 0.15s;
}

.section-link:hover {
	color: var(--color-crimson-dark);
	text-decoration: none;
}

.section-link:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 2px;
	border-radius: 2px;
}

.section-divider {
	border: none;
	border-top: 1px solid var(--color-light);
	margin: 0 auto;
	max-width: var(--page-width);
}


/* ══════════════════════════════════════
   ARTICLE CARDS
   ══════════════════════════════════════ */
.articles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-lg);
}

.article-card {
	border: 1px solid var(--color-light);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--color-white);
}

.article-card:hover {
	border-color: #D0D0D0;
}
.card-image {
	width: 100%;
	aspect-ratio: 16/9;                   /* ← matches featured image ratio */
	background: var(--color-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
 
.card-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;                     /* ← fills frame, crops edges */
}

.card-image-icon {
	opacity: 0.08;
}

.card-body {
	padding: var(--spacing-lg);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.card-category {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-crimson);
	margin-bottom: var(--spacing-sm);
}

.card-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: var(--spacing-sm);
}

.card-title a {
	color: var(--color-charcoal);
	text-decoration: none;
	transition: color 0.15s;
}

.card-title a:hover {
	color: var(--color-crimson);
}

.card-title a:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 2px;
	border-radius: 2px;
}

.card-excerpt {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-mid);
	flex: 1;
}

.card-meta {
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-light);
	font-size: 12px;
	font-weight: 400;
	color: var(--color-mid);
	display: flex;
	justify-content: space-between;
}


/* ══════════════════════════════════════
   CATEGORIES STRIP
   ══════════════════════════════════════ */
.categories-strip {
	background: var(--color-cream);
	border-top: 1px solid var(--color-light);
	border-bottom: 1px solid var(--color-light);
	content-visibility: auto;
	contain-intrinsic-size: auto 400px;
}

.categories-inner {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: var(--spacing-3xl) var(--spacing-xl);
}

.categories-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-lg);
}

.category-card {
	background: var(--color-white);
	border: 1px solid var(--color-light);
	border-radius: var(--radius-md);
	padding: var(--spacing-xl) var(--spacing-lg);
	text-align: center;
	transition: transform 0.2s ease;
	text-decoration: none;
	display: block;
}

.category-card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}

.category-card:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 2px;
}

.category-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto var(--spacing-md);
	display: flex;
	align-items: center;
	justify-content: center;
}

.category-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-charcoal);
	margin-bottom: var(--spacing-xs);
}

.category-count {
	font-size: 13px;
	color: var(--color-mid);
}


/* ══════════════════════════════════════
   METHODOLOGY BANNER
   ══════════════════════════════════════ */
.method-banner {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: var(--spacing-3xl) var(--spacing-xl);
	content-visibility: auto;
	contain-intrinsic-size: auto 500px;
}

.method-inner {
	background: var(--color-charcoal);
	border-radius: var(--radius-lg);
	padding: var(--spacing-3xl) var(--spacing-2xl);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-3xl);
	align-items: center;
	position: relative;
	overflow: hidden;
}

.method-inner::after {
	content: '';
	position: absolute;
	right: -60px;
	top: 50%;
	transform: translateY(-50%);
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 1px solid rgba(183, 28, 28, 0.1);
	pointer-events: none;
}

.method-content {
	position: relative;
	z-index: 1;
}

.method-tag {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	color: #EF5350;
	text-transform: uppercase;
	margin-bottom: var(--spacing-md);
}

.method-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--color-white);
	letter-spacing: -0.5px;
	line-height: 1.25;
	margin-bottom: var(--spacing-md);
}

.method-desc {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-silver);
	margin-bottom: var(--spacing-lg);
}

.method-details {
	position: relative;
	z-index: 1;
}

.method-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.method-list-item {
	padding: var(--spacing-lg);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
}

.method-list-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-white);
	margin-bottom: var(--spacing-xs);
}

.method-list-desc {
	font-size: 13px;
	color: var(--color-silver);
	line-height: 1.5;
}


/* ══════════════════════════════════════
   LATEST LIST
   ══════════════════════════════════════ */
.latest-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.latest-item {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
	border-bottom: 1px solid var(--color-light);
	align-items: center;
}

.latest-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.latest-image {
	aspect-ratio: 4/3;
	background: var(--color-cream);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.latest-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;                     /* ← fills frame, crops edges */
}

.latest-category {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-crimson);
	margin-bottom: var(--spacing-xs);
}

.latest-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: var(--spacing-sm);
}

.latest-title a {
	color: var(--color-charcoal);
	text-decoration: none;
	transition: color 0.15s;
}

.latest-title a:hover {
	color: var(--color-crimson);
}

.latest-title a:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 2px;
	border-radius: 2px;
}

.latest-excerpt {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-mid);
	line-height: 1.6;
}

.latest-meta {
	font-size: 12px;
	color: var(--color-mid);
	margin-top: var(--spacing-sm);
}


/* ══════════════════════════════════════
   TOOLS GRID (homepage)
   ══════════════════════════════════════ */
.tools-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
}

.tool-card {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	padding: var(--spacing-xl);
	background: var(--color-white);
	border: 1px solid var(--color-light);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--color-charcoal);
	transition: box-shadow 0.2s ease;
}

.tool-card:hover {
	border-color: var(--color-crimson);
	box-shadow: 0 2px 12px rgba(183, 28, 28, 0.06);
}

.tool-card-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: var(--color-crimson-glow);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tool-card-body {
	flex: 1;
	min-width: 0;
}

.tool-card-title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.2px;
	margin-bottom: var(--spacing-xs);
}

.tool-card-desc {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-mid);
	line-height: 1.5;
}

.tool-card-arrow {
	flex-shrink: 0;
	color: var(--color-silver);
	transition: color 0.2s ease, transform 0.2s ease;
}

.tool-card:hover .tool-card-arrow {
	color: var(--color-crimson);
	transform: translateX(3px);
}

@media (max-width: 767px) {
	.tools-grid {
		grid-template-columns: 1fr;
	}
}


/* ══════════════════════════════════════
   ARTICLE SINGLE (posts + pages)
   ══════════════════════════════════════ */
.article-single {
	max-width: var(--page-width);
	margin: 0 auto;
}

.article-header {
	padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl);
	text-align: center;
}

.article-header-inner {
	max-width: var(--content-width);
	margin: 0 auto;
}

.article-category {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-crimson);
	margin-bottom: var(--spacing-md);
}

.article-title {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.5px;
	margin-bottom: var(--spacing-md);
}

.article-meta {
	font-size: 13px;
	color: var(--color-mid);
	margin-bottom: var(--spacing-md);
}

.article-meta .meta-sep {
	margin: 0 6px;
	color: var(--color-light);
}

.article-disclosure {
	font-size: 13px;
	color: var(--color-mid);
	line-height: 1.5;
	max-width: 520px;
	margin: 0 auto;
}

/* Legacy: kept for archive/fallback templates that may still use .article-featured-image */
.article-featured-image {
	max-width: var(--page-width);
	margin: 0 auto;
}

.article-featured-image img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: var(--radius-lg);
}


/* ══════════════════════════════════════
   ARTICLE BODY — EDITORIAL TYPOGRAPHY
   ══════════════════════════════════════ */
.article-body {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 var(--spacing-xl) var(--spacing-3xl);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--color-charcoal);
}

.article-body h2 {
	font-family: var(--font-primary);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.25;
	margin: var(--spacing-2xl) 0 var(--spacing-md);
}

.article-body h3 {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	margin: var(--spacing-xl) 0 var(--spacing-md);
}

.article-body h4 {
	font-family: var(--font-primary);
	font-size: 17px;
	font-weight: 600;
	margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.article-body p {
	margin-bottom: 1.5em;
}

.article-body a:not(.cta-amazon) {
	color: var(--color-crimson);
	text-decoration: underline;
	transition: color 0.15s;
}

.article-body a:not(.cta-amazon):hover {
	color: var(--color-crimson-dark);
}

.article-body a:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 2px;
	border-radius: 2px;
}

.article-body ul,
.article-body ol {
	margin: 0 0 1.5em 1.5em;
}

.article-body li {
	margin-bottom: 0.5em;
}

.article-body blockquote {
	border-left: 3px solid var(--color-crimson);
	padding: var(--spacing-md) var(--spacing-lg);
	margin: var(--spacing-xl) 0;
	font-style: italic;
	color: var(--color-mid);
	background: var(--color-cream);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}


/* ── Article Body: Tables ── */
.article-body table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-primary);
	font-size: 14px;
}

.article-body th {
	background: var(--color-charcoal);
	color: var(--color-white);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 12px 16px;
	text-align: left;
}

.article-body td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-light);
}

.article-body tr:nth-child(even) td {
	background: var(--color-cream);
}

/* Table scroll containers — one rule set for both WordPress block tables and PHP-wrapped tables */
.article-body .wp-block-table,
.article-body .table-scroll-wrap {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: var(--spacing-xl) 0;
	max-width: calc(100vw - 32px);
}

.article-body .wp-block-table table,
.article-body .table-scroll-wrap table {
	min-width: 540px;
	width: max-content;
	margin: 0;
}


/* ── Article Body: Images ── */
.article-body .wp-block-image {
	margin: var(--spacing-2xl) 0;
}

.article-body .wp-block-image figure {
	background: var(--color-cream);
	border: 1px solid var(--color-light);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.article-body .wp-block-image figure img {
	border-radius: var(--radius-md);
	margin: 0 auto;
	display: block;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
}

.article-body .wp-block-image figcaption {
	font-family: var(--font-primary);
	font-size: 12px;
	color: var(--color-mid);
	text-align: center;
	margin-top: var(--spacing-sm);
	padding-top: var(--spacing-sm);
	border-top: 1px solid var(--color-light);
}

/* Tall images (infographics) — cap height so they don't dominate the viewport */
.article-body .wp-block-image.size-full figure img,
.article-body .wp-block-image.size-large figure img {
	max-height: 80vh;
	object-fit: contain;
}


/* ══════════════════════════════════════
   ARTICLE FOOTER
   ══════════════════════════════════════ */
.article-footer {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 var(--spacing-xl) var(--spacing-2xl);
}

.article-tags {
	font-size: 13px;
	color: var(--color-mid);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-light);
}

.article-tags a {
	color: var(--color-crimson);
	text-decoration: underline;
}


/* ══════════════════════════════════════
   POST NAVIGATION
   ══════════════════════════════════════ */
.post-navigation {
	max-width: var(--content-width);
	margin: 0 auto var(--spacing-3xl);
	padding: 0 var(--spacing-xl);
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-xl);
	border-top: 1px solid var(--color-light);
	padding-top: var(--spacing-xl);
}

.post-navigation a {
	text-decoration: none;
	color: var(--color-charcoal);
	transition: color 0.15s;
}

.post-navigation a:hover {
	color: var(--color-crimson);
}

.nav-label {
	font-size: 12px;
	color: var(--color-mid);
	display: block;
	margin-bottom: var(--spacing-xs);
}

.nav-title {
	font-size: 15px;
	font-weight: 600;
}


/* ══════════════════════════════════════
   ARCHIVE HEADER
   ══════════════════════════════════════ */
.archive-header {
	padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl);
	text-align: center;
}

.archive-header-inner {
	max-width: var(--content-width);
	margin: 0 auto;
}

.archive-title {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin-bottom: var(--spacing-sm);
}

.archive-desc {
	font-family: var(--font-body);
	font-size: 17px;
	color: var(--color-mid);
	line-height: 1.7;
}


/* ══════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════ */
.pagination {
	max-width: var(--page-width);
	margin: var(--spacing-2xl) auto 0;
	padding: 0 var(--spacing-xl);
	text-align: center;
}

.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid var(--color-light);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--color-charcoal);
	transition: border-color 0.2s ease, background 0.2s ease;
}

.pagination a:hover {
	border-color: var(--color-mid);
}

.pagination .current {
	background: var(--color-crimson);
	color: var(--color-white);
	border-color: var(--color-crimson);
}


/* ══════════════════════════════════════
   TABLE OF CONTENTS
   ══════════════════════════════════════ */
.toc {
	background: var(--color-cream);
	border-left: 3px solid var(--color-crimson);
	border-radius: var(--radius-md);
	padding: var(--spacing-lg) var(--spacing-xl);
	margin-bottom: var(--spacing-2xl);
}

.toc-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: var(--font-primary);
}

.toc-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-charcoal);
	letter-spacing: -0.3px;
}

.toc-icon {
	width: 20px;
	height: 20px;
	position: relative;
}

.toc-icon::before,
.toc-icon::after {
	content: '';
	position: absolute;
	background: var(--color-mid);
	transition: transform 0.2s;
}

.toc-icon::before {
	width: 12px;
	height: 2px;
	top: 9px;
	left: 4px;
}

.toc-icon::after {
	width: 2px;
	height: 12px;
	top: 4px;
	left: 9px;
}

.toc-toggle[aria-expanded="true"] .toc-icon::after {
	transform: rotate(90deg);
	opacity: 0;
}

.toc-list {
	list-style: none;
	counter-reset: toc-h2;
	margin: var(--spacing-md) 0 0;
	padding: 0;
	display: none;
}

.toc-toggle[aria-expanded="true"] + .toc-list {
	display: block;
}

.toc-list li {
	margin-bottom: 0;
	border-bottom: 1px solid rgba(0,0,0,0.04);
}

.toc-list li:not(.toc-sub) {
	counter-increment: toc-h2;
}

.toc-list li:last-child {
	border-bottom: none;
}

.toc-list li a {
	display: block;
	padding: 8px 0;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-charcoal);
	text-decoration: none !important;
	transition: color 0.15s;
}

.toc-list li:not(.toc-sub) a::before {
	content: counter(toc-h2) ". ";
	color: var(--color-mid);
	font-weight: 600;
}

.toc-list li a:hover {
	color: var(--color-crimson);
}

.toc-list li.toc-sub {
	padding-left: var(--spacing-lg);
}

.toc-list li.toc-sub a {
	font-size: 13px;
	font-weight: 400;
	color: var(--color-mid);
}

.toc-list li.toc-sub a::before {
	content: "– ";
	color: var(--color-light);
}

.toc-list li.toc-sub a:hover {
	color: var(--color-crimson);
}

@media (max-width: 768px) {
	.toc {
		padding: var(--spacing-md) var(--spacing-lg);
	}
}


/* ══════════════════════════════════════
   RELATED POSTS
   ══════════════════════════════════════ */
.related-posts {
	max-width: var(--page-width);
	margin: var(--spacing-3xl) auto 0;
	padding: 0 var(--spacing-xl);
}

.related-heading {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-mid);
	margin-bottom: var(--spacing-lg);
	text-align: center;
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-lg);
}

.related-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: var(--color-white);
	border: 1px solid var(--color-light);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.related-card:hover {
	border-color: var(--color-crimson);
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.related-image {
	aspect-ratio: 16/9;
	overflow: hidden;
}

.related-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.related-body {
	padding: var(--spacing-md);
}

.related-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-charcoal);
	margin-bottom: var(--spacing-xs);
}

.related-meta {
	font-size: 12px;
	color: var(--color-mid);
}

@media (max-width: 768px) {
	.related-grid {
		grid-template-columns: 1fr;
	}

	.related-card {
		flex-direction: row;
	}

	.related-image {
		width: 120px;
		flex-shrink: 0;
		aspect-ratio: auto;
	}

	.related-body {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}


/* ══════════════════════════════════════
   AUTHOR BOX
   ══════════════════════════════════════ */
.author-box {
	display: flex;
	gap: var(--spacing-lg);
	align-items: flex-start;
	background: var(--color-cream);
	border-left: 3px solid var(--color-crimson);
	border-radius: var(--radius-md);
	padding: var(--spacing-xl);
	margin: var(--spacing-2xl) auto 0;
	max-width: 680px;
}

.author-photo {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
}

.author-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.author-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--color-crimson);
	color: var(--color-white);
	font-size: 24px;
	font-weight: 700;
	border-radius: 50%;
}

.author-info {
	flex: 1;
	min-width: 0;
}

.author-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-mid);
	margin-bottom: 2px;
}

.author-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-charcoal);
	margin-bottom: var(--spacing-sm);
}

.author-bio {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-mid);
	margin: 0;
}

@media (max-width: 768px) {
	.author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: var(--spacing-lg);
	}
}


/* ══════════════════════════════════════
   404
   ══════════════════════════════════════ */
.error-404 {
	padding: var(--spacing-4xl) var(--spacing-xl);
	text-align: center;
}

.error-inner {
	max-width: 560px;
	margin: 0 auto;
}

.error-code {
	font-size: 80px;
	font-weight: 800;
	color: var(--color-crimson);
	line-height: 1;
	margin-bottom: var(--spacing-sm);
	opacity: 0.15;
}

.error-404 h1 {
	font-size: 36px;
	font-weight: 700;
	margin-bottom: var(--spacing-md);
}

.error-404 p {
	font-family: var(--font-body);
	font-size: 17px;
	color: var(--color-mid);
	line-height: 1.7;
	margin-bottom: var(--spacing-lg);
}

.error-section {
	margin-top: var(--spacing-2xl);
	text-align: left;
}

.error-section-title {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-mid);
	margin-bottom: var(--spacing-md);
	text-align: center;
}

.error-post-list {
	list-style: none;
	padding: 0;
}

.error-post-list li {
	padding: 10px 0;
	border-bottom: 1px solid var(--color-light);
}

.error-post-list li:last-child {
	border-bottom: none;
}

.error-post-list a {
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--color-charcoal);
	text-decoration: none;
	transition: color 0.2s;
}

.error-post-list a:hover {
	color: var(--color-crimson);
}

.error-cat-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	justify-content: center;
}

.error-cat-pill {
	display: inline-block;
	padding: 8px 16px;
	background: var(--color-cream);
	border: 1px solid var(--color-light);
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-charcoal);
	text-decoration: none;
	transition: all 0.2s;
}

.error-cat-pill:hover {
	background: var(--color-crimson);
	color: var(--color-white);
	border-color: var(--color-crimson);
}


/* ══════════════════════════════════════
   READING PROGRESS BAR
   ══════════════════════════════════════ */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: var(--color-crimson);
	z-index: 9999;
	pointer-events: none;
	will-change: width;
	transition: width 0.1s linear;
}

@media (max-width: 768px) {
	.reading-progress {
		height: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reading-progress {
		transition: none;
	}
}


/* ══════════════════════════════════════
   SEARCH FORM
   ══════════════════════════════════════ */
.search-form {
	display: flex;
	gap: var(--spacing-sm);
	max-width: 400px;
	margin: var(--spacing-lg) auto 0;
}

.search-form .search-field {
	flex: 1;
	padding: 12px 16px;
	font-family: var(--font-primary);
	font-size: 14px;
	border: 1px solid var(--color-light);
	border-radius: var(--radius-sm);
	color: var(--color-charcoal);
	min-height: 44px;
}

.search-form .search-field:focus {
	outline: 2px solid var(--color-crimson);
	outline-offset: 2px;
	border-color: var(--color-crimson);
}

.search-form .search-submit {
	background: var(--color-crimson);
	color: var(--color-white);
	font-weight: 600;
	padding: 12px 20px;
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
	min-height: 44px;
	transition: background 0.2s ease;
}

.search-form .search-submit:hover {
	background: var(--color-crimson-dark);
}


/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */
.site-footer {
	background: var(--color-charcoal);
	color: var(--color-silver);
	margin-top: var(--spacing-3xl);
	content-visibility: auto;
	contain-intrinsic-size: auto 350px;
}

.footer-inner {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-2xl);
}

.footer-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--spacing-2xl);
	padding-bottom: var(--spacing-2xl);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--spacing-md);
}

.footer-logo-text {
	font-size: 18px;
	color: var(--color-white);
	font-weight: 300;
}

.footer-logo-text .the {
	color: #9E9E9E;
}

.footer-logo-text .dart {
	font-weight: 700;
}

.footer-tagline {
	font-family: var(--font-body);
	font-size: 14px;
	font-style: italic;
	color: var(--color-silver);
	line-height: 1.6;
	max-width: 280px;
}

.footer-col-title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-white);
	margin-bottom: var(--spacing-md);
}

.footer-links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.footer-links a {
	font-size: 14px;
	color: var(--color-silver);
	text-decoration: none;
	transition: color 0.15s;
}

.footer-links a:hover {
	color: var(--color-white);
}

.footer-links a:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 2px;
	border-radius: 2px;
}

.footer-bottom {
	padding-top: var(--spacing-lg);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--spacing-md);
}

.footer-copy {
	font-size: 13px;
	color: var(--color-silver);
}

.footer-disclosure {
	font-size: 12px;
	color: var(--color-silver);
	max-width: 480px;
	line-height: 1.5;
}


/* ══════════════════════════════════════
   WORDPRESS DEFAULTS
   ══════════════════════════════════════ */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-cream);
	clip: auto !important;
	clip-path: none;
	color: var(--color-charcoal);
	display: block;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.alignleft {
	float: left;
	margin-right: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
}

.alignright {
	float: right;
	margin-left: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/* ══════════════════════════════════════
   PAGE HERO (featured image + title overlay)
   ══════════════════════════════════════ */
.page-hero {
	position: relative;
	max-width: var(--page-width);
	margin: 0 auto;
}

.page-hero-image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
}

.page-hero-image img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	display: block;
}

.page-hero-overlay {
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
	background: linear-gradient(to top, rgba(20, 20, 20, 0.75) 0%, rgba(20, 20, 20, 0.1) 60%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--spacing-2xl);
}

.page-hero-title {
	font-size: 40px;
	font-weight: 700;
	color: var(--color-white);
	letter-spacing: -0.5px;
	line-height: 1.2;
	max-width: 600px;
}

.page-hero + .article-body {
	padding-top: var(--spacing-2xl);
}

/* Tool pages — replace removed inline padding-top:48px */
.tool-page .article-body {
	padding-top: 24px;
}


/* ══════════════════════════════════════
   SEARCH OVERLAY
   ══════════════════════════════════════ */
.search-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(20, 20, 20, 0.95);
	z-index: 250;
	align-items: flex-start;
	justify-content: center;
	padding-top: 20vh;
}

.search-overlay[aria-hidden="false"] {
	display: flex;
}

.search-overlay-inner {
	width: 100%;
	max-width: 640px;
	padding: 0 var(--spacing-xl);
	position: relative;
}

.search-overlay-form {
	display: flex;
	align-items: center;
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
	padding-bottom: var(--spacing-md);
	gap: var(--spacing-md);
}

.search-overlay-input {
	flex: 1;
	background: none;
	border: none;
	outline: none;
	font-family: var(--font-primary);
	font-size: 32px;
	font-weight: 300;
	color: var(--color-white);
	padding: var(--spacing-sm) 0;
}

.search-overlay-input::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.search-overlay-submit {
	background: none;
	color: rgba(255, 255, 255, 0.5);
	padding: var(--spacing-sm);
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.15s;
}

.search-overlay-submit:hover {
	color: var(--color-white);
}

.search-overlay-close {
	position: absolute;
	top: -60px;
	right: var(--spacing-xl);
	color: rgba(255, 255, 255, 0.5);
	padding: var(--spacing-sm);
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.15s;
}

.search-overlay-close:hover {
	color: var(--color-white);
}

.search-overlay-close:focus-visible,
.search-overlay-submit:focus-visible {
	outline: 2px solid var(--color-crimson);
	outline-offset: 2px;
}

.search-results {
	margin-top: var(--spacing-lg);
	max-height: 50vh;
	overflow-y: auto;
}

.search-result-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
	padding: 14px 0;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	text-decoration: none;
	transition: opacity 0.15s;
}

.search-result-item:hover {
	opacity: 0.7;
}

.search-result-title {
	font-size: 16px;
	font-weight: 500;
	color: var(--color-white);
}

.search-result-cat {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-crimson);
	white-space: nowrap;
	flex-shrink: 0;
}

.search-no-results {
	padding: var(--spacing-lg) 0;
	color: rgba(255,255,255,0.3);
	font-size: 15px;
}


/* ══════════════════════════════════════
   CONTENT GRIDS (used in article body)
   ══════════════════════════════════════ */
.content-grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--spacing-lg);
	margin: var(--spacing-2xl) 0;
}

.content-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	margin: var(--spacing-xl) 0;
}


/* ══════════════════════════════════════
   RESPONSIVE — TABLET (max 1023px)
   ══════════════════════════════════════ */
@media (max-width: 1023px) {
	.articles-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.categories-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.method-inner {
		grid-template-columns: 1fr;
	}

	.footer-top {
		grid-template-columns: 1fr 1fr;
	}

	.article-featured-image img {
		height: 300px;
	}

	.page-hero-image img {
		height: 320px;
	}

	.page-hero-title {
		font-size: 32px;
	}
}


/* ══════════════════════════════════════
   RESPONSIVE — MOBILE (max 767px)
   ══════════════════════════════════════ */
@media (max-width: 767px) {

	/* Layout grids → single column */
	.content-grid-3 {
		grid-template-columns: 1fr;
	}

	.content-grid-2 {
		grid-template-columns: 1fr;
	}

	/* Header */
	.header-inner {
		padding: 0 var(--spacing-md);
	}

	.nav-desktop {
		display: none;
	}

	.mobile-toggle {
		display: flex;
	}

	.mobile-search-btn {
		margin-top: var(--spacing-lg);
		border-color: rgba(255, 255, 255, 0.2);
		color: var(--color-white);
	}

	/* Search overlay */
	.search-overlay-input {
		font-size: 22px;
	}

	.search-overlay-inner {
		padding: 0 var(--spacing-md);
	}

	.search-overlay-close {
		right: var(--spacing-md);
	}

	/* Page hero → edge-to-edge on mobile */
	.page-hero {
		padding: 0;
	}

	.page-hero-image {
		border-radius: 0;
	}

	.page-hero-image img {
		height: 220px;
	}

	.page-hero-overlay {
		border-radius: 0;
		padding: var(--spacing-lg);
	}

	.page-hero-title {
		font-size: 24px;
	}

	/* Homepage hero */
	.hero {
		padding: var(--spacing-3xl) var(--spacing-md) var(--spacing-2xl);
		min-height: 280px;
	}

	.hero h1 {
		font-size: 28px;
		letter-spacing: -0.5px;
	}

	.hero-desc {
		font-size: 16px;
	}

	.hero-cta {
		width: 100%;
		justify-content: center;
	}

	/* Sections */
	.section {
		padding: var(--spacing-2xl) var(--spacing-md);
	}

	.section-title {
		font-size: 22px;
	}

	/* Article cards */
	.articles-grid {
		grid-template-columns: 1fr;
	}

	/* Categories */
	.categories-inner {
		padding: var(--spacing-2xl) var(--spacing-md);
	}

	.categories-grid {
		grid-template-columns: 1fr;
	}

	/* Methodology */
	.method-inner {
		padding: var(--spacing-2xl) var(--spacing-lg);
	}

	.method-title {
		font-size: 22px;
	}

	.method-cta {
		width: 100%;
		justify-content: center;
	}

	/* Legacy featured image */
	.article-featured-image {
		padding: 0 var(--spacing-md);
	}

	.article-featured-image img {
		height: 200px;
		border-radius: var(--radius-md);
	}

	/* Latest list */
	.latest-item {
		grid-template-columns: 1fr;
	}

	.latest-image {
		aspect-ratio: 16/9;
	}

	/* Article single */
	.article-title {
		font-size: 28px;
	}

	.article-header {
		padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-lg);
	}

	.article-body {
		padding: 0 var(--spacing-md) var(--spacing-2xl);
		font-size: 16px;
	}

	.article-body h2 {
		font-size: 22px;
	}

	.article-body h3 {
		font-size: 18px;
	}

	/* Tool pages — mobile: side padding on article-body, hero banners break out */
	.tool-page .article-body {
		padding: 0 16px;
	}
	/* Hero gradient banners break out of the 16px padding to stay edge-to-edge */
	.tool-page .article-body > [style*="background:linear-gradient"],
	.tool-page .article-body > [style*="background: linear-gradient"],
	.tool-page .article-body > div > [style*="background:linear-gradient"],
	.tool-page .article-body > div > [style*="background: linear-gradient"] {
		margin-left: -16px;
		margin-right: -16px;
	}
	/* Full-width breakout apps reset on mobile (already full-width via article-body) */
	#events-app, #rankings-app, #quiz-app {
		width: auto !important;
		margin-left: 0 !important;
	}

	.tool-page .drq-wrap,
	.tool-page .dcc-wrap {
		padding: 0 0 60px;
		max-width: 100%;
	}

	.tool-page .drq-wrap .hero {
		margin-bottom: 16px;
		padding: 12px 16px 0;
	}

	.tool-page .drq-wrap .progress-wrap,
	.tool-page .drq-wrap .question-card,
	.tool-page .drq-wrap .results,
	.tool-page .drq-wrap .loading-screen,
	.tool-page .drq-wrap .editorial {
		padding-left: 16px;
		padding-right: 16px;
	}

	.article-footer {
		padding: 0 var(--spacing-md) var(--spacing-xl);
	}

	/* Footer */
	.footer-top {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	.footer-bottom {
		flex-direction: column;
	}

	/* Post navigation */
	.post-navigation {
		flex-direction: column;
	}
}

/* ══════════════════════════════════════
   TOOL PAGES — full width, no top gap
   ══════════════════════════════════════ */
.tool-page .article-body {
	max-width: 100%;
	padding-top: 0;
}
.tool-page .article-single {
	margin-top: 0;
}
.tool-page .site-main {
	padding-top: 0;
}

/* ══════════════════════════════════════
   STAR RATING WIDGET
   ══════════════════════════════════════ */
.tds-rating-widget {
	max-width: 680px;
	margin: 0 auto 48px;
	padding: 32px;
	background: var(--color-charcoal);
	border-radius: 12px;
	text-align: center;
}
.tds-rating-label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #9E9E9E;
	margin-bottom: 16px;
}
.tds-stars {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 12px;
}
.tds-star {
	background: none;
	border: none;
	font-size: 32px;
	cursor: pointer;
	color: #424242;
	padding: 4px;
	transition: color 0.15s, transform 0.1s;
	line-height: 1;
}
.tds-star:hover,
.tds-star.hover,
.tds-star.filled {
	color: var(--color-crimson);
}
.tds-star:hover {
	transform: scale(1.15);
}
.tds-star:disabled {
	cursor: default;
	opacity: 0.7;
}
.tds-rating-summary {
	font-size: 13px;
	color: #9E9E9E;
	margin: 0;
}
.tds-rating-avg {
	font-weight: 700;
	color: #fff;
}
.tds-rating-count {
	color: #9E9E9E;
}
.tds-rating-thanks {
	font-size: 13px;
	color: var(--color-crimson);
	font-weight: 600;
	margin-top: 8px;
}