/* ic-prov-dd-hover.css — Ripristina il menù a tendina delle province come
   OVERLAY assoluto su HOVER/focus/click, mantenendo la grafica redesign v3.

   Contesto: l'overlay corretto è già definito in ic-sprint9h.css (.prov-dd[open]
   absolute, top:100%, centrato, ombra). Veniva però annullato da ic-fix-night-2.css
   che forza `.prov-dd.prov-dd { position:static }` (in-flow → la card si allungava).
   Qui ri-affermiamo l'overlay con specificità tripla `.prov-dd.prov-dd.prov-dd`
   e caricamento PER ULTIMO in index.html, così vince la cascade.
   L'apertura su hover è gestita da ic-prov-dd-hover.js. (2026-06-01) */

/* L'hero province ha `overflow:hidden` (main.css .hero--puglia-map) per contenere
   lo sfondo satellitare: questo RITAGLIA il dropdown assoluto e lo rende invisibile.
   Lo sfondo (.hero__map-bg / .hero-slides / ::after) è `inset:0`, quindi resta
   comunque entro i bordi: riaprire l'overflow è sicuro. Senza questo, il pannello
   non compare (era il motivo per cui in passato era stato reso in-flow). */
html body section.hero.hero--puglia-map,
html body section.hero.hero--puglia-map .hero-content,
html body section.hero.hero--puglia-map .hero-content--compact {
  overflow: visible !important;
}

/* Il wrap è l'ancora del posizionamento */
html body #provPills .prov-pill-wrap,
html body .prov-pills  .prov-pill-wrap { position: relative !important; }

/* CRITICO — la causa per cui il pannello era invisibile pur esistendo:
   ic-prov-pill-refine.css ha `.prov-pill-wrap.prov-pill-wrap { overflow:hidden !important }`
   (specificità 1,2,2) che ritaglia il dropdown assoluto al box della pill (~78px).
   Quando la provincia è APERTA forziamo overflow:visible con specificità superiore
   (tripla classe + [open] = 1,4,2) così il pannello può uscire. Le pill chiuse
   restano col loro clip arrotondato. */
html body #provPills .prov-pill-wrap[open].prov-pill-wrap.prov-pill-wrap,
html body .prov-pills  .prov-pill-wrap[open].prov-pill-wrap.prov-pill-wrap {
  overflow: visible !important;
}

/* Pannello come overlay a tendina (batte position:static di ic-fix-night-2.css) */
html body #provPills .prov-pill-wrap[open] .prov-dd.prov-dd.prov-dd,
html body .prov-pills  .prov-pill-wrap[open] .prov-dd.prov-dd.prov-dd {
  display: block !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 50% !important;
  right: auto !important;
  width: min(560px, 92vw) !important;
  max-width: none !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
}

/* Bridge invisibile: copre i 6px di gap tra pill e pannello così lo spostamento
   del mouse dalla pill al dropdown non perde l'hover (è un discendente del wrap). */
html body #provPills .prov-pill-wrap[open] .prov-dd.prov-dd.prov-dd::before,
html body .prov-pills  .prov-pill-wrap[open] .prov-dd.prov-dd.prov-dd::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  left: 0 !important;
  right: 0 !important;
  height: 6px !important;
  background: transparent !important;
}

/* Edge clamp: la prima pill allinea il dropdown a sinistra, l'ultima a destra,
   per non sforare il viewport quando la pill è al bordo della riga. */
html body #provPills .prov-pill-wrap:first-child[open] .prov-dd.prov-dd.prov-dd,
html body .prov-pills  .prov-pill-wrap:first-child[open] .prov-dd.prov-dd.prov-dd {
  left: 0 !important; right: auto !important; transform: none !important;
}
html body #provPills .prov-pill-wrap:last-child[open] .prov-dd.prov-dd.prov-dd,
html body .prov-pills  .prov-pill-wrap:last-child[open] .prov-dd.prov-dd.prov-dd {
  left: auto !important; right: 0 !important; transform: none !important;
}

/* Mobile (no hover): il dropdown diventa overlay fisso a tutto schermo,
   coerente con il comportamento già previsto in ic-sprint9h.css. */
@media (max-width: 720px) {
  html body #provPills .prov-pill-wrap[open] .prov-dd.prov-dd.prov-dd,
  html body .prov-pills  .prov-pill-wrap[open] .prov-dd.prov-dd.prov-dd,
  html body #provPills .prov-pill-wrap:first-child[open] .prov-dd.prov-dd.prov-dd,
  html body .prov-pills  .prov-pill-wrap:first-child[open] .prov-dd.prov-dd.prov-dd,
  html body #provPills .prov-pill-wrap:last-child[open] .prov-dd.prov-dd.prov-dd,
  html body .prov-pills  .prov-pill-wrap:last-child[open] .prov-dd.prov-dd.prov-dd {
    position: fixed !important;
    inset: auto 4vw 5vh 4vw !important;
    top: auto !important;
    left: 4vw !important;
    right: 4vw !important;
    width: auto !important;
    max-width: none !important;
    max-height: 70vh !important;
    transform: none !important;
  }
}