/* Tema Amicar — Modugno (BA).
   Qui vive solo l'ASPETTO: colori, font, ombre, raggi. La struttura sta in base.css.
   L'ordine dei blocchi ricalca quello di autocitybat.css: più avanti si ridefiniscono
   token dichiarati prima, e l'ultima definizione vince. Non riordinare.

   Il carattere del tema, in una riga: antracite e arancio, angoli quasi vivi,
   e una linea sottile che ricuce le fasce. Amicar ospita quattro CI di marca
   forti — CUPRA, SEAT, Škoda, Lexus — quindi la sua identità deve restare
   sobria: l'arancio sta sotto il 15% della superficie, e non ci sono diagonali
   (sono il linguaggio privato di CUPRA e stonerebbero accanto a Lexus). */

/* ═══ FONT SELF-HOSTED (GDPR: nessuna chiamata a Google Fonts) ═══
   Stanno nel tema e non in base.css perché il carattere è aspetto, non
   struttura: Barletta ha Archivo, Amicar ha Exo 2 + Source Sans 3, e i due
   siti non devono scaricare i font l'uno dell'altro.
   File variabili scaricati da Google Fonts (OFL) in /public/fonts/. */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/exo2-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Tokens (brand guidelines Amicar v2.4) ─── */
:root {
  /* Accento unico: Arancio #EC9600. Amicar non ha un secondo accento — con
     quattro marchi in casa, due colori nostri sarebbero rumore. */
  --orange: #EC9600;
  --orange-dark: #D18500;   /* su fondo chiaro: l'arancio pieno non arriva a 4,5:1 */
  --accent: var(--orange);
  --accent-dark: var(--orange-dark);

  /* Base */
  --graphite: #1A2022;      /* Antracite — headings/testo forte su chiaro */
  --white: #FFFFFF;
  --paper: #F3F5F5;
  --paper-warm: #F7F8F8;
  --text: #22282B;
  --muted: #5C6468;
  --soft: #9FA4A9;
  --border: #E2E6E5;
  --success: #2E7D32;
  --danger: #C24A3D;
  --info: #3A4245;

  /* Superfici scure */
  --ink: #1A2022;
  --ink-soft: #22282B;
  --ink-2: #22282B;
  --line-dark: rgba(255,255,255,0.10);

  /* ── Alias back-compat ──
     base.css parla ancora la lingua di Barletta (blue/lime/sky/navy). Finché
     quei nomi restano, qui li si porta nella palette Amicar: non c'è un blu e
     non c'è un lime, ci sono l'antracite e l'arancio. */
  --blue: #3A4245;
  --blue-dark: #22282B;
  --lime: #EC9600;
  --lime-dark: #D18500;
  --navy: #1A2022;
  --navy-dark: #101214;
  --navy-deep: #1A2022;
  --sky: #EC9600;
  --sky-soft: #FDF2DF;      /* pill arancio pallido */

  /* Testo su fondo scuro.
     --on-dark-soft è a 0,55 e non a 0,45: a 0,45 dava 4,12:1 sull'antracite,
     sotto la soglia AA, su tutti i testi che lo usano (18 nel solo ticker). */
  --on-dark: #F3F5F5;
  --on-dark-muted: rgba(243,245,245,0.66);
  --on-dark-soft: rgba(243,245,245,0.55);

  /* Tipografia — Exo 2 (display) + Source Sans 3 (testo), come da guidelines */
  --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Exo 2', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --font-serif: 'Source Sans 3', Georgia, serif;
  /* I titoli non in grassetto pieno: Exo 2 e' un carattere gia' largo e
     spigoloso, e a 60px l'800 diventa un muro. Il 500 tiene la struttura e
     lascia respirare la lettera. Vale per TUTTI gli h1 del sito Amicar; senza
     questa riga ogni regola tiene il proprio peso e gli altri temi non
     cambiano. */
  --h1-weight: 500;
  --wordmark-h: 26px;       /* altezza del logotipo in nav e piè di pagina */

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Radii — scala a quattro gradini (Amicar: angoli quasi vivi).
     Il riferimento è CUPRA: niente forme a pillola, nessun raggio oltre i 6px. */
  --radius-s: 2px;
  --radius-m: 3px;
  --radius-l: 4px;
  --radius-xl: 6px;
  --radius-pill: 3px;       /* niente pillole: il chip resta squadrato */
  --radius-circle: 50%;     /* pallini, avatar, punti: geometria, non stile */

  /* Shadows */
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-card: 0 2px 6px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.06);
  --shadow-lift: 0 8px 24px rgba(26,32,34,0.14);

  /* Sizing */
  --container: 1280px;
  --container-narrow: 1080px;
  /* Misura strizzata: ~70 caratteri per riga, il formato per quando la
     concessionaria parla invece di elencare. Senza una seconda misura ogni
     fascia ha gli stessi margini e l'occhio non cambia mai inquadratura. */
  --container-tight: 720px;
  --nav-height: 72px;

  /* Easings */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── LA LINEA ───
   La firma del tema: un filo di 1px che precede ogni occhiello, lo accompagna
   e attraversa il confine fra una fascia e l'altra. Nasce come alternativa
   alle fasce oblique: la diagonale appartiene a CUPRA e accanto a Lexus e
   Škoda si legge come un prestito.

   I valori sono in forma CONDIZIONALE: base.css usa `content: var(--linea-on,
   none)`, quindi senza tema lo pseudo-elemento NON esiste. Non è pignoleria —
   con `content:""` l'elemento nascerebbe comunque e, dentro un flex, si
   mangerebbe il `gap` due volte: misurato, 28px di scarto su un occhiello. */
:root {
  --linea-on: "";
  --linea: 1px;
  --linea-w: 34px;          /* il trattino prima dell'occhiello */
  --linea-gap: 14px;
  --linea-max: 220px;       /* la riga chiara che lo segue */
  --linea-col: #EC9600;
  --linea-col-soft: #E2E6E5;
}
/* Sulle fasce scure la riga di accompagnamento deve schiarire, non scurire. */
.tradein-band, .worlds, .contact-head, .stories, .quickcontact,
.voce, .perche { --linea-col-soft: rgba(243,245,245,.16); }

/* La FORMA del trattino sull'occhiello sta qui e non in base.css per un motivo
   preciso: `.section-eyebrow::before` è già occupato: Barletta ci mette la
   numerazione progressiva delle sezioni (01, 02, 03…), che è la sua firma. Due
   disegni diversi sullo stesso pseudo-elemento, e vince l'ultimo dichiarato.
   Il tema carica dopo base.css, quindi qui la sovrascrittura è pulita.

   Sistemazione più ordinata, quando l'altra sessione vuole: la numerazione è
   aspetto e andrebbe in themes/autocitybat.css; liberato il ::before, questo
   blocco può salire in base.css nella sua forma condizionale, come il tratto
   fra le fasce. Finché resta lì, questa è la strada senza rischi. */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--linea-gap, 0);
}
.section-eyebrow::before {
  content: var(--linea-on, none);
  width: var(--linea-w, 0); height: var(--linea, 0);
  background: var(--linea-col, transparent);
  flex: none;
  /* neutralizza la numerazione di Barletta ereditata da base.css */
  font-variant-numeric: normal; font-weight: inherit; opacity: 1;
}
.section-eyebrow::after {
  content: var(--linea-on, none);
  height: var(--linea, 0);
  background: var(--linea-col-soft, transparent);
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--linea-max, 0);
}

/* ─── Loghi dei marchi ─── */
/* I quattro marchi hanno viewBox ritagliate sul tracciato, quindi una sola
   altezza CSS dà loro lo stesso peso ottico: nessuna correzione per marchio,
   al contrario di Barletta dove Land Rover e Jaguar vanno riequilibrati. */

@media (max-width: 640px) {
  .promo-track,
  .bw-block .bw-track {
    --acb-gap: 12px;
    --acb-peek: 40px;
    --acb-dots: 1;
  }
  .acb-dots:not([hidden]) {
    --acb-dot: rgba(26, 32, 34, .22);
    --acb-dot-on: var(--accent, #EC9600);
  }
  .bw-block .acb-dots:not([hidden]) {
    --acb-dot: rgba(243, 245, 245, .30);
    --acb-dot-on: var(--accent, #EC9600);
  }
}

@media (max-width: 900px) {
  .vd-foto-track {
    --acb-gap: 10px;
    --acb-peek: 34px;
    --acb-dots: 1;
  }
}

/* Etichetta della card Vision: l'arancio pieno sull'antracite misura 4,37 —
   appena sotto la soglia di leggibilità (4,5). La tinta chiara la supera
   senza cambiare carattere. Il testo della card è già a 10,3: non si tocca. */
.mv-card:last-child .mv-tag { color: #FFB547; }


/* ── Ticker "racing" (direzione approvata): maiuscolo inclinato da livrea,
   filo arancio sotto la banda, separatore a tacche di cordolo. Adattato al
   markup condiviso (.star/.sep/strong + .mi-coda): stessi selettori di
   base.css, vince l'ordine di caricamento del tema. */
.marquee { border-bottom: 2px solid var(--accent); padding: 12px 0; }
.marquee::before, .marquee::after { width: 110px; }
.marquee-track { gap: 40px; align-items: center; animation-duration: 24s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  gap: 12px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-soft);
  transform: skewX(-9deg);
}
.marquee-item > * { transform: skewX(9deg); display: inline-block; }
.marquee-item strong { font-weight: 700; }
.marquee-item .mi-coda { letter-spacing: .12em; }
.marquee-item .sep {
  width: 16px; height: 11px; border-radius: 0; flex: none;
  background: linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 9px, var(--accent) 9px 14px, transparent 14px);
}
.marquee-item .star { color: var(--accent); font-size: 13px; }
@media (max-width: 720px) {
  .marquee-track { gap: 26px; animation-duration: 18s; }
  .marquee-item { font-size: 10.5px; letter-spacing: .12em; }
}

/* Scelta fra più profili social nel piè di pagina.
   base.css colora lo stato aperto con --blue, che su Barletta e Matera è il
   loro blu di marca. Amicar un blu non ce l'ha: l'alias porta --blue
   sull'antracite #3A4245, che sul piè di pagina (#101214) misura 1,95:1 —
   il bottone si apriva senza dare segno di essersi aperto. Qui lo stato
   attivo passa all'arancio, che è l'unico accento del tema, con inchiostro
   antracite come da guidelines (il bianco sull'arancio non tiene). */
.footer-social .social-scelta summary:hover,
.footer-social .social-scelta[open] summary {
  background: var(--accent);
  color: var(--graphite);
  border-color: var(--accent);
}