/* =====================================================================
   ic-header-agid.css — Header AGID blu ISTITUZIONALE, UNIVERSALE
   Creato 2026-06-08. Applica l'header #0D47A1 a TUTTE le pagine,
   indipendentemente da force-light/force-dark e dallo skin editoriale.
   Copre le 3 classi header del sito: .site-header, .comune-header, .ic-page-header.
   Specificità alta (html body header.<classe> = 0,1,3) per battere
   ic-editorial-skin.css (0,1,1) e ic-kiosk-skin.css senza dipendere da .force-light.
   ===================================================================== */

/* ---- Sfondo header ---- */
html body header.site-header,
html body header.comune-header,
html body header.ic-page-header,
html body .site-header,
html body .comune-header,
html body .ic-page-header {
  background: #0D47A1 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.32) !important;
}

/* ---- Link di navigazione: bianchi ---- */
html body .site-header__nav a,
html body .comune-header__nav a,
html body .ic-page-header__nav a,
html body header.site-header nav a,
html body header.comune-header nav a {
  color: rgba(255,255,255,.90) !important;
}
html body .site-header__nav a:hover,
html body .site-header__nav a.is-active,
html body .comune-header__nav a:hover,
html body .comune-header__nav a.is-active,
html body header.site-header nav a:hover,
html body header.comune-header nav a:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.10) !important;
}

/* ---- "Area riservata" / "Meteo" e altre utility testuali ---- */
html body header.site-header .site-header__utils a,
html body header.comune-header .comune-header__utils a,
html body header.site-header .ic-util-meteo,
html body header.site-header .ic-util-btn {
  color: rgba(255,255,255,.90) !important;
}

/* ---- Logo: mostra SEMPRE la variante BIANCA sul header blu, nascondi scura ----
   Specificità (0,2,3): batte ic-editorial-skin `.site-header [src*="logo-white"]{display:none}` (0,2,0)
   che altrimenti nasconde il logo bianco lasciando l'header senza logo. */
html body header.site-header .site-header__logo--light,
html body header.comune-header .comune-header__logo--light,
html body header.ic-page-header .site-header__logo--light,
html body header.site-header [src*="logo-white"],
html body header.comune-header [src*="logo-white"],
html body header.site-header [src*="logo-bianco"] { display: block !important; }
html body header.site-header .site-header__logo--dark,
html body header.comune-header .comune-header__logo--dark,
html body header.site-header [src*="logo-dark"],
html body header.comune-header [src*="logo-dark"],
html body header.site-header [src*="logo-scuro"],
html body header.site-header [src*="logo-blue"] { display: none !important; }

/* ---- Bottoni icona / toggle tema: bianchi su blu ---- */
html body header.site-header .icon-btn,
html body header.comune-header .icon-btn,
html body header.ic-page-header .icon-btn {
  color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
  background: transparent !important;
}
html body header.site-header .icon-btn svg,
html body header.comune-header .icon-btn svg,
html body header.ic-page-header .icon-btn svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
html body header.site-header .icon-btn:hover,
html body header.comune-header .icon-btn:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.5) !important;
}

/* =====================================================================
   Menù secondario pagine comune (.comune-tabs): far entrare TUTTI i 10 tab
   su desktop, con scroll orizzontale di sicurezza sotto. 2026-06-08.
   Specificità (0,3,x) per battere comune-restyle.css/ic-comune-redesign.css.
   ===================================================================== */
html body nav.comune-tabs .comune-tabs__scroll{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important;
  align-items:stretch !important;
  gap:2px !important;
  width:100% !important;
  max-width:1280px !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
}
html body nav.comune-tabs .comune-tabs__scroll::-webkit-scrollbar{ display:none !important; }
html body nav.comune-tabs .comune-tabs__btn{
  flex:0 1 auto !important;
  min-width:0 !important;
  min-height:44px !important;
  padding:10px 9px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.005em !important;
  gap:6px !important;
  white-space:nowrap !important;
}
html body nav.comune-tabs .comune-tabs__btn svg,
html body nav.comune-tabs .comune-tabs__btn .ic-icon,
html body nav.comune-tabs .comune-tabs__btn img{
  width:16px !important; height:16px !important; flex:0 0 auto !important;
}
@media (max-width:1180px){
  html body nav.comune-tabs .comune-tabs__scroll{ justify-content:flex-start !important; }
  html body nav.comune-tabs .comune-tabs__btn{ font-size:12px !important; padding:9px 8px !important; }
}
@media (max-width:680px){
  html body nav.comune-tabs .comune-tabs__btn{ padding:9px 11px !important; }
}

/* =====================================================================
   news.html — ripristino HERO scuro ("elimina banner bianco"). 2026-06-08.
   ic-civic-extra.css sostituiva il gradiente scuro con pattern chiaro
   lasciando trasparire il body chiaro (#f6f8fb) -> banner bianco.
   Qui ricomponiamo il gradiente navy originale di news-tailored.css.
   ===================================================================== */
html body .nt-hero{
  background:
    radial-gradient(circle at 88% 20%, rgba(58,143,204,0.12) 0%, transparent 50%),
    radial-gradient(circle at 12% 80%, rgba(20,161,105,0.18) 0%, transparent 55%),
    linear-gradient(135deg, #0a1a2f 0%, #0b2340 60%, #0d3050 100%) !important;
  color:#fff !important;
}
html body .nt-hero__title,
html body .nt-hero__sub{ color:#ffffff !important; }
html body .nt-hero__sub strong{ color:#7BCEFF !important; }
html body .nt-hero__kicker{ color:#7BCEFF !important; background:rgba(58,143,204,0.15) !important; }
html body .nt-hero__counter{ color:#ffffff !important; }
html body .nt-hero__counter--gold{ color:#7BCEFF !important; }

/* Rimuove la legenda "257 comuni · 6 province" e il suo contorno dalla mappa hero */
html body .ic-constel__legend{ display:none !important; }

/* =====================================================================
   Header UNIFORME su tutte le pagine = identico alla home: la fascia
   deve avere la STESSA altezza. Causa differenza: il cluster utils
   ("Area riservata" + "Meteo") su alcune pagine va a capo (2 righe) e
   alza la fascia a 110px invece di 85px. Forziamo riga singola + nowrap. 2026-06-08.
   ===================================================================== */
html body header.site-header .ic-util-cluster{
  flex-direction:row !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
}
html body header.site-header .ic-util-cluster a,
html body header.site-header .ic-util-cluster span,
html body header.site-header .ic-util-cluster div,
html body header.site-header .ic-util-meteo,
html body header.site-header .ica-fab__label{
  white-space:nowrap !important;
}

/* Meteo nel cluster: inline compatto con icona 15px (come la home) -> fascia 85px ovunque */
html body header.site-header .ic-util-meteo{
  display:inline-flex !important; flex-direction:row !important; align-items:center !important;
  gap:5px !important; white-space:nowrap !important; height:auto !important;
}
html body header.site-header .ic-util-meteo svg{ width:15px !important; height:15px !important; flex:0 0 auto !important; }
html body header.site-header .ic-util-area__lbl{ white-space:nowrap !important; }

/* Altezza fascia header IDENTICA su tutte le pagine = HOME (~64px), contenuto centrato.
   (Prima era 85px: le pagine sezione risultavano più alte della home.) */
html body header.site-header{ min-height:64px !important; }
html body header.site-header .site-header__inner,
html body header.site-header .container{ min-height:64px !important; align-items:center !important; }

/* ============================================================
   HEADER MOBILE pulito (Apple-like) — ≤768px
   La navigazione su mobile vive nella bottom tab bar (#ic-mob-bnav: Home/Esplora/
   Comuni/News/Servizi/Chat). Quindi nell'header mobile teniamo SOLO il brand a
   sinistra e le azioni essenziali a destra (lingua + accessibilità), nascondendo
   la nav testuale desktop, la tendina "Comuni" e il bottone "Area riservata":
   così sparisce la collisione logo↔menu visibile sullo screenshot.
   La nav responsive originale dipendeva da una classe JS (body.layout-mobile),
   non da una media query, perciò su smartphone reale non scattava.
   ============================================================ */
@media (max-width: 768px){
  html body header.site-header .site-header__nav,
  html body header.site-header .ic-nav-comuni-wrap,
  html body header.site-header [data-nav="comuni"],
  html body header.site-header .ic-util-area,
  html body header.site-header .ic-util-div{ display:none !important; }

  html body header.site-header{ min-height:60px !important; }
  html body header.site-header .site-header__inner,
  html body header.site-header .container{
    min-height:60px !important;
    display:flex !important; align-items:center !important;
    justify-content:space-between !important; gap:10px !important;
  }
  html body header.site-header .site-header__brand{ flex:0 0 auto !important; }
  html body header.site-header .site-header__utils,
  html body header.site-header .ic-util-cluster{ flex:0 0 auto !important; gap:6px !important; margin-left:auto !important; }
}

/* =====================================================================
   ANTI-FOUC HEADER (2026-06-09) — Fix "header bianco al refresh".
   Le pagine sezione (Servizi, Esplora, News, Eventi, Rete civica, ecc.)
   NON avevano il blocco anti-flash che ha la home: al caricamento mostravano
   per un istante i controlli LEGACY dell'header (link "Area riservata" dentro
   il nav, vecchio dropdown lingua, toggle tema bianco) finché il JS
   (ic-header-unify) non li rimuoveva/sostituiva -> flash bianco ad ogni refresh.
   Qui li nascondiamo dal PRIMO paint, su tutte le pagine, in CSS render-blocking.
   NB: NON nascondiamo il pill lingua nuovo (.ic-lang-dd / #ic-lang-flag-dd):
   quello deve restare visibile.
   ===================================================================== */
html body .site-header .site-header__nav a[data-nav="admin"],
html body header.site-header nav.site-header__nav a[data-nav="admin"],
html body .site-header__nav a.site-header__nav-admin,
html body .site-header #ic-lang-dropdown,
html body .site-header #btn-theme,
html body .site-header .ic-theme-toggle,
html body header.site-header .site-header__toggle{ display:none !important; }

/* =====================================================================
   SELETTORE LINGUA — pill visibile su TUTTE le pagine (2026-06-09).
   Le pagine sezione non costruivano/mostravano il pill (#ic-lang-flag-dd):
   ora ic-header-unify lo inserisce nell'area utils e qui lo rendiamo visibile,
   battendo l'eventuale anti-fouc che lo nasconde.
   ===================================================================== */
html body header.site-header .site-header__utils .ic-lang-dd,
html body header.site-header .site-header__utils #ic-lang-flag-dd{
  display:inline-flex !important; align-items:center !important; position:relative !important;
}

/* =====================================================================
   LISTA CAPOLUOGHI (home, mobile) — stile sobrio + contrasto AA (2026-06-09).
   Problemi su mobile: righe arancione, testo nero su arancione (sotto AA),
   nomi sottolineati, badge "CAPOLUOGO" ripetuto e ridondante.
   NB: da verificare a ~414px sul telefono.
   ===================================================================== */
/* badge "capoluogo" ridondante nella lista: rimosso */
html body .ic-picker__capo{ display:none !important; }
/* righe risultato: niente sottolineatura, testo navy leggibile */
html body #icPickerResults li a,
html body #icPickerResults li a .nm{ text-decoration:none !important; }
html body #icPickerResults li a .nm{ color:#0b2340 !important; }
@media (max-width:768px){
  html body #icPickerResults li a{
    background:#ffffff !important; color:#0b2340 !important;
    border:1px solid #e2e8f0 !important; border-radius:12px !important;
    margin:4px 0 !important; padding:12px 14px !important;
  }
  html body #icPickerResults li a:hover,
  html body #icPickerResults li a:focus-visible{ background:#EBF5FF !important; }
  html body #icPickerResults li a .mt{ color:#5a6b80 !important; }
  /* in caso la lista arancione sia il componente prov-dd: stesso stile sobrio */
  html body .prov-dd-cap, html body .prov-dd-item,
  html body .prov-dd-cap .prov-dd-cap__name{
    background:#ffffff !important; color:#0b2340 !important; text-decoration:none !important;
  }
}