/**
 * Il pannello del menu per gli schermi stretti — GR Fashion Consulting
 *
 * Perche' esiste un terzo foglio. La fascia orizzontale (`megamenu.css`) su uno
 * schermo da 375 pixel chiede 802 pixel e ne ha 335: si vedono tre voci su
 * nove, e le altre sei stanno oltre il bordo destro. Scorre, ma su un telefono
 * la barra di scorrimento ha altezza reale ZERO — il puntatore e' `coarse` e il
 * sistema le disegna a scomparsa — quindi non c'e' nessun indizio che esistano
 * altre voci. Il reparto «Brand» di un negozio che vende Baxter e Poltrona Frau
 * semplicemente non esisteva, da telefono.
 *
 * Il pannello porta tutte e nove le voci PIU' le loro sottovoci: centonovantuno
 * collegamenti, cioe' l'albero intero del negozio, che nella fascia sotto i 992
 * non e' raggiungibile affatto (le tendine sono spente perche' coprirebbero lo
 * schermo).
 *
 * NESSUN COLORE LETTERALE: ogni tinta passa da una `var()` col suo ripiego, cosi'
 * il pannello funziona anche su un tema che quelle variabili non le ha — che e'
 * la differenza fra un modulo riusabile e un modulo che gira su un sito solo.
 *
 * Dentro `@layer gr-modules` come gli altri due fogli: un foglio non incapsulato
 * batte QUALUNQUE livello, e il tema che ospita il modulo perderebbe l'ultima
 * parola sul proprio aspetto.
 */
@layer gr-modules {

  /* Il pannello e' `hidden` nel documento e il JavaScript glielo toglie.
     `[hidden]` vale `display: none`, quindi da chiuso non e' raggiungibile col
     tabulatore e non e' letto: e' la stessa ragione per cui le tendine della
     fascia si nascondono con `visibility` e non con la sola trasparenza.

     LA COMPARSA E' UN'ANIMAZIONE, NON UNA TRANSIZIONE, e la differenza qui non
     e' di gusto. Da `display: none` una transizione non parte: farla partire
     richiede di togliere `hidden`, aspettare che il browser abbia calcolato la
     disposizione, e solo allora aggiungere una classe. E' la ricetta consueta,
     ed e' stata scritta cosi' — con due `requestAnimationFrame` annidati — e si
     e' rotta alla prima prova: dove quei fotogrammi tardano, la classe non
     arriva mai e il foglio resta a `translateX(-100%)`, cioe' fuori dallo
     schermo. Il pannello risultava aperto per il documento (niente `hidden`,
     `aria-expanded` a true, pagina bloccata) e invisibile per chi guarda: il
     modo peggiore di essere rotto, perche' ogni controllo automatico lo
     dichiara a posto.

     Un'animazione invece parte da se' nel momento in cui l'elemento smette di
     essere `display: none`. Il JavaScript deve fare UNA cosa sola — togliere
     `hidden` — e non c'e' nessun istante in cui il pannello e' aperto ma non si
     vede. La chiusura e' immediata e senza uscita: un menu che si chiude di
     colpo e' accettabile, uno che non compare no. */
  .gr-megamenu-pannello {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
  }

  .gr-megamenu-pannello[hidden] {
    display: none;
  }

  /* IL PANNELLO COMPARE, NON ENTRA — e non e' pigrizia, e' il risultato di tre
     tentativi falliti che vale la pena non ripetere.

     1. Transizione piu' classe aggiunta al fotogramma dopo (due
        `requestAnimationFrame`): dove quei fotogrammi tardano, la classe non
        arriva e il foglio resta a `translateX(-100%)`. Aperto e invisibile.
     2. Animazione con `fill-mode: both`: se l'animazione non parte, l'elemento
        e' tenuto al FOTOGRAMMA INIZIALE. Stesso esito.
     3. Animazione senza `fill-mode`, con lo stato di riposo dichiarato prima:
        sembra sicuro, e non lo e'. Un'animazione IN CORSO impone comunque il
        proprio primo fotogramma, e una che non avanza resta li' per sempre.
        Misurato: velo a `opacity: 0` con la regola di riposo che diceva 1.

     Il punto non e' quale delle tre sia scritta meglio: e' che tutte e tre
     fanno dipendere DA UN'ANIMAZIONE il fatto che il menu si veda. Su un
     pannello che e' l'unico modo di navigare il negozio da telefono, quel
     rischio non si corre per uno scorrimento di due decimi di secondo.

     Chi vorra' rimettere il movimento lo faccia su proprieta' che non possono
     nascondere niente — un'ombra, una scala fra 0,98 e 1 — mai su `transform`
     che sposta fuori schermo o su `opacity` che parte da zero. */
  .gr-megamenu-pannello__velo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .gr-megamenu-pannello__foglio {
    position: relative;
    display: flex;
    flex-direction: column;

    /* Non a tutta larghezza: la striscia di pagina che resta scoperta a destra
       dice che si sta guardando un pannello sopra il sito e non una pagina
       nuova, e da' un posto ovvio dove toccare per chiudere. Il limite in
       pixel serve sui tablet, dove l'88% di 834 sarebbero settecento pixel di
       elenco. */
    width: min(88vw, 380px);
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    background: var(--fondo, #fff);
    color: var(--testo, inherit);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);

  }

  /* La testa resta ferma mentre l'elenco scorre: con centonovantuno
     collegamenti, un pulsante di chiusura in cima alla lista sparisce dopo due
     dita di scorrimento, e per chiudere bisognerebbe risalire tutto. */
  .gr-megamenu-pannello__testa {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--fondo, #fff);
    border-bottom: 1px solid var(--filetto, rgba(0, 0, 0, 0.12));
  }

  .gr-megamenu-pannello__titolo {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--testo-tenue, inherit);
  }

  /* 44 pixel di lato: e' la misura sotto la quale un bersaglio col dito si
     sbaglia. Vale per la chiusura come per i pulsanti di espansione. */
  .gr-megamenu-pannello__chiudi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .gr-megamenu-pannello__voci {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gr-megamenu-pannello__voce + .gr-megamenu-pannello__voce {
    border-top: 1px solid var(--filetto, rgba(0, 0, 0, 0.12));
  }

  /* Il collegamento e il pulsante di espansione sono DUE bersagli distinti
     sulla stessa riga, e non uno solo che fa due cose. Su «Arredamento» chi
     tocca il nome vuole la pagina del reparto, chi tocca la freccia vuole
     vedere cosa c'e' sotto: farli coincidere costringe a scegliere per l'utente
     una delle due, ed e' il difetto piu' comune dei menu a scomparsa. */
  .gr-megamenu-pannello__riga {
    display: flex;
    align-items: stretch;
  }

  .gr-megamenu-pannello__collegamento {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0.5rem 1.1rem;
    font-size: 0.94rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: inherit;
  }

  .gr-megamenu-pannello__espandi {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    background: none;
    border: 0;
    border-left: 1px solid var(--filetto, rgba(0, 0, 0, 0.12));
    color: inherit;
    cursor: pointer;
  }

  /* La freccia e' disegnata con un bordo e non con un carattere: un glifo
     dipende dal font delle icone, e questo pannello deve funzionare anche
     mentre quel font sta ancora arrivando. */
  .gr-megamenu-pannello__freccia {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
  }

  .gr-megamenu-pannello__espandi[aria-expanded="true"] .gr-megamenu-pannello__freccia {
    transform: rotate(-135deg) translate(-3px, -3px);
  }

  .gr-megamenu-pannello__tendina {
    padding: 0.25rem 1.1rem 1rem;
    background: var(--fondo-tenue, rgba(0, 0, 0, 0.03));
  }

  .gr-megamenu-pannello__tendina[hidden] {
    display: none;
  }

  /* Dentro la tendina si riusa la marcatura della fascia (`gr-megamenu__riga`,
     `__colonna`, `__elenco`), che qui va srotolata in una colonna sola: le
     dodicesime parti hanno senso su una tendina larga mille pixel, non su un
     foglio da trecentottanta. */
  .gr-megamenu-pannello__tendina .gr-megamenu__riga {
    display: block;
  }

  .gr-megamenu-pannello__tendina .gr-megamenu__colonna {
    flex: none;
    min-width: 0;
    width: auto;
  }

  .gr-megamenu-pannello__tendina .gr-megamenu__elenco a {
    display: block;
    min-height: 40px;
    padding: 0.55rem 0;
    font-size: 0.88rem;
  }

  /* Chi arriva col tabulatore deve vedere DOVE si trova: senza questo, dentro
     un elenco di centonovantuno collegamenti la messa a fuoco e' invisibile. */
  .gr-megamenu-pannello a:focus-visible,
  .gr-megamenu-pannello button:focus-visible {
    outline: 2px solid var(--accento, currentColor);
    outline-offset: -2px;
  }

  /* Sopra i 992 il pannello non serve: c'e' la fascia con le sue tendine. La
     regola vale anche a pannello aperto — se si allarga la finestra mentre e'
     aperto sparisce, e il JavaScript se ne accorge e rimette a posto lo
     scorrimento della pagina. */
  @media (min-width: 62rem) {
    .gr-megamenu-pannello {
      display: none;
    }
  }

  /* Resta solo la freccia: il pannello non ha movimento da spegnere, e la
     rotazione di una freccia da nove pixel e' l'unica animazione rimasta. */
  @media (prefers-reduced-motion: reduce) {
    .gr-megamenu-pannello__freccia {
      transition: none;
    }
  }
}