/* Layout Generale */
.mappa-container {
    display: flex; /* Mappa a sinistra, Legenda a destra */
    max-width: 100%;
    margin: 0 auto;
}

.mappa-layers-wrapper {
    position: relative;
    min-width: 0;
    height:0; 
    width: 70%;
    overflow: hidden; /* Importante per contenere la mappa */
}

/* Stile per tutti i layer della mappa */
.mappa-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0; 
    transition: opacity 0.3s ease-in-out; 
}

/* Legenda */
.mappa-legenda-wrapper {
    padding: 20px;
    width: 30%;
    background-color: #f7f7f7;
}

/* Il layer base (grigio) è sempre visibile */
.mappa-base-layer {
    opacity: 1;
    z-index: 1; /* Primo livello */
}

/* Il layer default (colorato) è visibile di default sopra la base */
.mappa-default-layer {
    opacity: 1; 
    z-index: 2; /* Secondo livello */
}

/* Classe aggiunta da JS per mostrare un layer specifico */
.mappa-layer.active-layer {
    opacity: 1;
    z-index: 3; /* Terzo livello, sopra il default */
}

/* Stile Legenda */
.legenda-list {
    list-style: none;
    padding: 0;
}

.legenda-item {
    display: block;
    padding: 5px 20px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.legenda-item:hover,
.legenda-item.is-active {
    color: var(--e-global-color-accent); /* Colore di evidenziazione */
}

/* Stili per l'Accordion */
.accordion-parent {
    list-style: none;
    margin-bottom: 5px;
}

.accordion-trigger {
    display: block;
    cursor: pointer;
    padding: 5px 0;
    color: #333;
    transition: color 0.2s;
}

.accordion-trigger:hover {
    color: var(--e-global-color-accent);
}

/* Nasconde il contenuto dell'accordion */
.accordion-content {
    list-style: none;
    padding-left: 15px; /* Rientro per le singole strutture */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Mostra il contenuto quando la classe 'is-open' è aggiunta dal JS */
.accordion-parent.is-open .accordion-content {
    /* Impostiamo un valore alto per mostrare il contenuto. Regola se hai molte voci! */
    max-height: 500px; 
}

.accordion-parent.is-open .accordion-trigger {
    color: var(--e-global-color-accent);
}

.single-unit-map, .collection-unit-map {
    text-transform: capitalize;
}

.title-map{
    font-family: var(--e-global-typography-4fb4ff4-font-family), Sans-serif;
    font-size: var(--e-global-typography-4fb4ff4-font-size);
    font-weight: var(--e-global-typography-4fb4ff4-font-weight);
    text-transform: var(--e-global-typography-4fb4ff4-text-transform);
    line-height: var(--e-global-typography-4fb4ff4-line-height);
    padding-bottom: 30px;
}

.categories-map{
    font-family: var(--e-global-typography-4fb4ff4-font-family), Sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-4fb4ff4-font-weight);
    text-transform: var(--e-global-typography-4fb4ff4-text-transform);
    line-height: var(--e-global-typography-4fb4ff4-line-height);
}

.collections-map{
    font-family: var(--e-global-typography-4fb4ff4-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-4fb4ff4-font-weight);
    text-transform: capitalize;
    line-height: var(--e-global-typography-4fb4ff4-line-height);
}

.collections-map::after{
    content:'+';
}

.is-open .collections-map::after{
    content:'−';
}

.collections-map{
    padding-left:20px;
}

.mappa-layers-wrapper img{
    width: 100%;
}

.legenda-list{
    margin-bottom: 2em;
}