/*
Theme Name:   Diesel Child
Theme URI:
Description:  Child theme of Astra for the Diesel Engine Listings site.
Author:
Author URI:
Template:     astra
Version:      1.0.0
Text Domain:  dsl
*/

/* ============================================================
   Design system, ported from design/styles.css (the handoff reference —
   see CLAUDE.md and design/ itself, which stays untouched).

   Custom property names are kept identical to the source file on
   purpose: later templates, and the design files themselves, both
   reference these exact names. Fonts are loaded via wp_enqueue_style in
   functions.php, not the @import the source file used — @import blocks
   rendering while the browser fetches it; a proper enqueue doesn't.
   ============================================================ */

:root {
	--navy-900: #0a1836;   /* darkest ground / footer */
	--navy-800: #0d1f44;   /* cards, CTA band */
	--navy-700: #17306a;   /* hero radial highlight */
	--ink: #1a2233;
	--slate: #3a465f;      /* nav links */
	--muted: #5b6472;      /* body copy */
	--muted-2: #6b7484;
	--hint: #8791a5;       /* labels, breadcrumb */
	--line: #e6e9ef;       /* hairline borders */
	--line-2: #eef0f4;
	--bg: #f4f5f8;         /* page ground */
	--card: #ffffff;
	--tint: #eef1f8;       /* spec chips */

	--gold: #d4a017;       /* primary accent / CTA */
	--gold-ink: #c9962b;   /* kickers on light */
	--gold-soft: #e8c14f;  /* gold text on navy */
	--gold-wash: #faf3df;  /* gold tinted fill */
	--red: #c0392b;        /* spark / "new surplus" */

	--on-navy: #c4cddf;    /* body copy on navy */
	--on-navy-dim: #9aa6bf;
	--on-navy-mute: #aeb8cc;

	--font-head: 'Barlow Condensed', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;

	--r-sm: 6px; --r: 9px; --r-md: 12px; --r-lg: 16px; --pill: 999px;
	--shadow-card: 0 10px 26px rgba(10,24,54,.07);
	--shadow-soft: 0 8px 20px rgba(10,24,54,.06);
	--shadow-rail: 0 20px 40px rgba(10,24,54,.20);
	--shadow-frame: 0 30px 70px rgba(10,24,54,.28);

	/* ---------- Stacking order ----------
	   The whole site has exactly TWO layers that sit above page content.
	   Everything else stays at the default (`z-index: auto`), which means
	   it paints in document order — that is the intended behavior and
	   should not be "fixed" by adding numbers to it.

	     (auto)             page content, in document order
	     --z-sticky-rail    the sticky enquiry rail (single engine page)
	     --z-header         site header, and the mobile menu inside it

	   RULES FOR ADDING TO THIS:
	   1. Add a named tier here. Never write a bare number in a rule, and
	      never write 9999 — a number nobody can rank against anything is
	      how the header ended up losing to a hero panel in the first place.
	   2. Order *within* a layer uses small local values (1, 2, 3) on
	      children of an element that already carries a tier. Those are
	      scoped by that element's stacking context and cannot leak.
	   3. Leave gaps between tiers so something can be slotted in later
	      without renumbering everything.

	   WHY THE HEADER NEEDS A TIER AT ALL: the mobile menu panel is
	   absolutely positioned inside the header and overflows below it. With
	   both the header and the sections beneath it at `z-index: auto`,
	   painting falls back to document order, so any *later* positioned
	   element draws over the menu — `.hero-inner` on the homepage,
	   `.gallery-main` on a single engine, `.hero-ring` on contact. Giving
	   the header a tier lifts it and everything it contains in one move. */
	--z-sticky-rail: 10;
	--z-header: 100;
}

/* ---------- Base / typography ---------- */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: #12295a; text-decoration: none; }
a:hover { color: var(--navy-900); }
.u-head { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .01em; }
input, textarea { font-family: inherit; }
input:focus, textarea:focus { border-color: var(--gold); outline: none; }
select { -webkit-appearance: none; appearance: none; }

/* ---------- Utility bar ---------- */
.utility { background: var(--navy-900); color: var(--on-navy-mute); font-size: 13px; padding: 9px 40px; display: flex; justify-content: space-between; align-items: center; letter-spacing: .02em; }
.utility .hours { color: var(--gold-soft); font-weight: 600; }
.utility-right { display: flex; gap: 22px; }

/* ---------- Nav ---------- */
/* Positioned and given a tier at every width, not just on mobile: the
   mobile menu panel is absolutely positioned against this element, and the
   tier is what keeps that panel — and the header itself — above the page
   content it overlaps. See "Stacking order" at the top of this file. */
.nav { background: #fff; border-bottom: 1px solid var(--line); padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: var(--z-header); }
.nav .logo { height: 60px; width: auto; }
.nav-links { display: flex; gap: 24px; font-weight: 600; font-size: 16px; color: var(--slate); }
.nav-links a { color: var(--slate); }
.nav-links a.active { color: var(--navy-900); border-bottom: 2px solid var(--gold); padding-bottom: 3px; }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--navy-900); font-weight: 700; font-size: 16px; padding: 11px 20px; border-radius: var(--r); }
.nav-phone svg { fill: var(--navy-900); }

/* ---------- Buttons (shell only needs the gold/large variant; more
   variants land in style.css as templates that use them get built) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .01em; font-weight: 700; border: none; border-radius: var(--r); cursor: pointer; text-align: center; }
.btn-gold { background: var(--gold); color: var(--navy-900); }
.btn-gold:hover { background: #c2920f; color: var(--navy-900); }
.btn-lg { font-size: 17px; padding: 15px 30px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy-800); color: #fff; padding: 44px 40px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cta-band h2 { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 32px; margin-bottom: 6px; }
.cta-band p { font-size: 16px; color: var(--on-navy); }

/* ---------- Footer ---------- */
.footer { background: var(--navy-900); color: #8f9bb5; padding: 40px 40px 30px; font-size: 14px; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 26px; }
.footer .brand { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 20px; color: #fff; }
.footer .blurb { max-width: 300px; line-height: 1.6; margin-top: 10px; }
.footer h4 { font-family: var(--font-head); text-transform: uppercase; font-weight: 600; color: var(--gold-soft); font-size: 14px; letter-spacing: .1em; margin-bottom: 12px; }
.footer .col { display: flex; flex-direction: column; gap: 8px; color: var(--on-navy-mute); }
.footer-bottom { padding-top: 18px; }

/* ---------- Hamburger icon (visual only — ported from design/mobile-*.html;
   hidden on desktop, shown at the mobile breakpoint below) ---------- */
.hamburger { display: none; flex-direction: column; gap: 4px; cursor: pointer; }
.hamburger span { width: 22px; height: 2.6px; background: var(--navy-900); border-radius: 9px; }

/* ---------- Tags / kickers / chips ---------- */
.kicker { font-family: var(--font-head); text-transform: uppercase; font-weight: 600; letter-spacing: .16em; color: var(--gold-ink); font-size: 14px; }
.tag { font-family: var(--font-head); text-transform: uppercase; font-weight: 600; font-size: 12px; letter-spacing: .06em; padding: 5px 11px; border-radius: var(--r-sm); }
.tag-navy { background: var(--navy-800); color: var(--gold-soft); }
.tag-red { background: var(--red); color: #fff; }

/* Condition badge sitting on an engine photo — engine cards (listing,
   homepage, similar engines) and the single engine's main gallery image.
   Deliberately bigger than the base .tag: at 12px, Barlow Condensed (a
   condensed face, so narrower than its point size suggests) was not
   legible on a phone held at arm's length, which is how most buyers
   browse. Scoped to these two contexts rather than raised on .tag itself
   so the hero stamp keeps the proportions the design gave it. Colors and
   corner position are unchanged. */
.ecard .thumb .tag,
.pdp .gallery-main .tag { font-size: 16px; font-weight: 700; letter-spacing: .08em; padding: 9px 16px; }
.chip { background: var(--tint); color: #2c3a58; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-sm); }

/* ---------- Layout helpers (used by the "Similar engines" section) ---------- */
.section { padding: 56px 40px 60px; }
.section-alt { background: var(--bg); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.img-ph { background: #eceef3; display: flex; align-items: center; justify-content: center; color: #7f8ba0; font-weight: 600; font-size: 13px; }

/* ---------- Buttons: navy/small (the engine card's "Learn more") ---------- */
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { color: #fff; opacity: .93; }
.btn-sm { font-size: 14px; padding: 9px 16px; }

/* ---------- Engine card (template-parts/engine-card.php) ---------- */
.ecard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: box-shadow .16s ease, transform .16s ease; }
.ecard:hover { box-shadow: 0 16px 34px rgba(10,24,54,.14); transform: translateY(-3px); }
.ecard .thumb { position: relative; height: 210px; background: #eceef3; }
.ecard .thumb img { width: 100%; height: 100%; object-fit: cover; }
.ecard .thumb .tag { position: absolute; top: 12px; left: 12px; }
.ecard .body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.ecard .brand { font-family: var(--font-head); text-transform: uppercase; font-weight: 600; font-size: 13px; letter-spacing: .06em; color: var(--gold-ink); }
.ecard h3 { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 24px; color: var(--navy-900); margin: 2px 0 14px; }
.ecard .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.ecard .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-2); padding-top: 14px; }
.ecard .price { font-family: var(--font-head); text-transform: uppercase; font-weight: 600; font-size: 15px; color: var(--navy-900); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-family: var(--font-head); text-transform: uppercase; padding: 16px 40px; font-size: 14px; color: var(--hint); letter-spacing: .04em; background: var(--bg); border-bottom: 1px solid var(--line); }
.breadcrumb .here { color: var(--navy-900); }

/* ---------- Product detail (single-engine.php) ---------- */
.pdp { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; padding: 40px 40px 52px; }
.pdp .gallery-main { position: relative; height: 430px; border-radius: var(--r-lg); overflow: hidden; background: #eceef3; border: 1px solid var(--line); }
.pdp .gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.pdp .gallery-main .tag { position: absolute; top: 14px; left: 14px; }
.pdp .thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 12px; }
/* .t is a real <button> (see dsl_render_engine_gallery()), not the
   plain <div> the static design used — padding/cursor/appearance reset
   so a native button doesn't add its own chrome on top of the design's
   own border/background. */
.pdp .thumbs .t { height: 88px; border-radius: 10px; overflow: hidden; background: #eceef3; border: 1px solid var(--line); padding: 0; margin: 0; display: block; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pdp .thumbs .t img { width: 100%; height: 100%; object-fit: cover; }
.pdp .thumbs .t.sel { border: 2px solid var(--gold); }
.pdp h1 { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 44px; color: var(--navy-900); margin: 0 0 22px; line-height: 1; }
.spec-title { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 26px; color: var(--navy-900); margin: 38px 0 14px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table td { padding: 13px 4px; }
.spec-table tr { border-bottom: 1px solid var(--line-2); }
.spec-table tr:nth-child(even) { background: #fafbfc; }
.spec-table .k { font-family: var(--font-head); text-transform: uppercase; color: var(--hint); letter-spacing: .04em; width: 42%; }
.spec-table .v { color: var(--ink); font-weight: 600; }
.enquiry { position: sticky; top: 20px; z-index: var(--z-sticky-rail); }
.enquiry .rail { background: var(--navy-800); color: #fff; border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-rail); }
/* The rail's heading. Inherits the exact type treatment the price value
   used to have — same face, 32px, same gold — so removing the price
   didn't cost the rail any visual weight. The only change is the top
   margin: the old rule carried 2px to sit under a "Price" label that no
   longer exists, and an h2's default margin has to be zeroed out. */
.enquiry .rail-title { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 32px; line-height: 1.1; color: var(--gold-soft); margin: 0 0 18px; }
.enquiry .fields { display: flex; flex-direction: column; gap: 11px; }
.field-dark { background: var(--navy-900); border: 1px solid #24345c; color: #fff; border-radius: var(--r); padding: 13px 15px; font-size: 15px; outline: none; width: 100%; }
.field-dark::placeholder { color: #6f7c9a; }
.call-btn { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 11px; background: transparent; border: 1.5px solid rgba(255,255,255,.3); color: #fff; font-family: var(--font-head); text-transform: uppercase; font-weight: 600; font-size: 16px; padding: 13px; border-radius: var(--r); }
.call-btn svg { fill: #fff; }
/* Was two items side by side; "Inspected & documented" was removed, so
   this is now a single item. `flex: 1` on the one remaining child makes
   it grow to the full width of the rail rather than sitting half-width
   with dead space beside it — a full-width band reads as deliberate,
   where a centred half-width box would read as something missing. The
   `gap` is inert with one child and is kept only so a second item could
   be added back without re-deriving this rule. */
.trust-row { display: flex; gap: 10px; margin-top: 14px; }
.trust-row .t { flex: 1; text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 8px; }
.trust-row .t .n { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 15px; color: var(--navy-900); }
.trust-row .t .s { font-size: 12px; color: var(--hint); }

/* ---------- Listing page: header + filters (archive-engine.php) ---------- */
.list-head { background: var(--navy-800); color: #fff; padding: 38px 40px 30px; }
.list-head h1 { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 46px; line-height: 1; }
/* The design set these on the header's inner elements with inline styles;
   ported to named classes here to keep templates free of inline style=
   (a CLAUDE.md convention), same markup either way. */
.list-head .crumbs { font-family: var(--font-head); text-transform: uppercase; font-size: 14px; color: var(--hint); letter-spacing: .04em; margin-bottom: 14px; }
.list-head .crumbs a { color: var(--hint); }
.list-head .crumbs .here { color: var(--gold-soft); }
.list-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.list-head .kicker-sm { font-family: var(--font-head); text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: .16em; color: var(--gold-soft); margin-bottom: 6px; }
.list-head .count { font-family: var(--font-head); text-transform: uppercase; font-size: 15px; color: var(--on-navy); }
.list-head .count strong { color: #fff; font-weight: 600; }
.searchbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.searchbar .search { flex: 1; min-width: 280px; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: var(--r-md); padding: 4px 4px 4px 16px; }
.searchbar .search input { flex: 1; border: none; outline: none; font-size: 15px; color: var(--ink); background: transparent; padding: 10px 0; }
/* .go is a real <button> here (the design used a <span>) — reset native
   button chrome so only the design's own styling shows. */
.searchbar .search .go { font-family: var(--font-head); text-transform: uppercase; background: var(--navy-800); color: #fff; font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: var(--r); border: none; cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap select { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .02em; font-weight: 600; font-size: 15px; color: var(--navy-900); background: #fff; border: none; border-radius: var(--r-md); padding: 15px 42px 15px 18px; cursor: pointer; min-width: 210px; -webkit-appearance: none; appearance: none; }
.select-wrap .caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.filter-row { padding: 18px 40px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-row .lbl { font-family: var(--font-head); text-transform: uppercase; font-size: 13px; letter-spacing: .08em; color: var(--hint); }
.fchip { font-family: var(--font-head); text-transform: uppercase; cursor: pointer; font-weight: 600; font-size: 13px; letter-spacing: .04em; padding: 7px 14px; border-radius: var(--pill); border: 1.5px solid #dfe2ea; color: var(--slate); background: #fff; }
.fchip:hover { color: var(--navy-900); border-color: #cdd3df; }
.fchip.active { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }
.fchip.active:hover { color: var(--navy-900); }

/* ---------- Listing page: pagination (new — the design's static mockup
   rendered all cards at once with no pager, so this is built from the
   design tokens rather than ported) ---------- */
.dsl-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.dsl-pagination .page-numbers { font-family: var(--font-head); text-transform: uppercase; font-weight: 600; font-size: 15px; min-width: 42px; height: 42px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); border: 1.5px solid var(--line); background: #fff; color: var(--navy-900); }
.dsl-pagination a.page-numbers:hover { border-color: var(--gold); color: var(--navy-900); }
.dsl-pagination .page-numbers.current { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }
.dsl-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* ---------- Listing page: empty states ---------- */
.dsl-empty { text-align: center; padding: 40px 20px 20px; max-width: 520px; margin: 0 auto; }
.dsl-empty h2 { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 28px; color: var(--navy-900); margin-bottom: 10px; }
.dsl-empty p { font-size: 16px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; }

/* ---------- Buttons: extra variants used by homepage/contact ---------- */
.btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-ghost-light:hover { color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline { background: transparent; color: var(--navy-900); border: 1.5px solid #cdd3df; }
.btn-outline:hover { color: var(--navy-900); border-color: var(--gold); }
.btn-md { font-size: 16px; padding: 13px 22px; }

/* ---------- Homepage: hero (front-page.php) ---------- */
.hero { position: relative; color: #fff; overflow: hidden; background: radial-gradient(1200px 500px at 12% -10%, var(--navy-700) 0%, var(--navy-800) 45%, var(--navy-900) 100%); }
.hero-ring { position: absolute; border: 2px solid rgba(212,160,23,.14); border-radius: var(--pill); }
.hero-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 64px 40px 60px; align-items: center; }
.hero h1 { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 60px; line-height: .96; letter-spacing: .005em; }
.hero h1 .spark { color: var(--gold-soft); }
.hero .lead { font-size: 18px; line-height: 1.65; color: var(--on-navy); max-width: 500px; margin: 22px 0 26px; }
.hero-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(212,160,23,.14); border: 1px solid rgba(212,160,23,.4); color: var(--gold-soft); font-family: var(--font-head); text-transform: uppercase; font-weight: 600; font-size: 13px; letter-spacing: .14em; padding: 7px 14px; border-radius: var(--r-sm); margin-bottom: 22px; }
/* Hero search (an addition — the design had no hero search box). Reuses
   the listing search's white pill look so it reads as the same control. */
.hero-search { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: var(--r-md); padding: 4px 4px 4px 16px; max-width: 500px; margin-bottom: 26px; }
.hero-search input { flex: 1; border: none; outline: none; font-size: 15px; color: var(--ink); background: transparent; padding: 12px 0; min-width: 0; }
.hero-search .go { font-family: var(--font-head); text-transform: uppercase; background: var(--navy-800); color: #fff; font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: var(--r); border: none; cursor: pointer; }
.hero-actions { display: flex; gap: 14px; }
.hero-figure { position: relative; }
.hero-figure .frame-accent { position: absolute; inset: 18px -18px -18px 18px; border: 2px solid var(--gold); border-radius: var(--r-lg); }
/* The hero photo. A committed theme asset (assets/hero.jpg), NOT an admin
   setting — see HOW-IT-WORKS.md before hunting for a Customizer option.

   `contain`, at every width, and never `cover`. The panel is wider than
   the image's 4:3 at both breakpoints, so `cover` fills the width and
   slices the top and bottom off — clipping the intake pipe at the top of
   the engine. `contain` fits the whole engine and lets the leftover space
   fall to the sides instead.

   Those side bars are invisible because the image is composited onto
   #0a1835 and this element's background-color is --navy-900 (#0a1836) —
   one step apart in the blue channel, JPEG quantization, not perceptible.
   The photo reads as an engine floating on one continuous navy field.

   That colour match is load-bearing twice: it also makes background-color
   a real fallback, so a 404 on the image leaves flat navy that still looks
   intentional rather than a broken box. Replace the photo with one on a
   white or transparent background and this is what breaks first — you'd
   see letterbox bars appear. */
.hero-figure .panel { position: relative; height: 420px; border-radius: var(--r-lg); overflow: hidden; background-color: var(--navy-900); background-image: url('assets/hero.jpg'); background-repeat: no-repeat; background-position: center center; background-size: contain; box-shadow: 0 24px 50px rgba(0,0,0,.4); }
.hero-figure .hero-stamp { position: absolute; left: -14px; bottom: 34px; font-size: 15px; padding: 11px 18px; }
.brandstrip { position: relative; border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.18); padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.brandstrip .label { font-family: var(--font-head); font-size: 13px; letter-spacing: .18em; color: #8f9bb5; }
.brandstrip .names { display: flex; gap: 38px; flex-wrap: wrap; font-family: var(--font-head); font-weight: 600; font-size: 20px; color: var(--on-navy); letter-spacing: .04em; }

/* ---------- Homepage: value props ---------- */
.valueprops { display: grid; grid-template-columns: repeat(2,1fr); background: #fff; border-bottom: 1px solid var(--line); }
/* Icon + heading only — the design's descriptive paragraph under each was
   removed. Padding is tightened from the original 36px and the heading's
   trailing margin zeroed, because with the paragraph gone that 6px plus a
   full 36px of bottom padding left the visual weight bunched at the top of
   a cell with empty space under it. The `.vp p` rule is deliberately kept:
   nothing renders it today, but it costs one line and means dropping a
   paragraph back in doesn't come back unstyled. */
.valueprops .vp { padding: 28px 40px; }
.valueprops .vp + .vp { border-left: 1px solid var(--line-2); }
.vp .ico { width: 48px; height: 48px; border-radius: 10px; background: var(--tint); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.vp h3 { font-family: var(--font-head); text-transform: uppercase; font-weight: 600; font-size: 22px; color: var(--navy-900); margin-bottom: 0; }
.vp p { font-size: 15px; color: var(--muted); line-height: 1.6; margin-top: 6px; }

/* ---------- Homepage: featured section header (design used inline styles) ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.section-title { font-weight: 700; font-size: 38px; color: var(--navy-900); margin-top: 6px; }

/* ---------- Contact page (template-contact.php) ---------- */
.contact-head { position: relative; overflow: hidden; background: radial-gradient(1000px 400px at 12% -20%, var(--navy-700) 0%, var(--navy-800) 50%, var(--navy-900) 100%); color: #fff; padding: 48px 40px 44px; }
.contact-head .crumbs { font-family: var(--font-head); text-transform: uppercase; font-size: 14px; color: var(--hint); letter-spacing: .04em; margin-bottom: 14px; }
.contact-head .crumbs a { color: var(--hint); }
.contact-head .crumbs .here { color: var(--gold-soft); }
.contact-head h1 { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 56px; line-height: .98; letter-spacing: .005em; }
.contact-head .lead { font-size: 18px; line-height: 1.65; color: var(--on-navy); max-width: 560px; margin-top: 16px; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; padding: 44px 40px 56px; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-card); }
.form-card-title { font-weight: 700; font-size: 28px; color: var(--navy-900); margin-bottom: 4px; }
.form-card-lead { font-size: 15px; color: var(--muted); margin-bottom: 24px; }
.field { margin-bottom: 14px; }
.field label { font-family: var(--font-head); text-transform: uppercase; display: block; font-size: 13px; letter-spacing: .06em; color: var(--hint); margin-bottom: 7px; }
.field .input { width: 100%; border: 1px solid #dfe2ea; border-radius: var(--r); padding: 13px 15px; font-size: 15px; color: var(--ink); }
.field textarea.input { resize: none; }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-aside { display: flex; flex-direction: column; gap: 16px; }
.info-rail { background: var(--navy-800); color: #fff; border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-rail); }
.info-rail .name { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 22px; color: #fff; }
.info-rail .subhead { font-family: var(--font-head); text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: .1em; color: var(--on-navy-dim); margin: 2px 0 18px; }
.info-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.info-row:last-child { margin-bottom: 0; }
.info-row .ico { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px; background: rgba(212,160,23,.16); display: flex; align-items: center; justify-content: center; }
.info-row .k { font-family: var(--font-head); text-transform: uppercase; font-size: 13px; letter-spacing: .06em; color: var(--on-navy-dim); }
.info-row .v { font-weight: 600; font-size: 16px; color: #fff; line-height: 1.5; }
.info-row .v.big { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; font-size: 20px; }
/* The design's stylized map graphic was removed — it was a decorative
   placeholder for a real embed that is not coming, and it left the info
   rail sitting above a meaningless grey box. .contact-aside is a flex
   column, so with the rail as its only child the 16px gap has nothing to
   apply between and the space closes by itself. */

/* ============================================================
   Adaptations for WordPress + the mobile menu.

   Nothing below this point exists in design/styles.css — the design
   file has zero media queries, and its mobile-*.html mockups are
   separate static pages simulating a phone frame, not a responsive
   version of these same templates. See HOW-IT-WORKS.md for the full
   reasoning behind each of these.
   ============================================================ */

/* wp_nav_menu() outputs <ul><li><a>, not the flat <a> tags the static
   design file used — reset default list spacing/bullets so .nav-links
   still lays out exactly like the design once its links are wrapped in
   <li>. The flex/gap/color rules above apply to the <a> tags regardless
   of the <li> wrapper, so this is the only addition needed. */
.nav-links { list-style: none; margin: 0; padding: 0; }

/* Groups the nav links and the phone button so both can slide down
   together as one panel on mobile (see the media query below). The
   design's static mockups never showed an expanded mobile menu state —
   there was nothing to port here, so this wrapper and the checkbox
   toggle are new. */
.nav-menu-panel { display: flex; align-items: center; gap: 28px; }

/* The mobile menu is CSS-only: a checkbox toggled by clicking its <label>
   (the hamburger icon), shown/hidden via the :checked sibling selector in
   the media query below. No JavaScript needed.

   Off entirely at desktop widths, where the panel is always visible — a
   focusable "Menu" control that toggles nothing would just be a confusing
   extra tab stop. The media query turns it back on, visually hidden but
   still focusable, so keyboard and screen reader users can operate it. */
.dsl-mobile-menu-toggle { display: none; }

/* Covers the page below the header while the menu is open, so tapping
   anywhere outside the panel closes it. It's a <label> pointing at the
   same checkbox, so the close is native HTML — no JavaScript.

   Absolutely positioned against .nav and starting at its bottom edge
   (top: 100%), so it never covers the header bar itself and the hamburger
   stays tappable to close. Living inside .nav also keeps it in the header
   layer, so a single tier covers the header, the panel and the scrim. */
.dsl-menu-scrim { display: none; }

/* SOLD takes the condition tag's spot — on engine cards and on the single
   engine's main gallery image — whenever an engine is marked sold (see
   dsl_render_engine_gallery() and template-parts/engine-card.php). The two
   never render together: sold REPLACES the condition rather than stacking
   with it, so they cannot collide in that corner. This is a step larger
   again than the enlarged condition badge above, which is what keeps sold
   reading as "unmissable at a glance" rather than as just another tag.
   The design file never depicted a sold engine, so this variant is new.

   NOTE: the two badge-context selectors are repeated here rather than
   relying on a bare `.tag-sold`. The enlarged condition rule higher up is
   `.ecard .thumb .tag` / `.pdp .gallery-main .tag` — three classes — so a
   one-class `.tag-sold` loses on specificity no matter how far down the
   file it sits, and SOLD would silently render at the condition badge's
   size. Matching the specificity is what makes this win. */
.tag-sold,
.ecard .thumb .tag-sold,
.pdp .gallery-main .tag-sold { font-size: 22px; font-weight: 700; padding: 12px 24px; letter-spacing: .09em; }

/* ---------- Responsive breakpoint: 768px and below ----------
   768px matches Astra's own tablet container breakpoint (keeps the
   whole site switching layout at one consistent width) and comfortably
   clears the 390px-wide phone mockups in design/mobile-*.html with room
   to spare. Documented in HOW-IT-WORKS.md — size later templates'
   breakpoints to match this one. */
@media (max-width: 768px) {
	.utility { padding: 8px 20px; font-size: 11px; justify-content: center; }
	/* The mobile mockups show only the tagline on one centered line —
	   no address/hours. (Their extra top padding for a phone's "dynamic
	   island" is a mockup-frame artifact, not something a real browser
	   needs, so it isn't ported.) */
	.utility-right { display: none; }

	/* .nav is already position: relative + --z-header from the base rules;
	   only the padding changes here. */
	.nav { padding: 12px 20px; }
	.nav .logo { height: 40px; }

	/* Above the scrim (local 1) so the hamburger stays clickable to close
	   the menu. These small values are scoped inside .nav's stacking
	   context — see "Stacking order" at the top of this file. */
	.hamburger { display: flex; position: relative; z-index: 3; }

	/* Visually hidden but still focusable and still announced — the
	   standard clip pattern. `display: none` (what this used to be) takes
	   it out of the tab order and the accessibility tree entirely, which
	   left the menu impossible to open by keyboard at all. */
	.dsl-mobile-menu-toggle {
		display: block;
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	/* The checkbox itself is invisible, so the focus ring has to be drawn
	   on the hamburger it controls, or keyboard focus would vanish. */
	.dsl-mobile-menu-toggle:focus-visible ~ .hamburger {
		outline: 2px solid var(--gold);
		outline-offset: 4px;
		border-radius: 3px;
	}

	.nav-menu-panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 2;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
	}
	.dsl-mobile-menu-toggle:checked ~ .nav-menu-panel { max-height: 400px; }

	/* Tap-outside-to-close. Only exists while the menu is open, so it can
	   never swallow taps the rest of the time. Deliberately transparent —
	   this menu is a short dropdown, not a full-screen overlay, so dimming
	   the page would overstate it. */
	.dsl-mobile-menu-toggle:checked ~ .dsl-menu-scrim {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 100vh;
		z-index: 1;
		background: transparent;
	}

	/* Stop the page scrolling behind the open menu. :has() is what lets a
	   CSS-only menu reach the <body> from a checkbox buried in the header.
	   If it ever fails to match, the menu still opens and closes correctly
	   — the page just scrolls behind it, which is what it did before. */
	body:has(.dsl-mobile-menu-toggle:checked) { overflow: hidden; }

	.nav-links { flex-direction: column; gap: 0; width: 100%; }
	.nav-links li { border-top: 1px solid var(--line-2); }
	.nav-links a { display: block; padding: 14px 20px; }
	.nav-links a.active { border-bottom: none; border-left: 3px solid var(--gold); padding-left: 17px; }

	.nav-phone { justify-content: center; margin: 14px 20px; }

	.cta-band { flex-direction: column; align-items: flex-start; padding: 26px 20px; text-align: left; }
	.cta-band h2 { font-size: 24px; }
	.cta-band p { font-size: 14px; margin-bottom: 16px; }
	.cta-band > a { width: 100%; }

	.footer-inner { flex-direction: column; gap: 24px; }

	/* Single engine template (single-engine.php): stack the gallery/specs
	   column and the enquiry rail, matching design/mobile-product.html's
	   stacked treatment — product.html's own two-column .pdp grid is
	   desktop-only, nothing here is ported from the source file. */
	.breadcrumb { padding: 12px 20px; font-size: 12px; }
	.pdp { grid-template-columns: 1fr; padding: 20px 20px 32px; gap: 24px; }
	.pdp .gallery-main { height: 250px; }
	.pdp h1 { font-size: 32px; }
	.spec-table { font-size: 14px; }
	/* Sticky only makes sense next to a second, taller column on
	   desktop — stacked on one column, it would just glue the rail to
	   the top of the viewport as everything else scrolls underneath it. */
	.enquiry { position: static; }

	.section { padding: 32px 20px 40px; }
	.grid-3 { grid-template-columns: 1fr; }

	/* Listing page (archive-engine.php), per design/mobile-engines.html:
	   two-across cards (this rule comes after .grid-3 above, so it wins
	   for the listing grid specifically). */
	.dsl-engine-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.dsl-engine-grid .ecard .thumb { height: 140px; }

	/* "Similar engines" went from 3 cards to 9. One-across, that is nine
	   full-width cards to scroll past below the specs — so it borrows the
	   listing's two-across phone treatment instead, turning nine rows into
	   five. The homepage's featured grid is also .grid-3 but deliberately
	   NOT included here: design/mobile-home.html specifies single-column
	   featured cards, and that layout was signed off against the mockup. */
	.dsl-similar-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.dsl-similar-grid .ecard .thumb { height: 140px; }

	/* The enlarged badges would crowd a 140px-tall card thumb at their
	   desktop size — trimmed just enough to sit comfortably while staying
	   well above the 12px they started at.

	   The tighter tracking and inset are sized around the longest term the
	   taxonomy can hold, "Remanufactured". Two-across on a 320px phone a
	   card thumb is only ~130px wide, and at the desktop tracking that
	   badge measured 131.6px — it overflowed the card by 13px. Font size
	   is deliberately NOT reduced to fix that (the whole point of the
	   enlargement was legibility at arm's length); the space comes from
	   letter-spacing, padding and the corner inset instead. Verified at
	   320/360/390px with a real Remanufactured engine. */
	.dsl-engine-grid .ecard .thumb .tag,
	.dsl-similar-grid .ecard .thumb .tag { font-size: 14px; padding: 6px 10px; letter-spacing: .02em; top: 8px; left: 8px; }
	.dsl-engine-grid .ecard .thumb .tag-sold,
	.dsl-similar-grid .ecard .thumb .tag-sold { font-size: 18px; padding: 9px 16px; letter-spacing: .05em; }
	.dsl-engine-grid .ecard .body { padding: 14px; }
	.dsl-engine-grid .ecard h3 { font-size: 18px; }
	/* The card foot (price + button side by side) is cramped in a
	   half-width phone card — stack it. */
	.dsl-engine-grid .ecard .foot { flex-direction: column; align-items: flex-start; gap: 10px; }

	/* Listing header + filters: condensed navy header with the search and
	   manufacturer select stacked full-width (the mockup's treatment); the
	   crawlable chip row is hidden here since the select does the filtering
	   on mobile — hidden, not removed, so the links stay in the markup. */
	.list-head { padding: 22px 20px; }
	.list-head h1 { font-size: 30px; }
	.list-head-row { margin-bottom: 16px; }
	.searchbar { flex-direction: column; align-items: stretch; }
	.searchbar .search { min-width: 0; }
	.select-wrap select { width: 100%; min-width: 0; }
	.filter-row { display: none; }

	/* Homepage hero (front-page.php), per design/mobile-home.html:
	   single column, stacked full-width actions, the figure panel below
	   the text with a simple gold border instead of the desktop's offset
	   frame (which would overflow the viewport edge at full width). */
	.hero-inner { grid-template-columns: 1fr; padding: 30px 20px 34px; gap: 26px; }
	.hero h1 { font-size: 38px; }
	.hero .lead { font-size: 15px; }
	.hero-search { max-width: none; }
	.hero-actions { flex-direction: column; }
	.hero-actions .btn { width: 100%; }
	.hero-figure .frame-accent { display: none; }
	/* Only the height and border change here — `background-size: contain` is
	   inherited from the base rule, which now uses it at every width. The
	   phone panel is the more extreme case (about 350x200, 1.75, against a
	   4:3 source), so it gets proportionally wider side bars — still
	   invisible, for the colour reason explained on the base rule. */
	.hero-figure .panel { height: 200px; border: 2px solid var(--gold); }
	.brandstrip { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px; }
	.brandstrip .names { gap: 20px 26px; font-size: 18px; }

	/* Value props: stack, swap the divider from a left border to a top one. */
	.valueprops { grid-template-columns: 1fr; }
	.valueprops .vp { padding: 22px 20px; }
	.valueprops .vp + .vp { border-left: none; border-top: 1px solid var(--line-2); }

	/* Featured section header: title and "view all" button stack. */
	.section-head { margin-bottom: 20px; }
	.section-title { font-size: 30px; }

	/* Contact page (template-contact.php), per design/mobile-contact.html:
	   single column, single-column form fields, condensed header. */
	.contact-head { padding: 26px 20px 28px; }
	.contact-head h1 { font-size: 34px; }
	.contact-grid { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
	.form-card { padding: 20px; }
	.field-2 { grid-template-columns: 1fr; }
}