/* ==========================================================================
   ❄️ T2-SCROLL-360 (29/09/2026, TORRE-32) — la testata delle pagine `public/base_page.html` sul telefono

   PERCHE' ESISTE. `base_page.html` carica `static/css/styles.css`, la copia del 07/2026; la testata che include
   (`public/partials/_header.html`) e' stata scritta per `sito-pubblico/css/styles.css`, che da allora ha ricevuto il
   pacchetto mobile (527 righe in piu'). Alle pagine base_page quel pacchetto NON arriva. Misurato il 29/09/2026
   (scripts/t2_scroll_360_misura.py, corsa «prima»), su tutte le pagine che estendono base_page:
     - a 320, 360 e 375 px la pagina SCORRE in orizzontale: scrollWidth 387, perche' `div.nav-actions` (206 px) finisce a 387;
     - il nome accanto al logo finisce SOTTO le icone (a ogni larghezza da telefono);
     - il bottone del menu e' invisibile (`.hamburger-line` non ha regole in nessuno dei due fogli) e il menu non si apre
       (app.js mette la classe `open`, il foglio mostra solo `is-open`);
     - la barra `.mobile-bottom-bar` esce SENZA STILE, tre link nudi sotto la testata, anche a 1280 px.

   CHE COSA NON FA. Non nasconde lo scorrimento con `overflow-x: hidden` su html/body (coprirebbe il sintomo e taglierebbe
   contenuto senza dirlo): stringe cio' che sborda. Non cambia il carattere delle pagine (restano in Inter fino a
   T2-6/T2-7, decisione D2 di T2-0) e non tocca `styles.css`, che altre pagine caricano.

   QUANDO SE NE VA. Con T2-6/T2-7, quando queste pagine passano a `base_t2.html`: questo file e il suo <link> si tolgono
   insieme. Solo var(--g-*) di g_variabili.css: nessun colore scritto a mano.
   ========================================================================== */

/* --- 1. il bottone del menu si vede, e dice quando e' aperto --------------------------------- */
.navbar .hamburger-btn {
  flex-direction: column;
  gap: 5px;
  flex: 0 0 auto;
  padding: 0;
}
.navbar .hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--g-testo);
  transition: transform var(--g-transizione), opacity var(--g-transizione);
}
.navbar .hamburger-btn.active .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar .hamburger-btn.active .hamburger-line:nth-child(2) { opacity: 0; }
.navbar .hamburger-btn.active .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* app.js apre il menu con la classe `open`: il foglio la deve mostrare */
.mobile-menu.open {
  display: block;
  transform: none;
}

/* --- 2. la testata non sborda: i pulsanti non si stringono, il marchio si' -------------------- */
.navbar .nav-actions { flex: 0 0 auto; }
.navbar .brand { min-width: 0; flex: 0 1 auto; }

@media (max-width: 480px) {
  /* il nome e' gia' nel logo: accanto, sul telefono, finiva sotto le icone */
  .navbar .brand .brand-text { display: none; }
}

@media (max-width: 340px) {
  /* 320 px: 16 + logo + 12 + 206 + 16 non ci sta. Si stringono logo e pulsanti, nessuno sparisce. */
  .navbar .brand .brand-logo { height: 32px !important; }
  .navbar .navbar-inner { gap: 8px; }
  .navbar .nav-icon-btn,
  .navbar .cart-btn,
  .navbar .hamburger-btn { width: 44px; height: 44px; }
}

/* --- 3. la barra in basso: sul telefono e' una barra, altrove non c'e' ------------------------ */
@media (min-width: 769px) {
  .mobile-bottom-bar { display: none; }
}

@media (max-width: 768px) {
  .mobile-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8990;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 6px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--g-bianco);
    border-top: 1px solid var(--g-bordo);
    box-shadow: var(--g-ombra-card);
  }
  .mobile-bottom-btn {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 0;
    border-radius: var(--g-raggio-12);
    color: var(--g-secondario);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
  }
  .mobile-bottom-btn.btn-call-highlight {
    background: var(--g-verde-testo);
    color: var(--g-bianco);
  }
  .mobile-bottom-btn.btn-cart-highlight { color: var(--g-blu); }
  .mobile-bottom-btn:focus-visible { outline: 3px solid var(--g-giallo); outline-offset: 2px; }

  /* la barra e' alta 70 px: il contenuto e il bottone «Preferenze cookie» non ci finiscono sotto */
  body { padding-bottom: 70px; }
  body .scc-reopen { bottom: 86px; }
}

/* --- 4. il bottone di chiamata del Risparmiometro va a capo invece di uscire dalla pagina ----- */
@media (max-width: 480px) {
  .risp-cta-section .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}