/* ======================================================================
   stile-svg.css - SPECIFICO PER mappa-(continente).php?highlight=xxx
   Importa il CSS base e aggiunge regole specifiche
====================================================================== */



/* ======================================================================
   REGOLE SPECIFICHE PER mappa-(continente).php
   ====================================================================== */

article {
    width: 90%;
    text-align: center;
    line-height: 1.4;
    font-weight: 700;
}

article h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    padding: 1rem 1rem 0.4rem;
    text-align: center;
    color: #1a3f3f;
    font-weight: 700;
    border-bottom: 3px solid #99cccc;
    max-width: 700px;
    margin: 0 auto 0.4rem;
}

article p {
    font-size: 0.95rem;
    padding: 0.3rem 1rem 0.8rem;
    color: #2d5f5f;
    font-weight: 600;
}

/* Container principale che fa da "Mare" */
.svg-container {
    background-color: #c1c2f0; /* Azzurro Mare */
    border: 1.5px solid rgba(0,0,0,0.20);
    border-radius: 8px;
    width: 100%;
    max-width: 1024px; /* Larghezza massima mappa */
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	position: relative;
}

/* Comportamento SVG responsive */
.svg-content {
    display: block;
    width: 100%;
    height: auto;
}

/* Stile delle Nazioni (Path) */
.land {
    /*fill: #cccccc;         /* Colore nazione (Grigio) */
    stroke: #333333;       /* Bordo bianco */
    stroke-width: 0.25px;   /* Spessore bordo */
    transition: fill 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    vector-effect: non-scaling-stroke; /* Mantiene il bordo sottile anche se zoomi */
}

/* Effetto Mouse Sopra (CSS) E Classe Attiva (gestita da JS) */
.land:hover, .land-active {
    fill: #711515 !important;
    stroke: #711515 !important;
    stroke-width: 2px !important;
    z-index: 10;
    filter: drop-shadow(0 0 5px #ff0000) drop-shadow(0 0 10px #711515);
}

/* Animazione CORRETTA per il cerchio pulsante */
@keyframes radar-pulse {
    0% { transform: scale(1); stroke-opacity: 1; }
    50% { transform: scale(1.1); stroke-opacity: 0.7; }
    100% { transform: scale(1); stroke-opacity: 1; }
}

#focus-ring {
    transform-origin: center;
    transform-box: fill-box; /* Importante per far ruotare/scalare bene in SVG */
    animation: radar-pulse 2s infinite ease-in-out;
}

/* Stile per i link che avvolgono i path (opzionale, per pulizia) */
a {
    text-decoration: none;
    outline: none;
}

/* Evidenziazione per nazione selezionata da URL */
path.land.highlighted {
    fill: url(#pattern-diagonal-stripes) !important;
    stroke: #ff3300 !important;
    stroke-width: 5px !important;
    stroke-dasharray: 10, 6;
    filter: drop-shadow(0 0 15px rgba(255, 69, 0, 0.9));
    animation: pulse-strong 1.2s infinite;
}

path.land.highlighted:hover,
path.land.highlighted.land-active {
    fill: url(#pattern-diagonal-stripes) !important;  /* Mantiene il pattern */
}

@keyframes pulse-strong {
    0% { stroke-width: 5px; filter: drop-shadow(0 0 10px #ff4500); }
    50% { stroke-width: 7px; filter: drop-shadow(0 0 20px #ff0000); }
    100% { stroke-width: 5px; filter: drop-shadow(0 0 10px #ff4500); }
}

/* Stile per nazione attiva (hover) */
path.land.land-active {
    stroke: #333333 !important;
    stroke-width: 2px !important;
}

@keyframes strong-pulse {
    0% { stroke-width: 5px; filter: drop-shadow(0 0 10px #ff4500); }
    50% { stroke-width: 7px; filter: drop-shadow(0 0 20px #ff0000); }
    100% { stroke-width: 5px; filter: drop-shadow(0 0 10px #ff4500); }
}



/* Contenitore per la Mini Mappa */
.mini-map-box {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 240px;
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid #333;
    padding: 2px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 50;
}

.mini-map-box svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Label descrittiva sopra la mini SVG (visibile solo su mobile) */
.mini-map-label {
    display: none;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    color: #555;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 0 1px;
}

/* Colore neutro per le nazioni nella mini mappa */
.mini-path {
    fill: #e0e0e0;
    stroke: #999;
    stroke-width: 0.5px;
}

/* Colore rosso per evidenziare la posizione attuale */
.mini-path-active {
    fill: #ff0000 !important; 
    stroke: #711515;
    stroke-width: 1px;
}



/* Il rettangolo che indica l'area visibile */
.zoom-rect {
    fill: rgba(255, 0, 0, 0.03); 
    stroke: #ff0000;           
    stroke-width: 2.5px;         /* Spessore fisso */
    vector-effect: non-scaling-stroke; /* Impedisce al bordo di rimpicciolirsi con lo zoom */
}


.mini-bbox-rect {
    fill: rgba(255, 0, 0, 0.05);
    stroke: #ff0000;
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}

.mini-view-rect {
    fill: rgba(0, 100, 120, 0.15);
    stroke: #006478;
    stroke-width: 8;
    pointer-events: none;
}

/* ======================================================================
   Evidenziazione nazione selezionata (da URL)
   ====================================================================== */
path.land.highlighted-solid {
    fill: #ff0000 !important;
    stroke: #990000 !important;
    stroke-width: 4px !important;
    animation: none !important;
    filter: drop-shadow(0px 0px 8px rgba(255, 0, 0, 0.8));
}

/* ======================================================================
   OVERLAY REGIONS - Regioni storiche nascoste di default
   ====================================================================== */
/* Katanga: nascosto di default, visibile solo quando evidenziato */
#land-KA1 {
    display: none;
}

#land-KA1.highlighted-solid {
    display: block;
}

/* Rhodesia: nascosta di default, visibile solo quando evidenziata */
#land-RO1 {
    display: none;
}

#land-RO1.highlighted-solid {
    display: block;
}

/* Indie Olandesi: nascosta di default, visibile solo quando evidenziata */
#land-IN1 {
    display: none;
}

#land-IN1.highlighted-solid {
    display: block;
}

/* Malaya: nascosta di default, visibile solo quando evidenziata */
#land-MA1 {
    display: none;
}

#land-MA1.highlighted-solid {
    display: block;
}

/* Muscat & Oman: nascosta di default, visibile solo quando evidenziata */
#land-MU1 {
    display: none;
}

#land-MU1.highlighted-solid {
    display: block;
}

/* Nagorno Karbakh: nascosta di default, visibile solo quando evidenziata */
#land-NA1 {
    display: none;
}

#land-NA1.highlighted-solid {
    display: block;
}

/* Straits Settlements: nascosta di default, visibile solo quando evidenziata */
#land-ST1 {
    display: none;
}

#land-ST1.highlighted-solid {
    display: block;
}

/* Germania Saarland: nascosta di default, visibile solo quando evidenziata */
#land-GE1 {
    display: none;
}

#land-GE1.highlighted-solid {
    display: block;
}

/* Regno Italia: nascosta di default, visibile solo quando evidenziata */
#land-IT1 {
    display: none;
}

#land-IT1.highlighted-solid {
    display: block;
}

/* Transnistria: nascosta di default, visibile solo quando evidenziata */
#land-TR1 {
    display: none;
}

#land-TR1.highlighted-solid {
    display: block;
}

/* Newfoundland: nascosta di default, visibile solo quando evidenziata */
#land-NE1 {
    display: none;
}

#land-NE1.highlighted-solid {
    display: block;
}

/* Sri Lmka Ceylon: nascosta di default, visibile solo quando evidenziata */
#land-LK1 {
    display: none;
}

#land-LK1.highlighted-solid {
    display: block;
}

/* Aggiungi qui altre overlay regions future:
#land-XXX { display: none; }
#land-XXX.highlighted-solid { display: block; }
*/

/* ======================================================================
   Disabilita hover e interazione per le nazioni non cliccabili
   ====================================================================== */
   ma mantieni il colore originale (quello definito nello style inline) */
.land.no-click,
.land.no-click:hover {
    /* Non forziamo fill, lasciamo quello inline */
    stroke: #999999 !important;
    stroke-width: 1px !important;
    filter: none !important;
    cursor: default !important;
    /* Rimuoviamo eventuali effetti hover */
    transition: none !important;
}

/* Se vuoi mantenere il tooltip (title) anche per le nazioni non cliccabili, 
   commenta o rimuovi la riga successiva */
.land.no-click {
    pointer-events: none;
}

/* ======================================================================
   MEDIA QUERY: TABLET E MOBILE (Sotto i 1200px)
   ====================================================================== */
@media (max-width: 1200px) {
    .lista-stati-mobile { 
        display: block; 
        columns: 2;
        padding: 20px;
    }
    
    /* Reset sezione */
    section, article {
        width: 100%;
        margin-left: 0;
        padding: 0;
        box-sizing: border-box;
        display: block;
        text-align: center;
    }

    /* Centratura immagine mappa */
    img[usemap] {
        display: block;
        margin: 0 auto;
        max-width: 98%;
        height: auto;
        float: none;
    }

    /* Rimuovi il margine di 5rem che sposta l'immagine */
    img {
        margin-left: 0;
        text-align: center;
    }

    /* Reset figure */
    figure1, figureM {
        display: block;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }
    
    .map-container {
        width: 95%;
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }

    /* Rimuoviamo il margine che sposta l'Africa a destra */
    .svg-map image, img {
        margin-left: 0;
    }
}

/* ======================================================================
   MEDIA QUERY MINIMAPPA E LAYOUT RESPONSIVE
   
   Breakpoint      │ Range px      │ Menu         │ Minimappa
   ────────────────┼───────────────┼──────────────┼──────────────────────
   Smartphone      │ < 768px       │ hamburger ↑  │ statica sopra, 140px
   Tablet portrait │ 768–1023px    │ hamburger ↑  │ statica sopra, 230px
   Tablet landscape│ 1024–1199px   │ hamburger ↑  │ assoluta basso-dx, 160px
   Desktop stretto │ 1200–1500px   │ fisso sx     │ assoluta top-right + margin-left
   Desktop pieno   │ > 1500px      │ fisso sx     │ comportamento originale
   ====================================================================== */

/* -----------------------------------------------------------------------
   SMARTPHONE (< 768px)  ← iPhone
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {

    article {
        padding-top: 12px !important;
    }

    .svg-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 0;
        gap: 4px;
    }

    .mini-map-box {
        position: static;
        width: 52%;
        max-width: 140px;
        margin: 4px auto;
        background: rgba(255, 255, 255, 0.92);
        border: 1.5px solid #555;
        padding: 2px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.20);
        order: -1;
    }

    .mini-map-label {
        display: block;
        font-size: 0.55rem;
        padding: 1px 0;
    }

    .svg-content {
        width: 100%;
        order: 0;
    }
}

/* -----------------------------------------------------------------------
   TABLET PORTRAIT (768px – 1023px)  ← iPad portrait
   Menu hamburger in alto (45px). Layout verticale, minimappa moderata.
   ----------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {

    .svg-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 10px;
        gap: 8px;
    }

    .mini-map-box {
        position: static;
        width: 35%;
        max-width: 230px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.92);
        border: 1.5px solid #555;
        padding: 4px;
        border-radius: 5px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.22);
        order: -1;
    }

    .mini-map-label {
        display: block;
    }

    .svg-content {
        width: 100%;
        order: 0;
    }
}

/* -----------------------------------------------------------------------
   TABLET LANDSCAPE (1024px – 1199px)  ← iPad Pro 11" landscape
   Menu hamburger in alto (50px). Minimappa assoluta basso-destra, compatta.
   ----------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1199px) {

    .mini-map-box {
        position: absolute;
        top: auto;
        bottom: 10px;
        right: 10px;
        width: 160px;
        background: rgba(255, 255, 255, 0.90);
        border: 1.5px solid #555;
        padding: 3px;
        border-radius: 5px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.25);
    }

    .mini-map-label {
        display: none;
    }
}

/* -----------------------------------------------------------------------
   DESKTOP STRETTO (1200px – 1500px)
   Menu fisso laterale sinistro 8.5rem: sposta article per non coprirlo.
   ----------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1500px) {
    article {
        margin-left: 9.5rem; /* menu 8.5rem + 1rem respiro */
        box-sizing: border-box;
    }
}

/* ======================================================================
   BOTTONI ZOOM (generati da mappa-interattiva.js)
   ====================================================================== */

/* Su mobile (< 768px): mini-mappa è sopra in flow, bottoni restano
   in basso a destra della mappa SVG — nessun conflitto */
@media (max-width: 767px) {
    #zoom-controls {
        bottom: 8px !important;
        right: 8px !important;
    }

    #zoom-controls button {
        width: 34px !important;
        height: 34px !important;
        font-size: 20px !important;
    }
}

/* Su tablet portrait (768–1023px): mini-mappa è sopra in flow,
   bottoni zoom in basso a destra della mappa */
@media (min-width: 768px) and (max-width: 1023px) {
    #zoom-controls {
        bottom: 10px !important;
        right: 10px !important;
    }
}

/* Su tablet landscape (1024–1199px): mini-mappa è in basso a destra,
   spostiamo i bottoni in basso a sinistra per evitare sovrapposizione */
@media (min-width: 1024px) and (max-width: 1199px) {
    #zoom-controls {
        bottom: 10px !important;
        right: auto !important;
        left: 10px !important;
    }
}

/* Overlay "usa due dita" — assicura visibilità su tutti i breakpoint */
#two-finger-overlay {
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.5;
}

/*
======================================================================
- css stile-svg.css	ver. 9.12	Claudio Agostini © 20.03.2026
======================================================================
*/