/* Presentazione Dropdown di IbcsPublicNavigation (Presentation="Dropdown").

   Facoltativo: il Consumer lo collega solo se usa la presentazione Dropdown
   (_content/Ib.ContentService.Editor.Blazor/css/ibcs-public-navigation.css). Ogni selettore e'
   sotto .ibcs-public-nav--dropdown: nessuno stile globale, la presentazione Tree resta senza
   stili imposti.

   - Livello 1: voci radice in riga nella barra del Consumer.
   - Livello 2: tendina sovrapposta al contenuto (position: absolute sotto la voce): aprirla non
     cambia altezza ne' posizione delle voci della barra.
   - Livello 3 e successivi: gruppi annidati dentro la stessa tendina, indentati, mai tendine
     laterali (niente tagli ai bordi, scorrimento verticale della tendina se serve).
   - Voce Page con figli: link e comando di espansione distinti, il comando a destra del link con
     un indicatore; il testo "SubpagesLabel + etichetta" resta solo per le tecnologie assistive.

   Adattamento, sempre con proprieta' personalizzate impostate dal Consumer sul proprio selettore
   (anche in una media query), mai sovrascrivendo queste regole:
   --ibcs-public-nav-root-direction       row | column (barra verticale, es. menu mobile)
   --ibcs-public-nav-panel-position       absolute | static (static = figli nel flusso, come albero)
   --ibcs-public-nav-panel-indent         rientro del livello 2 (default 0; es. 1rem se static)
   --ibcs-public-nav-nested-indent        rientro dei livelli 3+ (default 1rem)
   --ibcs-public-nav-item-padding         padding di link, etichette e comandi (default .5rem .75rem)
   --ibcs-public-nav-panel-min-width / -max-width / -max-height
   --ibcs-public-nav-panel-background / -color / -border / -radius / -shadow / -padding / -z-index
   --ibcs-public-nav-viewport-gutter      margine minimo dai bordi della finestra (default 8px)

   Il posizionamento ai bordi (spostamento orizzontale, altezza disponibile) e Escape/chiusura sono
   in js/ibcs-public-navigation.js; senza script la tendina si apre e chiude comunque con clic e
   tastiera (details/summary nativi). */

.ibcs-public-nav--dropdown .ibcs-public-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ibcs-public-nav--dropdown > .ibcs-public-nav__list--level-1 {
    display: flex;
    flex-direction: var(--ibcs-public-nav-root-direction, row);
    flex-wrap: wrap;
    align-items: stretch;
}

.ibcs-public-nav--dropdown .ibcs-public-nav__item {
    position: relative;
}

.ibcs-public-nav--dropdown .ibcs-public-nav__link,
.ibcs-public-nav--dropdown .ibcs-public-nav__label,
.ibcs-public-nav--dropdown .ibcs-public-nav__toggle {
    display: block;
    padding: var(--ibcs-public-nav-item-padding, .5rem .75rem);
    color: inherit;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ibcs-public-nav--dropdown .ibcs-public-nav__toggle {
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.ibcs-public-nav--dropdown .ibcs-public-nav__toggle::-webkit-details-marker {
    display: none;
}

/* Indicatore aperto/chiuso: bordo ruotato, eredita il colore della voce. */
.ibcs-public-nav--dropdown .ibcs-public-nav__toggle::after {
    content: "";
    display: inline-block;
    width: .4em;
    height: .4em;
    margin-inline-start: .45em;
    border-inline-end: .12em solid currentColor;
    border-block-end: .12em solid currentColor;
    transform: translateY(-.2em) rotate(45deg);
    vertical-align: middle;
}

.ibcs-public-nav--dropdown .ibcs-public-nav__group[open] > .ibcs-public-nav__toggle::after {
    transform: translateY(.05em) rotate(-135deg);
}

/* Voce Page con figli: il comando sta a destra del link, sulla stessa riga, senza essere annidato
   nel link; il link lascia lo spazio del comando. Il <details> resta nel flusso sotto il link, cosi'
   con --ibcs-public-nav-panel-position: static i figli occupano tutta la larghezza della voce. */
.ibcs-public-nav--dropdown .ibcs-public-nav__item--has-children:not(.ibcs-public-nav__item--container) > .ibcs-public-nav__link,
.ibcs-public-nav--dropdown .ibcs-public-nav__item--has-children:not(.ibcs-public-nav__item--container) > .ibcs-public-nav__label {
    padding-inline-end: 1.75rem;
}

.ibcs-public-nav--dropdown .ibcs-public-nav__item--has-children:not(.ibcs-public-nav__item--container) > .ibcs-public-nav__group > .ibcs-public-nav__toggle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    padding-inline: .45rem .65rem;
}

.ibcs-public-nav--dropdown .ibcs-public-nav__item--has-children:not(.ibcs-public-nav__item--container) > .ibcs-public-nav__group > .ibcs-public-nav__toggle::after {
    margin-inline-start: 0;
}

/* Testo del comando solo per le tecnologie assistive (stesso schema di visually-hidden). */
.ibcs-public-nav--dropdown .ibcs-public-nav__toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Livello 2: la tendina. */
.ibcs-public-nav--dropdown .ibcs-public-nav__list--level-2 {
    position: var(--ibcs-public-nav-panel-position, absolute);
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: var(--ibcs-public-nav-panel-z-index, 1000);
    box-sizing: border-box;
    min-width: var(--ibcs-public-nav-panel-min-width, 12rem);
    max-width: min(var(--ibcs-public-nav-panel-max-width, 22rem), calc(100vw - 2 * var(--ibcs-public-nav-viewport-gutter, 8px)));
    max-height: min(var(--ibcs-public-nav-panel-max-height, 70vh), var(--ibcs-public-nav-panel-available-height, 100vh));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--ibcs-public-nav-panel-padding, .25rem 0);
    padding-inline-start: var(--ibcs-public-nav-panel-indent, 0);
    background: var(--ibcs-public-nav-panel-background, Canvas);
    color: var(--ibcs-public-nav-panel-color, CanvasText);
    border: var(--ibcs-public-nav-panel-border, 1px solid rgb(0 0 0 / .15));
    border-radius: var(--ibcs-public-nav-panel-radius, .375rem);
    box-shadow: var(--ibcs-public-nav-panel-shadow, 0 .5rem 1rem rgb(0 0 0 / .15));
}

.ibcs-public-nav--dropdown .ibcs-public-nav__list--level-2 .ibcs-public-nav__toggle {
    white-space: normal;
}

/* Livelli 3+: gruppi annidati nella stessa tendina. */
.ibcs-public-nav--dropdown .ibcs-public-nav__list--level-2 .ibcs-public-nav__list {
    padding-inline-start: var(--ibcs-public-nav-nested-indent, 1rem);
}