/*
Theme Name: HostRank Elegant
Theme URI: https://hostrank.com
Author: HostRank
Description: A premium white, editorial-style WordPress affiliate comparison theme. Swiss luxury aesthetic with Cormorant Garamond typography, gold accents, and conversion-optimised comparison tables. Built for hosting affiliate sites. Includes expert SEO optimisations: structured data (Review, ItemList, BreadcrumbList, WebSite, Organization), Open Graph, Twitter Cards, canonical URLs, hreflang, robots meta, deferred JS, emoji removal, auto Table of Contents, reading-progress bar, and E-E-A-T footer signals.
Version: 2.1.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hostrank
Tags: white, elegant, affiliate, comparison, hosting, full-width-template, custom-menu, featured-images, editor-style, translation-ready, seo-optimized
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	--ivory:    #FAFAF7;
	--white:    #FFFFFF;
	--paper:    #F5F4F0;
	--navy:     #0F1B2D;
	--navy2:    #1A2D45;
	--slate:    #2C4057;
	--mid:      #5A6F84;
	--muted:    #8A9BAD;
	--rule:     #D8D3C8;
	--rule2:    #E8E4DC;
	--gold:     #B8943F;
	--gold2:    #D4AA50;
	--gold-bg:  #FBF6EC;
	--green:    #1B7A4B;
	--green-bg: #EAF5EF;
	--red:      #C0392B;
	--red-bg:   #FDECEA;
	--font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
	--font-mono:  'DM Mono', 'Courier New', monospace;
	--max: 1200px;
	--pad-x: clamp(20px, 5vw, 56px);
	--pad-y: clamp(56px, 8vw, 96px);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
	font-family: var(--font-sans);
	background: var(--ivory);
	color: var(--navy);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { max-width: var(--max); margin: 0 auto; }
.section    { padding: var(--pad-y) var(--pad-x); }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .65rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--gold); }

.serif-title {
	font-family: var(--font-serif);
	font-weight: 300;
	color: var(--navy);
	line-height: 1.15;
}
.serif-title em { font-style: italic; color: var(--gold); }

.section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-bottom: 40px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--rule);
}
.section-header-desc { font-size: .85rem; color: var(--mid); font-weight: 300; max-width: 380px; line-height: 1.75; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background: var(--white);
	border-bottom: 1px solid var(--rule);
	height: 68px;
}
.nav-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--pad-x);
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
/* Brand */
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-brand-mark {
	width: 28px; height: 28px;
	border: 1.5px solid var(--navy);
	display: flex; align-items: center; justify-content: center;
}
.nav-brand-mark svg { width: 14px; height: 14px; display: block; }
.nav-brand-text {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--navy);
	letter-spacing: .03em;
}
.nav-brand-text .nav-accent { color: var(--gold); }
/* Links */
.nav-menu { display: flex; align-items: center; gap: 28px; }
.nav-menu a {
	font-size: .74rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mid);
	text-decoration: none;
	transition: color .2s;
}
.nav-menu a:hover { color: var(--navy); }
/* Right side */
.nav-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-updated {
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold);
	background: var(--gold-bg);
	border: 1px solid rgba(184,148,63,.25);
	padding: 5px 12px;
	border-radius: 2px;
}
/* Hamburger */
.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 4px;
	background: none;
	border: none;
	cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--navy); transition: all .3s; }
.nav-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Mobile drawer */
.nav-drawer {
	display: none;
	position: fixed;
	top: 68px; left: 0; right: 0;
	background: var(--white);
	border-bottom: 1px solid var(--rule);
	padding: 24px var(--pad-x) 32px;
	z-index: 999;
	flex-direction: column;
}
.nav-drawer.open { display: flex; }
.nav-drawer a {
	font-size: .9rem;
	font-weight: 400;
	letter-spacing: .06em;
	color: var(--mid);
	padding: 14px 0;
	border-bottom: 1px solid var(--rule2);
	text-decoration: none;
	transition: color .2s;
}
.nav-drawer a:hover { color: var(--navy); }
.nav-drawer .btn-navy { margin-top: 20px; text-align: center; padding: 14px; display: block; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-gold {
	display: inline-block;
	background: var(--gold);
	color: var(--white);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 14px 32px;
	border-radius: 2px;
	text-decoration: none;
	transition: background .2s;
	white-space: nowrap;
	border: none;
	cursor: pointer;
}
.btn-gold:hover { background: var(--gold2); }

.btn-navy {
	display: inline-block;
	background: var(--navy);
	color: var(--white);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 12px 24px;
	border-radius: 2px;
	text-decoration: none;
	transition: background .2s;
	white-space: nowrap;
	border: none;
	cursor: pointer;
}
.btn-navy:hover { background: var(--navy2); }

.btn-line {
	display: inline-block;
	background: transparent;
	color: var(--navy);
	font-size: .74rem;
	font-weight: 400;
	letter-spacing: .06em;
	padding: 13px 24px;
	border: 1px solid var(--rule);
	border-radius: 2px;
	text-decoration: none;
	transition: border-color .2s, color .2s;
	white-space: nowrap;
	cursor: pointer;
}
.btn-line:hover { border-color: var(--navy); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
	background: var(--white);
	padding: clamp(80px,10vw,128px) var(--pad-x) clamp(56px,8vw,96px);
	border-bottom: 1px solid var(--rule);
	position: relative;
	overflow: hidden;
}
.hero::after {
	content: '';
	position: absolute;
	top: 0; right: 0;
	width: 40%;
	height: 100%;
	background: var(--ivory);
	clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
	pointer-events: none;
}
.hero-inner {
	max-width: var(--max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 72px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.hero-h1 { font-size: clamp(2.6rem, 5.5vw, 5rem); margin-bottom: 20px; }
.hero-sub { font-size: .95rem; color: var(--mid); font-weight: 300; line-height: 1.8; max-width: 480px; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
/* Trust cards */
.trust-stack { display: flex; flex-direction: column; gap: 12px; }
.trust-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 20px;
	background: var(--white);
	border: 1px solid var(--rule2);
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(15,27,45,.04);
}
.trust-num {
	font-family: var(--font-serif);
	font-size: 1.6rem;
	font-weight: 300;
	color: var(--navy);
	line-height: 1;
	white-space: nowrap;
}
.trust-label { font-size: .78rem; color: var(--mid); font-weight: 300; line-height: 1.5; }
.trust-label strong { display: block; font-size: .82rem; font-weight: 500; color: var(--navy); margin-bottom: 2px; }

/* ============================================================
   COMPARISON TABLE SECTION
   ============================================================ */
.section-compare {
	background: var(--white);
	padding: var(--pad-y) var(--pad-x);
	border-bottom: 1px solid var(--rule);
}
/* Desktop */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.htable { width: 100%; border-collapse: collapse; min-width: 680px; }
.htable thead th {
	padding: 13px 20px;
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: left;
	border-bottom: 2px solid var(--navy);
	background: var(--white);
	white-space: nowrap;
}
.htable thead th:first-child { padding-left: 0; }
.htable thead th:last-child  { text-align: center; }
.htable tbody tr { border-bottom: 1px solid var(--rule2); transition: background .15s; }
.htable tbody tr:hover { background: var(--ivory); }
.htable tbody tr.row-featured { background: var(--gold-bg); }
.htable tbody tr.row-featured:hover { background: #F6EFDC; }
.htable td { padding: 20px; vertical-align: middle; font-size: .875rem; }
.htable td:first-child { padding-left: 0; }
.htable td:last-child  { text-align: center; }
/* Host cell */
.host-cell { display: flex; align-items: center; }
.rank-num {
	font-family: var(--font-serif);
	font-size: 1.4rem;
	font-weight: 300;
	color: var(--rule);
	margin-right: 14px;
	flex-shrink: 0;
	line-height: 1;
}
.rank-num.r1 { color: var(--gold); }
.rank-num.r2 { color: var(--muted); }
.rank-num.r3 { color: #C0BAB0; }
.host-name    { font-weight: 500; font-size: .92rem; color: var(--navy); }
.host-tagline { font-size: .68rem; color: var(--muted); font-weight: 300; margin-top: 2px; }
/* Badges */
.score-badge { font-size: .8rem; font-weight: 600; font-family: var(--font-mono); padding: 4px 10px; border-radius: 2px; }
.score-badge.hi { background: var(--green-bg); color: var(--green); }
.score-badge.md { background: #EEF3F8; color: #2C5F8A; }
/* Data cells */
.mono-val { font-family: var(--font-mono); font-size: .82rem; color: var(--navy); font-weight: 400; }
.price-cell strong { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 300; color: var(--navy); }
.price-cell small  { display: block; font-size: .62rem; color: var(--muted); margin-top: 1px; }
/* CTAs */
.cta-table {
	display: inline-block;
	background: var(--navy);
	color: var(--white);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: 2px;
	text-decoration: none;
	transition: background .2s;
	white-space: nowrap;
}
.cta-table:hover   { background: var(--navy2); }
.cta-table.is-gold { background: var(--gold); }
.cta-table.is-gold:hover { background: var(--gold2); }
/* Mobile cards */
.mobile-cards { display: none; flex-direction: column; gap: 1px; background: var(--rule2); }
.mob-card { background: var(--white); padding: 20px var(--pad-x); }
.mob-card.is-featured { background: var(--gold-bg); }
.mob-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mob-card-stats { display: flex; gap: 20px; padding-top: 14px; border-top: 1px solid var(--rule2); flex-wrap: wrap; }
.mob-stat .stat-label { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mob-stat .stat-value { font-family: var(--font-mono); font-size: .82rem; color: var(--navy); margin-top: 2px; }

/* ============================================================
   REVIEW CARDS
   ============================================================ */
.section-reviews {
	background: var(--ivory);
	padding: var(--pad-y) var(--pad-x);
	border-bottom: 1px solid var(--rule);
}
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.review-card {
	background: var(--white);
	border: 1px solid var(--rule2);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .25s, border-color .25s;
}
.review-card:hover { box-shadow: 0 8px 40px rgba(15,27,45,.08); border-color: var(--rule); }
.review-card.is-featured { border-color: var(--gold); border-top: 3px solid var(--gold); }
.rc-body { padding: 24px; flex: 1; }
.rc-badge {
	font-size: .6rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.rc-badge::before { content: ''; width: 16px; height: 1px; background: var(--gold); }
.rc-name { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 400; color: var(--navy); margin-bottom: 8px; }
.rc-desc { font-size: .78rem; color: var(--mid); font-weight: 300; line-height: 1.65; margin-bottom: 20px; }
/* Metric bars */
.rc-metrics { display: flex; flex-direction: column; gap: 9px; }
.metric-row  { display: flex; align-items: center; gap: 10px; }
.metric-lbl  { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); width: 52px; flex-shrink: 0; }
.metric-track { flex: 1; height: 2px; background: var(--rule2); }
.metric-fill  { height: 100%; background: var(--gold); transition: width .8s ease; }
.metric-val   { font-family: var(--font-mono); font-size: .72rem; color: var(--navy); width: 22px; text-align: right; }
/* Card footer */
.rc-footer {
	padding: 18px 24px;
	border-top: 1px solid var(--rule2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--ivory);
	gap: 12px;
	flex-wrap: wrap;
}
.rc-price { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 300; color: var(--navy); line-height: 1; }
.rc-price small { font-family: var(--font-sans); font-size: .65rem; color: var(--muted); font-weight: 300; }

/* ============================================================
   EDITOR'S PICK SECTION (dark navy)
   ============================================================ */
.section-pick {
	background: var(--navy);
	padding: var(--pad-y) var(--pad-x);
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.pick-inner {
	max-width: var(--max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 80px;
	align-items: start;
}
/* Left panel */
.pick-eyebrow {
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.pick-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--gold); }
.pick-title { font-family: var(--font-serif); font-size: clamp(2rem,4vw,3.2rem); font-weight: 300; color: var(--white); line-height: 1.1; margin-bottom: 20px; }
.pick-title em { font-style: italic; color: var(--gold); }
.pick-score-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 24px; }
.pick-score-num { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 300; color: var(--gold); line-height: 1; }
.pick-score-denom { font-size: .75rem; color: rgba(255,255,255,.4); font-weight: 300; }
.pick-price-bar {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 20px 0;
	border-top: 1px solid rgba(255,255,255,.1);
	border-bottom: 1px solid rgba(255,255,255,.1);
	margin-bottom: 28px;
}
.pick-price-main strong { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 300; color: var(--white); }
.pick-price-main small  { font-size: .7rem; color: rgba(255,255,255,.4); margin-left: 4px; }
.pick-price-note { font-size: .72rem; color: rgba(255,255,255,.4); font-weight: 300; line-height: 1.6; }
.pick-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pick-read-link {
	color: rgba(255,255,255,.4);
	font-size: .75rem;
	font-weight: 300;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.15);
	padding-bottom: 1px;
	transition: color .2s;
}
.pick-read-link:hover { color: rgba(255,255,255,.7); }
/* Right panel */
.pick-right-label {
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255,255,255,.3);
	margin-bottom: 24px;
}
.feat-list { display: flex; flex-direction: column; }
.feat-li {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 20px 0;
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.feat-li:first-child { padding-top: 0; }
.feat-li:last-child  { border-bottom: none; }
.feat-li-num { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 300; color: var(--gold); opacity: .6; flex-shrink: 0; margin-top: 1px; }
.feat-li-title { font-size: .88rem; font-weight: 500; color: var(--white); margin-bottom: 4px; }
.feat-li-desc  { font-size: .78rem; color: rgba(255,255,255,.45); font-weight: 300; line-height: 1.6; }

/* ============================================================
   PROS / CONS
   ============================================================ */
.section-pc {
	background: var(--white);
	padding: var(--pad-y) var(--pad-x);
	border-bottom: 1px solid var(--rule);
}
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
.pc-panel { border: 1px solid var(--rule2); border-radius: 4px; overflow: hidden; }
.pc-panel-head { padding: 20px 24px; border-bottom: 1px solid var(--rule2); }
.pc-panel-head h3 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 400; display: flex; align-items: center; gap: 10px; }
.pc-panel-head h3.pros-heading { color: var(--green); }
.pc-panel-head h3.cons-heading { color: var(--red); }
.pc-items { padding: 4px 24px 8px; }
.pc-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule2); }
.pc-item:last-child { border-bottom: none; }
.pc-mark { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.pros-side .pc-mark { background: var(--green-bg); color: var(--green); }
.cons-side .pc-mark { background: var(--red-bg);   color: var(--red); }
.pc-text { font-size: .84rem; color: var(--mid); font-weight: 300; line-height: 1.6; }

/* ============================================================
   FAQ
   ============================================================ */
.section-faq {
	background: var(--ivory);
	padding: var(--pad-y) var(--pad-x);
	border-bottom: 1px solid var(--rule);
}
.faq-accordion { margin-top: 40px; border-top: 1px solid var(--rule); }
.faq-item      { border-bottom: 1px solid var(--rule); }
.faq-btn {
	width: 100%;
	padding: 22px 0;
	font-size: .95rem;
	font-weight: 400;
	color: var(--navy);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	background: none;
	border: none;
	text-align: left;
	font-family: var(--font-sans);
	transition: color .2s;
}
.faq-btn:hover { color: var(--gold); }
.faq-icon {
	width: 22px; height: 22px;
	border-radius: 50%;
	border: 1px solid var(--rule);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	font-size: .9rem;
	flex-shrink: 0;
	transition: all .25s;
}
.faq-item.open .faq-icon { background: var(--navy); border-color: var(--navy); color: var(--white); transform: rotate(45deg); }
.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height .4s ease, padding .3s;
	font-size: .88rem;
	color: var(--mid);
	font-weight: 300;
	line-height: 1.8;
	padding: 0;
}
.faq-item.open .faq-answer { max-height: 300px; padding: 0 0 24px; }

/* ============================================================
   AUTHOR STRIP
   ============================================================ */
.author-strip {
	background: var(--white);
	border-top: 1px solid var(--rule);
	padding: clamp(28px,5vw,52px) var(--pad-x);
}
.author-inner {
	max-width: var(--max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}
.author-avatar {
	width: 60px; height: 60px;
	border-radius: 50%;
	background: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-serif);
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--white);
	flex-shrink: 0;
}
.author-info  { flex: 1; min-width: 160px; }
.author-name  { font-family: var(--font-serif); font-size: 1rem; font-weight: 400; color: var(--navy); margin-bottom: 3px; }
.author-role  { font-size: .72rem; color: var(--muted); font-weight: 300; }
.author-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--green-bg);
	color: var(--green);
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 20px;
	margin-top: 7px;
}
.author-quote {
	font-family: var(--font-serif);
	font-size: .95rem;
	font-style: italic;
	color: var(--mid);
	font-weight: 300;
	line-height: 1.7;
	max-width: 480px;
	border-left: 2px solid var(--gold);
	padding-left: 18px;
}

/* ============================================================
   DISCLOSURE
   ============================================================ */
.disclosure-bar {
	background: var(--gold-bg);
	border-top: 1px solid rgba(184,148,63,.2);
	padding: 13px var(--pad-x);
	font-size: .72rem;
	color: var(--mid);
	line-height: 1.6;
}
/* Used on pages where the bar sits directly under the fixed nav */
.disclosure-bar--nav-offset { margin-top: 68px; }
.disclosure-bar a { color: var(--gold); text-decoration: none; }
.disclosure-bar a:hover { text-decoration: underline; }

/* ============================================================
   CTA FINALE
   ============================================================ */
.section-cta {
	background: var(--ivory);
	padding: clamp(80px,12vw,140px) var(--pad-x);
	text-align: center;
	border-bottom: 1px solid var(--rule);
}
.cta-eyebrow {
	font-size: .65rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.cta-eyebrow::before, .cta-eyebrow::after { content: ''; width: 40px; height: 1px; background: var(--gold); }
.cta-heading { font-size: clamp(2.4rem, 5vw, 4.5rem); margin-bottom: 20px; }
.cta-sub {
	font-size: .92rem;
	color: var(--mid);
	font-weight: 300;
	max-width: 500px;
	margin: 0 auto clamp(32px,4vw,48px);
	line-height: 1.75;
}
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.sticky-mobile-cta {
	display: none;
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 800;
	background: var(--white);
	border-top: 1px solid var(--rule);
	padding: 12px var(--pad-x);
	align-items: center;
	gap: 12px;
	justify-content: space-between;
	box-shadow: 0 -4px 20px rgba(15,27,45,.08);
}
.sticky-cta-text { font-size: .8rem; font-weight: 400; color: var(--navy); }
.sticky-cta-text strong { color: var(--gold); font-family: var(--font-serif); font-size: .95rem; }

/* ============================================================
   SINGLE REVIEW PAGE
   ============================================================ */
.review-hero-section {
	background: var(--white);
	padding-top: 68px;
	border-bottom: 1px solid var(--rule);
}
.review-hero-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: clamp(40px,6vw,80px) var(--pad-x) 0;
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 48px;
	align-items: end;
}
.review-breadcrumb { font-size: .7rem; color: var(--muted); margin-bottom: 16px; }
.review-breadcrumb a { color: var(--gold); text-decoration: none; }
.review-h1 { font-size: clamp(2.5rem,6vw,5rem); margin-bottom: 16px; }
.review-score-block { background: var(--ivory); border: 1px solid var(--rule2); border-radius: 4px; padding: 24px; text-align: center; flex-shrink: 0; }
.review-score-num   { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 300; color: var(--gold); line-height: 1; }
.review-score-lbl   { font-size: .62rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }
/* Metrics bar below hero */
.review-metrics-bar {
	border-top: 1px solid var(--rule);
	padding: clamp(20px,3vw,32px) var(--pad-x);
	background: var(--white);
}
.review-metrics-inner {
	max-width: var(--max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 24px;
}
.review-metric .rm-l { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.review-metric .rm-v { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 300; color: var(--navy); line-height: 1; }

/* ============================================================
   ARCHIVE PAGE
   ============================================================ */
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; margin-top: 40px; }

/* ============================================================
   BLOG / ARTICLE CONTENT
   ============================================================ */
.article-content { max-width: 100%; }
.article-content h1 { font-family: var(--font-serif); font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 300; color: var(--navy); margin: 48px 0 16px; line-height: 1.15; }
.article-content h2 { font-family: var(--font-serif); font-size: clamp(1.4rem,3vw,1.9rem); font-weight: 300; color: var(--navy); margin: 48px 0 16px; line-height: 1.2; padding-top: 8px; border-top: 1px solid var(--rule2); }
.article-content h3 { font-family: var(--font-serif); font-size: clamp(1.1rem,2.5vw,1.4rem); font-weight: 400; color: var(--navy); margin: 32px 0 12px; line-height: 1.3; }
.article-content h4 { font-family: var(--font-sans); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 28px 0 10px; }
.article-content h5, .article-content h6 { font-family: var(--font-sans); font-size: .88rem; font-weight: 600; color: var(--navy); margin: 20px 0 8px; }
.article-content p  { font-size: .97rem; color: var(--mid); font-weight: 300; line-height: 1.9; margin-bottom: 22px; }
.article-content a  { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; font-weight: 400; transition: color .15s; }
.article-content a:hover { color: var(--gold); }
.article-content strong, .article-content b { font-weight: 600; color: var(--navy); }
.article-content em, .article-content i { font-style: italic; }

/* Lists */
.article-content ul, .article-content ol { margin: 0 0 24px 0; padding-left: 0; }
.article-content ul li, .article-content ol li { font-size: .97rem; color: var(--mid); font-weight: 300; line-height: 1.85; padding: 5px 0 5px 24px; position: relative; }
.article-content ul li::before { content: '—'; position: absolute; left: 0; color: var(--gold); font-weight: 400; }
.article-content ol { counter-reset: ol-counter; }
.article-content ol li { counter-increment: ol-counter; }
.article-content ol li::before { content: counter(ol-counter) '.'; position: absolute; left: 0; color: var(--gold); font-family: var(--font-mono); font-size: .8rem; font-weight: 600; top: 7px; }
.article-content li > ul, .article-content li > ol { margin-top: 6px; margin-bottom: 0; }

/* Images */
.article-content img { max-width: 100%; height: auto; display: block; border-radius: 4px; margin: 28px 0; }
.article-content figure { margin: 32px 0; }
.article-content figcaption { font-size: .75rem; color: var(--muted); text-align: center; margin-top: 8px; font-family: var(--font-sans); font-style: italic; }

/* Blockquote */
.article-content blockquote {
	border-left: 3px solid var(--gold);
	margin: 36px 0;
	padding: 20px 28px;
	background: var(--ivory);
	border-radius: 0 4px 4px 0;
}
.article-content blockquote p {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	font-weight: 300;
	font-style: italic;
	color: var(--navy);
	margin: 0;
	line-height: 1.7;
}
.article-content blockquote cite {
	display: block;
	font-size: .75rem;
	color: var(--muted);
	font-style: normal;
	margin-top: 10px;
	font-family: var(--font-sans);
}

/* Code */
.article-content code {
	font-family: var(--font-mono);
	font-size: .82rem;
	background: rgba(15,27,45,.06);
	color: var(--navy);
	padding: 2px 6px;
	border-radius: 3px;
	border: 1px solid var(--rule2);
}
.article-content pre {
	background: #0F1B2D;
	color: #e2e8f0;
	padding: clamp(16px,3vw,28px);
	border-radius: 6px;
	overflow-x: auto;
	margin: 28px 0;
	font-size: .82rem;
	line-height: 1.7;
	font-family: var(--font-mono);
}
.article-content pre code {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

/* Tables */
.article-content table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: .88rem; }
.article-content thead th { background: var(--navy); color: #fff; padding: 10px 14px; text-align: left; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.article-content tbody td { padding: 10px 14px; border-bottom: 1px solid var(--rule2); color: var(--mid); font-weight: 300; vertical-align: top; }
.article-content tbody tr:hover td { background: var(--ivory); }
.article-content tbody tr:last-child td { border-bottom: none; }

/* Horizontal rule */
.article-content hr { border: none; border-top: 1px solid var(--rule2); margin: 44px 0; }

/* Callout / Notice boxes (WordPress Classic Editor uses .wp-block-) */
.article-content .wp-block-quote,
.article-content .wp-block-pullquote { border-left: 3px solid var(--gold); padding: 20px 24px; background: var(--ivory); border-radius: 0 4px 4px 0; margin: 32px 0; }
.article-content .wp-block-code pre { background: #0F1B2D; color: #e2e8f0; }
.article-content .wp-block-image { margin: 28px 0; }
.article-content .wp-block-image img { border-radius: 4px; }
.article-content .wp-block-separator { border-top: 1px solid var(--rule2); margin: 44px 0; }

/* TOC (legacy toc-box class used in review pages) */
.toc-box { background: var(--ivory); border: 1px solid var(--rule2); border-radius: 4px; padding: 22px 26px; margin-bottom: 40px; }
.toc-box ol { padding-left: 0; }
.toc-box li { list-style: none; padding: 6px 0; border-bottom: 1px solid var(--rule2); font-size: .85rem; }
.toc-box li:last-child { border-bottom: none; }
.toc-box a { color: var(--mid); font-weight: 300; text-decoration: none; transition: color .2s; }
.toc-box a:hover { color: var(--gold); }

/* Verdict box */
.verdict-box { background: var(--ivory); border-left: 2px solid var(--gold); padding: 22px 28px; margin: 36px 0; border-radius: 0 4px 4px 0; }
.verdict-label { font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.verdict-box p { font-family: var(--font-serif); font-size: 1rem; font-weight: 300; color: var(--navy); line-height: 1.7; margin: 0; font-style: italic; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background: var(--navy);
	padding: 36px var(--pad-x);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.footer-brand { font-family: var(--font-serif); font-size: 1rem; font-weight: 300; color: rgba(255,255,255,.55); }
.footer-brand .fa { color: var(--gold); }
.footer-copy  { font-size: .7rem; color: rgba(255,255,255,.3); }
.footer-links { display: flex; gap: 20px; }
.footer-links a { font-size: .7rem; color: rgba(255,255,255,.3); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--gold); }

/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */
@media (max-width: 1024px) {
	.nav-menu    { display: none; }
	.nav-updated { display: none; }
	.nav-toggle  { display: flex; }
	.hero-inner  { grid-template-columns: 1fr; gap: 48px; }
	.hero::after { display: none; }
	.trust-stack { flex-direction: row; flex-wrap: wrap; }
	.trust-card  { flex: 1; min-width: 160px; }
	.pick-inner  { grid-template-columns: 1fr; gap: 48px; }
	.reviews-grid { grid-template-columns: 1fr 1fr; }
	.review-hero-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE — 767px
   ============================================================ */
@media (max-width: 767px) {
	.hero   { padding-top: 88px; }
	.trust-stack { display: none; }
	/* Table → cards */
	.table-wrap   { display: none; }
	.mobile-cards { display: flex; }
	/* Grids */
	.reviews-grid { grid-template-columns: 1fr; }
	.pc-grid      { grid-template-columns: 1fr; }
	.archive-grid { grid-template-columns: 1fr; }
	/* Author */
	.author-inner { flex-direction: column; align-items: flex-start; }
	.author-quote { max-width: 100%; }
	/* Sticky CTA */
	.sticky-mobile-cta { display: flex; }
	body { padding-bottom: 64px; }
	/* Section header */
	.section-header { flex-direction: column; align-items: flex-start; }
	/* CTA */
	.cta-actions { flex-direction: column; align-items: center; }
	.cta-actions .btn-gold,
	.cta-actions .btn-line { width: 100%; max-width: 320px; text-align: center; }
	/* Footer */
	.site-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 480px) {
	.hero-actions { flex-direction: column; }
	.hero-actions .btn-gold,
	.hero-actions .btn-line { width: 100%; text-align: center; }
	.pick-actions { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
	.site-header, .sticky-mobile-cta, .nav-drawer { display: none !important; }
	body { background: white; color: black; padding: 0; }
}

/* ============================================================
   SEO / ACCESSIBILITY ENHANCEMENTS
   ============================================================ */

/* ── Skip to content (screen-reader + keyboard nav) ───────── */
.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 9999;
	padding: 8px 16px;
	background: var(--navy);
	color: #fff;
	font-size: .8rem;
	border-radius: 0 0 4px 4px;
	text-decoration: none;
	transition: top .15s;
}
.skip-link:focus { top: 0; outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Global focus ring (Core Web Vitals / a11y) ───────────── */
:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ── Semantic breadcrumb nav ──────────────────────────────── */
.breadcrumb {
	font-size: .72rem;
	color: var(--muted);
	line-height: 1;
}
.breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb a  { color: var(--gold); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--muted); font-size: .8em; margin: 0 2px; }

/* ── Dark breadcrumb (inside navy hero on blog posts) ─────── */
.breadcrumb--dark { margin-bottom: 20px; }
.breadcrumb--dark,
.breadcrumb--dark .breadcrumb-sep { color: rgba(255,255,255,.3); }
.breadcrumb--dark a { color: rgba(255,255,255,.55); }
.breadcrumb--dark a:hover { color: var(--gold); text-decoration: none; }
.breadcrumb--dark li:last-child span { color: rgba(255,255,255,.4); }

/* ── Footer E-E-A-T statement ─────────────────────────────── */
.footer-eeat {
	font-size: .72rem;
	color: rgba(255,255,255,.28);
	text-align: center;
	max-width: 640px;
	margin: 0 auto 12px;
	line-height: 1.6;
}

/* ── Review article microdata wrapper ────────────────────── */
article.review-hero-section { display: block; }

/* ── Canonical image: lazy-load placeholder ──────────────── */
img[loading="lazy"] { content-visibility: auto; }

/* ── Table of contents (injected by JS) ──────────────────── */
.toc {
	background: var(--ivory);
	border: 1px solid var(--rule2);
	border-radius: 4px;
	padding: clamp(16px,2.5vw,28px);
	margin-bottom: 36px;
}
.toc-title {
	font-family: var(--font-sans);
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: 12px;
}
.toc ol { margin: 0; padding-left: 18px; }
.toc li { font-size: .85rem; line-height: 2; }
.toc a  { color: var(--navy); text-decoration: none; }
.toc a:hover { color: var(--gold); text-decoration: underline; }


/* ============================================================
   BLOG SYSTEM
   ============================================================ */

/* ── Blog Hero ────────────────────────────────────────────── */
.blog-hero {
	background: var(--navy);
	min-height: 42vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(108px, 14vw, 160px) 24px clamp(48px, 8vw, 80px);
	text-align: center;
}
.blog-hero-inner {
	max-width: 720px;
	margin: 0 auto;
}
.blog-hero-inner .eyebrow {
	justify-content: center;
	color: rgba(255,255,255,.45);
	margin-bottom: 16px;
}
.blog-hero-h1 {
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	color: #fff;
	margin-bottom: 20px;
}
.blog-hero-h1 em { color: var(--gold); font-style: italic; }
.blog-hero-sub {
	font-size: clamp(.88rem, 2vw, 1.05rem);
	color: rgba(255,255,255,.5);
	font-weight: 300;
	line-height: 1.75;
	max-width: 580px;
	margin: 0 auto;
}

/* ── Blog Section ─────────────────────────────────────────── */
.blog-section {
	background: var(--ivory);
	padding: clamp(40px, 7vw, 80px) 24px clamp(60px, 10vw, 120px);
}

/* ── Featured Post ────────────────────────────────────────── */
.blog-featured-post {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 48px);
	background: var(--white);
	border: 1px solid var(--rule2);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: clamp(28px, 5vw, 48px);
}
.blog-featured-thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 16/10;
}
.blog-featured-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
	display: block;
}
.blog-featured-post:hover .blog-featured-thumb img { transform: scale(1.03); }
.blog-featured-body {
	padding: clamp(24px, 4vw, 44px) clamp(20px, 3vw, 36px) clamp(24px, 4vw, 44px) 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.blog-featured-title {
	font-family: var(--font-serif);
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	font-weight: 300;
	color: var(--navy);
	margin: 10px 0 14px;
	line-height: 1.25;
}
.blog-featured-title a { color: inherit; text-decoration: none; }
.blog-featured-title a:hover { color: var(--gold); }
.blog-featured-excerpt {
	font-size: .92rem;
	color: var(--mid);
	font-weight: 300;
	line-height: 1.8;
	margin-bottom: 20px;
}

/* ── Blog Grid ────────────────────────────────────────────── */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 3vw, 28px);
	margin-bottom: clamp(28px, 5vw, 48px);
}
.blog-grid--full { grid-template-columns: repeat(3, 1fr); }

/* ── Blog Card ────────────────────────────────────────────── */
.blog-card {
	background: var(--white);
	border: 1px solid var(--rule2);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .25s, transform .25s;
}
.blog-card:hover {
	box-shadow: 0 8px 32px rgba(15,27,45,.1);
	transform: translateY(-2px);
}
.blog-card-thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 16/9;
}
.blog-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
	display: block;
}
.blog-card:hover .blog-card-thumb img { transform: scale(1.04); }
.blog-card-body {
	padding: clamp(16px, 2.5vw, 24px);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.blog-card-title {
	font-family: var(--font-serif);
	font-size: clamp(1rem, 2vw, 1.25rem);
	font-weight: 400;
	color: var(--navy);
	margin: 8px 0 10px;
	line-height: 1.3;
}
.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a:hover { color: var(--gold); }
.blog-card-excerpt {
	font-size: .82rem;
	color: var(--mid);
	font-weight: 300;
	line-height: 1.7;
	margin-bottom: 16px;
	flex: 1;
}
.blog-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--rule2);
	padding-top: 12px;
	margin-top: auto;
}

/* ── Blog Meta (date, category, read time) ────────────────── */
.blog-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.blog-cat-pill {
	display: inline-block;
	padding: 2px 8px;
	background: var(--navy);
	color: #fff;
	font-family: var(--font-sans);
	font-size: .65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-radius: 3px;
	text-decoration: none;
	transition: background .2s;
}
.blog-cat-pill:hover { background: var(--gold); }
.blog-cat-pill--hero {
	background: var(--gold);
	margin-bottom: 16px;
	display: inline-block;
}
.blog-date {
	font-size: .72rem;
	color: var(--muted);
	font-family: var(--font-sans);
}
.blog-read-time {
	font-size: .72rem;
	color: var(--muted);
	font-family: var(--font-mono);
}
.blog-read-link {
	font-family: var(--font-sans);
	font-size: .72rem;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	letter-spacing: .03em;
	transition: color .2s;
}
.blog-read-link:hover { color: var(--gold); }

/* ── Blog Pagination ──────────────────────────────────────── */
.blog-pagination {
	display: flex;
	justify-content: center;
	margin-top: clamp(20px, 4vw, 40px);
}
.blog-pagination .page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
}
.blog-pagination .page-numbers li a,
.blog-pagination .page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--rule2);
	border-radius: 4px;
	font-size: .78rem;
	font-family: var(--font-sans);
	color: var(--navy);
	text-decoration: none;
	transition: all .2s;
}
.blog-pagination .page-numbers li a:hover { border-color: var(--gold); color: var(--gold); }
.blog-pagination .page-numbers li span.current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Blog Empty State ─────────────────────────────────────── */
.blog-empty {
	text-align: center;
	padding: 80px 20px;
	color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════
   SINGLE BLOG POST
   ═══════════════════════════════════════════════════════════ */

/* ── Post Hero ────────────────────────────────────────────── */
.blog-post-hero {
	background: var(--navy);
	padding: 68px 0 0;
}
.blog-post-hero-inner {
	max-width: 800px;
	margin: 0 auto;
	padding: clamp(40px, 7vw, 80px) clamp(20px, 4vw, 40px) clamp(28px, 4vw, 44px);
}
.blog-post-h1 {
	font-size: clamp(1.8rem, 5vw, 3.4rem);
	color: #fff;
	line-height: 1.15;
	margin: 12px 0 20px;
}
.blog-post-byline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .78rem;
	color: rgba(255,255,255,.45);
	font-family: var(--font-sans);
}
.blog-post-author {
	display: flex;
	align-items: center;
	gap: 7px;
	color: rgba(255,255,255,.7);
	font-weight: 500;
}
.blog-author-avatar {
	border-radius: 50%;
	width: 28px !important;
	height: 28px !important;
	object-fit: cover;
}
.blog-byline-sep { color: rgba(255,255,255,.25); }
.blog-updated-note { color: var(--gold); font-weight: 500; }
.blog-post-hero-img {
	max-width: 940px;
	margin: 0 auto;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
}
.blog-post-hero-img img {
	width: 100%;
	display: block;
	max-height: 500px;
	object-fit: cover;
}
.blog-img-caption {
	background: rgba(15,27,45,.8);
	color: rgba(255,255,255,.6);
	font-size: .72rem;
	padding: 6px 14px;
	font-family: var(--font-sans);
	text-align: center;
}

/* ── Post Layout (article + sidebar) ─────────────────────── */
.blog-post-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: clamp(28px, 4vw, 60px);
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 40px);
	align-items: start;
}
.blog-post-main { min-width: 0; }
.blog-article { margin-bottom: 40px; }

/* ── Tags ─────────────────────────────────────────────────── */
.blog-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 40px;
}
.blog-tag-pill {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--rule2);
	border-radius: 20px;
	font-size: .72rem;
	color: var(--mid);
	text-decoration: none;
	font-family: var(--font-sans);
	transition: all .2s;
}
.blog-tag-pill:hover { border-color: var(--gold); color: var(--gold); }

/* ── Author Box ───────────────────────────────────────────── */
.blog-author-box {
	display: flex;
	gap: 16px;
	background: var(--ivory);
	border: 1px solid var(--rule2);
	border-radius: 6px;
	padding: clamp(20px, 3vw, 32px);
	margin-bottom: 40px;
	align-items: flex-start;
}
.blog-author-box-avatar img {
	border-radius: 50%;
	width: 56px !important;
	height: 56px !important;
	object-fit: cover;
}
.blog-author-box-name {
	font-family: var(--font-serif);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--navy);
	margin-bottom: 4px;
}
.blog-author-box-bio {
	font-size: .82rem;
	color: var(--mid);
	font-weight: 300;
	line-height: 1.7;
}

/* ── Post Navigation ──────────────────────────────────────── */
.blog-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 40px;
}
.blog-nav-item {
	background: var(--ivory);
	border: 1px solid var(--rule2);
	border-radius: 6px;
	padding: 16px 20px;
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s;
}
.blog-nav-item:hover { border-color: var(--gold); box-shadow: 0 2px 12px rgba(184,148,63,.12); }
.blog-nav-next { text-align: right; }
.blog-nav-dir {
	display: block;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--muted);
	font-family: var(--font-sans);
	margin-bottom: 4px;
}
.blog-nav-title {
	display: block;
	font-family: var(--font-serif);
	font-size: .9rem;
	color: var(--navy);
	line-height: 1.3;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.blog-post-sidebar {
	position: sticky;
	top: 90px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.blog-sidebar-toc {
	background: var(--ivory);
	border: 1px solid var(--rule2);
	border-radius: 6px;
	padding: 18px 20px;
}
.blog-sidebar-toc-title {
	font-family: var(--font-sans);
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: 10px;
}
#sidebar-toc-nav a {
	display: block;
	font-size: .8rem;
	color: var(--mid);
	text-decoration: none;
	padding: 4px 0;
	border-left: 2px solid transparent;
	padding-left: 10px;
	transition: all .15s;
	line-height: 1.4;
}
#sidebar-toc-nav a:hover,
#sidebar-toc-nav a.active { color: var(--navy); border-left-color: var(--gold); }
.blog-sidebar-pick {
	background: var(--navy);
	border-radius: 6px;
	padding: 20px;
	text-align: center;
}
.blog-sidebar-pick-label {
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--gold);
	margin-bottom: 8px;
}
.blog-sidebar-pick-name {
	font-family: var(--font-serif);
	font-size: 1.3rem;
	color: #fff;
	font-weight: 300;
	margin-bottom: 6px;
}
.blog-sidebar-pick-score {
	font-size: .82rem;
	color: rgba(255,255,255,.5);
	margin-bottom: 4px;
}
.blog-sidebar-pick-score span {
	font-size: 1.6rem;
	font-family: var(--font-serif);
	color: var(--gold);
	font-weight: 300;
}
.blog-sidebar-pick-price {
	font-size: .72rem;
	color: rgba(255,255,255,.4);
	margin-bottom: 4px;
}
.blog-sidebar-pick-review {
	display: block;
	margin-top: 8px;
	font-size: .7rem;
	color: rgba(255,255,255,.35);
	text-decoration: none;
	text-align: center;
}
.blog-sidebar-pick-review:hover { color: var(--gold); }
.blog-sidebar-related {
	background: var(--white);
	border: 1px solid var(--rule2);
	border-radius: 6px;
	padding: 18px 20px;
}
.blog-sidebar-related-title {
	font-family: var(--font-sans);
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: 12px;
}
.blog-related-item {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--rule2);
	text-decoration: none;
	transition: opacity .2s;
}
.blog-related-item:last-child { border-bottom: none; }
.blog-related-item:hover { opacity: .75; }
.blog-related-thumb {
	width: 56px;
	height: 56px;
	border-radius: 3px;
	overflow: hidden;
	flex-shrink: 0;
}
.blog-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-related-title {
	font-size: .78rem;
	color: var(--navy);
	line-height: 1.35;
	font-family: var(--font-serif);
	margin-bottom: 3px;
}
.blog-related-date {
	font-size: .68rem;
	color: var(--muted);
}

/* ── Blog Page Links (multi-page posts) ───────────────────── */
.blog-page-links {
	margin: 32px 0;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
}
.blog-page-links span span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--rule2);
	border-radius: 3px;
	font-family: var(--font-sans);
	font-size: .75rem;
}
.blog-page-links a span { color: var(--navy); }
.blog-page-links a span:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
	.blog-featured-post  { grid-template-columns: 1fr; }
	.blog-featured-thumb { aspect-ratio: 16/7; }
	.blog-featured-body  { padding: 20px 20px 24px; }
	.blog-grid           { grid-template-columns: 1fr 1fr; }
	.blog-post-layout    { grid-template-columns: 1fr; padding: 32px 20px; }
	.blog-post-sidebar   { position: static; }
	.blog-sidebar-toc    { display: none; }
}
@media (max-width: 600px) {
	.blog-grid            { grid-template-columns: 1fr; }
	.blog-post-nav        { grid-template-columns: 1fr; }
	.blog-author-box      { flex-direction: column; }
	.blog-post-hero-inner { padding: 28px 20px 24px; }
	.blog-post-h1         { font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* ============================================================
   BLOG PLACEHOLDER THUMBNAILS (no featured image)
   ============================================================ */
.blog-featured-thumb--no-img,
.blog-card-thumb--no-img {
	background: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
}
.blog-featured-thumb-placeholder,
.blog-card-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
}
.blog-featured-thumb-placeholder span,
.blog-card-thumb-placeholder span {
	font-family: var(--font-serif);
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 300;
	color: var(--gold);
	opacity: .4;
	text-transform: uppercase;
	line-height: 1;
}

/* ============================================================
   SINGLE POST — layout fixes
   ============================================================ */

/* Ensure the full blog-post-layout has proper background */
.blog-post-layout {
	background: var(--white);
}

/* Fix blog-post-hero not showing navy when no featured image */
.blog-post-hero {
	background: var(--navy);
	padding: 68px 0 0;
	min-height: 220px;
}

/* Author email shown instead of display name — hide email, show display name */
.blog-post-author .author-email { display: none; }

/* Ensure article content inside blog layout doesn't break out */
.blog-post-main .article-content {
	max-width: 100%;
}

/* Fix h2 border-top on first heading — remove top border from very first h2 */
.blog-article h2:first-child {
	border-top: none;
	margin-top: 0;
}

/* Single post full page background fix */
body.single-post {
	background: var(--white);
}