/* ========== DARK THEME ==========
   Turned on by html[data-theme="dark"] (the road toy on the home page switches it; base.html restores
   it from localStorage before the first paint). Linked from base.html with a ?v= query: after changing
   this file, run collectstatic (nginx serves /static/ from staticfiles/) and bump that version.

   Selector overrides are wrapped in :where(), which adds no specificity, so each rule ties with the
   main.css / page-extra.css rule it replaces and wins only by coming later. Hover and active states
   from those files keep working unchanged. */

html[data-theme="dark"] {
  color-scheme: dark;
  --dark:      #0b0b11;   /* deep fills: footer, promo cards, dark boxes */
  --text:      #e3e3ea;
  --muted:     #9a9aa8;
  --border:    #2c2c39;
  --bg:        #0f0f15;   /* section backgrounds */
  --white:     #17171f;   /* page and card surfaces */
  --heading:   #f3f3f6;   /* text that main.css paints with --dark */
  --shadow:    0 4px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.6);
}

/* Headings, names and prices: main.css colours them with --dark, which is now a background tone */
:where(html[data-theme="dark"]) .brand-name,
:where(html[data-theme="dark"]) .ql-title,
:where(html[data-theme="dark"]) .section-title,
:where(html[data-theme="dark"]) .car-name,
:where(html[data-theme="dark"]) .car-price,
:where(html[data-theme="dark"]) .service-title,
:where(html[data-theme="dark"]) .modal-title,
:where(html[data-theme="dark"]) .lc-num-input,
:where(html[data-theme="dark"]) .lc-term-display,
:where(html[data-theme="dark"]) .lc-extra-row span:last-child,
:where(html[data-theme="dark"]) .cc-detail-row span:last-child,
:where(html[data-theme="dark"]) .cc-detail-total span:first-child,
:where(html[data-theme="dark"]) .cc-rate-table tbody td:first-child,
:where(html[data-theme="dark"]) .car-search-item-name,
:where(html[data-theme="dark"]) .car-picker-item-name,
:where(html[data-theme="dark"]) .catalog-sidebar-title,
:where(html[data-theme="dark"]) .detail-title,
:where(html[data-theme="dark"]) .detail-price,
:where(html[data-theme="dark"]) .detail-spec-value,
:where(html[data-theme="dark"]) .detail-cta-btns .btn-outline-call,
:where(html[data-theme="dark"]) .service-lead-title,
:where(html[data-theme="dark"]) .service-benefit-title,
:where(html[data-theme="dark"]) .service-step-text strong,
:where(html[data-theme="dark"]) .contact-info-value,
:where(html[data-theme="dark"]) .contact-info-value a { color: var(--heading); }

/* Text that main.css paints with --white on dark boxes */
:where(html[data-theme="dark"]) .lc-result-box,
:where(html[data-theme="dark"]) .cc-rate-table thead th { color: #fff; }

:where(html[data-theme="dark"]) .btn-dark-solid { background: #2a2a3d; }
:where(html[data-theme="dark"]) .btn-dark-solid:hover { background: #37374f; }
:where(html[data-theme="dark"]) .hamburger span { background: var(--heading); }

/* Car page greens: plain "green" is too dim on a dark surface */
:where(html[data-theme="dark"]) .detail-cta-btns .btn-outline-white,
:where(html[data-theme="dark"]) .detail-spec i { color: #5fd068; }

:where(html[data-theme="dark"]) .detail-status { background: rgba(34,168,90,.15); }
:where(html[data-theme="dark"]) .detail-status.sold { background: rgba(255,255,255,.06); }

/* Deep fills sit on a dark page now: give them an edge */
:where(html[data-theme="dark"]) .promo-card { box-shadow: inset 0 0 0 1px var(--border); }
:where(html[data-theme="dark"]) .site-footer { border-top: 1px solid var(--border); }
:where(html[data-theme="dark"]) .alert-float { border: 1px solid var(--border); }

/* Inline styles in the templates */
html[data-theme="dark"] [style*="color:var(--dark)"] { color: var(--heading) !important; }
html[data-theme="dark"] [style*="background:var(--dark);border-color:var(--dark)"] { border-color: var(--border) !important; }
html[data-theme="dark"] [style*="color:#010101"] { color: #f2f2f2 !important; }   /* TikTok icon on the about page */

/* ========== HEADER THEME BUTTON ==========
   A front-view car (templates/includes/navbar.html): headlights off in the light theme, on in the dark one.
   Shown on every page except home, where the road toy switches the theme. */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 54px; height: 42px; padding: 0;
  background: transparent; border: 1.5px solid var(--border); border-radius: 4px;
  cursor: pointer; transition: border-color .2s;
}
.theme-btn:hover { border-color: var(--gold); }
.theme-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.theme-btn svg { display: block; width: 44px; height: 26px; overflow: visible; }
.theme-btn .tb-lamp { fill: #a3a6ae; transition: fill .25s; }
.theme-btn:hover .tb-lamp { fill: #e9dfb8; }   /* a hint of light on hover */
.theme-btn .tb-light { opacity: 0; transition: opacity .25s; }
html[data-theme="dark"] .theme-btn .tb-lamp { fill: #fff6d8; }
html[data-theme="dark"] .theme-btn .tb-light { opacity: 1; }
/* Switching on (not on page load): the headlights flicker before they settle */
html.theme-anim[data-theme="dark"] .theme-btn .tb-light { animation: tb-flicker .6s ease-out both; }
@keyframes tb-flicker {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  40%  { opacity: .2; }
  60%  { opacity: 1; }
  75%  { opacity: .6; }
  100% { opacity: 1; }
}
@media (max-width: 768px) {
  .theme-btn { width: 48px; height: 38px; }
  .theme-btn svg { width: 40px; height: 24px; }
}

/* Smooth switch: colours cross-fade for a moment while the theme flips (SVG content keeps its own motion) */
html.theme-anim,
html.theme-anim *:not(svg *),
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease !important;
}