/* ============================================================
   bus-buster.it — L'HEADER DEL SITO (P21, 14/09/2026)
   ============================================================

   Sta in un foglio SUO perche' l'header e' UNO (`_header.html`) e i due
   template che lo includono caricano fogli diversi:

     base_public.html  ->  tb.css     (pagine indicizzate)
     mappa.html        ->  mappa.css  (la SPA)

   ⚠️ QUESTO E' L'ERRORE CHE HO FATTO LA PRIMA VOLTA, il 14/09: avevo messo
   queste regole in `tb.css`, che la SPA **non carica**. Markup identico,
   intestazioni HTTP giuste, test verdi — e la home serviva l'header senza
   uno stile: link blu sottolineati, nessuno sfondo, il cassetto srotolato
   in mezzo alla pagina. «Il markup e' lo stesso» non dice niente su come si
   vede: un componente condiviso ha bisogno di un foglio condiviso.

   ⚠️ Va caricato da OGNI template che include `_header.html`, e prima del
   foglio della pagina — cosi' `mappa.css` puo' ancora stringere l'header
   quando la SPA mostra la scheda (`body.s-results .tb-header`, UX-A).
   Guardia: `HeaderUnicoGuardTest`.

   ⚠️ COLORI: qui si usano `--sea`, `--accent`, `--border` — i nomi che
   **entrambi** i fogli gia' definiscono (tb.css come alias dei suoi `--tb-*`,
   mappa.css direttamente). Ridichiarare un colore qui vorrebbe dire avere due
   sorgenti per lo stesso blu, che e' la classe di difetto che P21 toglie.
   Restano qui solo i token che appartengono all'header e a nessun altro.
   ============================================================ */
:root{
  --tb-header-h:132px;
  /* Il fondo del cassetto: e' una tinta dell'header, non del sito, e non
     esiste in nessuno dei due fogli. */
  --tb-drawer-bg:#08405a;
}

.tb-header{position:sticky;top:0;z-index:1000;background:var(--sea);color:#fff;height:var(--tb-header-h);display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:14px;flex-shrink:0}
.tb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;min-width:0}
.tb-brand img{height:144px;width:auto;display:block}
.tb-brand-name{font-family:var(--tb-serif,'DM Serif Display','DM Serif Display Fallback',Georgia,serif);font-size:19px;line-height:1;letter-spacing:-.2px}
.tb-nav{display:flex;align-items:center;gap:20px;font-size:14px}
.tb-nav a{color:rgba(255,255,255,.82);text-decoration:none;padding:4px 0;font-weight:600;transition:color .15s}
.tb-nav a:hover{color:#fff}
.tb-nav a[aria-current]{color:#fff;position:relative}
.tb-nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2.5px;background:repeating-linear-gradient(90deg,var(--accent) 0 5px,transparent 5px 9px)}
.tb-hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:#fff;flex-shrink:0;align-items:center;justify-content:center;min-height:44px;min-width:44px;border-radius:8px}
/* P21: il breakpoint dell'header e' 768px, non 640. Era 640 qui e 768 in
   mappa.css — cioe' fra i 641 e i 768 px i due header del sito si
   comportavano in modo DIVERSO: uno mostrava la barra orizzontale,
   l'altro l'hamburger. Ora l'header porta anche il tasto Mappa e il
   badge, quindi deve collassare prima: vince 768, che e' il valore scelto
   a suo tempo dall'header piu' carico. */
@media (max-width:768px){.tb-nav{display:none}.tb-hamburger{display:flex}.tb-header-badge{display:none}#btn-edit-mode{display:none}}
@media (max-width:640px){.tb-header{padding:0 14px;height:124px}.tb-brand img{height:115px}}
/* ── Header: la fascia destra, il badge, il tasto Mappa ──
   P21: queste regole vivevano in `mappa.css` perche' l'header della SPA
   era un header a parte. Ora e' lo stesso, quindi il suo stile sta in un
   posto solo — `mappa.css` non ne ha piu' copia. */
.tb-header-right{display:flex;align-items:center;gap:20px;font-size:14px}
.tb-header-badge{background:rgba(255,255,255,.15);padding:6px 16px;border-radius:28px;font-size:14px;opacity:.8;white-space:nowrap}
.tb-header-badge:empty{display:none}
.tb-btn-mappa{background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.35);color:#fff;border-radius:28px;padding:6px 14px;cursor:pointer;font-family:var(--tb-font,'DM Sans','DM Sans Fallback',sans-serif);font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;flex-shrink:0}
.tb-btn-mappa:hover{background:rgba(255,255,255,.28)}
.tb-btn-mappa[aria-expanded="true"]{background:#fff;color:var(--sea);border-color:#fff}
.tb-btn-edit-mode{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-family:var(--tb-font,'DM Sans','DM Sans Fallback',sans-serif);font-size:12px;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s}
.tb-btn-edit-mode:hover{background:rgba(255,255,255,.15)}
.tb-btn-edit-mode.active{background:var(--accent);border-color:var(--accent)}
.tb-drawer-stats{margin-top:auto;padding:16px 20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#fff;letter-spacing:.01em}
.tb-drawer-stats:empty{display:none}

/* ── Hamburger + nav drawer ── */
/* La regola base di `.tb-hamburger` NON sta qui: sta sopra la media query
   `max-width:768px` che lo accende (P21), insieme alle altre regole della
   testata. Una media
   query non aggiunge specificità, quindi fra `{display:none}` e
   `{display:flex}` — una classe entrambe — vince l'ULTIMA scritta. Con la
   base qui in fondo vinceva `none` a ogni larghezza: il cassetto era nel
   DOM, completo, e non c'era modo di aprirlo (misurato in produzione il
   13/09/2026, col 91% del traffico da telefono). Guardia:
   `HamburgerVisibileGuardTest`. */
.tb-hamburger:hover{background:rgba(255,255,255,.12)}
.tb-nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:1998}
.tb-nav-overlay.tb-open{opacity:1;pointer-events:auto}
.tb-nav-drawer{position:fixed;top:0;right:0;bottom:0;width:260px;background:var(--tb-drawer-bg);transform:translateX(100%);visibility:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s linear .25s;z-index:1999;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.25)}
.tb-nav-drawer.tb-open{transform:translateX(0);visibility:visible;transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s}
.tb-nav-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:72px;border-bottom:1px solid rgba(255,255,255,.12);flex-shrink:0}
.tb-nav-drawer-close{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;border-radius:8px}
.tb-nav-drawer-close:hover{color:#fff;background:rgba(255,255,255,.1)}
.tb-nav-drawer nav a{display:flex;align-items:center;padding:16px 20px;color:rgba(255,255,255,.82);text-decoration:none;font-size:16px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.08);position:relative}
.tb-nav-drawer nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.tb-nav-drawer nav a[aria-current]{color:#fff;background:rgba(255,255,255,.06)}
.tb-nav-drawer nav a[aria-current]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);border-radius:0 2px 2px 0}

  --tb-header-h:132px;