/* ==========================================================================
   HEADER-FIX.CSS — override robusto per desktop + smartphone
   Caricato DOPO assets/responsive.css (quindi ha la precedenza).
   Interviene SOLO su header, header-btns, nav-toggle, nav (non sui bottoni).
   ========================================================================== */

/* ---------- HEADER: layout a 1 riga ----------
   Su desktop: nav orizzontale con link (links-section) + audio (audio-section)
   Su mobile: solo hamburger visibile, il nav contiene link + audio
              e si apre con toggle */
header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  box-sizing: border-box !important;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  min-height: 50px !important;
  background: rgba(245, 236, 215, 0.97);
  /* RIMOSSO backdrop-filter: crea un containing block per i figli position:fixed,
     che impediva alla triade Radio/Blues/Narratore di ancorarsi al fondo
     del viewport quando era dentro <header>. Lo sfondo quasi-opaco
     (rgba alpha 0.97) maschera comunque il contenuto sottostante. */
  border-bottom: 1px solid rgba(139, 121, 82, 0.2);
  box-shadow: 0 2px 20px rgba(59, 33, 18, 0.08);
}

/* Logo (se presente in futuro): non occupare spazio se assente */
header > .logo {
  display: none !important;
}

/* ---------- HEADER-BTNS (bottoni audio, dentro il nav) ---------- */
body .header-btns {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  flex-shrink: 0 !important;
  flex: 0 0 100% !important;            /* default: riga separata sotto i link */
}

/* ============================================================
   RADIO DEFAULT: GIALLO FORZATO su TUTTE le pagine
   Solo Home, Articoli e scenario-2026-2027 avevano la regola
   inline .radio-btn { background: #ffd700... }. Sulle altre 12
   pagine il bottone restava rosso (stile narrator-btn ereditato).
   ============================================================ */
body .header-btns .radio-btn {
  background: linear-gradient(135deg, #ffd700, #ffc107) !important;
  color: #000 !important;
}

/* ============================================================
   RADIO PLAYING: VERDE FORZATO su TUTTE le pagine
   Su 10 pagine (sistema_moneta_debito, creazione_credito, ecc.)
   la regola .radio-btn.playing inline manca, quindi il bottone
   resta del colore di base (rosso). Forzo qui il verde.
   ============================================================ */
body .header-btns .radio-btn.playing,
body .header-btns .radio-dropdown.open .radio-btn.playing {
  background: linear-gradient(135deg, #1e8449, #27ae60) !important;
  color: #fff !important;
  animation: pulse 2s infinite !important;
  box-shadow: 0 0 0 0 rgba(39, 174, 96, .55) !important;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, .55); }
  50%      { box-shadow: 0 0 0 12px rgba(39, 174, 96, 0); }
}

/* ============================================================
   FLASH AZZURRO ELETTRICO sul banner "Il Gotha Finanziario"
   Wiliam vuole che la scritta lampeggi con un alone azzurro vivo.
   ============================================================ */
body .access-prompt,
.access-prompt,
body div.access-prompt,
body > div.access-prompt,
body header ~ div.access-prompt {
  animation: goths-flash 1.2s ease-in-out infinite !important;
  border: 2px solid #00bfff !important;
  outline: 1px solid rgba(0, 191, 255, .4) !important;
  outline-offset: 0 !important;
  box-shadow:
    0 0 8px #00bfff,
    0 0 18px #00bfff,
    0 0 28px rgba(0, 191, 255, .65),
    inset 0 0 8px rgba(0, 191, 255, .25) !important;
}
@keyframes goths-flash {
  0%, 100% {
    box-shadow:
      0 0 6px #00bfff,
      0 0 14px #00bfff,
      0 0 22px rgba(0, 191, 255, .55),
      inset 0 0 6px rgba(0, 191, 255, .2) !important;
    border-color: #00bfff !important;
  }
  50% {
    box-shadow:
      0 0 14px #00bfff,
      0 0 30px #00bfff,
      0 0 50px rgba(0, 191, 255, .95),
      0 0 80px rgba(0, 191, 255, .7),
      inset 0 0 14px rgba(0, 191, 255, .4) !important;
    border-color: #66e0ff !important;
  }
}

/* ---------- DESKTOP: header verticale, bottoni PRIMA dei link ----------
   Su desktop (>768px) l'header e' in colonna:
   - Riga 1: i 3 bottoni audio (Voce Narratore, Blues MP3, Radio) in orizzontale
   - Riga 2: il nav con i 13 link in orizzontale (con wrap se serve) */
@media (min-width: 769px) {
  header {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px 16px !important;
    gap: 6px !important;
  }
  /* Il nav-toggle resta nascosto */
  body .header-btns.header-btns-fixed {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }
  /* 3 bottoni: STESSE DIMENSIONI anche su desktop */
  body .header-btns .narrator-btn,
  body .header-btns .blues-btn,
  body .header-btns .radio-btn {
    flex: 1 1 0 !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    align-self: stretch !important;
  }
}

/* Il wrapper audio-menu-wrapper e' trasparente al layout: i 2 bottoni figli
   (blues, radio) diventano flex item diretti di .header-btns insieme a narrator.
   Cosi' flex: 1 1 0 si applica a tutti e 3 → 1/3 ciascuno. */
body .header-btns .audio-menu-wrapper,
body .header-btns .radio-dropdown {
  display: contents !important;
}

/* Regole generali per TUTTI i bottoni audio (3 bottoni diretti) */
body .header-btns > .narrator-btn,
body .header-btns > .blues-btn,
body .header-btns > .radio-btn {
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  box-sizing: border-box !important;
  flex-shrink: 1 !important;
}

/* ---------- NAV-TOGGLE (hamburger, a destra nell'header) ---------- */
header .nav-toggle {
  display: none !important;            /* mostrato su mobile via media query */
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 0 0 auto !important;       /* a destra dell'header */
  position: relative !important;
  z-index: 210 !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  border-radius: 8px !important;
  transition: background 0.15s !important;
  order: 3 !important;
}

header .nav-toggle:hover,
header .nav-toggle:focus-visible {
  background: rgba(139, 121, 82, 0.12) !important;
  outline: none !important;
}

header .nav-toggle span {
  display: block !important;
  width: 26px !important;
  height: 2px !important;
  background: #3b2112 !important;
  position: relative !important;
  transition: background 0.2s !important;
}

header .nav-toggle span::before,
header .nav-toggle span::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: #3b2112 !important;
  transition: transform 0.2s, top 0.2s !important;
}

header .nav-toggle span::before { top: -8px !important; }
header .nav-toggle span::after  { top: 8px  !important; }

header .nav-toggle.open span { background: transparent !important; }
header .nav-toggle.open span::before { transform: rotate(45deg) !important; top: 0 !important; }
header .nav-toggle.open span::after  { transform: rotate(-45deg) !important; top: 0 !important; }

/* ============================================================
   HAMBURGER (smartphone): sfondo che pulsa BIANCO <-> GIALLO
   in loop continuo, cosi' l'utente lo trova subito.
   Solo mobile (su desktop il toggle e' nascosto).
   Usa box-shadow inset (non confligge con background).
   JavaScript in hamburger-pulse.js fa partire/fermare l'anim.
   ============================================================ */
@media (max-width: 768px) {
  header .nav-toggle.hamburger-pulsing {
    animation: hamburger-bg-pulse 2.4s ease-in-out infinite !important;
  }
  /* Quando il menu e' aperto, sfondo giallo fisso (aggiunto da JS) */
  header .nav-toggle.open {
    background-color: #ffd700 !important;
  }
}
@keyframes hamburger-bg-pulse {
  0%, 100% { background-color: #ffffff !important; }
  50%      { background-color: #ffd700 !important; }
}

/* ---------- NAV (link + audio, in orizzontale su desktop) ---------- */
header nav.nav,
header .nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px 1em !important;
  flex-wrap: wrap !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: static !important;
  max-height: none !important;
  max-width: none !important;
  width: auto !important;
  overflow: visible !important;
  z-index: auto !important;
  justify-content: space-between !important;
  min-width: 0 !important;
}

header nav.nav a,
header .nav a {
  display: inline-block !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  padding: 6px 8px !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  transition: background 0.15s, color 0.15s !important;
  position: relative !important;
}

header nav.nav a:hover,
header nav.nav a:focus-visible,
header .nav a:hover,
header .nav a:focus-visible {
  background: rgba(255, 252, 235, 0.7) !important;
  color: #3b2112 !important;
  outline: none !important;
}

header nav.nav a::after,
header .nav a::after {
  display: none !important; /* niente sottolineatura animata, manteniamo solo l'hover */
}

/* ---------- MOBILE (smartphone) ---------- */
@media (max-width: 768px) {
  header {
    padding: 0 !important;
    gap: 0 !important;
  }

  /* I bottoni audio: più compatti su mobile, 4 bottoni su 1 riga */
  body .header-btns {
    gap: 3px !important;
    padding: 4px 6px !important;
  }

  body .header-btns .narrator-btn,
  body .header-btns .musica-btn,
  body .header-btns .blues-btn,
  body .header-btns .radio-btn {
    font-size: 11px !important;
    padding: 6px 6px !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    gap: 0 !important;
  }
  /* 3 bottoni IDENTICI per leggibilita': 1/3 di larghezza ciascuno.
     Selettore discendente (no >) per matchare anche i figli del wrapper
     che con display:contents diventano flex item di .header-btns. */
  body .header-btns .narrator-btn,
  body .header-btns .blues-btn,
  body .header-btns .radio-btn {
    flex: 1 1 0 !important;             /* 1/3 ciascuno di default */
    width: 0 !important;                /* forza base 0 per flex-basis */
    min-width: 0 !important;            /* sovrascrive min-width:90px inline */
    max-width: none !important;
    font-size: 14px !important;
    padding: 10px 6px !important;
    min-height: 48px !important;         /* touch target generoso */
    justify-content: center !important;  /* sovrascrive space-between del vecchio CSS inline */
    align-items: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    gap: 4px !important;
  }
  /* Radio prende piu' spazio (~42%), Blues e Narratore il resto (~29% ciascuno).
     Il flex-grow va sul radio-dropdown (e' lui il flex item diretto del
     header-btns, non il radio-btn che e' dentro). */
  body .header-btns .radio-dropdown {
    flex: 1.5 1 0 !important;           /* 1.5/3.5 = ~43% */
  }
  body .header-btns .blues-btn,
  body .header-btns .narrator-btn {
    flex: 1 1 0 !important;             /* 1/3.5 = ~28.5% ciascuno */
  }
  /* Gap per separare i bottoni */
  body .header-btns { gap: 8px !important; }
  /* Spazio tra audio e contenuto: centrato nel viewport */
  body .header-btns.header-btns-fixed {
    justify-content: center !important;
  }
  /* Sovrascrive la regola inline .header-btns > *{max-width:45%} presente in molti HTML */
  body .header-btns > .narrator-btn,
  body .header-btns > .audio-menu-wrapper,
  body .header-btns > .musica-btn,
  body .header-btns > .blues-btn,
  body .header-btns > .radio-btn {
    max-width: none !important;
  }
  /* Su smartphone stretti (<=380px) i bottoni restano tappabili */
  @media (max-width: 380px) {
    body .header-btns .narrator-btn,
    body .header-btns .blues-btn,
    body .header-btns .radio-btn {
      font-size: 12px !important;
      padding: 8px 6px !important;
      min-height: 40px !important;
    }
  }

  /* ---------- BARRA AUDIO FISSA IN BASSO SU MOBILE ----------
     I bottoni audio sono ora fuori dal nav (.header-btns-fixed).
     Su mobile li rendiamo una barra fissa in fondo allo schermo,
     SEMPRE accessibile anche a menu hamburger chiuso. */
  body .header-btns.header-btns-fixed {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 150 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    background: rgba(245, 236, 215, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15) !important;
    border-top: 1px solid rgba(139, 121, 82, 0.25) !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
  }
  /* Wrapper audio-menu-wrapper e' trasparente al layout: il bottone blues diventa
     flex item diretto di .header-btns insieme a narrator.
     radio-dropdown resta display:block + position:relative, per essere il
     containing block del radio-submenu (che esce verso l'alto). */
  body .header-btns .audio-menu-wrapper {
    display: contents !important;
  }
  body .header-btns .radio-dropdown {
    display: block !important;
    position: relative !important;
    flex: 1.5 1 0 !important;            /* 1.5/3.5 = ~43% - piu' spazio per il bottone Radio */
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* I 3 bottoni diretti: flex 1 1 0 con width 0 e min-width 0 (sovrascrive
     min-width:90px inline). Flex-grow:1 li fa espandere equamente. */
  body .header-btns .narrator-btn,
  body .header-btns .blues-btn,
  body .header-btns .radio-btn {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* Il dropdown Musica (con Blues+Radio) sempre visibile in orizzontale */
  body .header-btns.header-btns-fixed .audio-menu-dropdown {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 1 0 !important;
    gap: 4px !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Il radio-submenu (con le 5 stazioni) esce verso l'alto dal bottone Radio,
     z-index alto per stare SOPRA il menu hamburger (che ha z-index 1000) */
  body .header-btns.header-btns-fixed .radio-submenu {
    z-index: 1100 !important;
  }

  /* Mostra l'hamburger */
  header .nav-toggle {
    display: flex !important;
    /* FIX ESTENSIONE ZONA TOCCABILE: connetti visivamente al Gotha,
       formando un'unica pillola orizzontale [Gotha | hamburger].
       Bordi arrotondati SOLO a destra, niente bordo a sinistra
       (cosi' si unisce al Gotha adiacente). */
    border: 1px solid rgba(139, 0, 0, 0.3) !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
    background: rgba(255, 248, 220, 0.95) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  /* NASCONDI la nav su mobile (si apre solo con .open) */
  header nav.nav,
  header .nav {
    display: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Padding-bottom per non essere coperti dalla barra audio fissa in basso */
  body {
    padding-bottom: 100px !important;     /* spazio per barra audio + scritta "Accedi..." */
  }

  /* ---------- SCRITTA "Il Gotha Finanziario" ----------
     Banner posizionato sulla barra superiore (header), a SINISTRA del menu
     hamburger che sta in alto a destra. La freccia → indica l'hamburger.
     Solo smartphone.

     FIX ESTENSIONE ZONA TOCCABILE: il Gotha e l'hamburger formano un'unica
     pillola orizzontale [Gotha | ☰]. Toccando l'uno O l'altro si attiva
     il menu. Bordi connessi (Gotha: arrotondato a sinistra, hamburger:
     arrotondato a destra), stesso sfondo, stessa altezza, niente gap. */
  body .access-prompt {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: fixed !important;
    top: 0 !important;
    right: 40px !important;              /* ADIACENTE all'hamburger (40px) - niente gap */
    left: auto !important;
    bottom: auto !important;
    height: 40px !important;             /* stessa altezza dell'hamburger */
    z-index: 250 !important;
    padding: 0 12px !important;
    font-style: italic !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #8B0000 !important;
    background: rgba(255, 248, 220, 0.95) !important;  /* opaco per nascondere il contenuto sotto */
    border: 1px solid rgba(139, 0, 0, 0.3) !important;
    border-right: none !important;       /* niente bordo a destra: si connette all'hamburger */
    border-radius: 20px 0 0 20px !important;  /* bordi arrotondati SOLO a sinistra */
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    pointer-events: auto !important;     /* CLICCABILE - tocca per aprire il menu */
    cursor: pointer !important;
    text-shadow: 0 0 6px rgba(139, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 60px) !important;  /* 40 hamburger + 20 sicurezza */
    animation: access-prompt-pulse 2.4s ease-in-out infinite !important;
  }
  body .access-prompt .arrow {
    display: inline-block !important;
    margin-left: 6px !important;
    font-size: 19px !important;
    color: #8B0000 !important;           /* stesso rosso sangue */
    font-weight: bold !important;
    text-shadow: 0 0 8px rgba(139, 0, 0, 0.6) !important;
  }
  /* Pulse lento dell'intero prompt (testo + freccia insieme) */
  @keyframes access-prompt-pulse {
    0%, 100% {
      transform: scale(1);
      text-shadow: 0 0 6px rgba(139, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.7);
    }
    50% {
      transform: scale(1.04);
      text-shadow: 0 0 14px rgba(200, 0, 0, 0.7), 0 0 24px rgba(139, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.7);
    }
  }
  @keyframes access-arrow-pulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
  }

  header nav.nav.open,
  header .nav.open,
  body header nav.nav.open,
  body header .nav.open {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 6px !important;
    row-gap: 4px !important;
    width: 100% !important;
    max-height: none !important;       /* niente clipping del dropdown Musica */
    overflow: visible !important;     /* il dropdown Musica puo' uscire */
    -webkit-overflow-scrolling: touch !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: rgba(245, 236, 215, 0.99) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    padding: 12px 8px !important;
    margin: 0 !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
    border: 1px solid rgba(139, 121, 82, 0.25) !important;
    border-top: none !important;
  }
  /* I bottoni audio (header-btns dentro il nav aperto) occupano tutta la larghezza,
     su una riga sola in fondo al menu */
  header nav.nav.open .header-btns,
  header .nav.open .header-btns {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 6px 0 0 !important;
    border-top: 1px solid rgba(139, 121, 82, 0.25) !important;
    margin-top: 4px !important;
  }

  header nav.nav a,
  header .nav a {
    padding: 10px 6px !important;
    text-align: center !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    border-bottom: 1px solid rgba(139, 121, 82, 0.12) !important;
    white-space: nowrap !important;
  }

  header nav.nav a:nth-last-child(-n+2),
  header .nav a:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
}

/* Su schermi medi (≥ 480px) 3 colonne per il menu aperto */
@media (min-width: 480px) and (max-width: 768px) {
  header nav.nav.open,
  header .nav.open,
  body header nav.nav.open,
  body header .nav.open {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  header nav.nav a:nth-last-child(-n+2),
  header .nav a:nth-last-child(-n+2) {
    border-bottom: 1px solid rgba(139, 121, 82, 0.12) !important;
  }
  header nav.nav a:nth-last-child(-n+3),
  header .nav a:nth-last-child(-n+3) {
    border-bottom: none !important;
  }
}

/* Audio menu wrapper / dropdown / radio (uniforma pagine che non
   avevano le regole inline — es. articoli.html dopo il trim) */
@media (max-width: 768px) {
  header .audio-menu-wrapper {
    position: relative !important;
    width: 100% !important;
    min-width: 250px !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    z-index: 300 !important;
    padding: 8px 4px !important;
    box-sizing: border-box !important;
    display: flex !important;
  }
  header .audio-menu-dropdown {
    display: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    background: rgba(245, 236, 215, 0.98) !important;
    padding: 10px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 400px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    z-index: 301 !important;
    margin-top: 8px !important;
  }
  header .audio-menu-wrapper.open .audio-menu-dropdown,
  header .audio-menu-wrapper.playing .audio-menu-dropdown {
    background: rgba(245, 236, 215, 0.98) !important;
  }
  header .audio-menu-wrapper.open .audio-menu-dropdown {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  header .audio-menu-dropdown > * {
    display: flex !important;
    margin: 2px !important;
    flex-shrink: 0 !important;
  }
  header .radio-dropdown {
    position: relative !important;
    width: 100% !important;
    touch-action: manipulation !important;
    z-index: 310 !important;
  }
  header .radio-dropdown .radio-btn,
  body .header-btns .radio-btn {
    position: relative !important;
    z-index: 311 !important;
    width: 100% !important;
    min-height: 48px !important;             /* uniforme a Narratore e Blues MP3 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;      /* centrato come gli altri 2 */
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    overflow: hidden !important;             /* per il marquee */
  }

  /* ============================================================
     MARQUEE: il nome della radio attiva scorre dentro il bottone
     ============================================================ */
  /* Testo di default "📻 Radio ▶" — visibile quando nessuna radio e' in play */
  body .header-btns .radio-btn .radio-default {
    display: inline-block !important;
    transition: opacity 0.2s !important;
  }
  /* Marquee — nascosto di default */
  body .header-btns .radio-btn .radio-marquee {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  /* Quando il radio sta suonando, mostra il marquee e nascondi il default */
  body .header-btns .radio-btn.playing .radio-default {
    display: none !important;
  }
  body .header-btns .radio-btn.playing .radio-marquee {
    display: flex !important;
  }
  /* Track con 2 copie del testo per loop continuo */
  body .header-btns .radio-btn .radio-marquee-track {
    display: flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    height: 100% !important;
    white-space: nowrap !important;
    animation: radio-marquee-scroll 12s linear infinite !important;
  }
  body .header-btns .radio-btn .radio-station-name {
    flex-shrink: 0 !important;
    padding: 0 24px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3b2112 !important;
  }
  @keyframes radio-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  body .header-btns .radio-submenu,
  header .radio-submenu {
    position: absolute !important;
    bottom: 100% !important;            /* esce verso l'ALTO dal bottone Radio */
    top: auto !important;               /* sovrascrive il top:100% inline */
    left: 0 !important;
    right: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    padding: 8px !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    background: rgba(245, 236, 215, 0.98) !important;
    border-radius: 8px !important;
    z-index: 1500 !important;           /* sopra la barra audio fissa (z:150) */
    margin-bottom: 6px !important;
    pointer-events: none !important;
    touch-action: manipulation !important;
    transition: opacity 0.2s, visibility 0.2s !important;
  }
  body .header-btns .radio-dropdown.open .radio-submenu,
  header .radio-dropdown.open .radio-submenu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
  }
  header .radio-station-btn {
    width: 100% !important;
    padding: 14px 16px !important;
    margin: 4px 0 !important;
    background: #fff !important;
    border: 1px solid #8b0000 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-align: center !important;
    white-space: nowrap !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    min-height: 48px !important;
  }
  header .radio-station-btn:active,
  header .radio-station-btn:hover {
    background: #8b0000 !important;
    color: #fff !important;
  }
  header .radio-select {
    width: 100% !important;
    font-size: 11px !important;
    padding: 6px !important;
  }
}

/* ---------- Schermi molto piccoli (iPhone SE ecc.) ---------- */
@media (max-width: 380px) {
  body .header-btns .narrator-btn,
  body .header-btns .musica-btn,
  body .header-btns .blues-btn,
  body .header-btns .radio-btn {
    font-size: 10px !important;
    padding: 5px 8px !important;
  }
}

/* ---------- Sidebar (non si sovrapponga all'header fisso) ---------- */
@media (min-width: 769px) {
  .sidebar-left,
  aside.sidebar-left,
  .layout-container,
  main,
  .main-content {
    /* Le regole originali di posizionamento restano. */
  }
  /* DESKTOP: barra audio fissa IN BASSO, centrata orizzontalmente.
     I 3 bottoni sono larghi 250px (uguale al bottone Autostrada nel banner CTA).
     Il bar copre tutta la larghezza del viewport ma i bottoni sono centrati
     grazie a justify-content: center. La barra ha background/border/shadow
     per staccarla visivamente dal contenuto. */
  body .header-btns.header-btns-fixed {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: stretch !important;
    justify-content: center !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 250 !important;
    padding: 8px 16px !important;
    background: rgba(245, 236, 215, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(139, 121, 82, 0.25) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15) !important;
  }
  body .header-btns .narrator-btn,
  body .header-btns .blues-btn {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body .header-btns .radio-btn {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    /* FIX BUG marquee: senza position relative il radio-marquee (position:absolute)
       si aggancia all'header-btns (position:fixed) e copre TUTTI i 3 bottoni.
       Con position:relative il marquee sta SOLO dentro il radio-btn. */
    position: relative !important;
    overflow: hidden !important;
  }
  /* ----- MARQUEE RADIO: regole DESKTOP (le regole mobile sono dentro @media max-width 768px) ----- */
  body .header-btns .radio-btn .radio-default {
    display: inline-block !important;
    transition: opacity 0.2s !important;
  }
  body .header-btns .radio-btn .radio-marquee {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  body .header-btns .radio-btn.playing .radio-default {
    display: none !important;
  }
  body .header-btns .radio-btn.playing .radio-marquee {
    display: flex !important;
  }
  body .header-btns .radio-btn .radio-marquee-track {
    display: flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    height: 100% !important;
    white-space: nowrap !important;
    animation: radio-marquee-scroll 12s linear infinite !important;
  }
  body .header-btns .radio-btn .radio-station-name {
    flex-shrink: 0 !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
  }
}

/* ============================================================
   FIX TOGGLE BLUES MP3: rimuovo transform:scale(1.05) su hover per
   i 3 bottoni audio. Il transform faceva spostare il box dopo il
   primo click, impedendo al secondo click di registrare.
   ============================================================ */
body .header-btns .narrator-btn:hover,
body .header-btns .blues-btn:hover,
body .header-btns .radio-btn:hover {
  transform: none !important;
}

/* Hover: leggero background per tutti i link del menu (sobrio, niente scale) */
body header nav.nav a:hover,
header nav.nav a:hover,
body .nav a:hover {
  background: rgba(139, 121, 82, 0.15) !important;
  color: var(--lane-yellow) !important;
}

/* ============================================================
   GOTHA FINANZIARIO — VISIBILE E CLICCABILE SU TUTTI I VIEWPORT
   - Su mobile: posizionato in alto a destra (bannerino)
   - Su desktop: pillola stilizzata, visibile in fondo alla pagina
   - Sempre cliccabile: rimuovo pointer-events:none
   - Stato .menu-open quando il menu hamburger e' aperto
   ============================================================ */
@media (min-width: 769px) {
  /* Desktop: il Gotha è inutile (il nav è già sempre visibile in alto) e
     si incastra dietro la nav fissa mostrando solo una fetta.
     Lo nascondo. Resta attivo solo su mobile. */
  body .access-prompt,
  body .access-prompt-wrap {
    display: none !important;
  }
  body .access-prompt:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 20px rgba(59, 33, 18, .5) !important;
    filter: brightness(1.12) !important;
  }
  body .access-prompt .arrow {
    margin-left: 0 !important;
    font-size: 14px !important;
    color: #fff !important;
    text-shadow: none !important;
  }
  /* Il wrap container: centrato, normale flusso */
  body .access-prompt-wrap {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 8px 0 24px !important;
    padding: 0 !important;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
  }
  /* Su mobile il wrap e' inutile (il Gotha ha position:fixed suo).
     Nascondo per evitare che l'elemento vuoto in basso
     (position:fixed bottom:18px) intercetti qualcosa. */
  @media (max-width: 768px) {
    body .access-prompt-wrap {
      display: none !important;
    }
  }
  /* Stato "menu aperto" */
  body .access-prompt.menu-open {
    background: linear-gradient(135deg, #1e8449, #27ae60) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(39, 174, 96, .55) !important;
  }
}

/* Su mobile: mantiene il bannerino in alto a destra MA diventa cliccabile */
@media (max-width: 768px) {
  body .access-prompt {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  body .access-prompt.menu-open {
    color: #ffd700 !important;
    background: rgba(255, 248, 220, 0.95) !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, .6) !important;
  }
}



/* ==========================================================================
   NAV RAINBOW - link Autostrada con testo arcobaleno animato
   Usa !important per prevalere sui colori nth-child degli altri link
   ========================================================================== */
.nav-rainbow {
  background: linear-gradient(
    90deg,
    #ff0080 0%, #ff8c00 16%, #ffd700 32%,
    #00d26a 48%, #00b4d8 64%, #6a4c93 80%, #ff0080 100%
  ) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: nav-rainbow-shift 4s linear infinite !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}
@keyframes nav-rainbow-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-rainbow { animation: none; }
}

/* ==========================================================================
   CTA BANNER - larghezza uniforme = larghezza del testo piu lungo
   Sovrascrive .mutuo3x-btn inline
   ========================================================================== */
.mutuo3x-banner .mutuo3x-btn {
  width: max-content !important;
  min-width: 250px !important;
  max-width: calc(100vw - 32px) !important;
}

/* Distanza tra i due bottoni del banner (Tripla Estrazione / Autostrada del Credito) */
.mutuo3x-banner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

/* ==========================================================================
   AUDIO BUTTONS (Radio, Blues, Narratore) - larghezza fissa = 250px su desktop
   Uguale alla larghezza del bottone "Autostrada del Credito" nel banner CTA.
   La barra e' fissa in BASSO (vedi regola @media min-width: 769px sopra).
   Su mobile resta flessibile (1/3 ciascuno come da regole esistenti).
   NOTA: .radio-dropdown ha display:contents quindi e' trasparente al layout.
   Il vero flex-item e' .radio-btn (figlio del dropdown). Stessa cosa per
   .audio-menu-wrapper (display:contents) che contiene .blues-btn.
   ========================================================================== */
@media (min-width: 769px) {
  /* REGOLA UNITA SU UNA SOLA RIGA PER EVITARE BUG DEL PARSER CSS:
     i selettori separati da virgola su piu' righe fanno troncare il parsing
     del CSS al Chromium dopo ~41 regole, perdendo tutte le regole successive. */
  body .header-btns .radio-btn, body .header-btns .blues-btn, body .header-btns .narrator-btn { flex: 0 0 250px !important; width: 250px !important; min-width: 250px !important; max-width: 250px !important; }
  /* Padding-bottom globale per non essere coperti dalla barra audio fissa in basso */
  body {
    padding-bottom: 80px !important;
  }
  /* RADIO SUBMENU su desktop: si apre verso l'ALTO perche' la barra e' in fondo.
     Le regole CSS per il submenu (linee 753+) sono dentro @media (max-width:768px)
     e quindi non si applicano al desktop. Senza questa regola, il submenu
     usa le regole inline (top:100%) e si apre SOTTO il bottone, cioe' sotto
     il viewport = invisibile. */
  body .header-btns .radio-submenu,
  header .radio-submenu {
    position: absolute !important;
    bottom: 100% !important;            /* esce verso l'ALTO dal bottone Radio */
    top: auto !important;               /* sovrascrive il top:100% inline */
    left: 0 !important;
    right: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    padding: 8px !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    background: rgba(245, 236, 215, 0.98) !important;
    border-radius: 8px !important;
    z-index: 1500 !important;           /* sopra la barra audio fissa (z:250) */
    margin-bottom: 6px !important;
  }
}