/*! ic-header-unify.css v7 - + mobile home semplificata + vista Eventi */
.site-header__nav-admin .ic-nav-lock{vertical-align:-2px;margin-right:4px}

.ic-lang-dd{position:relative;display:inline-flex;align-items:center}
.ic-lang-dd__btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font:600 13px/1 'Inter',system-ui,sans-serif;cursor:pointer;transition:background .2s,border-color .2s;white-space:nowrap}
.ic-lang-dd__btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)}
.ic-lang-dd__btn:focus-visible{outline:2px solid #FFCC33;outline-offset:2px}
.ic-lang-dd__flag{font-size:16px;line-height:1}
.ic-lang-dd__code{letter-spacing:.5px}
.ic-lang-dd__chev{width:14px;height:14px;transition:transform .2s}
.ic-lang-dd[aria-expanded="true"] .ic-lang-dd__chev,.ic-lang-dd__btn[aria-expanded="true"] .ic-lang-dd__chev{transform:rotate(180deg)}
.ic-lang-dd__menu{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;max-height:60vh;overflow-y:auto;margin:0;padding:6px;list-style:none;background:#0b2340;border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:200}
.ic-lang-dd__menu[hidden]{display:none}
.ic-lang-dd__menu li{margin:0;padding:0}
.ic-lang-dd__menu button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;background:transparent;border:0;color:#fff;text-align:left;cursor:pointer;border-radius:6px;font:500 13px/1.2 'Inter',system-ui,sans-serif}
.ic-lang-dd__menu button:hover{background:rgba(255,255,255,.08)}
.ic-lang-dd__menu .ic-lang-dd__sub{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.5px;opacity:.6}

html.force-light .ic-lang-dd__btn{background:rgba(11,35,64,.06);border-color:rgba(11,35,64,.18);color:#0b2340}
html.force-light .ic-lang-dd__btn:hover{background:rgba(11,35,64,.12)}
html.force-light .ic-lang-dd__menu{background:#fff;border-color:rgba(11,35,64,.12)}
html.force-light .ic-lang-dd__menu button{color:#0b2340}
html.force-light .ic-lang-dd__menu button:hover{background:rgba(11,35,64,.06)}

body.ic-home-header .site-header__nav a{font-size:14px !important;letter-spacing:.6px !important}
body.ic-home-header .site-header__nav-admin{padding-left:2px}
body.ic-home-header .ic-lang-dd__btn{padding:7px 12px !important;font-size:14px !important}
body.ic-home-header .ic-lang-dd__flag{font-size:18px !important}

/* MOBILE: hide overlapping nav, show hamburger, give logo space */
@media (max-width:899px){
  .site-header .site-header__nav,nav.site-header__nav{display:none !important}
  .site-header__toggle{display:inline-flex !important}
  .site-header__brand{flex:1 1 auto;min-width:0}
  .site-header__inner{gap:8px}
  .ic-lang-dd__btn{padding:5px 9px;font-size:12px}
  .ic-lang-dd__flag{font-size:14px}
}
@media (max-width:720px){
  body.ic-home-header .site-header__nav a{font-size:13px !important;letter-spacing:.4px !important}
  body.ic-home-header .ic-lang-dd__btn{padding:5px 9px !important;font-size:13px !important}
  body.ic-home-header .ic-lang-dd__flag{font-size:15px !important}
}

/* Compat: body.layout-mobile (gestita lato JS) deve agire come max-width:899px */
body.layout-mobile .site-header .site-header__nav,
body.layout-mobile nav.site-header__nav{display:none !important}
body.layout-mobile .site-header__toggle{display:inline-flex !important}

/* Hide "Cosa cerchi oggi?" on mobile */
@media (max-width:899px){
  .ic-v3-section--alt{display:none !important}
}
body.layout-mobile .ic-v3-section--alt{display:none !important}

/* MOBILE v5: header solo logo + accessibilità */
@media (max-width:899px){
  .site-header__utils .puglia-switch,
  .site-header__utils #ic-lang-flag-dd,
  .site-header__utils #btn-theme,
  .site-header__utils #btn-high-contrast,
  .site-header__utils #btn-larger-text,
  .site-header__utils .site-header__toggle,
  .site-header__utils #btn-menu{display:none !important}
  .site-header__utils #ica-fab{display:inline-flex !important}
  .site-header__nav{display:none !important}
}
body.layout-mobile .site-header__utils .puglia-switch,
body.layout-mobile .site-header__utils #ic-lang-flag-dd,
body.layout-mobile .site-header__utils #btn-theme,
body.layout-mobile .site-header__utils #btn-high-contrast,
body.layout-mobile .site-header__utils #btn-larger-text,
body.layout-mobile .site-header__utils .site-header__toggle,
body.layout-mobile .site-header__utils #btn-menu{display:none !important}
body.layout-mobile .site-header__utils #ica-fab{display:inline-flex !important}

/* ==== MOBILE v7: home semplificata + vista Eventi tramite bottom-nav ==== */
@media (max-width:899px){
  /* HOME view: nascondi tutto tranne hero, header, bottom-nav, widget */
  body[data-view="home"] main > #calendario-eventi,
  body[data-view="home"] main > #puglia-storia,
  body[data-view="home"] main > #cammini-puglia,
  body[data-view="home"] main > .home-meteo,
  body[data-view="home"] .ic-footer-v3,
  body[data-view="home"] .faq-section{display:none !important}

  /* EVENTI view: nascondi hero (e cosa cerchi già nascosta) */
  body[data-view="eventi"] main > section.hero,
  body[data-view="eventi"] .ic-footer-v3,
  body[data-view="eventi"] .faq-section{display:none !important}

  /* EVENTI view: ordine sezioni */
  body[data-view="eventi"] main{display:flex;flex-direction:column}
  body[data-view="eventi"] main > #calendario-eventi{order:1;display:block !important}
  body[data-view="eventi"] main > #puglia-storia{order:2;display:block !important}
  body[data-view="eventi"] main > #cammini-puglia{order:3;display:block !important}
  body[data-view="eventi"] main > .home-meteo{order:4;display:block !important}

  /* Bottom-nav active state */
  .bottom-nav__item--current{color:var(--ic-color-brand-gold,#caa84a) !important}
  .bottom-nav__item--current .bottom-nav__icon{stroke:currentColor}

  /* ElevenLabs widget: posizionalo sopra la bottom-nav */
  body > elevenlabs-convai{bottom:80px !important;z-index:10000 !important}
}
body.layout-mobile[data-view="home"] main > #calendario-eventi,
body.layout-mobile[data-view="home"] main > #puglia-storia,
body.layout-mobile[data-view="home"] main > #cammini-puglia,
body.layout-mobile[data-view="home"] main > .home-meteo,
body.layout-mobile[data-view="home"] .ic-footer-v3,
body.layout-mobile[data-view="home"] .faq-section{display:none !important}
body.layout-mobile[data-view="eventi"] main > section.hero,
body.layout-mobile[data-view="eventi"] .ic-footer-v3,
body.layout-mobile[data-view="eventi"] .faq-section{display:none !important}
body.layout-mobile[data-view="eventi"] main{display:flex;flex-direction:column}
body.layout-mobile[data-view="eventi"] main > #calendario-eventi{order:1;display:block !important}
body.layout-mobile[data-view="eventi"] main > #puglia-storia{order:2;display:block !important}
body.layout-mobile[data-view="eventi"] main > #cammini-puglia{order:3;display:block !important}
body.layout-mobile[data-view="eventi"] main > .home-meteo{order:4;display:block !important}

/* MOBILE v7b: hero ridotto - solo title + stats + CTA + pills */
@media (max-width:899px){
  body[data-view="home"] #ic-search-bar{display:none !important}
  body[data-view="home"] .hero__stats-line{display:block;text-align:center;font-size:0.875rem;color:var(--ic-color-text-muted,#5a6473);margin:0.5rem 1rem 1rem;letter-spacing:.02em}
}
body.layout-mobile[data-view="home"] #ic-search-bar{display:none !important}
body.layout-mobile[data-view="home"] .hero__stats-line{display:block;text-align:center;font-size:0.875rem;color:var(--ic-color-text-muted,#5a6473);margin:0.5rem 1rem 1rem;letter-spacing:.02em}
/* Hide on desktop by default */
.hero__stats-line{display:none}

/* ============================================================
   InfoComuni Mobile v9 - UX/UI Refinements
   - Hide theme toggle from mobile header (moved to a11y panel)
   - Style a11y panel sections (Lingua + Aspetto)
   - Ensure ElevenLabs widget always visible
   - Optimize hero spacing on mobile home
   - Polish bottom-nav design (active states, icon, label)
   - Better Eventi view layout
   ============================================================ */

/* ----- Hide theme button on mobile header (moved to a11y panel) ----- */
@media (max-width: 1024px){
  .site-header__utils #btn-theme,
  body.layout-mobile .site-header__utils #btn-theme,
  body.layout-mobile #btn-theme {
    display: none !important;
  }
}

/* ----- A11y panel sections styling ----- */
.ica-section { 
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.ica-section__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin: 0 0 10px;
}
.ica-lang-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.ica-lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  text-align: left;
}
.ica-lang-btn:hover { background:#fafafa; border-color:#d4a017; }
.ica-lang-btn.is-active { background:#fff8e8; border-color:#d4a017; color:#1d2c4d; }

.ica-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.ica-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1d2c4d;
  cursor: pointer;
  transition: all .15s ease;
}
.ica-theme-btn svg { flex-shrink: 0; }
.ica-theme-btn:hover { background:#fafafa; border-color:#d4a017; }
.ica-theme-btn.is-active { background:#fff8e8; border-color:#d4a017; box-shadow: 0 0 0 1px #d4a017 inset; }

/* ----- Dark mode for a11y panel sections ----- */
html[data-theme="dark"] .ica-section { border-top-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .ica-section__title { color: #a0a0a0; }
html[data-theme="dark"] .ica-lang-btn,
html[data-theme="dark"] .ica-theme-btn { background: #1f2a3d; color:#eaeaea; border-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .ica-lang-btn.is-active,
html[data-theme="dark"] .ica-theme-btn.is-active { background:#2a3a55; border-color:#d4a017; }

/* ============================================================
   ElevenLabs widget - ensure visibility on all mobile views
   ============================================================ */
@media (max-width: 1024px){
  body > elevenlabs-convai,
  html > body > elevenlabs-convai {
    position: fixed !important;
    bottom: 88px !important;
    right: 12px !important;
    z-index: 2147483000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* For pages without bottom-nav, widget sits lower */
  body:not(.has-bottom-nav) > elevenlabs-convai { bottom: 16px !important; }
}

/* ============================================================
   Mobile home hero - optimize spacing
   ============================================================ */
@media (max-width: 1024px){
  body[data-view="home"] section.hero,
  body[data-view="home"] .hero {
    padding: 22px 18px 18px !important;
    min-height: auto !important;
  }
  body[data-view="home"] .hero h1,
  body[data-view="home"] #ic-home-title {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.15 !important;
    margin: 4px 0 10px !important;
    text-align: center;
  }
  body[data-view="home"] .hero p,
  body[data-view="home"] .hero__subtitle {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin: 0 0 12px !important;
    text-align: center;
    color: #4a5568;
  }
  body[data-view="home"] .hero__stats-line {
    font-size: 11.5px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #8a8a8a !important;
    text-align: center !important;
    margin: 0 0 18px !important;
    font-weight: 600 !important;
  }
  body[data-view="home"] .hero .btn,
  body[data-view="home"] .hero a[href*="comuni"]:not(.pill) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px auto 18px !important;
    padding: 14px 22px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #f4c542 0%, #d4a017 100%) !important;
    color: #1d2c4d !important;
    box-shadow: 0 8px 20px -8px rgba(212,160,23,.5) !important;
    border: none !important;
  }
  /* Province pills - tighter grid */
  body[data-view="home"] .hero .pills,
  body[data-view="home"] .hero .province-list,
  body[data-view="home"] .hero ul[class*="pill"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  body[data-view="home"] .hero .pill,
  body[data-view="home"] .hero a[class*="pill"],
  body[data-view="home"] .hero li > a {
    padding: 10px 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    text-align: center;
    background: #fff !important;
    border: 1px solid rgba(29,44,77,.10) !important;
    color: #1d2c4d !important;
    box-shadow: 0 2px 4px rgba(29,44,77,.04);
    transition: all .15s ease;
  }
  body[data-view="home"] .hero .pill:hover,
  body[data-view="home"] .hero li > a:hover { border-color:#d4a017; transform: translateY(-1px); }

  /* Remove empty whitespace below hero on home */
  body[data-view="home"] main { padding-bottom: 100px !important; }
  body[data-view="home"] section.hero { margin-bottom: 0 !important; }
}

/* ============================================================
   Bottom-nav - professional app look
   ============================================================ */
@media (max-width: 1024px){
  .ic-bottom-nav,
  .bottom-nav,
  nav[class*="bottom-nav"] {
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    z-index: 999;
    background: rgba(255,255,255,0.98) !important;
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.05) !important;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: stretch !important;
  }
  .ic-bottom-nav a,
  .ic-bottom-nav button,
  .bottom-nav a,
  .bottom-nav button {
    flex: 1 1 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color .15s ease;
  }
  .ic-bottom-nav svg, .bottom-nav svg { width: 22px !important; height: 22px !important; stroke-width: 1.8 !important; }
  .ic-bottom-nav a.is-active,
  .ic-bottom-nav button.is-active,
  .bottom-nav a.is-active,
  .bottom-nav button.is-active { color: #1d2c4d !important; }
  .ic-bottom-nav a.is-active::before,
  .ic-bottom-nav button.is-active::before,
  .bottom-nav a.is-active::before,
  .bottom-nav button.is-active::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 3px; border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #f4c542, #d4a017);
  }
}

/* ============================================================
   Eventi view - clean layout
   ============================================================ */
@media (max-width: 1024px){
  body[data-view="eventi"] section.hero,
  body[data-view="eventi"] .ic-v3-section--alt,
  body[data-view="eventi"] .ic-footer-v3,
  body[data-view="eventi"] .faq-section,
  body[data-view="eventi"] #ic-search-bar,
  body[data-view="eventi"] #site-search-form {
    display: none !important;
  }
  body[data-view="eventi"] main {
    padding-top: 8px !important;
    padding-bottom: 100px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body[data-view="eventi"] #calendario-eventi { order: 1 !important; display: block !important; }
  body[data-view="eventi"] #puglia-storia    { order: 2 !important; display: block !important; }
  body[data-view="eventi"] #cammini-puglia   { order: 3 !important; display: block !important; }
  body[data-view="eventi"] .home-meteo,
  body[data-view="eventi"] #home-meteo,
  body[data-view="eventi"] [id*="meteo"]      { order: 9 !important; display: block !important; }
  body[data-view="eventi"] section            { margin: 12px 0 !important; padding: 12px 14px !important; }

  /* Calendar inner: stack columns vertically on mobile */
  body[data-view="eventi"] .cal-trio {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  body[data-view="eventi"] .cal-col-events,
  body[data-view="eventi"] .cal-col-map,
  body[data-view="eventi"] .cal-col-day { width: 100% !important; min-width: 0 !important; }
}

/* ============================================================
   Home view - hide non-hero sections
   ============================================================ */
@media (max-width: 1024px){
  body[data-view="home"] #calendario-eventi,
  body[data-view="home"] #puglia-storia,
  body[data-view="home"] #cammini-puglia,
  body[data-view="home"] .home-meteo,
  body[data-view="home"] #home-meteo,
  body[data-view="home"] [id*="meteo"]:not(.hero *),
  body[data-view="home"] .ic-v3-section--alt,
  body[data-view="home"] .ic-footer-v3,
  body[data-view="home"] .faq-section,
  body[data-view="home"] #ic-search-bar,
  body[data-view="home"] #site-search-form,
  body[data-view="home"] .ic-v3-section__head ~ .ic-v3-section__body { display: none !important; }
}

/* ============================================================
   Hide language dropdown in header on mobile (moved to a11y)
   ============================================================ */
@media (max-width: 1024px){
  .site-header__utils #ic-lang-flag-wrap,
  .site-header__utils #ic-lang-flag,
  body.layout-mobile .site-header__utils > *:not(#ica-fab):not(#ic-a11y-btn) {
    display: none !important;
  }
}

/* ============================================================
   Mobile v10 - Province pills: 6 box uguali in COLONNA singola
   Riempiono lo spazio tra CTA e bottom-nav (spazio per widget)
   ============================================================ */
@media (max-width: 1024px){
  /* Override v9: griglia da 3x2 a 1x6 (colonna) */
  body[data-view="home"] .hero .pills,
  body[data-view="home"] .hero .province-list,
  body[data-view="home"] .hero ul[class*="pill"],
  body[data-view="home"] .hero ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 1fr !important;
    gap: 10px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    /* Riempie lo spazio disponibile sotto la CTA fino sopra il widget */
    min-height: calc(100vh - 420px) !important;
    max-height: calc(100vh - 360px) !important;
  }
  body[data-view="home"] .hero li {
    list-style: none !important;
    display: flex !important;
    min-height: 0 !important;
  }
  body[data-view="home"] .hero .pill,
  body[data-view="home"] .hero a[class*="pill"],
  body[data-view="home"] .hero li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 52px !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid rgba(29,44,77,.10) !important;
    color: #1d2c4d !important;
    box-shadow: 0 2px 6px rgba(29,44,77,.04) !important;
    transition: all .15s ease !important;
    text-align: center !important;
  }
  body[data-view="home"] .hero .pill:hover,
  body[data-view="home"] .hero li > a:hover {
    border-color: #d4a017 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(29,44,77,.08) !important;
  }

  /* Hero diventa flex column con height controllata */
  body[data-view="home"] section.hero,
  body[data-view="home"] .hero {
    display: flex !important;
    flex-direction: column !important;
    padding: 18px 16px 16px !important;
    /* Riserva 96px per la bottom-nav + 70px per il widget = 166px */
    min-height: calc(100vh - 56px) !important; /* header h ~56px */
    box-sizing: border-box !important;
  }
  /* Lascia spazio in fondo per widget (sopra la bottom-nav) */
  body[data-view="home"] .hero::after {
    content: '' !important;
    display: block !important;
    flex: 0 0 84px !important; /* 84px: 70px widget + 14px gap */
  }

  /* Bottom-nav: assicura background opaco per non vedere le pill scrollare sotto */
  .ic-bottom-nav, .bottom-nav, nav[class*="bottom-nav"] {
    background: #fff !important;
  }

  /* Body: previene scroll inutile sulla home */
  body[data-view="home"] { overflow-x: hidden; }
  body[data-view="home"] main { padding-bottom: 0 !important; }
}

/* ============================================================
   v10b - Province pills selettori CORRETTI per struttura reale
   .hero .prov-pills > details.prov-pill-wrap > summary.prov-pill
   ============================================================ */
@media (max-width: 1024px){
  body[data-view="home"] section.hero .prov-pills {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex: 1 1 auto !important;
    align-content: stretch !important;
  }
  body[data-view="home"] section.hero .prov-pill-wrap {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  body[data-view="home"] section.hero .prov-pill-wrap > summary.prov-pill,
  body[data-view="home"] section.hero summary.prov-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 56px !important;
    padding: 14px 16px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid rgba(29,44,77,.10) !important;
    color: #1d2c4d !important;
    box-shadow: 0 2px 6px rgba(29,44,77,.04) !important;
    transition: all .15s ease !important;
    text-align: center !important;
    list-style: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }
  body[data-view="home"] section.hero summary.prov-pill::-webkit-details-marker { display: none !important; }
  body[data-view="home"] section.hero summary.prov-pill::marker { content: '' !important; }
  body[data-view="home"] section.hero summary.prov-pill:hover,
  body[data-view="home"] section.hero summary.prov-pill:focus {
    border-color: #d4a017 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(29,44,77,.08) !important;
    outline: none !important;
  }
  body[data-view="home"] section.hero .ic-prov-name-fixed,
  body[data-view="home"] section.hero .prov-pill > span {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1d2c4d !important;
  }

  /* Hero diventa colonna che riempie l'altezza visibile (sotto header, sopra widget+bottom-nav) */
  body[data-view="home"] section.hero,
  body[data-view="home"] .hero {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px 14px 14px !important;
    min-height: calc(100vh - 64px) !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
  body[data-view="home"] .hero-content,
  body[data-view="home"] .hero-content--compact {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  /* Spazio in fondo per widget + bottom-nav */
  body[data-view="home"] .hero-content::after {
    content: '' !important;
    display: block !important;
    flex: 0 0 168px !important; /* 88px bottom-nav + 70px widget + 10px gap */
  }
  /* Nasconde popover details aperto quando in modalit\u00e0 lista */
  body[data-view="home"] section.hero details.prov-pill-wrap[open] > .prov-dd { display: none !important; }
  /* In alternativa, evita che details si apra: */
  body[data-view="home"] section.hero details.prov-pill-wrap > *:not(summary) { display: none !important; }
}

/* ============================================================
   v10d - Override ic-hero-agid + main + ic-kiosk + ic-mobile-app
   Selettori con specificit\u00e0 massima per battere tutto
   ============================================================ */
html body.layout-mobile[data-view="home"] section .prov-pills,
html body.layout-mobile[data-view="home"] section .prov-pills#provPills,
html body[data-view="home"] section .prov-pills#provPills {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}
@media (max-width: 1024px){
  html body[data-view="home"] section .prov-pills,
  html body[data-view="home"] section .prov-pills#provPills,
  html body[data-view="home"] section.hero .prov-pills,
  html body[data-view="home"] section.hero #provPills {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* ============================================================
   v10e - Stretch pill grid riempiendo verticalmente lo spazio
   tra CTA e bottom-nav (lasciando posto al widget)
   ============================================================ */
@media (max-width: 1024px){
  html body[data-view="home"] section.hero {
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - 60px) !important;
    padding: 14px 14px 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  html body[data-view="home"] section.hero > .hero-content,
  html body[data-view="home"] section.hero .hero-content,
  html body[data-view="home"] section.hero .hero-content--compact {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  html body[data-view="home"] section.hero .prov-pills,
  html body[data-view="home"] section.hero #provPills {
    flex: 1 1 auto !important;
    align-self: stretch !important;
    /* Spazio per widget+bottom-nav sotto */
    margin-bottom: 168px !important;
    /* Forza altezza minima per evitare collasso */
    min-height: 360px !important;
  }
  html body[data-view="home"] section.hero .prov-pill-wrap {
    height: auto !important;
    min-height: 0 !important;
  }
  html body[data-view="home"] section.hero summary.prov-pill {
    height: 100% !important;
    min-height: 54px !important;
  }
  /* Remove ::after che avevo aggiunto prima (gi\u00e0 c'\u00e8 margin-bottom) */
  html body[data-view="home"] section.hero .hero-content::after,
  html body[data-view="home"] section.hero .hero-content--compact::after {
    content: none !important;
  }
}

/* ============================================================
   v15 - Nasconde DEFINITIVAMENTE btn-theme nell'header mobile
   con specificit\u00e0 massima + display:none su ogni declination
   ============================================================ */
@media (max-width: 1024px){
  html body #btn-theme,
  html body .site-header #btn-theme,
  html body .site-header__utils #btn-theme,
  html body header #btn-theme,
  html body button#btn-theme,
  html body button.ic-theme-toggle,
  html body .ic-theme-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
  }
}
/* Anche fuori dal media query, applica via body.layout-mobile */
html body.layout-mobile #btn-theme,
html body.layout-mobile button.ic-theme-toggle,
html body.layout-mobile .ic-theme-toggle {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important; height: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   v15 - Dark theme su mobile: leggibilit\u00e0 e contrasto
   ============================================================ */
@media (max-width: 1024px){
  /* HOME view in dark theme: card province con contrasto AAA */
  html.force-dark body[data-view="home"] section.hero summary.prov-pill,
  html[data-theme="dark"] body[data-view="home"] section.hero summary.prov-pill,
  html.theme-dark body[data-view="home"] section.hero summary.prov-pill {
    background: #1f2a3d !important;
    border: 1px solid rgba(244,197,66,.28) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.30) !important;
  }
  html.force-dark body[data-view="home"] section.hero summary.prov-pill:hover,
  html[data-theme="dark"] body[data-view="home"] section.hero summary.prov-pill:hover {
    background: #2a3850 !important;
    border-color: #f4c542 !important;
  }
  html.force-dark body[data-view="home"] section.hero .ic-prov-name-fixed,
  html.force-dark body[data-view="home"] section.hero .prov-pill > span,
  html[data-theme="dark"] body[data-view="home"] section.hero .ic-prov-name-fixed,
  html[data-theme="dark"] body[data-view="home"] section.hero .prov-pill > span {
    color: #ffffff !important;
  }
  /* Titolo + sottotitolo + stats line in dark */
  html.force-dark body[data-view="home"] #ic-home-title,
  html[data-theme="dark"] body[data-view="home"] #ic-home-title {
    color: #f4c542 !important;
    text-shadow: 0 1px 14px rgba(244,197,66,.20) !important;
  }
  html.force-dark body[data-view="home"] .hero p,
  html[data-theme="dark"] body[data-view="home"] .hero p {
    color: #d4d4d4 !important;
  }
  html.force-dark body[data-view="home"] .hero__stats-line,
  html[data-theme="dark"] body[data-view="home"] .hero__stats-line {
    color: #c0c0c0 !important;
  }
  /* Header e logo in dark: mostra il logo InfoComuni invertito */
  html.force-dark body.layout-mobile .site-header,
  html[data-theme="dark"] body.layout-mobile .site-header {
    background: rgba(15, 23, 41, 0.98) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  html.force-dark body.layout-mobile .site-header .site-header__logo,
  html.force-dark body.layout-mobile .site-header .site-header__logo *,
  html.force-dark body.layout-mobile .site-header a[href="/"] svg,
  html.force-dark body.layout-mobile .site-header a[href="./"] svg,
  html[data-theme="dark"] body.layout-mobile .site-header .site-header__logo,
  html[data-theme="dark"] body.layout-mobile .site-header .site-header__logo * {
    filter: invert(1) brightness(1.6) !important;
  }
  /* Bottom-nav in dark */
  html.force-dark .ic-bottom-nav,
  html[data-theme="dark"] .ic-bottom-nav,
  html.force-dark .bottom-nav,
  html[data-theme="dark"] .bottom-nav {
    background: rgba(15, 23, 41, 0.98) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }
  html.force-dark .ic-bottom-nav a,
  html.force-dark .ic-bottom-nav button,
  html[data-theme="dark"] .ic-bottom-nav a,
  html[data-theme="dark"] .ic-bottom-nav button {
    color: #a0a8b8 !important;
  }
  html.force-dark .ic-bottom-nav a.is-active,
  html.force-dark .ic-bottom-nav button.is-active,
  html[data-theme="dark"] .ic-bottom-nav a.is-active,
  html[data-theme="dark"] .ic-bottom-nav button.is-active {
    color: #f4c542 !important;
  }
  /* Pannello a11y: bottoni con contrasto in dark */
  html.force-dark .ica-theme-btn,
  html[data-theme="dark"] .ica-theme-btn {
    background: #1f2a3d !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.15) !important;
  }
  html.force-dark .ica-theme-btn.is-active,
  html[data-theme="dark"] .ica-theme-btn.is-active {
    background: #f4c542 !important;
    color: #1d2c4d !important;
    border-color: #f4c542 !important;
  }
  html.force-dark .ica-lang-btn,
  html[data-theme="dark"] .ica-lang-btn {
    background: #1f2a3d !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.15) !important;
  }
}

/* ============================================================
   v16 - Override main.css force-dark per province pills
   ============================================================ */
html.force-dark body[data-view="home"] section.hero .prov-pill-wrap > summary.prov-pill,
html.force-dark body.layout-mobile[data-view="home"] section.hero .prov-pill-wrap > summary.prov-pill,
html.force-dark body[data-view="home"] section.hero summary.prov-pill {
  background: #1f2a3d !important;
  background-image: none !important;
  background-color: #1f2a3d !important;
  border: 1px solid rgba(244,197,66,.35) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
}
html.force-dark body[data-view="home"] section.hero .prov-pill-wrap > summary.prov-pill:hover,
html.force-dark body[data-view="home"] section.hero .prov-pill-wrap[open] > summary.prov-pill {
  background: linear-gradient(135deg, #f4c542 0%, #d4a017 100%) !important;
  background-color: #f4c542 !important;
  color: #1d2c4d !important;
  border-color: #f4c542 !important;
}
html.force-dark body[data-view="home"] section.hero .prov-pill-wrap > summary.prov-pill:hover .ic-prov-name-fixed,
html.force-dark body[data-view="home"] section.hero .prov-pill-wrap[open] > summary.prov-pill .ic-prov-name-fixed {
  color: #1d2c4d !important;
}
html.force-dark body[data-view="home"] section.hero .ic-prov-name-fixed,
html.force-dark body[data-view="home"] section.hero summary.prov-pill > span {
  color: #ffffff !important;
}

/* Hero background dark: navy uniforme */
html.force-dark body[data-view="home"] section.hero,
html.force-dark body[data-view="home"] .hero {
  background: #0f1729 !important;
  background-image: none !important;
}
html.force-dark body[data-view="home"] {
  background: #0f1729 !important;
}

/* Logo nell'header dark: forza visibilit\u00e0 */
html.force-dark body.layout-mobile .site-header__logo img,
html.force-dark body.layout-mobile .site-header__logo svg,
html.force-dark body.layout-mobile a.site-header__brand,
html.force-dark body.layout-mobile a.site-header__brand img,
html.force-dark body.layout-mobile a.site-header__brand svg,
html.force-dark body.layout-mobile .site-header a[href="./"] img,
html.force-dark body.layout-mobile .site-header a[href="/"] img {
  filter: invert(1) hue-rotate(180deg) brightness(1.4) !important;
}

/* ============================================================
   v17 - Forza webkit-text-fill-color sui nomi provincia
   (era impostato a navy scuro da main.css)
   ============================================================ */
html.force-dark body[data-view="home"] section.hero .ic-prov-name-fixed,
html.force-dark body[data-view="home"] section.hero summary.prov-pill > span,
html.force-dark body[data-view="home"] section.hero .prov-pill-wrap > summary .ic-prov-name-fixed {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.5) !important;
}
/* Hover/open: testo navy su sfondo dorato */
html.force-dark body[data-view="home"] section.hero .prov-pill-wrap > summary.prov-pill:hover .ic-prov-name-fixed,
html.force-dark body[data-view="home"] section.hero .prov-pill-wrap[open] > summary.prov-pill .ic-prov-name-fixed {
  color: #1d2c4d !important;
  -webkit-text-fill-color: #1d2c4d !important;
  text-shadow: none !important;
}
/* Chiaro: assicura anche qui che il testo sia navy ben visibile */
html.force-light body[data-view="home"] section.hero .ic-prov-name-fixed,
body[data-view="home"] section.hero .ic-prov-name-fixed {
  color: #0b2340 !important;
  -webkit-text-fill-color: #0b2340 !important;
}

/* === Sprint 18 (23/05/2026) === 
   1) Mobile default light: gestito via ic-bootstrap.js patch + ic-theme-user-set
   2) Logo bianco in dark mode su mobile (inverte SVG nero)
   3) Header btn-theme hard-hide (rinforzo) */
@media (max-width: 1024px) {
  /* Logo bianco in dark mode */
  html.force-dark .site-header img[src*="logo"],
  html.force-dark header img[alt*="InfoComuni"],
  html.force-dark header img[alt*="infocomuni"],
  html.force-dark .site-header__logo img,
  html.force-dark .site-header .logo img,
  html.force-dark a[href="index.html"] img,
  html.force-dark a[href="/"] img,
  html.force-dark a[href="."] img {
    filter: brightness(0) invert(1) !important;
  }
  /* Logo SVG inline (path/fill) bianco */
  html.force-dark .site-header svg path,
  html.force-dark .site-header svg text,
  html.force-dark header.site-header svg [fill] {
    fill: #ffffff !important;
  }
  /* Header background in dark per non sparire */
  html.force-dark body .site-header,
  html.force-dark body header.site-header {
    background: #0f1729 !important;
    border-bottom: 1px solid #1f2a3d !important;
  }
  /* Btn-theme nascosto definitivamente */
  html body header .site-header__utils #btn-theme,
  html body header #btn-theme,
  html body #btn-theme {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -99999px !important;
  }
}

/* Sprint 18.1 (23/05/2026) - Fix logo dark mode 
   In dark mode il logo bianco deve essere visibile.
   Override per ic-editorial-skin.css che nasconde logo-white. */
html.force-dark .site-header [src*="logo-white"],
html.force-dark .site-header__logo--light,
html.force-dark .site-header__brand img[src*="logo-white"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html.force-dark .site-header [src*="logo-dark"],
html.force-dark .site-header__logo--dark {
  display: none !important;
}