/* ==========================================================================
   Aura Motors — site styles
   Tokens and base rules are carried over verbatim from the approved design
   file. Everything below "Layer 2" is what the design file could not express
   because it was authored with inline styles only: responsive behaviour,
   the mobile navigation, reduced motion, and the image drop slots.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layer 1 — tokens and base (from the approved design)
   -------------------------------------------------------------------------- */

/* The design's own token names, given light values. They are strictly semantic —
   --paper is only ever a foreground, --near-black and --surface are only ever
   backgrounds, --line is only ever a border — so the whole page turns over here.
   The hero, Fleet Solutions and the footer carry the dark palette as literal
   values in the markup and are untouched by this. */
:root{
  --aura-teal:#0B9EAE; --aura-teal-bright:#12C0D2; --aura-teal-deep:#07717D;
  --ink:#4B4F4E;
  --near-black:#F4F6F6;                    /* page — soft grey, not stark white */
  --surface:#FFFFFF;                       /* cards and alternating sections */
  --paper:#14181A;                         /* primary text */
  --line:rgba(12,15,16,0.11);
  --muted:rgba(12,15,16,0.62);
  --muted-2:rgba(12,15,16,0.45);
  --gold:#9A7B18;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--near-black);color:var(--paper);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
a{color:var(--paper);text-decoration:none;transition:color .22s ease;}
a:hover{color:var(--aura-teal-deep);}
h1,h2,h3,h4{margin:0;font-family:Archivo,system-ui,sans-serif;letter-spacing:-0.025em;}
p{margin:0;}
img,svg,video{max-width:100%;}
input,select,textarea,button{font-family:inherit;}
::selection{background:var(--aura-teal);color:#fff;}
:focus-visible{outline:2px solid var(--aura-teal-bright);outline-offset:3px;}

@keyframes auraMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes auraDrift{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.07) translate3d(-1%,-1%,0)}}
@keyframes auraScrollHint{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(9px);opacity:1}}

/* --------------------------------------------------------------------------
   Layer 2 — additions
   -------------------------------------------------------------------------- */

/* Skip link — first tab stop, invisible until focused. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--aura-teal);color:#fff;
  padding:14px 22px;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
}
.skip-link:focus{left:0;color:#fff;}

[hidden]{display:none !important;}

/* Image drop slots — every one is a real, labelled gap in the photography,
   not a placeholder pretending to be a finished image. */
.drop-slot{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.022) 0 12px,
      rgba(255,255,255,0)   12px 24px),
    var(--surface);
  border:1px dashed rgba(255,255,255,.16);
}
.drop-slot__label{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);line-height:1.7;max-width:34ch;
}

/* --------------------------------------------------------------------------
   The header crosses a light/dark boundary
   It starts transparent over the dark hero and turns solid over light content
   at 80px. The markup's inline styles are written for the light state, so the
   overrides below only cover the stretch where it floats over the hero.
   js/main.js stamps data-scrolled on <body>.
   -------------------------------------------------------------------------- */

body:not([data-scrolled="1"]) [data-header] nav a,
body:not([data-scrolled="1"]) [data-header] .header-actions > a:not([href="#dealer-network"]){
  color:rgba(244,246,246,.72) !important;
}
body:not([data-scrolled="1"]) [data-header] nav a:first-child{color:#F4F6F6 !important;}
body:not([data-scrolled="1"]) [data-header] nav a:hover{color:#F4F6F6 !important;}
body:not([data-scrolled="1"]) [data-header] img[alt="Aura Motors"]{
  filter:brightness(0) invert(1) !important;
}
body:not([data-scrolled="1"]) .nav-toggle{
  color:#F4F6F6 !important;border-color:rgba(255,255,255,.22) !important;
}
body:not([data-scrolled="1"]) [data-header] [role="group"]{
  border-color:rgba(255,255,255,.22) !important;
}

/* Language switch. The design set its states with inline styles from JS; driving
   them from CSS instead is what lets the same buttons read correctly against both
   the dark hero and the light header. */
[data-lang-btn]{background:transparent !important;color:var(--muted) !important;}
[data-lang-btn][data-active="1"]{background:var(--aura-teal) !important;color:#fff !important;}
body:not([data-scrolled="1"]) [data-lang-btn]{color:rgba(244,246,246,.65) !important;}
body:not([data-scrolled="1"]) [data-lang-btn][data-active="1"]{color:#fff !important;}

/* Below 1024px the drawer covers the page, so it is light like the page. */
@media (max-width:1024px){
  body[data-nav-open="1"]:not([data-scrolled="1"]) [data-header] nav a{color:var(--paper) !important;}
}

/* Mobile navigation — button and drawer are injected by js/main.js.
   Everything here is inert until the button exists. */
.nav-toggle{
  display:none;
  flex:0 0 auto;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:2px;
  color:var(--paper);cursor:pointer;
  transition:border-color .22s ease, background .22s ease;
}
.nav-toggle:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05);}
.nav-toggle svg{display:block;}
.nav-toggle .nav-toggle__close{display:none;}
body[data-nav-open="1"] .nav-toggle .nav-toggle__close{display:block;}
body[data-nav-open="1"] .nav-toggle .nav-toggle__open{display:none;}
body[data-nav-open="1"]{overflow:hidden;}

/* --------------------------------------------------------------------------
   Layer 3 — responsive
   The design is fluid by construction (clamp() type, auto-fit grids), so these
   breakpoints only correct what fluidity alone cannot: the nine-item navigation,
   the hero trust strip dividers, and touch-target sizing.
   !important is required throughout — the approved design carries inline styles,
   which otherwise win over any stylesheet rule.
   -------------------------------------------------------------------------- */

/* Nine navigation items plus the logo, language switch and call-to-action need
   roughly 1500px to sit on one line. Below that the type tightens, then the
   call-to-action goes, then the whole navigation becomes a drawer. */
@media (max-width:1460px){
  [data-header] nav{gap:12px !important;}
  [data-header] nav a{font-size:11px !important;letter-spacing:.10em !important;}
}

@media (max-width:1200px){
  [data-header] nav{gap:10px !important;}
  /* The call-to-action duplicates a navigation destination — the nav keeps it. */
  [data-header] .header-actions > a{display:none !important;}
}

@media (max-width:1024px){
  /* Nine links do not survive a tablet width — collapse into a drawer. */
  .nav-toggle{display:inline-flex;}

  [data-header] nav{
    position:fixed !important;
    top:88px;left:0;right:0;bottom:0;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:12px clamp(20px,3vw,52px) 40px !important;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(16px);
    overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .28s ease, transform .28s ease, visibility .28s;
  }
  body[data-nav-open="1"] [data-header] nav{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  [data-header] nav a{
    font-size:14px !important;
    padding:18px 0 !important;
    border-bottom:1px solid var(--line);
    color:var(--paper) !important;
  }
}

@media (max-width:768px){
  /* Hero trust strip: vertical dividers read as broken columns once stacked. */
  #home [style*="backdrop-filter"] > div > div{
    border-right:0 !important;
    border-bottom:1px solid var(--line);
    padding-left:0 !important;
    padding-right:0 !important;
  }
  #home [style*="backdrop-filter"] > div > div:last-child{border-bottom:0;}

  /* Scroll hint overlaps the trust strip on short screens. */
  #home > div[aria-hidden="true"]:last-of-type{display:none !important;}

  .drop-slot__label{font-size:10px;letter-spacing:.12em;}
}

@media (max-width:820px){
  /* Six tiles in each hairline grid: two columns still fills the last row exactly. */
  [style*="repeat(3,1fr)"][style*="gap:1px"]{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:440px){
  [style*="repeat(3,1fr)"][style*="gap:1px"]{grid-template-columns:1fr !important;}
}

@media (max-width:480px){
  /* Full-width call-to-action buttons are the expected phone pattern. */
  #home a[href="#brands"],
  #home a[href="#dealer-network"]{
    width:100%;justify-content:center;
  }
  [data-contact-form] button[type="submit"]{
    justify-self:stretch !important;width:100%;justify-content:center;
  }
}

/* --------------------------------------------------------------------------
   Layer 3b — photography on a phone

   object-fit:cover crops whatever does not fit, and on a narrow screen the
   slots turn portrait while the photographs stay landscape. Measured at 375px
   before this block: the hero lost 75% of its width, the SPES pair 49-54%, the
   facade 45%. Nothing was stretched — it was cropped down to a sliver.

   The fix is to reshape the slots to sit closer to each photograph's own
   proportions, so the crop stays gentle.
   -------------------------------------------------------------------------- */

@media (max-width:768px){
  /* A 3:2 photograph in a 100vh portrait slot is a 0.38 ratio box: three
     quarters of the frame goes. Shorten the slot, and stop the drift animation
     from zooming a crop that is already tight. */
  #home{min-height:86vh;}
  [data-hero-media]{animation:none !important;}

  /* The trust strip stacked into four full-width rows and took 290px of the
     hero — which is 290px of extra portrait, and therefore extra crop. Two
     columns and tighter padding bring it to about 96px. */
  #home [style*="backdrop-filter"] > div{grid-template-columns:repeat(2,1fr) !important;}
  #home [style*="backdrop-filter"] > div > div{padding:15px 0 !important;}
  #home > div[style*="z-index:2"]{padding-top:96px !important;}

  [data-hero-media] img,
  [data-hero-media] video{object-position:center 58% !important;}

  /* The two SPES thumbnails hold portrait photographs (0.67 and 0.75) in
     16:11 landscape boxes. A portrait box takes the crop from ~50% to ~11%. */
  #about [style*="aspect-ratio:16/11"]{aspect-ratio:3/4 !important;}

  /* The facade is a 2.44:1 panorama. A band suits it; a 4:3 box does not. */
  #about [style*="aspect-ratio:4/3"]{aspect-ratio:2/1 !important;}
}

/* --------------------------------------------------------------------------
   Layer 4 — reduced motion
   Mirrors the JS guard in main.js, so motion is stopped even before scripts run.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
  [data-hero-media]{transform:none !important;}
}

/* --------------------------------------------------------------------------
   Layer 5 — Leaflet, matched to the dark surface
   -------------------------------------------------------------------------- */

.leaflet-container{background:#E8ECEC;font-family:Inter,system-ui,sans-serif;}
.leaflet-control-attribution{
  background:rgba(255,255,255,.78) !important;color:var(--muted-2) !important;font-size:10px !important;
}
.leaflet-control-attribution a{color:var(--muted) !important;}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#fff;color:#14181A;border-radius:2px;}
.leaflet-popup-content{margin:14px 16px;}
.leaflet-bar a{background:#fff;color:#14181A;border-bottom-color:var(--line);}
.leaflet-bar a:hover{background:#F0F3F3;color:var(--aura-teal-deep);}