/* Mappa interattiva (page-mappa-interattiva.php): stili della pagina, palette e font del tema.
   File statico caricato solo su questa pagina (non compilato con pnpm). */
:root {
    --pm-primario: #1D5E68;
    --pm-secondario: #13434D;
    --pm-ciano: #39BBD0;
    --pm-ambra: #EAA51D;
    --pm-testo: #191919;
    --pm-testo-2: #455A64;
    --pm-bordo: #e3e3e3;
    --pm-fondo: #f6f6f6;
    --pm-fondo-tenue: rgba(57, 187, 208, 0.06);
    --pm-altezza-mappa: calc(100vh - 210px);
}

/* Intro */
/* Titolo e primo paragrafo: intestazione standard del tema (.title-wrapper, .molise-info .description-text), come "Numeri utili" */
.pm-mappa-intro { padding-bottom: 8px; }
.pm-mappa-intro .description-text > p:last-child { margin-bottom: 0; }
/* Barra superiore: contatore, azzera, schede */
.pm-mappa-app { padding: 18px 0 48px; }
.pm-mappa-barra {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    padding: 0 0 14px; margin-left: 360px;
}
.pm-contatore {
    margin: 0; font-family: "Jost"; font-weight: 700; font-size: 1.15rem; color: var(--pm-secondario);
    outline-offset: 4px;
}
.pm-contatore.pm-zero { color: #B00020; }
.pm-azzera, .pm-apri-filtri, .pm-schede button, .pm-legenda-btn, .pm-elenco-altri, .pm-mostra-risultati, .pm-chiudi {
    font-family: "Jost"; cursor: pointer;
}
.pm-azzera {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 2px;
    color: var(--pm-primario); font-weight: 600; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px;
}
.pm-azzera:disabled { color: #8a8a8a; text-decoration: none; cursor: default; }
.pm-schede { margin-left: auto; display: inline-flex; border: 1px solid var(--pm-primario); }
.pm-schede button {
    background: #fff; color: var(--pm-primario); border: 0; padding: 7px 18px; font-weight: 600; font-size: 0.9rem;
}
.pm-schede button[aria-selected="true"] { background: var(--pm-primario); color: #fff; }
.pm-apri-filtri { display: none; }

/* Layout */
.pm-mappa-layout { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.pm-filtri {
    background: #fff; border: 1px solid var(--pm-bordo); position: sticky; top: 100px;
    max-height: var(--pm-altezza-mappa); display: flex; flex-direction: column; min-height: 560px;
}
.pm-filtri-testa { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px; }
.pm-filtri-testa h2 { font-family: "Jost"; font-weight: 800; font-size: 1.35rem; margin: 0; }
.pm-chiudi { display: none; background: none; border: 0; padding: 6px; color: #000; }
/* position: relative = riferimento delle caselle nascoste (position: absolute) dei filtri: restano dentro l'area che scorre
   invece di posizionarsi rispetto al pannello sticky e allungare la pagina oltre il footer */
.pm-filtri-corpo { overflow-y: auto; padding: 4px 18px 18px; flex: 1; position: relative; }
.pm-filtri-piede { display: none; }

.pm-gruppo { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.pm-gruppo legend, .pm-label {
    font-family: "Jost"; font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; color: #000; float: none; width: auto; display: block;
}
.pm-gruppo .form-select { border-radius: 0; font-family: "Open Sans"; font-size: 0.9rem; border-color: #ACACAC; }

/* Tipi di contenuto */
.pm-tipi { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.pm-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pm-check + label {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid transparent; cursor: pointer;
    font-family: "Jost"; font-weight: 500; font-size: 0.95rem; color: #000; position: relative; padding-left: 36px;
}
.pm-check + label::before {
    content: ""; position: absolute; left: 8px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
    border: 2px solid var(--pm-primario); background: #fff;
}
.pm-check:checked + label::before {
    background: var(--pm-primario) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.pm-check:not(:checked) + label .pm-tondo { filter: grayscale(1); opacity: .55; }
.pm-check:not(:checked) + label .pm-tipo-nome { color: #6b6b6b; }
.pm-check:focus-visible + label { outline: 3px solid var(--pm-ambra); outline-offset: 1px; }
.pm-check + label:hover { background: var(--pm-fondo-tenue); }
.pm-tipo-nome { flex: 1; }
.pm-conta { font-family: "Open Sans"; font-size: 0.78rem; color: var(--pm-testo-2); background: var(--pm-fondo); padding: 1px 8px; border-radius: 10px; }

.pm-tondo { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,.08); }

/* Filtri per tipo */
.pm-filtri-sezione { border-top: 1px solid var(--pm-bordo); padding-top: 14px; margin-top: 4px; }
.pm-sez-titolo { display: flex; align-items: center; gap: 8px; font-family: "Jost"; font-weight: 700; font-size: 1.05rem; margin: 0 0 10px; color: var(--pm-secondario); }
.pm-filtri-sezione .pm-gruppo { margin-bottom: 12px; }
.pm-filtri-sezione .pm-gruppo legend { font-size: 0.85rem; font-weight: 600; color: var(--pm-testo-2); text-transform: uppercase; letter-spacing: .04em; }
.pm-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pm-chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pm-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #9aa7ad; background: #fff;
    font-family: "Open Sans"; font-size: 0.8rem; color: var(--pm-testo); cursor: pointer; line-height: 1.35;
}
.pm-chip:hover { border-color: var(--pm-primario); }
.pm-chip-n { font-size: 0.72rem; color: var(--pm-testo-2); }
.pm-chip-input:checked + .pm-chip { background: var(--pm-primario); border-color: var(--pm-primario); color: #fff; }
.pm-chip-input:checked + .pm-chip .pm-chip-n { color: #d7eef2; }
.pm-chip-input:focus-visible + .pm-chip { outline: 3px solid var(--pm-ambra); outline-offset: 1px; }

/* Mappa */
.pm-mappa-area { position: relative; min-width: 0; }
.pm-pannello-mappa { position: relative; }
.pm-mappa { height: var(--pm-altezza-mappa); min-height: 560px; background: #e9eef0; border: 1px solid var(--pm-bordo); }
.pm-pin { background: none; border: 0; }
.pm-pin svg { filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); transition: transform .12s; transform-origin: 50% 100%; }
.pm-pin:hover svg, .pm-pin:focus svg { transform: scale(1.12); }
.pm-pin:focus { outline: none; }
.pm-pin:focus-visible svg { outline: 3px solid var(--pm-ambra); outline-offset: 2px; border-radius: 50%; }
.pm-cluster:focus-visible { outline: 3px solid var(--pm-ambra); outline-offset: 2px; }
.pm-cluster {
    background: rgba(29, 94, 104, .22); border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.pm-cluster span {
    display: flex; align-items: center; justify-content: center; width: calc(100% - 8px); height: calc(100% - 8px);
    background: var(--pm-primario); color: #fff; border: 2px solid #fff; border-radius: 50%;
    font-family: "Jost"; font-weight: 700; font-size: 0.9rem; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* Popup */
.pm-popup .leaflet-popup-content-wrapper { border-radius: 0; padding: 0; overflow: hidden; }
.pm-popup .leaflet-popup-content { margin: 0; width: 300px !important; max-width: 78vw; }
.pm-popup a.leaflet-popup-close-button { color: #fff; background: rgba(0,0,0,.45); width: 28px; height: 28px; font-size: 20px; line-height: 26px; top: 6px; right: 6px; border-radius: 50%; }
.pm-pop-img { display: block; width: 100%; height: 150px; object-fit: cover; background: var(--pm-fondo); }
.pm-pop-senza { height: 96px; display: flex; align-items: center; justify-content: center; opacity: .92; }
.pm-pop-corpo { padding: 12px 16px 16px; }
.pm-pop-tipo { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; font-family: "Jost"; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pm-testo-2); }
.pm-pop-titolo { font-family: "Jost"; font-weight: 700; font-size: 1.1rem; line-height: 1.25; margin: 0 0 6px; color: #000; outline: none; }
.pm-pop-luogo, .pm-pop-data { margin: 0 0 6px !important; font-family: "Open Sans"; font-size: 0.8rem; color: var(--pm-testo-2); }
.pm-pop-luogo::before { content: ""; display: inline-block; width: 10px; height: 13px; margin-right: 5px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13'%3E%3Cpath d='M5 0C2.2 0 0 2.2 0 4.9 0 8.6 5 13 5 13s5-4.4 5-8.1C10 2.2 7.8 0 5 0zm0 6.6a1.7 1.7 0 1 1 0-3.4 1.7 1.7 0 0 1 0 3.4z' fill='%231D5E68'/%3E%3C/svg%3E") no-repeat; }
.pm-pop-estratto { margin: 0 0 12px !important; font-family: "Open Sans"; font-size: 0.85rem; line-height: 1.45; color: var(--pm-testo); }
.pm-pop .button-primary a { text-decoration: none; display: inline-block; }
.pm-pop .button-primary a > div { font-family: "Jost"; font-size: 0.85rem; }
.pm-pop .button-primary a:focus-visible { outline: 3px solid var(--pm-ambra); outline-offset: 2px; }

/* Legenda */
.pm-legenda {
    position: absolute; left: 12px; bottom: 24px; z-index: 500; background: rgba(255,255,255,.96);
    border: 1px solid var(--pm-bordo); box-shadow: 0 2px 8px rgba(0,0,0,.15); max-width: 220px;
}
.pm-legenda-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0;
    padding: 8px 12px; font-weight: 700; font-size: 0.9rem; color: #000;
}
.pm-legenda-btn[aria-expanded="false"] svg { transform: rotate(-90deg); }
.pm-legenda-btn:focus-visible { outline: 3px solid var(--pm-ambra); outline-offset: -3px; }
.pm-legenda-lista { list-style: none; margin: 0; padding: 0 12px 10px; display: grid; gap: 6px; }
.pm-legenda-lista li { display: flex; align-items: center; gap: 8px; font-family: "Open Sans"; font-size: 0.8rem; color: var(--pm-testo); }

/* Elenco */
.pm-pannello-elenco { border: 1px solid var(--pm-bordo); min-height: 560px; background: #fff; padding: 8px 0; }
.pm-elenco-lista { list-style: none; margin: 0; padding: 0; columns: 2 340px; column-gap: 0; }
.pm-voce { display: flex; align-items: center; gap: 12px; padding: 10px 18px; break-inside: avoid; border-bottom: 1px solid #f0f1f2; }
.pm-voce a { font-family: "Jost"; font-weight: 600; color: #000; text-decoration: none; font-size: 0.98rem; }
.pm-voce a:hover, .pm-voce a:focus-visible { color: var(--pm-primario); text-decoration: underline; }
.pm-voce p { margin: 0; font-family: "Open Sans"; font-size: 0.78rem; color: var(--pm-testo-2); }
.pm-elenco-altri { display: block; margin: 16px auto 8px; background: var(--pm-primario); color: #fff; border: 0; padding: 10px 18px; font-weight: 700; font-size: 0.9rem; }

/* Attribuzione più leggibile */
.pm-mappa .leaflet-control-attribution { font-size: 11px; }

/* ── Mobile e tablet ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    :root { --pm-altezza-mappa: calc(100vh - 240px); }
    .pm-mappa-barra { margin-left: 0; padding: 0 16px 12px; gap: 8px 10px; }
    .pm-contatore { width: 100%; font-size: 1.05rem; }
    .pm-apri-filtri {
        display: inline-flex; align-items: center; gap: 8px; background: var(--pm-primario); color: #fff; border: 0;
        padding: 7px 14px; font-weight: 700; font-size: 0.95rem;
    }
    .pm-azzera { font-size: 0.85rem; }
    .pm-schede button { padding: 6px 12px; font-size: 0.85rem; }
    .pm-badge { background: var(--pm-ambra); color: #13434D; border-radius: 10px; padding: 0 7px; font-size: 0.78rem; }
    .pm-mappa-layout { display: block; }
    .pm-mappa { min-height: 420px; border-left: 0; border-right: 0; }
    .pm-filtri {
        position: fixed; inset: 0; z-index: 2000; max-height: none; min-height: 0; border: 0;
        transform: translateY(100%); transition: transform .25s ease; visibility: hidden;
    }
    .pm-filtri.pm-aperto { transform: none; visibility: visible; }
    .pm-filtri-testa { border-bottom: 1px solid var(--pm-bordo); padding: 14px 16px; }
    .pm-chiudi { display: inline-flex; }
    .pm-filtri-corpo { padding: 14px 16px; }
    .pm-filtri-piede { display: block; padding: 12px 16px; border-top: 1px solid var(--pm-bordo); background: #fff; }
    .pm-mostra-risultati { width: 100%; background: var(--pm-primario); color: #fff; border: 0; padding: 12px; font-weight: 700; font-size: 1rem; }
    .pm-legenda { left: 8px; bottom: 18px; max-width: 200px; }
    .pm-pannello-elenco { border-left: 0; border-right: 0; }
    body.pm-no-scroll { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .pm-filtri, .pm-pin svg { transition: none; }
}