/*
Theme Name: AutoHive
Theme URI: https://automobilehive.com
Author: Automobile Hive
Description: A dynamic editorial block theme for automobile news. Classic newspaper layout with subtle road and motion touches that appear as the reader scrolls. Every homepage rail is rendered from core Query Loop blocks, categories, authors and post meta.
Version: 1.2.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autohive
Tags: full-site-editing, block-patterns, news, blog, custom-colors, wide-blocks, editor-style
*/

/* ==========================================================================
   1. DARK MODE TOKENS
   Overrides the preset custom properties emitted by theme.json.
   `html:root` out-specifies the global-styles `:root` rule regardless of load order.
   Follows the OS setting; force with <html data-theme="dark|light">.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	html:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--paper: #0e0e10;
		--wp--preset--color--surface: #17171a;
		--wp--preset--color--ink: #f2f0ec;
		--wp--preset--color--ink-muted: #a6a6a6;
		--wp--preset--color--border-hairline: #34343a;
		--wp--preset--color--accent: #ef4444;
	}
}
html:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--paper: #0e0e10;
	--wp--preset--color--surface: #17171a;
	--wp--preset--color--ink: #f2f0ec;
	--wp--preset--color--ink-muted: #a6a6a6;
	--wp--preset--color--border-hairline: #34343a;
	--wp--preset--color--accent: #ef4444;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 7.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wp-block-post-template { padding: 0; margin: 0; list-style: none; }
.wp-block-post-template > .wp-block-post { margin: 0; }
.wp-block-post-template.is-layout-grid { gap: 1.5rem; }

/* Kicker / category label (11px tracked caps) */
.autohive-kicker {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 0.35rem;
}
.autohive-kicker a { color: var(--wp--preset--color--accent); text-decoration: none; }

.autohive-meta,
.autohive-byline { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; color: var(--wp--preset--color--ink-muted); margin: 0; }

.autohive-thumb { margin: 0 0 0.75rem; }
.autohive-thumb img { width: 100%; height: auto; object-fit: cover; }

.autohive-col-label,
.autohive-section-title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
}

/* ==========================================================================
   3. NO-IMAGE FALLBACK (no empty gray boxes, text takes 100% width)
   `.no-thumbnail` is added by functions.php (post_class) so browsers without
   :has() are covered; the :has() rules are the progressive enhancement.
   ========================================================================== */
.wp-block-post:not(:has(.wp-block-post-featured-image)) > .wp-block-group,
.wp-block-post.no-thumbnail > .wp-block-group { width: 100%; max-width: 100%; }
.wp-block-post:not(:has(.wp-block-post-featured-image)) .autohive-row-text,
.wp-block-post.no-thumbnail .autohive-row-text { flex: 1 1 100%; }
.wp-block-post.no-thumbnail .autohive-thumb { display: none; }

/* ==========================================================================
   4. MASTHEAD, JUMP BAR, FOOTER
   ========================================================================== */
.autohive-masthead { padding-block: 0.75rem 0; }
.autohive-topbar { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; color: var(--wp--preset--color--ink-muted); border-bottom: 1px solid var(--wp--preset--color--border-hairline); padding-bottom: 0.5rem; }
.autohive-topbar p { margin: 0; }

.autohive-jumpbar-wrap {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--autohive-nav-h));
	z-index: 20;
	background: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--wp--preset--color--border-hairline);
}
.autohive-jumpbar { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.autohive-jumpbar::-webkit-scrollbar { display: none; }
.autohive-jumpbar ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0.7rem 0; white-space: nowrap; }
.autohive-jumpbar a { font: 700 0.6875rem/1 var(--wp--preset--font-family--sans); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }

.autohive-main > * + * { margin-block-start: 0; }
.autohive-footer { border-top: 3px double var(--wp--preset--color--ink); margin-top: 3rem; padding-block: 2rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.875rem; }
.autohive-footer ul { list-style: none; padding: 0; margin: 0; }
.autohive-footer li { margin-bottom: 0.4rem; }
.autohive-copyright { font-size: 0.75rem; color: var(--wp--preset--color--ink-muted); margin: 0; }

/* ==========================================================================
   5. SECTIONS
   ========================================================================== */
.autohive-section { padding-block: 1.75rem; border-top: 1px solid var(--wp--preset--color--border-hairline); }
.autohive-section-head { align-items: baseline; border-bottom: 2px solid currentColor; padding-bottom: 0.5rem; margin-bottom: 1.25rem; }
.autohive-section-title a { text-decoration: none; }
.autohive-section-title a::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; background: var(--wp--preset--color--accent); margin-right: 0.5em; }
.autohive-view-all { margin: 0; font: 600 0.75rem var(--wp--preset--font-family--sans); }
.autohive-view-all a { text-decoration: none; color: var(--wp--preset--color--accent); }

/* ==========================================================================
   6. HERO — lead story (2/3) + sidebar list (1/3), 1px column rule
   ========================================================================== */
.autohive-hero.is-layout-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0; padding-top: 1.25rem; }
.autohive-hero-col { padding-inline: 1.5rem; }
.autohive-hero-col:first-child { padding-left: 0; border-right: 1px solid var(--wp--preset--color--border-hairline); }
.autohive-hero-col:last-child { padding-right: 0; }
.autohive-hero-col .autohive-col-label { color: var(--wp--preset--color--accent); border-bottom: 1px solid var(--wp--preset--color--ink); padding-bottom: 0.4rem; margin-bottom: 0.75rem; }
.autohive-hero-side .autohive-wire-label { margin-top: 1.5rem; }

.autohive-secondary .wp-block-post { padding-bottom: 0.9rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--wp--preset--color--border-hairline); }
.autohive-secondary .wp-block-post:last-child { border-bottom: 0; margin-bottom: 0; }
.autohive-secondary .autohive-thumb { margin: 0.6rem 0 0; }
.autohive-secondary .autohive-thumb img { max-height: 150px; }
/* NYT-style density: only the first side story carries an image */
.autohive-secondary .wp-block-post:not(:first-child) .autohive-thumb { display: none; }

.autohive-lede .autohive-thumb { margin: 0 0 0.9rem; }
.autohive-lede .autohive-kicker a { background: var(--wp--preset--color--accent); color: #fff; padding: 0.2em 0.65em; border-radius: 2px; }
.autohive-lede .wp-block-post-title { margin: 0.4rem 0 0.75rem; letter-spacing: -0.02em; line-height: 1.08; }
.autohive-lede .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.autohive-lede-byline { gap: 0.9rem; align-items: center; flex-wrap: wrap; padding-top: 0.5rem; border-top: 1px solid var(--wp--preset--color--border-hairline); }
.autohive-lede-byline .wp-block-post-author__avatar img { border-radius: 50%; }

.autohive-wire-item { gap: 0.75rem; align-items: baseline; flex-wrap: nowrap; padding: 0.65rem 0; border-bottom: 1px dotted var(--wp--preset--color--ink-muted); }
.autohive-wire-item .autohive-wire-time { flex: 0 0 4.2rem; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--wp--preset--color--accent); }
.autohive-wire-item .wp-block-post-title { font-family: var(--wp--preset--font-family--sans); font-weight: 600; line-height: 1.35; margin: 0; }

@media (max-width: 900px) {
	.autohive-hero.is-layout-grid { grid-template-columns: 1fr; }
	.autohive-hero-col { padding-inline: 0 !important; }
	.autohive-hero-col:first-child { border-right: 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--wp--preset--color--border-hairline); margin-bottom: 1.25rem; }
}

/* ==========================================================================
   7. CATEGORY LAYOUTS
   ========================================================================== */
/* Responsive collapse for every grid-based post template */
@media (max-width: 900px) { .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; } }

/* AI & ML — featured + stacked summaries */
.autohive-asym.is-layout-grid { grid-template-columns: 3fr 2fr; gap: 2rem; }
.autohive-q-stack .wp-block-post { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--wp--preset--color--border-hairline); }
.autohive-q-stack .wp-block-post:last-child { border-bottom: 0; }
@media (max-width: 781px) { .autohive-asym.is-layout-grid { grid-template-columns: 1fr; } }

/* Cybersecurity — high-contrast alert listing */
.autohive-section--alert { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); padding-inline: clamp(1rem, 3vw, 2rem); border-top: 0; }
.autohive-section--alert a,
.autohive-section--alert .wp-block-post-excerpt { color: inherit; }
.autohive-section--alert .autohive-meta { color: inherit; opacity: 0.75; }
.autohive-section--alert .autohive-view-all a { color: inherit; }
.autohive-alert-item { border-left: 4px solid var(--wp--preset--color--accent); padding: 0.75rem 1rem; background: rgb(128 128 128 / 0.12); margin-bottom: 0.75rem; }
.autohive-alert-tags { gap: 0.4rem; flex-wrap: wrap; }
.autohive-section--alert .autohive-kicker a { background: var(--wp--preset--color--accent); color: #fff; padding: 0.2em 0.6em; border-radius: 2px; }
.autohive-chip a { border: 1px solid currentColor; padding: 0.1em 0.5em; border-radius: 99px; font: 600 0.6875rem var(--wp--preset--font-family--sans); text-decoration: none; }
.autohive-chip { margin: 0; }

/* Hardware — horizontal split rows */
.autohive-row { gap: 1rem; align-items: flex-start; flex-wrap: nowrap; }
.autohive-row .autohive-thumb { flex: 0 0 34%; margin: 0; }
.autohive-row .autohive-row-text { flex: 1 1 0; min-width: 0; }
@media (max-width: 560px) { .autohive-row { flex-wrap: wrap; } .autohive-row .autohive-thumb { flex: 1 1 100%; } }

/* Software & Dev — monospaced metadata */
.autohive-mono .autohive-meta,
.autohive-mono .autohive-kicker,
.autohive-mono .autohive-byline { font-family: var(--wp--preset--font-family--mono); text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
.autohive-dev-item { border: 1px solid var(--wp--preset--color--border-hairline); border-left: 3px solid var(--wp--preset--color--accent); padding: 1rem; background: var(--wp--preset--color--surface); }
.autohive-dev-meta { gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.autohive-dev-meta p { margin: 0; }

/* Opinion — circular avatars, italic headlines */
.autohive-op-item { text-align: center; }
.autohive-op-item .wp-block-post-author { justify-content: center; flex-direction: column; align-items: center; gap: 0.5rem; }
.autohive-op-item .wp-block-post-author__avatar img { border-radius: 50%; border: 1px solid var(--wp--preset--color--border-hairline); }
.autohive-title--italic,
.autohive-title--italic a { font-style: italic; }

/* Policy — broadsheet briefing */
.autohive-brief { padding-top: 1rem; border-top: 3px solid var(--wp--preset--color--ink); }
.autohive-excerpt--long { font-size: 1.0625rem; line-height: 1.7; }
.autohive-brief-meta { gap: 0.75rem; align-items: center; flex-wrap: wrap; }

/* Enterprise — dense rows */
.autohive-dense { gap: 0.9rem; align-items: baseline; flex-wrap: nowrap; padding: 0.55rem 0; border-bottom: 1px solid var(--wp--preset--color--border-hairline); }
.autohive-dense-time { flex: 0 0 8.5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.autohive-badge { margin: 0; flex: 0 0 auto; }
.autohive-badge a { border: 1px solid var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); padding: 0.1em 0.55em; border-radius: 99px; font: 700 0.625rem var(--wp--preset--font-family--sans); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.autohive-dense .wp-block-post-title { margin: 0; font-family: var(--wp--preset--font-family--sans); font-weight: 600; }
@media (max-width: 640px) { .autohive-dense { flex-wrap: wrap; } .autohive-dense-time { flex-basis: 100%; } }

/* Startups — 2x2 bento */
.autohive-bento-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border-hairline); border-radius: 10px; padding: 1.25rem; height: 100%; box-sizing: border-box; }
.wp-block-post-template.autohive-bento > .wp-block-post { display: flex; }
.wp-block-post-template.autohive-bento > .wp-block-post > * { flex: 1; }

/* ==========================================================================
   8. BRAND (logo image or text wordmark)
   ========================================================================== */
:root { --autohive-nav-h: 3rem; }
.autohive-brand { margin: 0.9rem 0 0.6rem; text-align: center; line-height: 1; }
.autohive-brand a { text-decoration: none; display: inline-block; }
.autohive-wordmark { font-family: var(--wp--preset--font-family--display); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1; }
.autohive-brand .autohive-logo { display: block; width: auto; height: auto; max-width: min(var(--autohive-logo-w, 320px), 80vw); margin-inline: auto; }
.autohive-logo--dark { display: none !important; }
/* Dark mode: swap to the dark logo when one was uploaded (OS setting, or the manual toggle) */
@media (prefers-color-scheme: dark) {
	html:root:not([data-theme="light"]) .autohive-logo--dark { display: block !important; }
	html:root:not([data-theme="light"]) .autohive-logo--light:has(+ .autohive-logo--dark) { display: none !important; }
}
html:root[data-theme="dark"] .autohive-logo--dark { display: block !important; }
html:root[data-theme="dark"] .autohive-logo--light:has(+ .autohive-logo--dark) { display: none !important; }
html:root[data-theme="light"] .autohive-logo--dark { display: none !important; }

/* ==========================================================================
   9. STICKY NAV BAR
   <header> becomes display:contents so the bar sticks to the whole page.
   ========================================================================== */
header.wp-block-template-part { display: contents; }
.autohive-navbar {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--wp--preset--color--paper);
	border-top: 1px solid var(--wp--preset--color--ink);
	border-bottom: 3px double var(--wp--preset--color--ink);
	transition: box-shadow 0.2s ease;
}
html.autohive-stuck .autohive-navbar { box-shadow: 0 2px 10px rgb(0 0 0 / 0.08); border-top-color: transparent; }
.autohive-navbar-inner { min-height: var(--autohive-nav-h); gap: 1rem; }
.autohive-navbar-inner > .wp-block-navigation { flex: 1 1 auto; justify-content: center; }
.autohive-navbar .wp-block-navigation__container { gap: 0.25rem 1.4rem; }
.autohive-navbar .wp-block-navigation-item__content { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; font-weight: 700; padding-block: 0.4rem; }
.autohive-navbar .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent); text-decoration: none; }
.autohive-compact-brand { flex: 0 0 auto; display: inline-flex; overflow: hidden; max-width: 0; opacity: 0; visibility: hidden; white-space: nowrap; transition: max-width 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s; }
.autohive-compact-brand a { text-decoration: none; display: inline-flex; align-items: center; }
.autohive-compact-brand .autohive-wordmark { font-size: 1.35rem; }
.autohive-compact-brand .autohive-logo { height: 1.75rem; width: auto; max-width: 11rem; display: block; }
html.autohive-stuck .autohive-compact-brand { max-width: 14rem; opacity: 1; visibility: visible; transition-delay: 0s; }
.autohive-tools { flex: 0 0 auto; gap: 0.25rem; }
.autohive-theme-toggle { all: unset; cursor: pointer; display: inline-flex; padding: 0.45rem; border-radius: 50%; color: var(--wp--preset--color--ink); }
.autohive-theme-toggle:hover { color: var(--wp--preset--color--accent); }
.autohive-theme-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.autohive-search .wp-block-search__button { background: none; border: 0; padding: 0.45rem; color: var(--wp--preset--color--ink); }
.autohive-search .wp-block-search__button:hover { color: var(--wp--preset--color--accent); }

/* ==========================================================================
   10. TYPOGRAPHY REFINEMENTS
   ========================================================================== */
h1, h2, h3, h4, .wp-block-post-title { text-wrap: balance; }
.wp-block-post-excerpt__excerpt { text-wrap: pretty; }
.autohive-title a { text-decoration: none; }
.autohive-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.autohive-article .wp-block-post-title { font-size: clamp(2.25rem, 5vw, 3.25rem); letter-spacing: -0.02em; line-height: 1.08; }
.autohive-article .wp-block-post-excerpt { color: var(--wp--preset--color--ink-muted); font-style: italic; }
.autohive-article .wp-block-post-content { font-size: 1.1875rem; line-height: 1.72; }
.autohive-article .wp-block-post-content > p:first-of-type::first-letter { font-family: var(--wp--preset--font-family--display); float: left; font-size: 4.1em; line-height: 0.82; padding: 0.06em 0.1em 0 0; font-weight: 700; }
.autohive-article .wp-block-post-content h2,
.autohive-article .wp-block-post-content h3 { margin-top: 2.2rem; }
.autohive-article .wp-block-post-content blockquote { border-left: 3px solid var(--wp--preset--color--accent); padding-left: 1.25rem; font-style: italic; font-size: 1.3rem; }
.autohive-article .wp-block-post-content img { height: auto; }
.autohive-article figcaption { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; color: var(--wp--preset--color--ink-muted); }

/* ==========================================================================
   11. ARTICLE: progress, share, sidebar, related
   ========================================================================== */
.autohive-progress { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.autohive-progress span { display: block; height: 100%; background: var(--wp--preset--color--accent); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

.autohive-updated { margin: 0; }
.autohive-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; padding-block: 0.6rem; margin-block: 0.5rem 1rem; border-block: 1px solid var(--wp--preset--color--border-hairline); font-family: var(--wp--preset--font-family--sans); }
.autohive-share-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-right: 0.25rem; }
.autohive-share a,
.autohive-share button { font: 600 0.75rem var(--wp--preset--font-family--sans); color: var(--wp--preset--color--ink); text-decoration: none; background: none; border: 1px solid var(--wp--preset--color--border-hairline); border-radius: 99px; padding: 0.3em 0.85em; cursor: pointer; }
.autohive-share a:hover,
.autohive-share button:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

.autohive-article-cols { gap: 2.5rem; margin-top: 1.5rem; }
.autohive-sidebar { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--autohive-nav-h) + 1rem); align-self: flex-start; }
.autohive-sidebar .autohive-col-label { color: var(--wp--preset--color--accent); border-bottom: 1px solid var(--wp--preset--color--ink); padding-bottom: 0.4rem; margin-bottom: 0.5rem; }
.autohive-mostread { counter-reset: mr; }
.autohive-mostread .wp-block-post { counter-increment: mr; padding: 0.7rem 0; border-bottom: 1px solid var(--wp--preset--color--border-hairline); }
.autohive-mostread-item { gap: 0.75rem; align-items: flex-start; flex-wrap: nowrap; }
.autohive-mostread-item::before { content: counter(mr); font: 800 1.6rem/1 var(--wp--preset--font-family--display); color: var(--wp--preset--color--accent); flex: 0 0 1.4rem; }
.autohive-mostread-item .wp-block-post-title { margin: 0; font-weight: 600; line-height: 1.3; }
@media (max-width: 781px) { .autohive-sidebar { position: static; } }

.autohive-related { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 3px solid var(--wp--preset--color--ink); }
.autohive-related .autohive-section-title { margin-bottom: 1rem; }

/* ==========================================================================
   12. AD SLOTS (only rendered when code is saved; space reserved to avoid CLS)
   ========================================================================== */
.autohive-ad { margin: 1.25rem auto; text-align: center; max-width: 100%; }
.autohive-ad-label { display: block; font: 600 0.625rem var(--wp--preset--font-family--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); margin-bottom: 0.3rem; }
.autohive-ad-slot { min-height: var(--autohive-ad-h, 250px); display: flex; justify-content: center; align-items: center; overflow: hidden; }
.autohive-ad--header,
.autohive-ad--home,
.autohive-ad--home_mid { max-width: var(--wp--style--global--wide-size, 1340px); padding-inline: 1rem; }
.autohive-ad--header { margin-block: 0.75rem; }
.autohive-ad--inline { clear: both; margin-block: 2rem; padding-block: 0.75rem; border-block: 1px solid var(--wp--preset--color--border-hairline); }
@media (max-width: 781px) { .autohive-ad--header .autohive-ad-slot { min-height: 60px; } }
@media print { .autohive-ad, .autohive-progress, .autohive-navbar, .autohive-share { display: none !important; } }

/* ==========================================================================
   13. RELATED CAROUSEL (mid-article) + INFINITE NEXT STORY
   ========================================================================== */
.autohive-carousel { margin: 2rem 0; padding: 1rem 0 1.25rem; border-block: 3px solid var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--sans); font-size: 1rem; line-height: 1.4; clear: both; }
.autohive-car-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.autohive-car-h { font: 700 0.6875rem var(--wp--preset--font-family--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.autohive-car-btns { display: flex; gap: 0.35rem; }
.autohive-car-btns button { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--wp--preset--color--border-hairline); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.autohive-car-btns button:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.autohive-car-track { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0 0 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.autohive-car-card { flex: 0 0 min(15rem, 72%); scroll-snap-align: start; margin: 0; }
.autohive-car-card a { display: block; text-decoration: none; color: inherit; }
.autohive-car-thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 0.5rem; background: var(--wp--preset--color--border-hairline); }
.autohive-car-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.autohive-car-ttl { display: block; font: 700 1rem/1.3 var(--wp--preset--font-family--display); margin-bottom: 0.25rem; }
.autohive-car-card a:hover .autohive-car-ttl { text-decoration: underline; text-underline-offset: 0.18em; }
@media (prefers-reduced-motion: reduce) { .autohive-car-track { scroll-behavior: auto; } }

.autohive-next-divider { display: flex; align-items: center; gap: 1rem; margin: 3.5rem 0 2rem; font: 700 0.6875rem var(--wp--preset--font-family--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.autohive-next-divider::before,
.autohive-next-divider::after { content: ""; flex: 1; border-top: 3px double var(--wp--preset--color--ink); }
.autohive-article--loaded .wp-block-post-navigation-link,
.autohive-article--loaded .wp-block-separator { display: none; }
.autohive-infinite-status { text-align: center; font: 600 0.8125rem var(--wp--preset--font-family--sans); color: var(--wp--preset--color--ink-muted); margin: 2rem 0; }
.autohive-infinite-sentinel { height: 1px; }

/* ==========================================================================
   14. AUTOMOBILE TOUCHES — quiet until the reader starts scrolling
   ========================================================================== */
/* Road progress: dashed lane at the very top, a small car drives along it */
.autohive-road { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; height: 14px; z-index: 60; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.autohive-road.is-on { opacity: 1; transform: none; }
.autohive-road::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: repeating-linear-gradient(90deg, var(--wp--preset--color--ink-muted) 0 14px, transparent 14px 26px); opacity: 0.35; }
.autohive-road-fill { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--wp--preset--color--accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.autohive-road-car { position: absolute; top: 3px; left: calc(var(--p, 0) * (100% - 30px)); color: var(--wp--preset--color--accent); filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25)); }
html.autohive-stuck .autohive-navbar { border-bottom-color: var(--wp--preset--color--accent); }

/* Lane-marking dividers between sections */
.autohive-section { border-top: 2px dashed var(--wp--preset--color--border-hairline); }
.autohive-section--alert { border-top: 0; }

/* Section heads: an accent bar "drives in" when the section appears */
.autohive-section-head { position: relative; }
.autohive-section-head::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 4.5rem; background: var(--wp--preset--color--accent); transition: width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
html.ah-js .ah-reveal { transition: opacity 0.6s ease, transform 0.6s ease; }
html.ah-js .ah-reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
html.ah-js .ah-reveal:not(.is-in) .autohive-section-head::after { width: 0; }

/* Images ease forward on hover */
.autohive-thumb { overflow: hidden; }
.autohive-thumb img { transition: transform 0.5s ease; }
.autohive-thumb:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .autohive-road, .autohive-thumb img { transition: none; } .autohive-thumb:hover img { transform: none; } }
@media print { .autohive-road { display: none !important; } }

/* Lead story without an image: no blank box; show a 3-story strip instead */
.wp-block-post-featured-image:not(:has(img)) { display: none; }
.autohive-extra-label { margin-top: 1.5rem; color: var(--wp--preset--color--accent); border-bottom: 1px solid var(--wp--preset--color--ink); padding-bottom: 0.4rem; margin-bottom: 0.9rem; }
.autohive-extra.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.autohive-extra-item .autohive-thumb { margin: 0 0 0.5rem; }
.autohive-extra-item .wp-block-post-title { margin: 0 0 0.3rem; line-height: 1.2; }
@media (max-width: 640px) { .autohive-extra.is-layout-grid { grid-template-columns: 1fr; } }