/**
 * Mega menu — GR Fashion Consulting
 *
 * NESSUN COLORE QUI DENTRO. Le classi sono nomi; a vestirle e' il tema con le
 * proprie variabili. Ogni valore cromatico passa da una `var()` con un ripiego
 * neutro, cosi' il menu 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.
 *
 * Il foglio esiste per una ragione precisa: senza, le tendine sono `div`
 * normali, sempre aperte e in flusso. Su IDA Interni erano undici tendine
 * spalancate dentro la testata, larghe 936 pixel l'una: la pagina sforava di
 * settecento pixel e sembrava rotta. Il template era giusto, mancava questo.
 */


/* Tutto dentro `@layer gr-modules`, e non e' un dettaglio di stile.
 *
 * Un foglio non incapsulato batte QUALUNQUE livello, quindi un modulo che
 * scrive fuori dai livelli non e' piu' sovrascrivibile dal tema che lo ospita:
 * il rapporto si rovescia, e il tema — che dovrebbe avere l'ultima parola sul
 * proprio aspetto — non ce l'ha piu'.
 *
 * Si e' visto subito: il tema chiedeva alla barra del menu di prendersi una
 * riga sua, e la regola non arrivava mai perche' questo foglio, senza livello,
 * vinceva comunque. Il menu restava schiacciato in duecento pixel.
 */
@layer gr-modules {

  .gr-megamenu {
    position: relative;

    /* `min-width: 0` non e' ridondante: e' la correzione.
       Un elemento flex non scende sotto la larghezza del proprio contenuto
       finche' non glielo si concede — e' il valore predefinito `auto` di
       `min-width`. Con undici voci in fila la barra diventava larga 1140px
       dentro una finestra da 1280, partendo pero' da 192: sfondava di
       cinquantadue pixel, e con lei sfondavano le tendine che ci si
       ancorano. La pagina scorreva di lato su tutti gli schermi sotto i
       1500px, che sono la maggioranza. */
    min-width: 0;
    max-width: 100%;

    /* `flex: 1 1 0` e non `0 0 auto`, ed e' QUESTA la correzione: con
       `flex-shrink: 0` il `min-width: 0` qui sopra non serve a niente,
       perche' l'elemento non ha comunque il permesso di rimpicciolirsi.
       La barra si prendeva tutta la riga della testata — 1140px su 1140 —
       e spingeva fuori ricerca, account e carrello, che finivano a destra
       di 1676, 1803 e 1952 pixel su una finestra da 1280.
       Con questo prende lo spazio che avanza, e le voci scorrono dentro. */
    flex: 1 1 0;
  }

  .gr-megamenu__voci {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;

    /* Quando le voci non ci stanno, scorrono dentro la barra invece di
       allargare la pagina. Scorrere una barra si capisce; una pagina che
       si sposta di lato sembra rotta. */
    overflow-x: auto;

    /* LA BARRA DI SCORRIMENTO SI VEDE, e non e' un ripensamento estetico.
       Prima era `scrollbar-width: none` piu' `::-webkit-scrollbar{display:none}`
       a tutte le larghezze tranne sotto i 992: fra 992 e 1399 le voci venivano
       tagliate dal bordo — misurato 118 pixel a 1399 e 262 a 1199 — e non c'era
       NIENTE che lo dicesse. Col mouse quel contenuto non era raggiungibile:
       niente barra da trascinare, niente rotella orizzontale, e chi non ha un
       trackpad semplicemente non sapeva che dietro il bordo ci fossero altre
       voci.

       Una barra si disegna solo quando il contenuto sfora davvero: e' l'unico
       indizio che compare esattamente quando serve e sparisce quando non serve.
       Nasconderla e' comodo per chi guarda una schermata larga e disonesto con
       tutti gli altri.

       `thin` e non la barra di sistema: sotto una fascia di navigazione una
       barra alta 15 pixel e' piu' ingombrante della fascia stessa. */
    scrollbar-width: thin;
    scrollbar-color: var(--filetto, rgba(0, 0, 0, 0.25)) transparent;

    /* Lo scorrimento si ferma sulla voce, non a meta' parola: senza, l'ultima
       voce raggiunta col tabulatore resta mezza sotto il bordo. */
    scroll-padding-inline: 0.5rem;
  }

  /* Il ramo WebKit/Blink dello stesso indizio. `scrollbar-width` da solo non
     basta li': Chrome lo onora, Safari no, e senza queste regole la barra
     tornerebbe quella di sistema o (su macOS) quella a scomparsa, che si vede
     solo mentre si scorre — cioe' solo se si e' gia' capito che si puo'. */
  .gr-megamenu__voci::-webkit-scrollbar {
    height: 4px;
  }

  .gr-megamenu__voci::-webkit-scrollbar-track {
    background: transparent;
  }

  .gr-megamenu__voci::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: var(--filetto, rgba(0, 0, 0, 0.25));
  }

  .gr-megamenu__voce {
    /* Il riferimento per la tendina: senza `position`, la tendina si ancora al
       documento e finisce da tutt'altra parte allo scorrimento. */
    position: static;
  }

  .gr-megamenu__collegamento {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: inherit;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
  }

  .gr-megamenu__voce:hover > .gr-megamenu__collegamento,
  .gr-megamenu__voce:focus-within > .gr-megamenu__collegamento {
    border-bottom-color: var(--accento, currentColor);
  }

  .gr-megamenu__etichetta {
    padding: 0.1rem 0.4rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    border-radius: 2px;
    background: var(--accento-fondo, var(--accento, #333));
    color: var(--accento-testo, #fff);
  }

  .gr-megamenu__voce--evidenziata > .gr-megamenu__collegamento {
    padding-inline: 1.1rem;
    border-radius: 2px;
    border-bottom: 0;
    background: var(--accento-fondo, var(--accento, #333));
    color: var(--accento-testo, #fff);
  }

  /* ------------------------------------------------------------------
     La tendina.

     Chiusa si toglie dal flusso (`position: absolute`) E dall'albero di
     accessibilita' (`visibility: hidden`). Nasconderla con la sola
     trasparenza la lascerebbe raggiungibile col tabulatore: si finirebbe
     a navigare dentro un pannello che non si vede — che e' peggio di un
     menu che non si apre.
     ------------------------------------------------------------------ */

  .gr-megamenu__tendina {
    position: absolute;
    z-index: 40;
    inset-inline: 0;
    top: 100%;

    /* La tendina si ancora alla barra: se la barra sfora, sfora anche lei.
       Il limite la tiene dentro la finestra qualunque cosa faccia la barra. */
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem clamp(1rem, 3vw, 2.5rem);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    background: var(--fondo, #fff);
    color: var(--testo, inherit);
    border-top: 1px solid var(--filetto, rgba(0, 0, 0, 0.12));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
  }

  /* `:focus-within` accanto a `:hover` non e' un di piu': e' l'unico modo di
     aprire la tendina da tastiera, e senza il menu e' inutilizzabile per chi non
     usa il mouse. */
  .gr-megamenu__voce:hover > .gr-megamenu__tendina,
  .gr-megamenu__voce:focus-within > .gr-megamenu__tendina {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .gr-megamenu__riga {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  /* Le colonne sono dodicesimi, come le dichiara il contenuto importato. */
  .gr-megamenu__colonna {
    flex: 1 1 0;
    min-width: 160px;
  }

  .gr-megamenu__colonna--1 { flex-basis: calc(100% / 12 * 1); }
  .gr-megamenu__colonna--2 { flex-basis: calc(100% / 12 * 2); }
  .gr-megamenu__colonna--3 { flex-basis: calc(100% / 12 * 3); }
  .gr-megamenu__colonna--4 { flex-basis: calc(100% / 12 * 4); }
  .gr-megamenu__colonna--5 { flex-basis: calc(100% / 12 * 5); }
  .gr-megamenu__colonna--6 { flex-basis: calc(100% / 12 * 6); }
  .gr-megamenu__colonna--7 { flex-basis: calc(100% / 12 * 7); }
  .gr-megamenu__colonna--8 { flex-basis: calc(100% / 12 * 8); }
  .gr-megamenu__colonna--9 { flex-basis: calc(100% / 12 * 9); }
  .gr-megamenu__colonna--10 { flex-basis: calc(100% / 12 * 10); }
  .gr-megamenu__colonna--11 { flex-basis: calc(100% / 12 * 11); }
  .gr-megamenu__colonna--12 { flex-basis: 100%; }

  .gr-megamenu__titolo {
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--testo-tenue, inherit);
  }

  .gr-megamenu__titolo a {
    color: inherit;
    text-decoration: none;
  }

  .gr-megamenu__elenco {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gr-megamenu__elenco a {
    font-size: 0.88rem;
    text-decoration: none;
    color: inherit;
    transition: color 0.15s ease;
  }

  .gr-megamenu__elenco a:hover,
  .gr-megamenu__elenco a:focus-visible {
    color: var(--accento, currentColor);
  }

  /* ------------------------------------------------------------------
     Sotto i 992px la tendina non ha spazio: il menu diventa un elenco che
     scorre e le tendine restano chiuse. Aprirle su un telefono
     coprirebbe lo schermo intero con duecento collegamenti.
     ------------------------------------------------------------------ */

  @media (max-width: 991.98px) {
    .gr-megamenu__voci {
      /* Lo scorrimento e la barra sottile valgono gia' a tutte le larghezze:
         qui resta solo cio' che e' proprio del tocco. Ripetere `overflow-x` e
         `scrollbar-width` faceva credere che sopra i 992 fossero diversi — ed
         era vero, erano nascosti, ed e' il difetto che si e' corretto. */
      -webkit-overflow-scrolling: touch;
    }

    .gr-megamenu__tendina {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gr-megamenu__tendina,
    .gr-megamenu__collegamento,
    .gr-megamenu__elenco a {
      transition: none;
    }
  }
}

/* La tendina non sfonda piu' la piega.
 *
 * Misurato su un portatile da 1366x768: la tendina «Brand» parte a y=162 ed e'
 * alta 755px, quindi finisce a 917 — CENTOQUARANTANOVE PIXEL SOTTO IL BORDO
 * DELLO SCHERMO. Cinque marchi (Seletti, Talenti, Varaschin, Vesta Home, Zalf)
 * erano irraggiungibili col mouse, e non c'era modo di accorgersene: la
 * tendina non aveva `max-height` ne' scorrimento proprio, e la testata e'
 * appiccicata in cima, quindi far scorrere la pagina non la recuperava — si
 * portava giu' anche lei. «Designer», con novantaquattro nomi, ce la faceva per
 * sei pixel: al primo nome aggiunto cascava anche quella.
 *
 * Il limite e' in unita' di finestra e non in pixel legati all'altezza della
 * testata, che nessuno qui conosce e che cambia col negozio: 70vh su uno
 * schermo da 768 vale 537, e con una testata da 169 restano sessanta pixel di
 * margine. Il secondo termine serve sui monitor alti, dove il 70% di 1440
 * sarebbe una tendina da mille pixel — piu' alta di quanto un occhio percorra.
 *
 * `overscroll-behavior: contain` perche' altrimenti, arrivati in fondo alla
 * tendina, la rotella comincia a far scorrere la PAGINA sotto: la testata si
 * muove, la tendina la segue, e si perde il segno.
 */
@layer gr-modules {
  .gr-megamenu__tendina {
    max-height: min(70vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}