/**
 * Base CSS — only what theme.json + block-level settings cannot do.
 * Kept deliberately small: this is one of the < 4 render-blocking
 * requests in the performance budget (spec section 3).
 */

/* Quick-Verdict box (rendered via [ab24_quick_verdict] shortcode —
   see inc/spec-tables.php). Replicates the box/border/two-column
   layout that used to come from Group block style attributes, before
   that approach was replaced due to block-binding reliability issues. */
.ab24-quick-verdict {
	border: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface);
	padding: 24px;
	margin-bottom: 24px;
}
.ab24-quick-verdict-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 24px;
}
@media (max-width: 600px) {
	.ab24-quick-verdict-grid {
		grid-template-columns: 1fr;
	}
}
.ab24-verdict-label {
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0 0 4px;
}
.ab24-verdict-score {
	font-size: var(--wp--preset--font-size--xxx-large);
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--headline);
}
.ab24-verdict-main h3 {
	margin-top: 0;
}
.ab24-jump-nav {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--secondary);
}

/* FAQ block (rendered via [ab24_faq_block] shortcode). */
.ab24-faq-item {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 16px;
	margin-top: 16px;
}

/* Tabular numerals for spec tables, per spec 4.3 — numbers must align
   in columns. Inter ships a `tnum` OpenType feature. */
.ab24-tabular-nums td,
.ab24-tabular-nums th {
	font-variant-numeric: tabular-nums;
}

/* Comparison Table: sticky header row on desktop so the reader never
   loses track of which vehicles are being compared (spec 5.3). */
@media (min-width: 768px) {
	.ab24-compare-sticky table thead {
		position: sticky;
		top: var(--ab24-header-height, 64px);
		z-index: 2;
		background: var(--wp--preset--color--base);
	}
}

/* Comparison semantic colors — applied manually per-cell by editors via
   the block toolbar's "additional CSS class" (e.g. ab24-compare-better)
   until/unless an automatic winner calculation is built. */
.ab24-compare-better { color: var(--wp--preset--color--success); font-weight: 600; }
.ab24-compare-worse  { color: var(--wp--preset--color--error); }

/* Brand nav strip: wordmark grid, not a list. */
.ab24-brand-nav-strip {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 24px;
	align-items: center;
}
.ab24-brand-nav-item img {
	max-height: 32px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.75;
	transition: opacity 0.15s ease, filter 0.15s ease;
}
.ab24-brand-nav-item:hover img {
	filter: none;
	opacity: 1;
}

/* Header: compact state toggled by assets/js/sticky-header.js. Motion
   is CSS-driven per the performance budget's "no JS-driven animation"
   preference (spec 3). */
.ab24-site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--wp--preset--color--base);
	transition: padding 0.15s ease;
}
.ab24-site-header.is-compact {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Search panel + mobile toggle: minimal, no library. */
.ab24-search-panel {
	position: absolute;
	right: 0;
	top: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	padding: 16px;
}
.ab24-search-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	padding: 8px;
}

/* Comparison-list floating widget. */
.ab24-compare-widget {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 20;
}
.ab24-compare-widget-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: none;
	padding: 10px 16px;
	cursor: pointer;
	font-weight: 600;
}
.ab24-compare-count {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
	border-radius: 999px;
	min-width: 1.5em;
	text-align: center;
	font-size: 0.8em;
}
.ab24-compare-widget-panel {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	padding: 16px;
	min-width: 220px;
}
.ab24-compare-widget-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}
.ab24-compare-widget-list li {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 0;
}

/* Dark mode: theme.json already defines *-dark palette slugs (spec
   4.2's "build it in from the start"); this is the automatic
   prefers-color-scheme switch. A manual toggle can layer on top later
   by setting / removing a `.is-dark-mode` class on <html> and matching
   that selector here instead of the media query. */
@media (prefers-color-scheme: dark) {
	body {
		background: var(--wp--preset--color--base-dark);
		color: var(--wp--preset--color--contrast-dark);
	}
	.ab24-site-header,
	.ab24-compare-sticky table thead,
	.ab24-search-panel,
	.ab24-compare-widget-panel {
		background: var(--wp--preset--color--surface-dark);
	}
	a {
		color: var(--wp--preset--color--accent-dark);
	}
}