/* ==========================================================================
   Il componente «Sezioni con indice» (A-39 Parte V): solo ciò che le classi
   di Bootstrap non danno. Vale su BsItalia e su Canvas; un tema lo veste coi
   nomi stabili `acme-sections__*` (lympha: `lympha.css`).

   La voce attiva — la sezione in lettura (`aria-current`) o la scheda aperta
   (`aria-selected`) — si riconosce anche senza il colore (WCAG 1.4.1): il
   bordo a sinistra e il peso del testo cambiano insieme.

   Va caricato in DUE posti: sul sito (`ItemsPluginEvent::getCss()`) e nella
   tela (lo aggiunge il componente, `sections_index.js`).
   ========================================================================== */

.acme-sections__link {
    display: block;
    padding-left: .65rem;
    border-left: 3px solid transparent;
    text-decoration: none;
}
.acme-sections__link:hover { text-decoration: underline; }
/* Nella veste semplice, e nella «Scheda» che ha le sue voci, la voce attiva si segna con la linea e il grassetto, senza
   fondo: Canvas colora di verde tutto ciò che porta `active`, e il testo della voce ci finiva sopra. */
.acme-sections:is(.acme-sections--skin-simple, .acme-sections--skin-card):not([data-acme-sections-mode="tabs"]) .acme-sections__link.active { background-color: transparent; }
.acme-sections__link[aria-current="true"],
.acme-sections__link[aria-selected="true"] {
    border-left-color: currentColor;
    font-weight: 700;
}

/* La veste «Pillole» (A-39 § V.5, punto 5): le pillole di Bootstrap (`nav-pills`), la voce attiva piena nel primario e
   in grassetto. La linea a lato della veste semplice qui non serve. */
.acme-sections--skin-pills .acme-sections__link {
    border-left: 0;
    padding: var(--bs-nav-link-padding-y, .5rem) var(--bs-nav-link-padding-x, 1rem);
}
.acme-sections--skin-pills .acme-sections__link.active {
    background-color: var(--bs-primary, #0066cc);
    color: #fff;
    font-weight: 700;
}

/* La veste «Riquadro»: l'elenco di Bootstrap (`list-group`), la voce attiva piena nel primario e in grassetto. */
.acme-sections--skin-box .acme-sections__link { border-left: 0; color: inherit; }
.acme-sections--skin-box .acme-sections__link:hover { background-color: var(--bs-tertiary-bg, #f8f9fa); text-decoration: none; }
.acme-sections--skin-box .acme-sections__link.active {
    background-color: var(--bs-primary, #0066cc);
    color: #fff;
    font-weight: 700;
}

/* Le quattro vesti in più (Gloria, 21-10-2026: «Numerata, A filo, Bottoni, Scheda», A-39 § V.6), con le classi di
   Bootstrap che i due temi hanno. La voce attiva ha il fondo pieno e il grassetto, come in «Riquadro»; nella «Scheda» la
   linea a lato, come nella semplice (WCAG 1.4.1: oltre al colore cambia il peso del testo). */
.acme-sections:is(.acme-sections--skin-numbered, .acme-sections--skin-flush) .acme-sections__link { border-left: 0; color: inherit; }
/* Il fondo chiaro al passaggio del mouse solo sulle voci non attive: sull'attiva il testo è bianco, e sul fondo chiaro
   non si leggeva (Gloria, 21-10-2026: «all'hover del menù diventa troppo chiaro e non si legge»). In «Numerata» il fondo
   va sulla voce intera, col numero. */
.acme-sections:is(.acme-sections--skin-numbered, .acme-sections--skin-flush) .acme-sections__link:hover { text-decoration: none; }
.acme-sections.acme-sections--skin-flush .acme-sections__link:not(.active):hover,
.acme-sections.acme-sections--skin-numbered .list-group-item:not(:has(> .acme-sections__link.active)):hover { background-color: var(--bs-tertiary-bg, #f8f9fa); }
.acme-sections--skin-flush .acme-sections__link.active {
    background-color: var(--bs-primary, #0066cc);
    color: #fff;
    font-weight: 700;
}
/* «Numerata»: il numero è il `::before` della voce (`list-group-numbered`), fuori dal link; per questo il fondo pieno va
   sulla voce intera, e il link ne prende il colore. */
.acme-sections--skin-numbered .list-group-item::before { flex-shrink: 0; padding: .5rem .35rem .5rem 1rem; }
.acme-sections--skin-numbered .list-group-item:has(> .acme-sections__link.active) {
    background-color: var(--bs-primary, #0066cc);
    color: #fff;
    font-weight: 700;
}
.acme-sections--skin-numbered .acme-sections__link.active { background-color: transparent; }
/* «Bottoni»: i bottoni a contorno del primario di Bootstrap (`btn-outline-primary`), il testo a sinistra anche dove il
   tema fa dei bottoni dei `flex` centrati (lympha). La voce attiva è il bottone pieno nel primario: Bootstrap Italia non
   riempie `.btn-outline-primary.active`, quindi lo si dice qui. La linea a lato della semplice qui è il bordo. */
.acme-sections--skin-buttons .acme-sections__link {
    border: var(--bs-btn-border-width, 1px) solid var(--bs-btn-border-color, currentColor);
    padding: var(--bs-btn-padding-y, .375rem) var(--bs-btn-padding-x, .75rem);
    justify-content: flex-start;
    text-decoration: none;
}
/* Il selettore passa dal `nav` per vincere su `.btn-outline-primary:not(:disabled):not(.disabled).active` di Bootstrap
   Italia, che lascia il fondo trasparente e mette un'ombra interna. */
.acme-sections.acme-sections--skin-buttons .acme-sections__nav .acme-sections__link.active {
    background-color: var(--bs-primary, #0066cc);
    border-color: var(--bs-primary, #0066cc);
    box-shadow: none;
    color: #fff;
    font-weight: 700;
}
/* «Scheda»: il menu in una `card`, col titolo dentro. Le card di Bootstrap Italia non hanno bordo e hanno sotto un
   riempitivo di 48px (`.card:after`): il bordo si dà qui, uguale sui due temi, e il riempitivo si toglie. */
.acme-sections--skin-card .acme-sections__nav.card {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
    margin-bottom: 0;
}
.acme-sections--skin-card .acme-sections__nav.card::after { content: none; }

/* Il menu a lato resta fisso mentre si scorre, come l'indice «In questo articolo» di lympha (Gloria, 21-10-2026: «il menu
   laterale non rimane fisso e quindi io non lo vedo mai selezionato»). Solo da schermo largo: sul telefono il menu sta
   sopra le sezioni. La distanza dalla cima la sceglie il tema, sotto la sua testata fissa (`--acme-sections-sticky-top`). */
@media (min-width: 992px) {
    .acme-sections:is([data-acme-sections-mode="all"], [data-acme-sections-mode="one"]) .acme-sections__nav {
        position: sticky;
        top: var(--acme-sections-sticky-top, 1rem);
    }
}

/* Il respiro fra una sezione e l'altra, quando si vedono tutte di seguito. */
.acme-sections__section + .acme-sections__section { margin-top: 3rem; }
/* Una alla volta la sezione aperta sta da sola: il respiro sopra la seconda o la terza, che nell'HTML vengono dopo una
   sezione nascosta, lascerebbe uno spazio vuoto sopra il titolo (Gloria, 21-10-2026: «se clicco il secondo componente mi
   mette uno spazio sopra al titolo»). Vale sul sito e nella tela, dove le sezioni non aperte si nascondono con lo stile. */
.acme-sections[data-acme-sections-mode="one"] .acme-sections__section + .acme-sections__section,
.acme-sections[data-acme-sections-mode="tabs"] .acme-sections__section + .acme-sections__section { margin-top: 0; }

/* A schede (Gloria, 21-10-2026: «inserirei anche la vista a tab che abbiamo già»): le pillole di Bootstrap in fila, o
   quelle di Canvas. La linea a lato della veste semplice qui non serve; la scheda aperta, oltre al colore pieno che le
   dà `.nav-pills .nav-link.active`, è in grassetto (WCAG 1.4.1). */
.acme-sections[data-acme-sections-mode="tabs"] .acme-sections__menu { flex-wrap: wrap; gap: .25rem; }
.acme-sections[data-acme-sections-mode="tabs"] .acme-sections__link {
    border-left: 0;
    padding: var(--bs-nav-link-padding-y, .5rem) var(--bs-nav-link-padding-x, 1rem);
}
.acme-sections[data-acme-sections-mode="tabs"] .acme-sections__link.active { font-weight: 700; }

/* I colori scelti per le schede (Gloria, 21-10-2026: «serve la scelta del colore anche per il titolo del tab e il tab
   stesso»): li scrive `acme_sections.js` come variabili, con una classe ciascuno. Il selettore è lungo per vincere sulle
   schede di Canvas (`.canvas-tabs .nav-link`), di cui restano forma e bordi. */
.acme-sections.acme-sections--tab-color[data-acme-sections-mode="tabs"] .acme-sections__menu .acme-sections__link { color: var(--acme-sections-tab); }
.acme-sections.acme-sections--tab-color[data-acme-sections-mode="tabs"] .acme-sections__menu .acme-sections__link.active {
    background-color: var(--acme-sections-tab); border-color: var(--acme-sections-tab); color: #fff;
}
.acme-sections.acme-sections--tab-text-color[data-acme-sections-mode="tabs"] .acme-sections__menu .acme-sections__link.active { color: var(--acme-sections-tab-text); }

/* Gli stessi colori per le voci della fisarmonica (Gloria, 21-10-2026: «Io metterei le stesse scelte anche
   nell'accordion»): il testo dei titoli chiusi, il fondo e il testo del titolo aperto. La freccia è nel colore del
   testo, quindi li segue. */
.acme-sections.acme-sections--tab-color[data-acme-sections-mode="accordion"] .acme-sections__heading .accordion-button { color: var(--acme-sections-tab); }
.acme-sections.acme-sections--tab-color[data-acme-sections-mode="accordion"] .acme-sections__heading .accordion-button:not(.collapsed) {
    background-color: var(--acme-sections-tab); color: #fff;
}
.acme-sections.acme-sections--tab-text-color[data-acme-sections-mode="accordion"] .acme-sections__heading .accordion-button:not(.collapsed) { color: var(--acme-sections-tab-text); }
.acme-sections__section[hidden] { display: none; }

/* A fisarmonica (Gloria, 21-10-2026: «magari potremmo anche farlo vedere come gli accordion»): le voci dell'accordion
   di Bootstrap si toccano, senza respiro fra l'una e l'altra; il contenuto chiuso è `hidden`. */
.acme-sections[data-acme-sections-mode="accordion"] .acme-sections__section + .acme-sections__section { margin-top: 0; }
.acme-sections__content[hidden] { display: none; }
.acme-sections__content.accordion-body > :last-child { margin-bottom: 0; }

/* La testata è quella di Bootstrap: Canvas ha una sua `.accordion-header` (margini negativi, padding, bordo a puntini) che
   allargherebbe il bottone oltre la voce. */
.acme-sections .acme-sections__heading.accordion-header { display: block; margin: 0; padding: 0; border-top: 0; }

/* La freccia, uguale sui due temi: quella di Bootstrap Italia è un `content: url()` col `#` non codificato, che il browser
   non disegna. Una maschera col colore del testo, così segue anche il colore scelto per i titoli; giù da chiusa, su da
   aperta. Lo stato si legge anche da `aria-expanded`, non solo dalla freccia (WCAG 1.4.1, 4.1.2). */
.acme-sections .acme-sections__heading .accordion-button { display: flex; align-items: center; width: 100%; }
.acme-sections .acme-sections__heading .accordion-button::before { content: none; }
.acme-sections .acme-sections__heading .accordion-button::after {
    content: ""; float: none; flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-left: auto; line-height: 1;
    /* Bootstrap Italia dà alla freccia un colore suo: qui prende quello del testo del bottone. */
    color: inherit; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none; transition: transform .2s ease-in-out;
}
.acme-sections .acme-sections__heading .accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .acme-sections .acme-sections__heading .accordion-button::after { transition: none; }
}

/* «Con riquadro» e «A filo» devono vedersi diversi su tutti e due i temi, e i temi non aiutano: Bootstrap (Canvas) mette
   il bordo sulle voci, Bootstrap Italia una riga sopra ogni bottone e nessun riquadro (Gloria, 21-10-2026: «ho notato
   che l'accordion aveva due scelte ma le vedo identiche»). Qui le due vesti si disegnano uguali dappertutto: il
   riquadro sta sull'`.accordion`, le voci hanno solo la riga che le separa. */
.acme-sections .accordion .accordion-item { border-left: 0; border-right: 0; border-radius: 0; }
.acme-sections .accordion .accordion-item:first-child { border-top: 0; }
.acme-sections .accordion .accordion-item:last-child { border-bottom: 0; }
.acme-sections .accordion > .accordion-item:first-child .accordion-button { border-top: 0; border-radius: 0; }
.acme-sections .accordion:not(.accordion-flush) {
    border: 1px solid var(--bs-border-color, #dee2e6); border-radius: var(--bs-border-radius, .375rem); overflow: hidden;
}
.acme-sections .accordion.accordion-flush { border: 0; border-radius: 0; }

/* Una sezione appena aggiunta è vuota: senza un'altezza, nella tela non ci si potrebbe posare niente. */
.acme-sections__content:empty { min-height: 3rem; }

/* Gli stessi colori per il menu a lato, «Tutte di seguito» e «Una alla volta» (Gloria, 21-10-2026: «manca la scelta
   dell'aspetto a Tutte di seguito e Una alla volta»; «si, intendevo quello»): il testo delle voci, e sulla voce attiva
   la linea a lato (Semplice) o il fondo pieno (Pillole, Riquadro). Il selettore passa dal `nav` per vincere sulla veste
   di lympha, che può arrivare dopo questo foglio. */
.acme-sections.acme-sections--tab-color:is([data-acme-sections-mode="all"], [data-acme-sections-mode="one"]) .acme-sections__nav .acme-sections__menu .acme-sections__link { color: var(--acme-sections-tab); }
.acme-sections.acme-sections--tab-color:is([data-acme-sections-mode="all"], [data-acme-sections-mode="one"]) .acme-sections__nav .acme-sections__menu .acme-sections__link.active { border-left-color: var(--acme-sections-tab); }
.acme-sections.acme-sections--tab-color:is(.acme-sections--skin-pills, .acme-sections--skin-box, .acme-sections--skin-flush, .acme-sections--skin-buttons):is([data-acme-sections-mode="all"], [data-acme-sections-mode="one"]) .acme-sections__nav .acme-sections__menu .acme-sections__link.active {
    background-color: var(--acme-sections-tab); color: #fff;
}
.acme-sections.acme-sections--tab-text-color:is(.acme-sections--skin-pills, .acme-sections--skin-box, .acme-sections--skin-flush, .acme-sections--skin-buttons):is([data-acme-sections-mode="all"], [data-acme-sections-mode="one"]) .acme-sections__nav .acme-sections__menu .acme-sections__link.active { color: var(--acme-sections-tab-text); }
/* «Bottoni»: il colore scelto fa anche il bordo dei bottoni. */
.acme-sections.acme-sections--tab-color.acme-sections--skin-buttons:is([data-acme-sections-mode="all"], [data-acme-sections-mode="one"]) .acme-sections__nav .acme-sections__menu .acme-sections__link { border-color: var(--acme-sections-tab); }
/* «Numerata»: il fondo pieno sta sulla voce, col numero; il link resta trasparente e prende il testo della voce. */
.acme-sections.acme-sections--tab-color.acme-sections--skin-numbered:is([data-acme-sections-mode="all"], [data-acme-sections-mode="one"]) .acme-sections__nav .acme-sections__menu .list-group-item:has(> .acme-sections__link.active) {
    background-color: var(--acme-sections-tab); color: #fff;
}
.acme-sections.acme-sections--tab-color.acme-sections--skin-numbered:is([data-acme-sections-mode="all"], [data-acme-sections-mode="one"]) .acme-sections__nav .acme-sections__menu .list-group-item:has(> .acme-sections__link.active) .acme-sections__link { color: inherit; }
.acme-sections.acme-sections--tab-text-color.acme-sections--skin-numbered:is([data-acme-sections-mode="all"], [data-acme-sections-mode="one"]) .acme-sections__nav .acme-sections__menu .list-group-item:has(> .acme-sections__link.active) { color: var(--acme-sections-tab-text); }