/* InfoComuni · Quality polish (28-04-2026)
   Rifiniture finali: focus, contrasti, smooth scroll, prevenzione layout shifts.
*/

/* === Smooth scroll + offset anchor sotto header sticky === */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* === Focus visibile WCAG 2.4.7 (AA) ovunque === */
:focus-visible {
  outline: 3px solid #ffcc33 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #ffcc33 !important;
  outline-offset: 2px !important;
}

/* === Skip-link visibile su focus === */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 99999;
  background: #0b2340;
  color: #ffcc33;
  padding: 12px 18px;
  border-radius: 0 0 8px 8px;
  font: 700 14px/1 'Inter', system-ui, sans-serif;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus, .skip-link:focus-visible {
  top: 0;
  outline: 3px solid #ffcc33;
}

/* === Tap target minimi 44×44 px (WCAG 2.5.5) === */
@media (pointer: coarse) {
  button, a, [role="button"], input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* === Prevenzione layout shift su immagini senza dimensioni === */
img:not([width]):not([height]) { aspect-ratio: attr(width) / attr(height); }

/* === Stato loading con shimmer === */
[aria-busy="true"] {
  position: relative;
  overflow: hidden;
}
[aria-busy="true"]::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  animation: ic-shimmer 1.4s infinite;
  pointer-events: none;
}
@keyframes ic-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@media (prefers-reduced-motion: reduce) { [aria-busy="true"]::after { animation: none; } }

/* === Forza contrasti minimi su footer dark (WCAG AAA su body text) === */
.site-footer-v2 .brand-sub,
.site-footer-v2 .contact-col .addr,
.site-footer-v2 a {
  color: #d4dde4 !important; /* >= 7:1 su #080e18 */
}

/* === Stato online/offline (gestito da ic-pwa.js) === */
html[data-net="offline"] body { filter: grayscale(0.15); }

/* === Print-friendly === */
@media print {
  .bottom-nav, .ic-totem-bar, .ic-totem-langs,
  #ic-pwa-prompt, #ic-sw-update, #ic-offline-bar,
  .skip-link, [data-totem-hide] { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}

/* === Selezione testo branded === */
::selection { background: #ffcc33; color: #0b2340; }
::-moz-selection { background: #ffcc33; color: #0b2340; }

/* ============================================================
   FIX v9.4 — Card province: restyling pulito, no overlap,
   no doppio bordo. (Feedback utente 28-04 h02:30)
   ============================================================ */

/* Rimuove badge "BA/BR/FG..." sovrapposto al numero comuni */
.prov-pill-wrap::before,
.prov-pill::before { content: none !important; display: none !important; }

/* Tooltip "Bari" tramite ::after sul summary: lo riposiziono per non interferire */
.prov-pill::after,
.prov-pill-wrap > .prov-pill::after {
  display: none !important;
  content: none !important;
}

/* Singolo bordo: il wrap ha bordo, il summary interno è trasparente */
#provPills .prov-pill-wrap,
.prov-pills .prov-pill-wrap {
  border: 1px solid rgba(200, 155, 60, 0.18) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(11, 35, 64, 0.04) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  overflow: hidden !important;
  position: relative !important;
}
#provPills .prov-pill-wrap:hover,
.prov-pills .prov-pill-wrap:hover {
  border-color: rgba(200, 155, 60, 0.5) !important;
  box-shadow: 0 4px 12px rgba(200, 155, 60, 0.18) !important;
  transform: translateY(-1px);
}

/* Stato selezionato: SOLO un bordo gold pieno + bg lievissimo, niente overlay */
#provPills .prov-pill-wrap[open],
.prov-pills .prov-pill-wrap[open] {
  border-color: #c89b3c !important;
  border-width: 2px !important;
  background: #fdfaf2 !important;
  box-shadow: 0 6px 18px rgba(200, 155, 60, 0.22) !important;
}

/* Summary (cliccabile interno) trasparente: niente bordo */
#provPills .prov-pill,
.prov-pills .prov-pill {
  border: 0 !important;
  background: transparent !important;
  padding: 18px 18px 16px !important;
  box-shadow: none !important;
  list-style: none !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: relative !important;
}
#provPills .prov-pill::-webkit-details-marker,
.prov-pills .prov-pill::-webkit-details-marker { display: none !important; }

/* Numero "41 comuni" come pill compatto in alto */
#provPills .prov-pill > small,
.prov-pills .prov-pill > small {
  display: inline-block !important;
  align-self: flex-start !important;
  background: #fdf7e7 !important;
  color: #8a6a1f !important;
  font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(200, 155, 60, 0.25) !important;
  margin: 0 0 6px !important;
}
#provPills .prov-pill > small::before { content: ''; }
#provPills .prov-pill > small::after { content: ' comuni'; opacity: 0.85; }

/* Nome provincia: typografia chiara, niente overlap */
#provPills .prov-pill,
.prov-pills .prov-pill { font-size: 32px !important; font-weight: 900 !important; color: #0b2340 !important; }
#provPills .prov-pill .ic-prov-meta,
.prov-pills .prov-pill .ic-prov-meta {
  display: block !important;
  font: 500 12px/1.4 'Inter', system-ui, sans-serif !important;
  color: rgba(11, 35, 64, 0.55) !important;
  margin-top: 4px !important;
}

/* Chevron a destra in basso */
#provPills .prov-pill__chev,
.prov-pills .prov-pill__chev {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  width: 18px !important;
  height: 18px !important;
  color: #c89b3c !important;
  transition: transform 0.2s ease !important;
}
#provPills .prov-pill-wrap[open] .prov-pill__chev,
.prov-pills .prov-pill-wrap[open] .prov-pill__chev { transform: rotate(180deg); }

/* Dropdown "Capoluogo di provincia": singolo bordo, no doppia */
.prov-dd {
  border: 0 !important;
  background: transparent !important;
  padding: 8px 0 0 !important;
}
.prov-dd-cap {
  border: 1px solid rgba(200, 155, 60, 0.25) !important;
  background: #fdfaf2 !important;
  border-radius: 10px !important;
  padding: 12px !important;
  box-shadow: none !important;
}
.prov-dd-cap:hover {
  border-color: #c89b3c !important;
  background: #fbf3df !important;
}

/* === FIX v9.4 BIS — Toolbar mobile MAI su desktop (bulletproof) === */
@media (min-width: 900px) {
  body > nav.bottom-nav,
  body > .bottom-nav,
  body > #bottom-more-menu,
  body > .bottom-more,
  body > .bottom-more-overlay,
  html body nav.bottom-nav,
  html body .bottom-nav,
  html body #bottom-more-menu,
  html body .bottom-more,
  html body .bottom-more-overlay {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  /* Body padding-bottom non deve esistere in desktop */
  html body { padding-bottom: 0 !important; }
}

/* ============================================================
   FIX CRITICI v9.2 — feedback utente 28/04 h01
   ============================================================ */

/* === [1] DESKTOP: ELIMINA toolbar mobile (bottom-nav + bottom-more)
       Specificity altissima per battere ic-fixes.js / main.css inline */
@media (min-width: 900px) {
  html body nav.bottom-nav,
  html body .bottom-nav,
  html body #bottom-more-menu,
  html body .bottom-more,
  html body .bottom-more-overlay,
  html body .ic-appbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: static !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  html body { padding-bottom: 0 !important; }
}

/* === [2] FOOTER: SEMPRE in flusso normale, MAI fisso o sticky
       Forza static su tutti i pattern di footer */
html body footer,
html body footer.site-footer,
html body footer.site-footer-v2,
html body .site-footer,
html body .site-footer-v2,
html body footer[role="contentinfo"] {
  position: static !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 1 !important;
  transform: none !important;
}

/* === [3] LAYOUT GLOBALE: sticky footer pattern (footer in fondo, contenuto cresce) */
html, body { min-height: 100%; }
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
body > main,
body > #main,
body > main#main,
body > .main-container {
  flex: 1 0 auto !important;
  position: relative;
  z-index: 2;
}
body > footer,
body > .site-footer,
body > .site-footer-v2 {
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* === [4] SEZIONE COMUNI: padding-bottom adeguato per non finire sotto altre UI
       Quando si carica "Carica altri comuni" la lista cresce, deve restare visibile */
#provPills, .prov-pills,
[id*="comuni"], [class*="comuni-list"], [class*="comuni-grid"],
section.comuni-section, section.section-comuni {
  position: relative;
  z-index: 3;
  margin-bottom: 24px !important;
}
/* Su mobile aggiungiamo spazio per la bottom-nav */
@media (max-width: 899px) {
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  body > footer,
  body > .site-footer,
  body > .site-footer-v2 {
    margin-bottom: 0 !important;
  }
}

/* === [PANNELLO A11Y] Fix overlap titolo "Accessibilità" sopra i bottoni topbar === */
.ica-head {
  position: relative !important;
  padding-bottom: 12px !important;
}
.ica-head .ica-head__topbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  position: relative !important;
  z-index: 2 !important;
}
.ica-head .ica-head__topbar > * { flex-shrink: 0; }
.ica-head .ica-head__lang { margin-left: auto; margin-right: 8px; }
.ica-head .ica-head__title {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  text-align: center !important;
  margin: 8px auto 0 !important;
  padding: 6px 18px !important;
  background: #ffcc33 !important;
  color: #0b2340 !important;
  border-radius: 999px !important;
  font: 700 14px/1.2 'Inter', system-ui, sans-serif !important;
  width: fit-content !important;
  max-width: calc(100% - 32px) !important;
}
/* Eventuali "NaN" stray nel pannello a11y → nascondi */
.ica-panel > *:empty,
.ica-panel:not(.ica-section):empty { display: none !important; }
.ica-panel *:not(input):not(textarea):not(select):not([contenteditable]) {
  /* niente */
}

/* === [5] ESCI KIOSK: rendi il bottone più evidente (rosso-arancio anti-conferma) */
html.ic-totem .ic-totem-bar [data-totem-action="exit"] {
  background: linear-gradient(180deg, rgba(177,59,59,0.14) 0%, rgba(177,59,59,0.04) 100%);
  border: 1px solid rgba(177,59,59,0.55);
  border-radius: 10px;
}
html.ic-totem .ic-totem-bar [data-totem-action="exit"] svg { stroke: #ff8a8a !important; }
html.ic-totem .ic-totem-bar [data-totem-action="exit"] span {
  font-size: 11px;
  letter-spacing: .08em;
  color: #ffd9d9;
}
html.ic-totem .ic-totem-bar [data-totem-action="exit"]:hover,
html.ic-totem .ic-totem-bar [data-totem-action="exit"]:focus-visible {
  background: rgba(177,59,59,0.28);
  border-color: #ff6868;
}
html.ic-totem .ic-totem-bar [data-totem-action="exit"]::before {
  content: "Tieni premuto 2s";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #0b2340;
  color: #ffd9d9;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
html.ic-totem .ic-totem-bar [data-totem-action="exit"]:hover::before,
html.ic-totem .ic-totem-bar [data-totem-action="exit"]:focus-visible::before {
  opacity: 1;
}