/* ============================================================
   MOTOR BROS — DARK THEME (optional)
   ------------------------------------------------------------
   Enable by adding  class="theme-dark"  to the <html> tag:
       <html lang="en-GB" class="theme-dark">
   Remove it to go back to the light site. Nothing else changes.

   The site is built on colour tokens, so most of the work is
   just re-pointing those. The rules below that aren't tokens
   are components that had a light surface hard-coded.
   ============================================================ */

.theme-dark {
  --ink: #f4f4f6;          /* primary text, now light      */
  --ink-soft: #c3c6cc;     /* body copy                    */
  --muted: #9296a0;        /* labels, captions             */
  --paper: #1e2025;        /* page background — charcoal rather than near-black */
  --paper-alt: #272a30;    /* cards, inset panels          */
  --carbon: #16181c;       /* deepest surface (footer/nav) */
  --accent: #ff9412;       /* nudged brighter for contrast on dark */
}

/* ---- Surfaces that were hard-coded white ---- */
.theme-dark body { background: var(--paper); }
.theme-dark .site-header.is-solid { background: rgba(30,32,37,.94); border-bottom: 1px solid rgba(255,255,255,.08); }
.theme-dark .nav__dropdown-menu { background: #2b2e35; box-shadow: 0 26px 60px rgba(0,0,0,.5); }
.theme-dark .nav__dropdown-menu a { color: var(--ink); }
.theme-dark .nav__dropdown-menu a:hover { background: #343841; color: var(--accent); }

.theme-dark .car-card,
.theme-dark .testimonial,
.theme-dark .award-badge { background: var(--paper-alt); border-color: rgba(255,255,255,.09); }
.theme-dark .car-card:hover { box-shadow: 0 22px 55px rgba(0,0,0,.5); }
.theme-dark .method-card,
.theme-dark .stat-card,
.theme-dark .valuation-card,
.theme-dark .enquiry-card { background: var(--paper-alt); }

/* ---- Hairlines: light greys are invisible on dark ---- */
.theme-dark .vehicle-section-title,
.theme-dark .contact-info__block h3 { border-bottom-color: rgba(255,255,255,.1); }
.theme-dark .vehicle-specs__row,
.theme-dark .hours-list li,
.theme-dark .car-card--linked .car-card__meta,
.theme-dark .testimonial cite { border-color: rgba(255,255,255,.1); }
.theme-dark .section-head__rule { background: rgba(255,255,255,.18); }
.theme-dark .vehicle-hero__price { border-top-color: rgba(255,255,255,.1); }

/* ---- Form controls ---- */
.theme-dark .input,
.theme-dark .contact-form__field input,
.theme-dark .contact-form__field textarea,
.theme-dark .stock-controls__search,
.theme-dark .stock-controls__sort select {
  background: #272a30;
  border-color: rgba(255,255,255,.16);
  color: var(--ink);
}
.theme-dark .contact-form__field input:focus,
.theme-dark .contact-form__field textarea:focus { background: #2f333a; border-color: var(--accent); }
.theme-dark .stock-controls__search:focus-within { background: #2f333a; border-color: var(--accent); }
.theme-dark .input--reg { background: #f5d000; color: #111; } /* number plate stays yellow */

/* ---- Buttons ---- */
.theme-dark .btn--dark { color: var(--ink); border-color: var(--ink); }
.theme-dark .btn--dark:hover { background: var(--ink); color: var(--paper); }
.theme-dark .btn--muted { color: var(--ink-soft); border-color: rgba(255,255,255,.22); }
.theme-dark .btn--muted:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.theme-dark .services__tab { background: var(--paper-alt); color: var(--ink-soft); }
.theme-dark .services__tab:hover { border-color: rgba(255,255,255,.3); }
.theme-dark .services__tab.is-active { background: var(--accent); color: #111; border-color: var(--accent); }
.theme-dark .chip { background: var(--paper-alt); color: var(--ink-soft); }
.theme-dark .chip.is-active { background: var(--accent); color: #111; }

/* ---- Sticky controls bar ---- */
.theme-dark .stock-controls { background: var(--paper); border-bottom-color: rgba(255,255,255,.08); }

/* ---- Page header bands sit on photos; deepen the scrim ---- */
.theme-dark .contact-hero::before,
.theme-dark .sell-hero::before,
.theme-dark .services-hero::before {
  background: linear-gradient(180deg, rgba(6,6,7,.68) 0%, rgba(6,6,7,.82) 60%, rgba(6,6,7,.95) 100%);
}

/* ---- Footer already dark; separate it from the page ---- */
.theme-dark .footer { border-top: 1px solid rgba(255,255,255,.08); }

/* ---- Gallery / lightbox ---- */
.theme-dark .gallery-thumb { border-color: transparent; }
.theme-dark .strip-jump { background: var(--paper-alt); border-color: rgba(255,255,255,.14); color: var(--ink-soft); }
.theme-dark .strip-jump:hover { background: var(--accent); border-color: var(--accent); color: #111; }
.theme-dark .gallery-price-tag { background: var(--paper-alt); color: var(--ink); }

/* ---- Misc surfaces ---- */
.theme-dark .find-us__map { filter: grayscale(.4) contrast(1.05) invert(.9) hue-rotate(180deg); }
.theme-dark .welcome { background: var(--paper); }
.theme-dark .awards { background: var(--paper-alt); }
.theme-dark .vehicle-description__list li::before { background: var(--accent); }

/* Native selects don't inherit the token colours on all browsers */
.theme-dark .stock-controls__sort select,
.theme-dark select.input {
  background-color: #272a30;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.14);
}
.theme-dark .stock-controls__sort select option,
.theme-dark select.input option { background: #272a30; color: var(--ink); }
.theme-dark .stock-controls__sort label { color: var(--muted); }

/* ============================================================
   Contrast fixes found by measuring against WCAG AA
   ------------------------------------------------------------
   These components hard-coded a white background but took their
   text colour from --ink, which is light in this theme — so they
   rendered as white-on-white.
   ============================================================ */

/* "Get Directions" in the footer: white button, so force dark text */
.theme-dark .footer__directions,
.theme-dark .footer__directions span { color: #111; }
.theme-dark .footer__directions:hover,
.theme-dark .footer__directions:hover span { background: var(--accent); color: #111; }

/* Carousel arrows on the arrivals row */
.theme-dark .arrivals__arrow {
  background: rgba(39,42,48,.94);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--ink);
}
.theme-dark .arrivals__arrow:hover { background: var(--accent); border-color: var(--accent); color: #111; }

/* Primary form buttons sit on a light panel in places; make them solid */
.theme-dark .contact-form__submit,
.theme-dark .enquiry-card__btn.btn--dark {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}
.theme-dark .contact-form__submit:hover,
.theme-dark .enquiry-card__btn.btn--dark:hover { background: #ffa63a; border-color: #ffa63a; color: #111; }

/* Attention grabber: white on orange is only 2.2:1 — dark text is far clearer */
.theme-dark .vehicle-grabber { color: #111; }

/* ---- Finance page, form states, reviews ---- */
.theme-dark .finance-point,
.theme-dark .finance-note { background: var(--paper-alt); border-color: rgba(255,255,255,.09); }
.theme-dark .finance-note { border-left-color: var(--accent); }
.theme-dark .finance-form-wrap { background: var(--paper); border-color: rgba(255,255,255,.1); }
.theme-dark .finance-point h3 { color: var(--ink); }
.theme-dark .field-error,
.theme-dark .contact-form__status.is-error { color: #ff8078; }
.theme-dark .contact-form__field.has-error input,
.theme-dark .contact-form__field.has-error textarea { border-color: #ff8078; }
.theme-dark .form-success__tick { color: #111; }
.theme-dark .form-success p a { color: var(--ink); }
.theme-dark .testimonial__meta { border-top-color: rgba(255,255,255,.1); }
.theme-dark .finance-hero::before {
  background: linear-gradient(180deg, rgba(6,6,7,.68) 0%, rgba(6,6,7,.82) 60%, rgba(6,6,7,.95) 100%);
}