/* =========================================================================
   Basecamp — everything theme.json cannot express.
   States, block style variations, ad slots, table collapse, focus rings.
   All colors reference presets so the "Night drive" variation just works.
   ========================================================================= */

/* ---- Root padding: sm mobile / xl desktop (spec) --------------------- */
@media (min-width: 782px) {
	:root {
		--wp--style--root--padding-left: var(--wp--preset--spacing--xl);
		--wp--style--root--padding-right: var(--wp--preset--spacing--xl);
	}
}

/* ---- Links (spec: underline explicitly on, offset 3px) --------------- */
:where(body) a {
	text-underline-offset: 3px;
}
a:active {
	color: color-mix(in srgb, var(--wp--preset--color--deep) 80%, #000);
}

/* ---- Focus: 2px amber outline, 2px offset — everywhere --------------- */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--amber);
	outline-offset: 2px;
}

/* ---- Buttons --------------------------------------------------------- */
.wp-block-button__link {
	min-height: 44px;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.wp-block-button__link:active {
	background-color: #0A0E14;
}
/* Amber button: add class "btn-amber" to the Button block */
.btn-amber .wp-block-button__link {
	background-color: var(--wp--preset--color--amber);
	color: #10161F;
}
.btn-amber .wp-block-button__link:hover {
	background-color: #FFC15E;
	color: #10161F;
}
.btn-amber .wp-block-button__link:active {
	background-color: #D98F22;
}
/* Outline button */
.is-style-outline .wp-block-button__link,
.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid #B8C2CC;
	color: var(--wp--preset--color--carbon);
}
.is-style-outline .wp-block-button__link:hover,
.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--carbon);
	color: var(--wp--preset--color--carbon);
}

/* ---- Utility type classes (used by patterns) ------------------------- */
.kicker {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
	color: var(--wp--preset--color--deep);
}
.kicker--amber { color: var(--wp--preset--color--amber); }
.kicker--steel { color: var(--wp--preset--color--steel); }
.mono-meta {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
}
.lede {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
	color: var(--wp--preset--color--steel);
}
.text-balance { text-wrap: balance; }

/* ---- is-style-panel: dark instrument surface ------------------------- */
.is-style-panel {
	background-color: var(--wp--custom--surface--dark);
	color: var(--wp--preset--color--cloud);
	border-radius: var(--wp--custom--radius--lg);
}
.is-style-panel :is(h1, h2, h3, h4, h5, h6) { color: #EDF3F8; }
.is-style-panel a { color: var(--wp--preset--color--cloud); }
.is-style-panel a:hover { color: #FFFFFF; }
.is-style-panel .kicker { color: var(--wp--preset--color--amber); }
.is-style-panel .mono-meta { color: var(--wp--preset--color--cloud); }
.is-style-panel hr,
.is-style-panel .wp-block-separator {
	border-color: var(--wp--custom--surface--line);
	background: var(--wp--custom--surface--line);
}

/* ---- is-style-plate: white card ------------------------------------- */
.is-style-plate {
	background-color: var(--wp--preset--color--white);
	border: var(--wp--custom--border--thin) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	transition: border-color .12s ease, box-shadow .12s ease;
}
.is-style-plate:where(:hover, :focus-within) {
	border-color: var(--wp--preset--color--carbon);
	box-shadow: var(--wp--custom--shadow--card);
}
.is-style-plate:active { box-shadow: none; }

/* ---- is-style-led: 7px amber dot rule -------------------------------- */
.wp-block-separator.is-style-led {
	border: none;
	background: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--amber);
	margin-left: 0;
}

/* ---- Header ----------------------------------------------------------- */
.site-header {
	background-color: var(--wp--custom--surface--dark);
}
.site-header a { text-decoration: none; }
.site-brand { display: flex; align-items: center; gap: 10px; }
.site-brand::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--amber);
	box-shadow: 0 0 8px rgba(242, 169, 59, .8);
	flex: none;
}
.site-header .wp-block-navigation a {
	color: var(--wp--preset--color--cloud);
}
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item > a {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.site-header .wp-block-navigation .current-menu-item > a {
	text-decoration-color: var(--wp--preset--color--amber);
}
.site-header .wp-block-search__button,
.site-header .wp-block-search__input { min-height: 44px; }

/* Amber header CTA sizing (smaller than body buttons) */
.site-header .btn-amber .wp-block-button__link {
	padding: 10px 18px;
	font-size: 13px;
}

/* ---- Footer ----------------------------------------------------------- */
.site-footer {
	background-color: var(--wp--custom--surface--dark);
	color: var(--wp--preset--color--cloud);
}
.site-footer a { color: var(--wp--preset--color--cloud); text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; }
.site-footer .footer-rule { border-top: 1px solid var(--wp--custom--surface--line); }

/* ---- Cards & rows ----------------------------------------------------- */
.row-compact {
	border-top: var(--wp--custom--border--thin) solid var(--wp--preset--color--line);
	transition: background-color .12s ease;
}
.row-compact:hover { background-color: var(--wp--preset--color--white); }

/* Card link covers the card (add class card-link to the title's parent group) */
.is-style-plate a { text-decoration: none; }
.is-style-plate a:hover { color: var(--wp--preset--color--carbon); }

/* ---- Callouts --------------------------------------------------------- */
.callout {
	border: var(--wp--custom--border--thin) solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--md);
}
.callout__badge {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	border: 1.5px solid var(--wp--preset--color--deep);
	color: var(--wp--preset--color--deep);
	border-radius: 4px;
	padding: 3px 8px;
	flex: none;
	align-self: flex-start;
}
.is-style-callout-warning.callout,
.is-style-callout-warning .callout,
.callout--warning {
	border-color: rgba(183, 84, 31, .5);
	background: #FBF3EC;
}
.callout--warning .callout__badge,
.is-style-callout-warning .callout__badge {
	border-color: #B7541F;
	color: #B7541F;
}
.callout--warning .callout__title {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
	color: #B7541F;
}
.callout--legal,
.is-style-callout-legal.callout {
	background: #EDF0F3;
}
.callout--legal .callout__badge,
.is-style-callout-legal .callout__badge {
	border-color: var(--wp--preset--color--steel);
	color: var(--wp--preset--color--steel);
	font-size: 10px;
}

/* ---- Ad slots — reserved height, zero CLS ----------------------------- */
.ad-slot {
	border: 1px dashed #C4CDD6;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: relative;
}
.ad-slot--leaderboard { min-height: 90px; }
.ad-slot--rect { min-height: 280px; }
.ad-slot--sidebar { min-height: 600px; }
.ad-slot--end { min-height: 120px; }
.ad-slot__label {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .12em;
	color: #98A5B3;
	border: 1px solid #C4CDD6;
	padding: 2px 6px;
	border-radius: 3px;
	margin: 0;
}
/* Occupied: the Custom HTML block inside renders something — border and
   label disappear, dimensions never change. */
.ad-slot:has(.ad-slot__content :is(iframe, ins, img, video, embed, object, div)) {
	border-color: transparent;
}
.ad-slot:has(.ad-slot__content :is(iframe, ins, img, video, embed, object, div)) .ad-slot__label {
	display: none;
}

/* ---- Tables ----------------------------------------------------------- */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}
.wp-block-table :is(td, th) {
	border: none;
	border-bottom: var(--wp--custom--border--thin) solid var(--wp--preset--color--line);
	padding: 12px 16px;
	text-align: left;
}
.wp-block-table thead {
	border-bottom: none;
}
.wp-block-table thead th {
	background: var(--wp--custom--surface--dark);
	color: var(--wp--preset--color--cloud);
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
}
/* Spec table: first column is the mono label */
.is-style-spec td:first-child,
.table-spec td:first-child {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
	white-space: nowrap;
}
/* Comparison table: mark winning cells with <strong>; losing cells stay steel */
.table-comparison td { color: var(--wp--preset--color--steel); }
.table-comparison td:first-child { color: var(--wp--preset--color--carbon); }
.table-comparison td strong { color: var(--wp--preset--color--carbon); }

/* Collapse to stacked cards below WP's 782px breakpoint (spec).
   First column doubles as the card label, so no generated labels needed. */
@media (max-width: 781.98px) {
	.wp-block-table.is-style-spec table,
	.wp-block-table.table-spec table,
	.wp-block-table.table-comparison table {
		display: block;
	}
	.wp-block-table.is-style-spec :is(thead),
	.wp-block-table.table-spec :is(thead),
	.wp-block-table.table-comparison :is(thead) {
		display: none;
	}
	.wp-block-table.is-style-spec :is(tbody, tr, td),
	.wp-block-table.table-spec :is(tbody, tr, td),
	.wp-block-table.table-comparison :is(tbody, tr, td) {
		display: block;
		width: 100%;
	}
	.wp-block-table.is-style-spec tr,
	.wp-block-table.table-spec tr,
	.wp-block-table.table-comparison tr {
		background: var(--wp--preset--color--white);
		border: var(--wp--custom--border--thin) solid var(--wp--preset--color--line);
		border-radius: var(--wp--custom--radius--md);
		margin-bottom: var(--wp--preset--spacing--sm);
		padding: var(--wp--preset--spacing--xs) 0;
	}
	.wp-block-table.is-style-spec td,
	.wp-block-table.table-spec td,
	.wp-block-table.table-comparison td {
		border-bottom: none;
		padding: 6px 16px;
	}
}

/* ---- Route: stat bar, stop cards, leg connectors ---------------------- */
.stat-cell {
	border-right: 1px solid var(--wp--custom--surface--line);
	padding-right: 32px;
}
.stat-cell:last-of-type { border-right: none; }
.stat-cell__value {
	font-weight: 800;
	font-size: 24px;
	line-height: 1.1;
	color: #EDF3F8;
	margin: 0;
}
.stat-cell__value--amber { color: var(--wp--preset--color--amber); }
.stat-cell__label {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cloud);
	margin: 0;
}
.stop-number {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--custom--surface--dark);
	color: var(--wp--preset--color--amber);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-weight: 800;
	font-size: 15px;
	flex: none;
}
.type-chip {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--deep);
	border: 1px solid var(--wp--preset--color--deep);
	border-radius: 4px;
	padding: 3px 7px;
}
.leg-connector {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0 10px 40px;
}
.leg-connector::before {
	content: "";
	width: 2px;
	height: 26px;
	background: #C4CDD6;
	flex: none;
}

/* ---- Step blocks ------------------------------------------------------ */
.step-label {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-weight: 800;
	font-size: 15px;
	color: var(--wp--preset--color--amber);
	line-height: 1.3;
}
.step-block {
	border-top: var(--wp--custom--border--thin) solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--md);
}

/* ---- Verdict box ------------------------------------------------------ */
.verdict-box {
	border: var(--wp--custom--border--thick) solid var(--wp--preset--color--carbon);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}
.verdict-box__header {
	background: var(--wp--custom--surface--dark);
	color: var(--wp--preset--color--cloud);
}
.verdict-box__score {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-weight: 800;
	font-size: 24px;
	color: var(--wp--preset--color--amber);
}

/* ---- Pagination chips ------------------------------------------------- */
.wp-block-query-pagination-numbers .page-numbers {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	border: var(--wp--custom--border--thin) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	padding: 10px 14px;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--wp--preset--color--deep);
	margin-right: 6px;
}
.wp-block-query-pagination-numbers .page-numbers:hover {
	border-color: var(--wp--preset--color--carbon);
	color: var(--wp--preset--color--carbon);
}
.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--carbon);
	border-color: var(--wp--preset--color--carbon);
	color: var(--wp--preset--color--mist);
}
.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

/* ---- Breadcrumbs / TOC ------------------------------------------------ */
.breadcrumbs {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
}
.toc-box ol, .toc-box ul { margin: 0; padding-left: 1.2em; }
.toc-box li { margin: 6px 0; }

/* ---- Media placeholders reserve their box ----------------------------- */
.media-reserve {
	background: #DDE3E9;
	border-radius: var(--wp--custom--radius--sm);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.media-reserve--169 { aspect-ratio: 16 / 9; }
.media-reserve--1610 { aspect-ratio: 16 / 10; }
.media-reserve--219 { aspect-ratio: 21 / 9; }
.media-reserve--43 { aspect-ratio: 4 / 3; }
.media-reserve p {
	font-family: var(--wp--preset--font-family--overpass-mono);
	font-size: var(--wp--preset--font-size--xs);
	color: #8B98A6;
	margin: 0;
}
.wp-block-image img { border-radius: var(--wp--custom--radius--sm); height: auto; }

/* ---- Newsletter input lookalike --------------------------------------- */
.input-lookalike {
	font-size: 14px;
	color: #8B98A6;
	background: var(--wp--custom--surface--raised);
	border: 1px solid var(--wp--custom--surface--line);
	border-radius: var(--wp--custom--radius--sm);
	padding: 13px 18px;
	min-width: 220px;
	margin: 0;
}

/* ---- Author cred ------------------------------------------------------ */
.author-cred .wp-block-image img { border-radius: 50%; }

/* ---- Motion: nothing moves; honour reduced motion anyway -------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---- Small screens ----------------------------------------------------- */
@media (max-width: 781.98px) {
	.stat-cell { border-right: none; padding-right: 0; }
	.leg-connector { padding-left: 20px; }
}