/* ── dark.css ────────────────────────────────────
   Dark theme. Active when <html data-theme="dark">, which head.php
   sets before first paint (saved toggle choice, else the device
   setting) and the nav toggle flips (zoa.js).

   Every rule is prefixed with html[data-theme="dark"], which out-ranks
   the Tailwind CDN utilities (injected after this file) and zoa.css /
   mobile.css at equal depth, so the light styles stay untouched and
   this file only remaps colours. Mobile-only light areas (story, white
   ecosystem, closing CTAs, footer) are mapped further down.

   Palette: the whole site on the brand navy (#162033) — no lighter or
   darker section panels — with cards, text and borders treated like
   light mode's navy sections, soft cyan glows, and lighter cyan tints
   for contrast. */

html[data-theme="dark"] {
  /* One brand-navy surface throughout. Panels sit on the page navy
     with a hairline white border; cards use light mode's navy-section
     card fill (.zoa-dark-card, e.g. "Three Priorities": white at 5% over
     navy, pre-mixed to opaque); white text at 100/80/65%. --d-surface-2
     is a touch lighter, for small details like the rental card's
     address bar. */
  --d-bg: #162033;
  --d-surface: #222b3d;
  --d-surface-2: #283346;
  --d-border: rgb(255 255 255 / 0.1);
  --d-text: #ffffff;
  --d-text-2: rgb(255 255 255 / 0.8);
  --d-text-3: rgb(255 255 255 / 0.65);
  --d-cyan: #22d3ee;
  --d-cyan-soft: #67e8f9;
  background-color: var(--d-bg);
  color-scheme: dark;
}

/* Theme-specific elements: header logo, theme-toggle icon, partner logos. */
html[data-theme="dark"] .zoa-on-light {
  display: none;
}

html[data-theme="dark"] .zoa-on-dark {
  display: block;
}

/* Inline ACTRA logo ("tracked through ACTRA" in index.php): same
   swap, kept inline so it sits in the running text (sizing in zoa.css). */
html[data-theme="dark"] .zoa-actra-inline .zoa-actra-on-light {
  display: none;
}

html[data-theme="dark"] .zoa-actra-inline .zoa-actra-on-dark {
  display: inline-block;
}

/* ── Tailwind colour utilities used in the markup ─────────────── */

html[data-theme="dark"] .text-\[\#162033\],
html[data-theme="dark"] .text-slate-800 {
  color: var(--d-text);
}

html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600 {
  color: var(--d-text-2);
}

html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-400 {
  color: var(--d-text-3);
}

html[data-theme="dark"] .text-cyan-600,
html[data-theme="dark"] .text-cyan-700,
html[data-theme="dark"] .text-cyan-800 {
  color: var(--d-cyan);
}

html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-800 {
  color: #6ee7b7;
}

html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-700 {
  color: #fca5a5;
}

/* White in light mode = a panel (hero preview frame, People-powered,
   challenge photo panel, rental screenshot, £2.5bn box, mobile menu,
   form fields): page navy with a hairline border. Cards get the
   lighter --d-surface instead (see Site components). */
html[data-theme="dark"] .bg-white {
  background-color: var(--d-bg);
}

html[data-theme="dark"] .bg-white\/90 {
  background-color: rgb(22 32 51 / 0.9);
}

html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-200 {
  background-color: var(--d-surface-2);
}

html[data-theme="dark"] .bg-slate-200\/60 {
  background-color: rgb(255 255 255 / 0.08);
}

html[data-theme="dark"] .bg-cyan-50 {
  background-color: rgb(34 211 238 / 0.12);
}

html[data-theme="dark"] .bg-emerald-50 {
  background-color: rgb(16 185 129 / 0.12);
}

html[data-theme="dark"] .bg-red-50 {
  background-color: rgb(239 68 68 / 0.12);
}

html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-200\/80,
html[data-theme="dark"] .border-slate-300 {
  border-color: var(--d-border);
}

html[data-theme="dark"] .border-cyan-100 {
  border-color: rgb(34 211 238 / 0.25);
}

html[data-theme="dark"] .border-emerald-200 {
  border-color: rgb(16 185 129 / 0.3);
}

html[data-theme="dark"] .border-red-200 {
  border-color: rgb(239 68 68 / 0.35);
}

/* Hero avatar rings were white to cut them out of the page. */
html[data-theme="dark"] .border-white {
  border-color: var(--d-bg);
}

html[data-theme="dark"] .shadow-slate-200 {
  --tw-shadow-color: rgb(0 0 0 / 0.45);
}

/* Hover colours that were navy. */
html[data-theme="dark"] .hover\:text-\[\#162033\]:hover,
html[data-theme="dark"] .zoa-brand-name:hover {
  color: var(--d-text);
}

html[data-theme="dark"] .hover\:text-cyan-700:hover,
html[data-theme="dark"] .hover\:text-cyan-800:hover {
  color: var(--d-cyan-soft);
}

html[data-theme="dark"] .hover\:bg-slate-50:hover {
  background-color: var(--d-surface-2);
}

/* Contact email copy button and its bubble. */
html[data-theme="dark"] .zoa-copy {
  color: var(--d-text-3);
}

html[data-theme="dark"] .zoa-copy.is-copied {
  color: var(--d-cyan);
}

html[data-theme="dark"] .zoa-copy-tip {
  background: #ffffff;
  color: var(--d-bg);
}

/* ZOA Rental button: navy → lighter navy on hover in light mode;
   it's white here (see Buttons), so dim it slightly instead. */
html[data-theme="dark"] a.hover\:bg-\[\#22304a\]:hover {
  background-color: #e2e8f0;
}

/* ── Page, sections and backgrounds ───────────────────────────── */

/* The page navy lives on <html>; body is transparent so the section
   glows (z-index -1, see below) aren't painted over by its background. */
html[data-theme="dark"] body,
html[data-theme="dark"] body.bg-white {
  background-color: transparent;
}

html[data-theme="dark"] section.bg-white {
  background-color: var(--d-bg);
}

html[data-theme="dark"] .zoa-section-pale {
  background-color: var(--d-bg);
}

/* No separate panels in dark mode: light mode's navy bands
   (Hirestreet, Cascade, Industrial scale, The ZOA Difference, the closing
   CTA band, the footer, the mobile contact section) and pale bands all
   sit on the one page navy; their edge-placed glows are swapped for
   the mid-section glows below. */
html[data-theme="dark"] .zoa-section-dark,
html[data-theme="dark"] main > div.bg-\[\#162033\],
html[data-theme="dark"] footer.bg-\[\#162033\] {
  background-color: var(--d-bg);
  background-image: none;
}

html[data-theme="dark"] .zoa-section-dark > .pointer-events-none.absolute,
html[data-theme="dark"] main > div.bg-\[\#162033\] > .pointer-events-none.absolute {
  display: none;
}

html[data-theme="dark"] main section.zoa-m-navy:not(#top) {
  background-color: var(--d-bg);
}

/* Soft cyan glows through the page, alternating right and left by
   section. Each is a fixed-size round glow on the section's ::after,
   centred on its side edge and sitting behind everything (z-index -1),
   so it keeps its shape however short the section is and spills
   freely over the neighbouring sections. For that, sections and the
   CTA band are transparent in dark mode (they're all the page navy
   anyway, which html carries) — see the !important block below. The
   hero keeps its own wash. Horizontal overflow is already clipped by
   html/body overflow-x: hidden. */
html[data-theme="dark"] main > section:not(#top),
html[data-theme="dark"] main > div.bg-\[\#162033\],
html[data-theme="dark"] footer {
  background-color: transparent !important;
  background-image: none !important;
}

html[data-theme="dark"] main > section:not(#top),
html[data-theme="dark"] main > div.bg-\[\#162033\] {
  position: relative;
}

html[data-theme="dark"] #hirestreet {
  overflow: visible;
}

html[data-theme="dark"] main > section:not(#top)::after,
html[data-theme="dark"] main > div.bg-\[\#162033\]::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 44rem;
  height: 44rem;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgb(39 199 217 / 0.13), transparent);
  pointer-events: none;
}

html[data-theme="dark"] main > section:nth-of-type(odd):not(#top)::after {
  right: 0;
  transform: translate(45%, -50%);
}

html[data-theme="dark"] main > section:nth-of-type(even):not(#top)::after,
html[data-theme="dark"] main > div.bg-\[\#162033\]::after {
  left: 0;
  transform: translate(-45%, -50%);
}

@media (max-width: 767px) {
  html[data-theme="dark"] main > section:not(#top)::after,
  html[data-theme="dark"] main > div.bg-\[\#162033\]::after {
    width: 24rem;
    height: 24rem;
  }
}

/* Hero / contact-page wash: was white-to-slate; now a cyan glow on navy. */
html[data-theme="dark"] [class*="linear-gradient(135deg,#ffffff"] {
  background-image: radial-gradient(circle at top right, rgb(39 199 217 / 0.16), transparent 40%);
}

/* Hero grid lines: light mode only; dark mode keeps the hero plain. */
html[data-theme="dark"] [class*="rgba(15,23,42,0.06)"] {
  background-image: none;
}

/* ── Buttons ──────────────────────────────────────────────────── */

/* Navy primary buttons (Explore ZOA, Visit zoarental.com, Send
   message) would vanish on navy, so they flip to white. */
html[data-theme="dark"] a.bg-\[\#162033\],
html[data-theme="dark"] button.bg-\[\#162033\] {
  background-color: #ffffff;
  color: var(--d-bg);
}

/* White pill buttons (closing CTAs) stay white with navy text — pills
   only, so link-wrapped panels like the ZOA Rental preview don't. */
html[data-theme="dark"] a.bg-white.rounded-full {
  background-color: #ffffff;
  color: #162033;
}

/* …except the hero's secondary "View ecosystem", which goes outline. */
html[data-theme="dark"] a.bg-white.rounded-full.border-slate-300 {
  background-color: transparent;
  color: var(--d-text);
}

/* Partner logo plates: the white logo versions are swapped in
   (.zoa-on-dark in index.php), so the plates drop their white / Thrift+
   yellow fill and sit on the navy like everything else. */
html[data-theme="dark"] .zoa-logo-plate {
  background-color: transparent;
}

/* ── Site components (zoa.css) ────────────────────────────────── */

html[data-theme="dark"] .zoa-card,
html[data-theme="dark"] .zoa-checklist-item {
  border-color: var(--d-border);
  background-color: var(--d-surface);
}

html[data-theme="dark"] .zoa-stat-tile {
  border-color: var(--d-border);
  background-color: var(--d-surface);
}

/* Contact cards' white lower half is part of the card. */
html[data-theme="dark"] .zoa-contact-card .bg-white {
  background-color: var(--d-surface);
}

/* .zoa-card used as a container panel (the desktop challenge list,
   the Technology stats box) — navy like the other panels. */
html[data-theme="dark"] .zoa-panel.zoa-card {
  background-color: var(--d-bg);
}

/* The ACTRA dashboard inside that panel is navy in light mode; on the
   navy panel it would vanish, so it takes the stat tiles' card fill
   and hairline border instead. */
html[data-theme="dark"] #actra-dashboard {
  border: 1px solid var(--d-border);
  background-color: var(--d-surface);
}

html[data-theme="dark"] .zoa-browser-dot {
  background-color: rgb(148 163 184 / 0.4);
}

html[data-theme="dark"] .zoa-h2,
html[data-theme="dark"] .zoa-card-title {
  color: var(--d-text);
}

html[data-theme="dark"] .zoa-lede,
html[data-theme="dark"] .zoa-body,
html[data-theme="dark"] .zoa-body-sm {
  color: var(--d-text-2);
}

html[data-theme="dark"] .zoa-eyebrow {
  color: var(--d-cyan);
}

html[data-theme="dark"] .zoa-ctr-link::after {
  background: var(--d-text);
}

/* mobile.css forces light borders/shadows on touch devices with
   !important (to kill sticky hover states); re-darken them. */
@media (pointer: coarse) {
  html[data-theme="dark"] .zoa-card,
  html[data-theme="dark"] .zoa-checklist-item,
  html[data-theme="dark"] .zoa-stat-tile {
    border-color: var(--d-border) !important;
    box-shadow: none !important;
  }
}

/* ── Story timeline (all widths) ──────────────────────────────── */

html[data-theme="dark"] main section.zoa-m-story:not(#top) {
  background-color: var(--d-bg);
}

html[data-theme="dark"] main .zoa-m-story::before {
  background: rgb(34 211 238 / 0.35);
}

html[data-theme="dark"] main .zoa-m-story .zoa-story-fill {
  background: var(--d-cyan);
}

html[data-theme="dark"] main .zoa-story-text > :first-child::before {
  box-shadow: 0 0 0 4px var(--d-bg);
}

/* The solution's off-white panel (zoa.css) stays on the one navy
   surface here, like every other pale section in dark mode. */
html[data-theme="dark"] main section#how.zoa-m-story:not(#top) {
  background-color: var(--d-bg);
}

html[data-theme="dark"] main #how .zoa-story-text > :first-child::before {
  box-shadow: 0 0 0 4px var(--d-bg);
}

/* The challenge: tablet index. */
html[data-theme="dark"] .zoa-challenge-index li {
  border-top-color: var(--d-border);
}

html[data-theme="dark"] .zoa-challenge-num {
  color: var(--d-cyan);
}

html[data-theme="dark"] .zoa-challenge-title {
  color: var(--d-text);
}

/* The solution: journey rail and commercial models. */
html[data-theme="dark"] .zoa-flow-step:not(:last-child)::before {
  background: var(--d-border);
}

html[data-theme="dark"] .zoa-flow-step:not(:last-child)::after {
  background: rgb(34 211 238 / 0.6);
}

html[data-theme="dark"] .zoa-flow.is-pending .zoa-flow-node {
  border-color: var(--d-border);
  background: var(--d-surface);
  color: rgb(255 255 255 / 0.3);
}

html[data-theme="dark"] .zoa-flow-title {
  color: var(--d-text);
}

html[data-theme="dark"] .zoa-models-list li {
  color: var(--d-text-2);
}

html[data-theme="dark"] .zoa-flow-text {
  color: var(--d-text-2);
}

html[data-theme="dark"] .zoa-models-list li::before {
  color: var(--d-cyan);
}

/* ── Mobile-only light areas ──────────────────────────────────── */

@media (max-width: 767px) {
  /* One continuous canvas, as in light mode. */
  html[data-theme="dark"] main .zoa-section-pale {
    background-color: var(--d-bg);
  }

  /* Checklist pills. */
  html[data-theme="dark"] main .zoa-checklist-row-mobile .zoa-checklist-item {
    border-color: transparent !important;
    background: var(--d-surface);
  }

  /* The ZOA Difference — white on mobile in light mode. */
  html[data-theme="dark"] main section.zoa-m-light:not(#top) {
    background-color: var(--d-bg);
    color: var(--d-text);
  }

  html[data-theme="dark"] main section.zoa-m-light:not(#top) .zoa-h2-dark {
    color: var(--d-text);
  }

  html[data-theme="dark"] main section.zoa-m-light:not(#top) .zoa-dark-card {
    border-color: var(--d-border);
    background: var(--d-surface);
    box-shadow: none;
  }

  html[data-theme="dark"] main section.zoa-m-light:not(#top) .zoa-stat-value-white {
    color: var(--d-text);
  }

  html[data-theme="dark"] main section.zoa-m-light:not(#top) .zoa-body-dark-sm {
    color: var(--d-text-2);
  }

  html[data-theme="dark"] main section.zoa-m-light:not(#top) .zoa-body-dark-sm strong {
    color: var(--d-text);
  }

  /* Closing CTAs — white band in light mode. */
  html[data-theme="dark"] main .zoa-m-cta-light {
    background-color: var(--d-bg);
    color: var(--d-text);
  }

  html[data-theme="dark"] main .zoa-m-cta-light .zoa-m-cta {
    border-color: var(--d-border);
    background-color: var(--d-surface);
  }

  html[data-theme="dark"] main .zoa-m-cta-light .zoa-m-cta a {
    background-color: #ffffff;
    color: var(--d-bg);
  }

  /* Footer — white in light mode; back to the light logos here. */
  html[data-theme="dark"] footer.zoa-m-footer-light {
    background-color: var(--d-bg);
    color: var(--d-text);
  }

  html[data-theme="dark"] footer.zoa-m-footer-light .zoa-container {
    border-color: var(--d-border);
  }

  html[data-theme="dark"] footer.zoa-m-footer-light .text-white\/60,
  html[data-theme="dark"] footer.zoa-m-footer-light .text-white\/70 {
    color: var(--d-text-3);
  }

  html[data-theme="dark"] footer.zoa-m-footer-light .zoa-footer-divider {
    background: var(--d-border);
  }

  html[data-theme="dark"] .zoa-m-show {
    display: none;
  }

  html[data-theme="dark"] footer.zoa-m-footer-light a > img.zoa-m-hide {
    display: block !important;
  }
}