/*
Theme Name: Indian Car Nerds
Theme URI: https://indiancarnerds.com
Description: Custom child theme for Indian Car Nerds, built on Twenty Twenty-Five. v4.4.0 "Editorial Polish" is a Review-page-only round on top of v4.3.0: the "Review" eyebrow label is gone and the H1 now shows only the linked car's name; the ICN Verdict sidebar card drops its quote-box treatment for a plain editorial paragraph + real star rating + attribution; the sidebar's "Quick Compare" module is renamed "Related Reads". Garage Talk is rebuilt again — the comment count moves inline into the heading ("💬 Garage Talk (23)"), each comment collapses to one bottom row ("❤ 28 · Reply · 2 min ago"), and the composer gains a "Join Garage Talk" heading with a real ownership-focused placeholder. The Hero Image Carousel's thumbnails are now genuinely labeled from each photo's own alt text (Interior/Dashboard/Seats/Boot/Engine, main image enlarged to a 3:2 box). Typography: title down to 60px, comments up to 17px, meta up to 15px (section headings/body/sidebar unchanged). A density pass widens the article column, tightens section margins, and trims outer padding. A new Reaction Chips module (Worth Buying / Skip It / Love the Design / ADAS Impressed Me / Too Expensive — real, cookie-guarded counters, no fabricated numbers) sits between the Author Card and Garage Talk. The MG Astor dummy review is regenerated to ~2,300 words with a new heading set and 3 real inline photos spliced into the body. Homepage, News, Footer, and Navigation are byte-for-byte untouched.
Author: Indian Car Nerds
Author URI: https://indiancarnerds.com
Template: twentytwentyfive
Version: 4.4.0
Text Domain: indian-car-nerds
*/

/* ==========================================================================
   Block style variations
   These add extra selectable styles in the block editor (Style panel)
   on top of what theme.json defines. Registered in functions.php via
   register_block_style(); the actual CSS lives here.
   ========================================================================== */

/* Card style — applied to a Group block via "Card" in the block Styles panel */
.is-style-icn-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--50, 24px);
}

.is-style-icn-card:hover {
	border-color: var(--wp--preset--color--accent);
}

/* Outline button style — applied to a Button block via "Outline Accent" in Styles panel */
.wp-block-button.is-style-icn-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	border: 2px solid var(--wp--preset--color--accent);
}

.wp-block-button.is-style-icn-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Small utility: muted/secondary text, for bylines, dates, meta */
.icn-meta {
	color: var(--wp--preset--color--foreground-muted);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ==========================================================================
   Header / Footer chrome
   Deliberately NOT set via block backgroundColor/border attributes inside
   parts/header.html and parts/footer.html — those attributes require the
   Block Editor to regenerate an exact matching set of classes, and any
   mismatch trips the "Block contains unexpected or invalid content" warning
   in the Site Editor. Targeting the actual rendered wrapper tag/class here
   is plain CSS with zero block-validation risk.
   ========================================================================== */
/* v3.6 made this the ONE authoritative fixed-position rule for the navbar
   (`position: fixed`), after finding and removing a conflicting
   `.icn-header { position: sticky }` rule in design-system.css. v3.7:
   "The navbar is still scrolling away... position: sticky; top: 0;" — per
   this explicit instruction, the rule below now uses real `position:
   sticky` instead of `fixed`. This isn't just a literal rewording: sticky
   has a genuine technical advantage here. `position: fixed` is positioned
   relative to the viewport and ignores the `<html>` element's own
   box — which is exactly why WordPress's admin bar (itself `position:
   fixed`, which shifts `<html>` down via `margin-top: 32px` when you're
   logged in) needed a manual `top: 32px` offset hack on this rule, applied
   correctly here in v3.6 but still a second thing that could drift out of
   sync. `position: sticky` stays in normal document flow and respects that
   same html offset automatically, so the header sits flush under the
   admin bar with no extra rule needed — one less moving part, one less
   place for this exact bug to come back a fourth time. Everything else is
   unchanged: solid dark background (#0f0f10), always-on slight blur, thin
   bottom border, z-index 150 (above ordinary content, below the search
   overlay's 200). */
header.wp-block-template-part {
	background-color: #0f0f10;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--border);
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 150;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* v3.7: no more manual `body { padding-top }` height-reservation hack — a
   `position: sticky` header stays in normal document flow (unlike
   `fixed`, which is removed from flow and requires the page below to
   reserve its height separately), so the rest of the page is naturally
   pushed down by the header's own real height. Nothing to keep in sync
   with --icn-header-h anymore. */

/* Sticky-shrink on scroll: nav.js toggles `.is-scrolled` on this same outer
   element (and the inner .icn-header) once you've scrolled past ~40px.
   The background is already solid dark at rest, so this only deepens the
   shadow/border and (via homepage-v2.css) shrinks the header's own
   height/padding — the "shrinks slightly on scroll" polish request. */
header.wp-block-template-part.is-scrolled {
	border-bottom-color: var(--wp--preset--color--border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

footer.wp-block-template-part {
	background-color: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
}

.wp-block-site-title a {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ==========================================================================
   Homepage shell section backgrounds
   Same reasoning as above: className is a safe pass-through attribute (no
   regenerated classes to match), so section background colors are applied
   here instead of via the block's backgroundColor attribute.
   ========================================================================== */
.icn-hero {
	background-color: var(--wp--preset--color--surface);
}

.icn-section-alt {
	background-color: var(--wp--preset--color--surface);
}