.bfvg-territory-map { box-sizing: border-box; display: grid; grid-template-rows: auto auto auto; position: relative; width: 100%; padding: 0; color: var(--wp--preset--color--ink, #1e2420); background: transparent; }
/* Keep selection announcements available to screen readers without a visible heading. */
.bfvg-territory-map .bfvg-territory-map__selection { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.bfvg-territory-map__canvas, .bfvg-territory-map__svg { grid-area: 1 / 1; }
/* wpautop, quando la mappa e' inserita via shortcode in un template, racchiude l'SVG in un
 * <p> senza classe: quel <p> veniva collocato in una riga sotto il canvas appena il canvas
 * compariva (SVG "in fondo" per un istante). display:contents riporta l'SVG in griglia 1/1. */
.bfvg-territory-map > p:not([class]) { display: contents; }
.bfvg-territory-map__canvas, .bfvg-territory-map__svg { box-sizing: border-box; }
.bfvg-territory-map__svg { display: block; width: 100%; height: clamp(24rem, 53vw, 42rem); }
/* La cartina SVG (stessa proiezione e stessa cornice della mappa Leaflet) resta
 * visibile finche' le tile sono pronte; poi la mappa geografica sfuma sopra. */
.bfvg-territory-map__canvas { opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.bfvg-territory-map__canvas.is-ready { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .bfvg-territory-map__canvas { transition: none; } }
.bfvg-territory-map__area { cursor: pointer; outline: none; }
/* La cartina SVG e' il segnaposto della mappa Leaflet: stessi colori (base #e7ece5,
 * territori come il riempimento Leaflet a bassa opacita', territorio attivo in
 * petrolio) cosi' la sostituzione appare come l'arrivo delle tile, non come un
 * cambio di mappa. */
.bfvg-territory-map__svg { background: #e7ece5; border-radius: var(--bfvg-radius-media, 16px); }
.bfvg-territory-map__area > path { fill: #d3dcd3; stroke: #526d61; stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: fill .15s ease; }
.bfvg-territory-map__area:hover > path, .bfvg-territory-map__area:focus > path, .bfvg-territory-map__area.is-active > path { fill: #8ab1b4; stroke: #163f48; stroke-width: 2.5; }
.bfvg-territory-map__marker { pointer-events: none; }
.bfvg-territory-map__marker circle { fill: #fffdf9; stroke: #60776a; stroke-width: 1.6; }
.bfvg-territory-map__marker text { fill: #1e2420; font: 600 21px system-ui, sans-serif; }
.bfvg-territory-map__area.is-active .bfvg-territory-map__marker circle { fill: var(--wp--preset--color--accent, #1c6b7a); stroke: #163f48; }
.bfvg-territory-map__area.is-active .bfvg-territory-map__marker text { fill: #fff; }
.bfvg-territory-map--single .bfvg-territory-map__marker text { font-size: 30px; }
.bfvg-territory-map__area:focus .bfvg-territory-map__marker circle { stroke-width: 3; stroke: #c93e15; }
.bfvg-territory-map__legend { grid-area: 2 / 1; margin-top: .75rem; border-top: 1px solid var(--bfvg-line, #d5d8d3); }
/* Home and territory index already provide the numbered territory cards. */
.bikefvg-home-territories .bfvg-territory-map__legend,
.bikefvg-territories-index .bfvg-territory-map__legend { display: none; }
.bfvg-territory-map__legend summary { cursor: pointer; padding-block: .75rem; font-weight: 600; }
.bfvg-territory-map__legend ol { margin: 0; padding-left: 1.6rem; }
.bfvg-territory-map__legend li { padding: .3rem 0; }
.bfvg-territory-map__legend a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.bfvg-territory-map__legend a:hover, .bfvg-territory-map__legend a:focus { color: var(--wp--preset--color--accent, #1c6b7a); }
.bfvg-territory-map :is(summary, .bfvg-territory-map__legend a):focus-visible { outline: 2px solid var(--wp--preset--color--accent, #1c6b7a); outline-offset: 3px; }
.bfvg-territory-map .bfvg-territory-map__credit { grid-area: 3 / 1; margin: 0; padding: .45rem .65rem; background: rgba(255, 255, 255, .88); font-size: .75rem; line-height: 1.5; color: var(--wp--preset--color--ink-secondary, #536158); }
.bikefvg-home-territories .bikefvg-home-territories__map,
.bikefvg-territories-index .bikefvg-territories-index__map-frame { border: 0; background: transparent; box-shadow: none; }
.bikefvg-home-territories__map > .bfvg-territory-map { min-height: 0; }
@media (prefers-reduced-motion: reduce) { .bfvg-territory-map__area > path { transition: none; } }

/* The basemap and the territory geometries share Leaflet's geographic viewport. */
.bfvg-territory-map [hidden] { display: none !important; }
.bfvg-territory-map__canvas { width: 100%; height: clamp(24rem, 53vw, 42rem); position: relative; z-index: 0; border-radius: var(--bfvg-radius-media, 16px); background: #e7ece5; }
/* I tile da 256px si sovrappongono di 1px per chiudere i gap subpixel.
 * La fusione additiva Leaflet (plus-lighter) renderebbe bianchi questi bordi:
 * usare compositing normale, con specificita superiore alla regola vendor.
 * Non modificare transform: contiene il posizionamento geografico Leaflet. */
.bfvg-territory-map .leaflet-container img.leaflet-tile {
 mix-blend-mode: normal;
 width: 257px !important;
 height: 257px !important;
}
.bfvg-territory-map__geolink { outline: none; }
.bfvg-territory-map__geolink path { cursor: pointer; transition: fill-opacity .15s ease, fill .15s ease; }
.bfvg-territory-map__geolink:focus-visible path { stroke: #c93e15; stroke-width: 3; }
.bfvg-territory-map .bfvg-territory-map__number { pointer-events: none; display: grid; place-items: center; border: 1px solid #60776a; border-radius: 50%; background: #fffdf9; color: #1e2420; font: 600 12px/1 system-ui, sans-serif; box-sizing: border-box; }
.bfvg-territory-map .bfvg-territory-map__number.is-active { background: var(--wp--preset--color--accent, #1c6b7a); color: #fff; border-color: #163f48; }
.bfvg-territory-map .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; text-decoration: none; }
.bfvg-territory-map .leaflet-control-attribution { font-size: 11px; background: rgba(255, 255, 255, .95); }
/* A polygon activates the same card state as pointing directly at the card. */
.bikefvg-home-territories .bikefvg-home-territory-card:is(:hover, :focus-visible, .is-map-active),
.bikefvg-territories-index .bikefvg-territories-index__card:is(:hover, :focus-visible, .is-map-active) {
 border-color: var(--wp--preset--color--accent, #1c6b7a);
 background: color-mix(in srgb, var(--wp--preset--color--accent, #1c6b7a) 7%, var(--wp--preset--color--panel, #fff));
 box-shadow: 0 0 0 2px var(--wp--preset--color--accent, #1c6b7a);
}
@media (hover: hover) and (pointer: fine) {
 .bikefvg-home-territory-card.is-map-active, .bikefvg-territories-index__card.is-map-active { transform: translateY(-2px); }
}
@media (max-width: 35rem) {
 .bfvg-territory-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .bfvg-territory-map__geolink path { transition: none; } }

/* Mobile touch UX ---------------------------------------------------------
 * In pagina la mappa territoriale lascia il gesto verticale alla pagina.
 * Pan e pinch vengono riattivati solo in fullscreen, attivato esplicitamente
 * dal controllo dedicato. Questo vale per la stessa mappa usata in home e
 * nell'indice Territori. */
.bfvg-territory-map__fullscreen-control {
 display: none;
 margin: 10px;
}
.bfvg-territory-map__fullscreen-button {
 display: grid;
 place-items: center;
 width: 44px;
 height: 44px;
 padding: 0;
 border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink, #1e2420) 18%, transparent);
 border-radius: 10px;
 background: rgba(255, 253, 249, .96);
 /* .226 — colore di sistema (petrolio), coerente con il pulsante schermo
    intero della mappa principale e della Network Map. */
 color: var(--wp--preset--color--accent, #1c6b7a);
 box-shadow: 0 2px 8px rgba(30, 36, 32, .12);
 cursor: pointer;
}
.bfvg-territory-map__fullscreen-button svg {
 width: 21px;
 height: 21px;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.75;
 stroke-linecap: round;
 stroke-linejoin: round;
}
.bfvg-territory-map__fullscreen-button:focus-visible {
 outline: 2px solid var(--wp--preset--color--accent, #1c6b7a);
 outline-offset: 3px;
}

.bfvg-territory-map.is-touch-map .bfvg-territory-map__fullscreen-control { display: block; }

/* La regola Leaflet per touch-drag imposta touch-action:none/pinch-zoom.
 * Quando la mappa e' inline la sovrascriviamo esplicitamente, in modo che
 * uno swipe verticale iniziato sopra la cartografia continui la pagina. */
.bfvg-territory-map.is-mobile-inline-passive .bfvg-territory-map__canvas.leaflet-container {
 -ms-touch-action: pan-y;
 touch-action: pan-y pinch-zoom !important;
}
.bfvg-territory-map.is-mobile-inline-passive .leaflet-control-zoom { display: none; }

/* Fullscreen nativo + fallback per browser che non lo supportano sull'elemento. */
.bfvg-territory-map:is(:fullscreen, .is-pseudo-fullscreen) {
 box-sizing: border-box;
 width: 100vw;
 height: 100dvh;
 max-width: none;
 padding: 0;
 grid-template-rows: minmax(0, 1fr) auto auto;
 background: var(--wp--preset--color--paper, #f6f1ea);
}
.bfvg-territory-map.is-pseudo-fullscreen {
 position: fixed !important;
 inset: 0 !important;
 z-index: 100000 !important;
}
html.bfvg-territory-map-fullscreen-open { overflow: hidden; }
.bfvg-territory-map:is(:fullscreen, .is-pseudo-fullscreen) .bfvg-territory-map__canvas {
 width: 100%;
 height: 100% !important;
 min-height: 0;
 max-height: none;
 border-radius: 0;
}
.bfvg-territory-map:is(:fullscreen, .is-pseudo-fullscreen) .leaflet-control-zoom { display: block; }
.bfvg-territory-map:is(:fullscreen, .is-pseudo-fullscreen) .bfvg-territory-map__credit {
 max-height: 4.5rem;
 overflow: auto;
}

/* Contesto Territorio singolo: il territorio corrente resta evidenziato e
 * l'elenco testuale completo non duplica la navigazione gia' presente nella mappa. */
.bfvg-territory-map--single .bfvg-territory-map__legend { display: none; }
.bfvg-territory-map--single .bfvg-territory-map__area.is-current > path {
 fill: #8ab1b4;
 stroke: #163f48;
 stroke-width: 2.5;
}
.bfvg-territory-map--single .bfvg-territory-map__canvas,
.bfvg-territory-map--single .bfvg-territory-map__svg { height: clamp(24rem, 38vw, 34rem); }