/* ============================================================
   InfoComuni Mobile Pro - v1.0 - 2026-06-09
   Layer di rifinitura mobile ispirato alle Human Interface
   Guidelines Apple, nel rispetto della palette istituzionale.
   - Caricato DOPO tutti i CSS esistenti: solo rifinitura, niente
     stravolgimenti di layout.
   - Attivo solo <= 768px (piu regole dark/reduced-motion globali).
   - Non tocca kiosk (kh/kv) ne admin.
   ============================================================ */

:root {
  --icp-primary: #0D47A1;
  --icp-primary-ink: #09223A;
  --icp-accent: #5BC4FF;        /* solo su sfondi scuri */
  --icp-bg: #F5F7FA;
  --icp-card: #FFFFFF;
  --icp-ink: #14212E;
  --icp-ink-2: #51606F;
  --icp-hairline: rgba(20, 33, 46, 0.10);
  --icp-radius-l: 22px;
  --icp-radius-m: 16px;
  --icp-radius-s: 12px;
  --icp-shadow-1: 0 1px 2px rgba(9, 34, 58, 0.06), 0 4px 16px rgba(9, 34, 58, 0.06);
  --icp-shadow-2: 0 2px 6px rgba(9, 34, 58, 0.08), 0 12px 32px rgba(9, 34, 58, 0.10);
  --icp-blur: saturate(180%) blur(20px);
  --icp-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --icp-safe-b: env(safe-area-inset-bottom, 0px);
  --icp-safe-t: env(safe-area-inset-top, 0px);
}

@media (max-width: 768px) {

  /* ---------- tipografia: leggibilita da app nativa ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.012em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1 { letter-spacing: -0.022em; line-height: 1.12; }
  h2 { letter-spacing: -0.018em; line-height: 1.18; }
  h3 { letter-spacing: -0.012em; }
  p, li { max-width: 70ch; }
  /* niente zoom forzato iOS sugli input */
  input, select, textarea, button { font-size: 16px !important; }

  /* ---------- scrolling fluido ---------- */
  body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
  }
  [class*="carousel"], [class*="scroll-x"], [class*="strip"] {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [class*="carousel"] > *, [class*="strip"] > * { scroll-snap-align: start; }

  /* ---------- header: vetro smerigliato ---------- */
  header[class*="header"], .ic-topbar, .site-header, .topbar {
    backdrop-filter: var(--icp-blur);
    -webkit-backdrop-filter: var(--icp-blur);
    border-bottom: 0.5px solid var(--icp-hairline);
  }

  /* ---------- bottom nav: barra app iOS ---------- */
  .bottom-nav, [class*="bottomnav"], [class*="bottom-nav"] {
    backdrop-filter: var(--icp-blur);
    -webkit-backdrop-filter: var(--icp-blur);
    background: rgba(255, 255, 255, 0.82) !important;
    border-top: 0.5px solid var(--icp-hairline);
    padding-bottom: max(var(--icp-safe-b), 6px) !important;
    box-shadow: 0 -1px 0 rgba(9, 34, 58, 0.03);
  }
  .bottom-nav a, [class*="bottomnav"] a, [class*="bottom-nav"] a {
    min-height: 48px;
    min-width: 48px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 14px;
    transition: transform 0.32s var(--icp-spring), background-color 0.2s ease;
  }
  .bottom-nav a:active, [class*="bottomnav"] a:active, [class*="bottom-nav"] a:active {
    transform: scale(0.92);
    background: rgba(13, 71, 161, 0.08);
  }

  /* ---------- card: profondita misurata, raggio generoso ---------- */
  [class*="card"], .acc-item, article[class*="item"] {
    border-radius: var(--icp-radius-m);
    box-shadow: var(--icp-shadow-1);
    border: 0.5px solid var(--icp-hairline);
    transition: transform 0.32s var(--icp-spring), box-shadow 0.32s var(--icp-spring);
  }
  [class*="card"]:active { transform: scale(0.975); box-shadow: var(--icp-shadow-2); }

  /* ---------- target touch >= 44pt ovunque ---------- */
  a, button, summary, [role="button"], [role="tab"], label > input + span {
    min-height: 44px;
  }
  nav a, .footer a, footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  /* eccezione: link inline dentro paragrafi */
  p a, li a:not([class]), td a { min-height: 0; display: inline; }

  /* ---------- bottoni: pill da app nativa ---------- */
  .btn, [class*="btn-primary"], [class*="cta"] {
    border-radius: 980px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform 0.32s var(--icp-spring), opacity 0.2s ease;
  }
  .btn:active, [class*="btn-primary"]:active, [class*="cta"]:active {
    transform: scale(0.96);
    opacity: 0.85;
  }

  /* ---------- accordion (details): tocco morbido ---------- */
  details.acc-item summary {
    min-height: 52px;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
  }

  /* ---------- tabelle e blocchi larghi: niente overflow ---------- */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  img, video, iframe { max-width: 100%; height: auto; }

  /* ---------- gerarchia: respiro verticale coerente ---------- */
  main > section { scroll-margin-top: 76px; }

  /* ---------- separatori hairline (retina) ---------- */
  hr { border: 0; height: 0.5px; background: var(--icp-hairline); }
}

/* ---------- dark mode: vetro scuro coerente ---------- */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  .bottom-nav, [class*="bottomnav"], [class*="bottom-nav"] {
    background: rgba(13, 22, 33, 0.82) !important;
    border-top-color: rgba(255, 255, 255, 0.10);
  }
}
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] [class*="bottomnav"] {
  background: rgba(13, 22, 33, 0.82) !important;
  border-top-color: rgba(255, 255, 255, 0.10);
}

/* ---------- riduzione movimento: rispetto totale ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- focus visibile: mai rimosso, solo armonizzato ---------- */
:focus-visible {
  outline: 3px solid var(--icp-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 2026-06-09: rimozione pulsante ricerca header (icona non
   renderizzata, appariva come riquadro vuoto tra Chat e lingue).
   La ricerca resta disponibile da barra hero e overlay mobile. ---------- */
header .ic-header-search,
.ic-header-search { display: none !important; }


/* ============================================================
   CIVIC POLISH - 2026-06-10 (notturno)
   Fix di contrasto misurati (WCAG 1.4.3) e unificazione palette.
   ============================================================ */

/* Nav header: link sempre leggibili su blu istituzionale
   (su news.html ereditavano navy su blu, 1.83:1) */
.site-header__nav > a,
.site-header > nav > a,
.site-header nav > a:not([class*="cpanel"]):not([class*="brand"]) { color: #fff !important; }
.site-header__nav > a:hover,
.site-header nav > a:not([class*="cpanel"]):not([class*="brand"]):hover { color: #F4D64E !important; }

/* Toggle animazione (home): testo era 1.03:1, invisibile.
   Specificita alta per battere la regola inline "html body ..." */
html body button.ic-anim-toggle,
html body button.ic-anim-toggle .ic-anim-toggle__txt,
html body .ic-anim-toggle__txt { color: rgba(255,255,255,.85) !important; }

/* Link nudi nel footer scuro (EUPL, CC BY): erano 1.16:1 */
.ic-footer-v3 a:not([class]) { color: #9CC3E8 !important; text-decoration: underline; }
.ic-footer-v3 a:not([class]):hover { color: #fff !important; }

/* Bottone Telefono schede comune: bianco su ciano 2.1:1 -> blu accessibile */
.ms-btn-phone { background: linear-gradient(#2D8FD9, #0D47A1) !important; }

/* CTA card opportunita (news): bianco su ambra/rosa sotto soglia ->
   scurisco il fondo conservando la tinta di categoria */
.jc-card__cta { background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)) !important; }

/* Contatore filtri news: 4.15 -> conforme */
.nt-acc__count { color: #55606E !important; }
/* ...ma quando e attivo (badge pieno scuro) il testo torna bianco */
.nt-acc__count[data-active="true"] { color: #fff !important; }

/* ============================================================
   FIRMA NOTTURNA - indicatore di lettura
   Barra di avanzamento oro sotto l'header: orientamento immediato
   nelle pagine lunghe, zero JavaScript, ignorata dai vecchi browser
   e da chi preferisce ridurre il movimento.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    body::before {
      content: "";
      position: fixed; top: 0; left: 0; z-index: 3000;
      width: 100%; height: 3px;
      background: linear-gradient(90deg, #C8A046, #F4D64E);
      transform-origin: 0 50%; transform: scaleX(0);
      animation: icp-reading linear both;
      animation-timeline: scroll(root);
      pointer-events: none;
    }
    @keyframes icp-reading { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}


/* ---------- 2026-06-11: cal-trio (pagina Eventi) - la colonna mappa
   veniva tagliata: i contenuti forzavano i track 1fr oltre il
   contenitore. minmax(0,1fr) li vincola; min-width:0 sui figli. ---------- */
@media (min-width: 1025px) {
  .cal-trio { grid-template-columns: minmax(0,1fr) 360px minmax(0,1fr) !important; }
  .cal-trio > * { min-width: 0; }
}


/* ============================================================
   2026-06-11: TAB BAR SCHEDE COMUNE - mobile.
   Su mobile le 10 etichette collassavano sovrapponendosi.
   Solo layout: scorrimento orizzontale con snap e sfumatura come
   affordance. I colori sono del tema PRO (ic-comune-pro.js, palette
   brand: testo navy, attivo sottolineato, icone #0D47A1).
   ============================================================ */
@media (max-width: 820px) {
  .comune-tabs { overflow: hidden; }
  .comune-tabs::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95));
    pointer-events: none;
  }
  .comune-tabs__scroll {
    display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scroll-padding-left: 14px;
    scrollbar-width: none;
  }
  .comune-tabs__scroll::-webkit-scrollbar { display: none; }
  .comune-tabs__btn {
    flex: 0 0 auto !important; scroll-snap-align: start;
    white-space: nowrap !important;
    width: auto !important; max-width: none !important; overflow: visible !important;
    min-height: 44px;
  }
  .comune-tabs__btn span { display: inline !important; font-size: inherit !important; }
}


/* ============================================================
   2026-06-11: RITMO TIPOGRAFICO SCHEDE COMUNE
   Richiesta: centratura, armonia delle misure, simmetria, formato
   che migliora la leggibilita. Asse centrale unico per gli header
   di sezione (occhiello + titolo + sottotitolo), scala modulare,
   font condensed riservato ai titoli display, card uniformi.
   ============================================================ */

/* --- Header di sezione: blocco simmetrico su asse centrale ---
   (specificita "html body" per battere le regole di pari peso) --- */
html body .comune-panel > h2 {
  text-align: center !important;
  font-size: clamp(30px, 3.4vw, 42px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  text-wrap: balance;
}
html body .comune-panel .comune-panel__lead,
html body main#main .comune-panel__lead {
  text-align: center !important;
  max-width: 62ch !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-top: 0 !important;
  margin-bottom: 44px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #51606F !important;
  text-wrap: balance;
  box-sizing: border-box;
}

/* --- Fascia titolo sotto-sezione (es. "Calendario"): misurata,
       allineata al ritmo, niente effetto banda piena --- */
.comune-panel .ic-acc-head {
  font-size: 21px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  padding: 14px 18px !important;
  border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
}

/* --- Card elenco (eventi, uffici, numeri utili): scala coerente --- */
.comune-panel ul.info-list { gap: 18px !important; }
.comune-panel ul.info-list > li {
  padding: 20px 22px !important;
  border-radius: 14px !important;
  border: 0.5px solid rgba(20, 33, 46, 0.12) !important;
  box-shadow: 0 1px 2px rgba(9,34,58,.05), 0 6px 18px rgba(9,34,58,.05);
  display: flex; flex-direction: column;
}
html body .comune-panel .info-list .item-title,
html body main#main .comune-panel .info-list .item-title {
  font-family: 'Titillium Web', system-ui, sans-serif !important; /* il condensed resta ai titoli display */
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 6px !important;
  min-height: 0 !important;
}
html body .comune-panel .info-list .item-meta {
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  color: #51606F !important;
  margin: 0 0 4px !important;
}
html body .comune-panel .info-list > li > p {
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: #3C4A58 !important;
  max-width: 60ch;
  margin: 6px 0 0 !important;
}

/* --- Misura di lettura nei pannelli: mai righe a tutta larghezza --- */
.comune-panel p:not([class]) { max-width: 70ch; }

/* --- Mobile: stessa gerarchia, misure ridotte in proporzione --- */
@media (max-width: 768px) {
  .comune-panel > h2 { font-size: clamp(26px, 7vw, 30px) !important; }
  .comune-panel > .comune-panel__lead { font-size: 16.5px !important; margin-bottom: 32px !important; }
  .comune-panel .ic-acc-head { font-size: 19px !important; }
}


/* ============================================================
   2026-06-11: TRE STATI per le CTA azzurre (base / passaggio /
   selezione). Applicato alle classi gia azzurre del sito:
   - .ms-btn-phone   (Telefono, scheda comune)
   - .btn--blu       (Portami all'evento, landing eventi)
   Base: invariata (azzurro brand, testo bianco AA).
   Passaggio: doppio anello bianco+blu, leggera luminosita.
   Selezione: navy pieno con bordo interno chiaro, scala 0.97.
   ============================================================ */
.ms-btn-phone, .btn--blu {
  transition: box-shadow .18s ease, transform .18s ease, filter .18s ease !important;
}
.ms-btn-phone:hover, .btn--blu:hover {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(13, 71, 161, .5) !important;
  filter: brightness(1.06);
}
.ms-btn-phone:active, .btn--blu:active {
  background: linear-gradient(#13345C, #09223A) !important;
  box-shadow: inset 0 0 0 2px rgba(91, 196, 255, .55) !important;
  transform: scale(.97);
  filter: none;
}
.ms-btn-phone:focus-visible, .btn--blu:focus-visible {
  outline: 3px solid #0D47A1 !important;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ms-btn-phone, .btn--blu { transition: none !important; }
  .ms-btn-phone:active, .btn--blu:active { transform: none; }
}