/* richs-autosalesus — visual-consistency pass (L2, 2026-07-24).
 * The muscle-garage design language is border-radius:0 EVERYWHERE — every input, select, filter,
 * button and card is squared with !important. The parent theme left three elements rounded, which
 * breaks the single-shape rule the design commits to: the inventory YEAR + SOLD badges and the
 * phone "+1" prefix pill. Square them so the whole UI reads as one language. Reversible: empty this file. */
html body .dag-badge,
html body .dag-sold-badge,
html body .is-sold,
html body .dag-phone-wrap,
html body .dag-phone-wrap .dag-phone-prefix,
html body .dag-phone-wrap .iz-phone-cc,
html body .dag-phone-wrap input {
	border-radius: 0 !important;
}

/* Inventory card top row: keep "View Details" right-anchored even when a car has no year badge
 * (empty year meta), so the button never reflows to the left as it did on the first card.
 * margin-left:auto right-anchors it whether or not the year badge is present. (The archive-car.php
 * template now also derives the year from the post title when the meta is empty, so the badge shows.) */
html body .dag-inv-card__top { display: flex; align-items: center; gap: 8px; }
html body .dag-inv-card__top > .dag-btn { margin-left: auto !important; }

/* ============================================================================
 * FIX 2026-07-27 (Pass 1) — dark-base backstop for html/body. The real white-band cause is a
 * leftover light theme (Customizer Additional CSS + iz-sot-custom-css-preserve) that loads after
 * redesign-mg; the per-page wrappers are re-darkened at higher specificity in 60-pages/70-shipping.
 * This backstop keeps html+body dark so nothing shows through on short pages. Reversible: delete. */
html, body { background: var(--mg-base) !important; }

/* FIX 2026-07-27 (ROOT): neutralize the leftover LIGHT/BLUE/ROUNDED theme still shipped by the
 * Customizer "Additional CSS" + iz-sot-custom-css-preserve mu-plugin (both load AFTER redesign-mg,
 * with !important). Its rules read --bg/--surface/--text/--border/--primary/--radius — tokens the
 * redesign never defined — so they resolved light/blue/rounded and punched through as white bands,
 * blue accents and stray rounding (e.g. .shipping-divider, page wrappers). Remap those tokens to the
 * muscle-garage dark/red/square palette so every leftover rule renders on-brand. Supersedes per-
 * element chasing. Reversible: delete this block. */
:root{
  --bg:#14161a!important; --surface:#1f2329!important; --surface-2:#191c21!important;
  --text:#c8ccd2!important; --muted:#8b9098!important; --border:rgba(200,204,210,.14)!important;
  --primary:#e01f26!important; --primary-600:#ff3b41!important; --primary-700:#a5161b!important;
  --ring:rgba(224,31,38,.25)!important; --radius:0!important;
}

/* FIX 2026-07-27: HERO black slab. Each hero's inner box carries the page container class
 * (.about-container / .contact-container / .shipping-container), which the dark page-background
 * rule paints --mg-base — so the title sat inside a solid dark rectangle over the photo. Make the
 * hero inners transparent so the text sits directly on the image; keep a full-bleed scrim gradient
 * + text-shadow for legibility (the photo now reads through). Reversible: delete this block. */
html body .about-hero__inner,
html body .contact-hero__inner,
html body .shipping-hero__inner,
html body .privacy-hero__inner { background: transparent !important; }
html body .about-hero__overlay,
html body .contact-hero__overlay,
html body .shipping-hero__overlay,
html body .privacy-hero__overlay {
  background: linear-gradient(180deg, rgba(9,10,12,.28) 0%, rgba(9,10,12,.55) 55%, rgba(9,10,12,.82) 100%) !important;
}
html body .about-hero__title, html body .about-hero__subtitle,
html body .contact-hero__title,
html body .shipping-hero__title, html body .shipping-hero__subtitle,
html body .privacy-hero__title {
  text-shadow: 0 2px 20px rgba(0,0,0,.78), 0 1px 4px rgba(0,0,0,.6) !important;
}

/* FIX 2026-07-28: leftover BLUE glow on red buttons — the leftover primary-button rule shipped a
 * hardcoded box-shadow:rgba(37,99,235,…) (the faint blue halo under "MESSAGE US" etc.). The token
 * remap can't touch a hardcoded rgba, so neutralise the shadow to a dark drop here. */
html body .btn-primary,html body .contact-btn--primary,html body .dag-btn--primary,
html body .privacy-contact-btn,html body .thankyou-btn--primary,html body .home-contact__submit,
html body .contact-form__submit,html body .vehicle-card__cta,html body .inventory-btn,
html body .hero__btn,html body .mg-btn,html body .mg-fbtn{box-shadow:0 8px 22px rgba(0,0,0,.35)!important;}

/* FIX 2026-07-28: hide the blog-style page-banner meta ("BY MARTIN / date / NO COMMENTS") that the
 * default wpdevart page template prints — inappropriate on static pages. */
html body .wpdevart-banner-page-entry-meta{display:none!important;}

/* Top-bar phone-CTA (Q2) — injected by mg-redesign-enqueue only when a phone number exists. */
html body .mg-topphone{color:var(--mg-text)!important;font-family:var(--mg-head)!important;letter-spacing:.04em;margin-left:18px;text-decoration:none;white-space:nowrap;}
html body .mg-topphone:hover{color:var(--mg-accent-2)!important;}

/* ============================================================================
 * FIX 2026-07-28 (Pass 4) — global polish: a11y focus, consistent interaction, mobile type/taps.
 * ============================================================================ */
/* a11y: visible keyboard focus ring (the site had none) — only shows for keyboard users. */
html body a:focus-visible,html body button:focus-visible,html body input:focus-visible,
html body select:focus-visible,html body textarea:focus-visible,html body [tabindex]:focus-visible,
html body .dag-btn:focus-visible,html body .btn:focus-visible,html body .wpdevart-header-action-button:focus-visible{
  outline:2px solid var(--mg-accent-2)!important;outline-offset:2px!important;
}
/* consistent interaction feel */
html{scroll-behavior:smooth;}
html body a{transition:color .18s ease;}
html body ::selection{background:var(--mg-accent);color:#fff;}
/* mobile: comfortable hero type + button tap size */
@media(max-width:560px){
  html body .about-hero__title,html body .contact-hero__title,html body .shipping-hero__title,
  html body .privacy-hero__title,html body .hero__title{font-size:clamp(25px,7.2vw,34px)!important;line-height:1.16!important;}
  html body .about-hero__subtitle,html body .shipping-hero__subtitle,html body .hero__subtitle{font-size:15px!important;}
  html body .dag-btn,html body .btn,html body .mg-fbtn,html body .contact-form__submit,
  html body .contact-btn,html body .privacy-contact-btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;}
}

/* FIX 2026-07-28: Contact form inputs rendered ROUNDED (12px) while the whole site uses SQUARED
 * fields. Root cause: a leftover global `input[type=text]{border-radius:12px!important}` tied the
 * redesign's `.contact-page input` (same specificity) and won on load order; the iz-forms @layer
 * canon (which beats unlayered !important) sets the field bg/border but NOT the radius, so radius
 * fell to that leftover. Field bg is already consistent (--iz-field-bg #32363c on all forms). Square
 * every canon (iz-forms `data-iz-dark`) field so all forms match the muscle-garage squared language. */
html body form[data-iz-dark] input,
html body form[data-iz-dark] select,
html body form[data-iz-dark] textarea,
html body form[data-iz-dark] .dag-phone-wrap,
html body form[data-iz-dark] .dag-phone-wrap input,
html body form[data-iz-dark] .dag-phone-prefix{border-radius:0!important;}
/* also kill the leftover blue glow on the Contact SUBMIT (selector the Pass-3 fix didn't reach). */
html body .contact-form__wrapper button[type="submit"],
html body .contact-form__wrapper .wpforms-submit,
html body .contact-page .contact-form__submit{box-shadow:0 8px 22px rgba(0,0,0,.35)!important;}

/* FIX 2026-07-28: form fields rendered at INCONSISTENT sizes — on Contact the single-line fields were
 * three heights (text 39px / phone 44px / select 48px) with mixed font-sizes (14/16px), and other
 * forms mixed 12–16px too. The redesign/leftover/iz-forms stack applied different padding+font per
 * field TYPE. Normalize every canon (data-iz-dark) field to ONE size (font 15, padding 12x14 -> ~46px)
 * so all fields on all forms match. */
html body form[data-iz-dark] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=file]),
html body form[data-iz-dark] select,
html body .dag-filter-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
html body .dag-filter-form select{
  height:46px!important;min-height:46px!important;
  padding:0 14px!important;line-height:normal!important;font-size:15px!important;box-sizing:border-box!important;
}
html body form[data-iz-dark] select,
html body .dag-filter-form select{padding-right:36px!important;}
/* inventory filter: keep SEARCH/RESET buttons the same 46px so the bar aligns */
html body .dag-filter-form button,html body .dag-filter-form .dag-btn,
html body .dag-filter-form input[type=submit]{height:46px!important;min-height:46px!important;box-sizing:border-box!important;}
html body form[data-iz-dark] textarea{
  height:auto!important;min-height:120px!important;padding:12px 14px!important;
  font-size:15px!important;line-height:1.4!important;box-sizing:border-box!important;
}
/* phone composite: prefix + input locked to the same 46px, vertically centred */
html body form[data-iz-dark] .dag-phone-wrap{display:flex!important;align-items:stretch!important;height:46px!important;}
html body form[data-iz-dark] .dag-phone-wrap input{flex:1 1 auto!important;height:46px!important;min-height:46px!important;}
html body form[data-iz-dark] .dag-phone-prefix{display:flex!important;align-items:center!important;height:46px!important;font-size:15px!important;padding:0 12px!important;}

/* SHARP CORNERS, FLEET-WIDE INTENT ENFORCED — owner instruction 2026-08-17.
 * This file already states the design language at the top: "border-radius:0 EVERYWHERE". It was
 * only ever enforced on named selectors (inputs, selects, filters) plus the --radius token, so the
 * child style.css kept shipping rounded cards, photos, badges and pills: 999px x19, 16px x13,
 * 12px x13, 7px x12, 50% x5 measured on this root. That is why the site reads mostly sharp with
 * rounded exceptions rather than consistently sharp.
 *
 * WHY A SPECIFICITY LADDER AND NOT A PLAIN `*`. style.css carries SEVEN radius rules that are
 * themselves !important with literal values (12px, 999px, 16px, 12px 0 0 12px, ...) at lines 2001,
 * 2024, 2037, 2083, 2094, 2519, 2528. Against an !important rule the cascade falls back to
 * specificity, and a bare `*` has none, so it would lose to every one of them. `:not(#\9)` matches
 * everything while contributing id-level specificity, so three of them put this rule above any
 * author selector without touching a single line of style.css or the parent theme.
 *
 * The eighth, style.css:1988 `border-radius:var(--radius) !important`, needs no help: --radius is
 * already pinned to 0 on the unscoped :root block above.
 *
 * #wpadminbar is excluded on purpose: it is Core chrome, only logged-in staff see it, and squaring
 * it is not part of the site's design language. Iframes (Chatra, Google Maps) are out of reach of
 * this stylesheet by construction, so nothing here can deform them.
 * Reversible: delete this block. */
html body *:not(#\9):not(#\9):not(#\9),
html body *:not(#\9):not(#\9):not(#\9)::before,
html body *:not(#\9):not(#\9):not(#\9)::after{
  border-radius:0!important;
}
html body #wpadminbar,html body #wpadminbar *{border-radius:revert!important;}

/* FORM FIELD LEGIBILITY — owner report 2026-08-17: fields go dark after data is entered.
 * MEASURED with headless Chrome on the live page: every field computes rgb(255,255,255) on
 * rgb(22,23,15) in BOTH colour schemes, and the form carries no data-iz-dark. So neither the dark-form
 * path nor prefers-color-scheme explains it — what paints those boxes is Chrome's own AUTOFILL
 * background, and nothing on this form neutralises it: the theme HAS the standard white-inset fix at
 * style.css:2492 but scoped to .home-contact__field, which is the HOME page form only. The car and
 * contact pages render form.dag-form and fall through. iz-forms.css deliberately only freezes the
 * transition and leaves the colour to the theme, so the gap is real rather than a duplicate.
 * Values below are the ones the probe measured, so an autofilled field looks like a typed one. */
form :is(input,textarea,select):-webkit-autofill,
form :is(input,textarea,select):-webkit-autofill:hover,
form :is(input,textarea,select):-webkit-autofill:focus,
form :is(input,textarea,select):-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
          box-shadow:0 0 0 1000px #fff inset!important;
  -webkit-text-fill-color:#16170f!important;
  caret-color:#16170f!important;
}

/* HONEYPOT must not occupy layout. Measured on the live page: dag_hp renders as a VISIBLE
 * 28x46 text input, against the fleet contract that every honeypot is hidden. It does carry
 * tabindex=-1 and autocomplete=off, so tabbing and autofill cannot reach it — but a stray
 * CLICK still can, and a filled honeypot means the lead is dropped as spam with an identical
 * /thank-you/ redirect. Taken out of flow rather than display:none, which some spam bots detect. */
form input[name=dag_hp], form input[name=hp], form input[name=iz_hp],
form input[name=hp_field], form input[name=website]{
  position:absolute!important; left:-9999px!important; top:auto!important;
  width:1px!important; height:1px!important; padding:0!important; border:0!important;
  opacity:0!important; pointer-events:none!important;
}

/* SOLD price chip: red text on the red chip — owner report 2026-08-17.
 * MEASURED on the live sold car page: .dag-price.is-sold computes color rgb(255,59,65) over its own
 * background rgb(208,0,0), a contrast ratio of 1.62 where AA wants 4.5 for text this size. The
 * theme already declares color:#fff on that rule; what overrides it is --primary-600:#ff3b41 from
 * the token block at the top of this file, which is why editing style.css would not have helped.
 * The sibling .dag-sold-badge is the reference for the intended look: white on the same red, and it
 * measures 5.7. Matching it keeps one Sold treatment across the card and the detail page rather than
 * inventing a third colour. Children are included because the label is wrapped on some layouts.
 * Reversible: delete this block. */
html body .dag-price.is-sold,
html body .dag-price.is-sold *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* SOLD in the spec list: same token, milder symptom. MEASURED on /inventory/: dd.is-sold computes
 * rgb(255,59,65) over rgb(31,35,41) = 4.47, just under the 4.5 AA floor for text this size — not the
 * red-on-red the price chip was, but the same --primary-600 leaking into a Sold label. White takes it
 * clear of the floor and makes all three Sold elements on this site read the same. The sibling root
 * 410-autosales.com needs nothing: its own palette measures 4.56 and 5.44. Reversible: delete. */
html body .dag-spec-mini dd.is-sold,
html body dd.is-sold{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* SOLD in the spec list, second attempt — the first one lost and this records why.
 * Asked Chrome directly (CSS.getMatchedStylesForNode) instead of guessing: the rule that wins is
 *   html body.post-type-archive-car .dag-spec-mini > div:last-child, ... { color:var(--mg-accent-2)!important }
 * Specificity (0,3,3) against my (0,2,3) — the extra class is body.post-type-archive-car — and it
 * also sits in a sheet that loads AFTER this file, so raising the selector to a tie would still lose.
 * --mg-accent-2 resolves to rgb(255,59,65), which over the dark spec strip measures 4.47 against the
 * 4.5 AA floor. The :not(#\9) ladder puts this above any author selector regardless of load order,
 * which is the same technique the corner rules in this file already use. Reversible: delete. */
html body .dag-spec-mini dd.is-sold:not(#\9):not(#\9),
html body dd.is-sold:not(#\9):not(#\9){
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}