/**
 * Il pulsante del menu nella riga alta della testata — GR Fashion Consulting
 *
 * NESSUN COLORE LETTERALE. Ogni valore cromatico passa da una `var()` con un
 * ripiego neutro: cosi' il componente 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 e' separato da `megamenu.css` perche' sono due componenti con due
 * destini: la fascia vive nella zona del menu, questo nella riga della testata.
 * Un tema che usa una zona sola non si porta dietro le regole dell'altra.
 *
 * QUI NON C'E' NESSUNA REGOLA DI COLLOCAZIONE — niente `order`, niente `flex`,
 * niente punti di rottura. Dove sta il pulsante nella riga lo decide il tema,
 * che e' l'unico a sapere cosa c'e' intorno; il modulo decide solo che aspetto
 * ha. Un modulo che si posiziona da se' dentro la riga di un tema qualunque va
 * a finire davanti alla barra di ricerca.
 */


/* Dentro `@layer gr-modules` come `megamenu.css`, per la stessa ragione: un
 * foglio non incapsulato batte QUALUNQUE livello, e un modulo che scrive fuori
 * dai livelli non e' piu' sovrascrivibile dal tema che lo ospita — il rapporto
 * si rovescia, e il tema non ha piu' l'ultima parola sul proprio aspetto. */
@layer gr-modules {

  .gr-megamenu-testata {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    /* La riga della testata e' `align-items: stretch`: senza questo il
       contenitore prende tutta l'altezza della riga e il pulsante dentro con
       lui, che e' esattamente il difetto da cui si viene — un blocco pieno alto
       quanto la fascia, che su un negozio di arredamento di alta gamma legge
       come un adesivo di sconto invece che come un invito. */
    align-self: center;
  }

  .gr-megamenu-testata__azione {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    /* Il respiro verticale sta QUI, nel padding e in un'altezza minima propria,
       e non nell'altezza della riga che lo contiene. E' cio' che lo fa leggere
       come un pulsante inserito nella riga invece che come una striscia. */
    min-height: 2.25rem;
    padding: 0.5rem 1rem;

    font-size: 0.8rem;
    font-weight: 500;

    /* Nessun `text-transform`. Nella fascia le voci sono maiuscole perche' sono
       etichette di reparto; questo e' una frase, e in maiuscolo pieno una frase
       di due parole occupa un terzo di spazio in piu' e si legge peggio. */
    letter-spacing: 0.03em;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;

    /* La riga alta non ha spazio da regalare a un pulsante che va a capo: se
       manca larghezza deve stringersi il contenitore, non spezzarsi l'etichetta
       su due righe dentro una riga alta 58 pixel. */
    white-space: nowrap;

    border: 1px solid var(--filetto, rgba(0, 0, 0, 0.18));
    border-radius: 2px;
    color: inherit;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  /* La prominenza e' una scelta di chi vende, non di chi disegna: l'interruttore
     «evidenziata» del pannello resta l'unico a deciderla, e qui si limita a
     riempire il pulsante col colore d'accento del tema. Una voce di testata NON
     evidenziata resta un collegamento discreto col filetto del tema. */
  .gr-megamenu-testata__azione--evidenziata {
    background: var(--accento-fondo, var(--accento, #333));
    border-color: var(--accento-fondo, var(--accento, #333));
    color: var(--accento-testo, #fff);
  }

  /* `brightness` e non un secondo token di colore: il tema ne dichiara uno solo
     per l'accento, e inventarne qui una variante scura significherebbe scriverla
     letterale — cioe' fissare un colore che al prossimo cambio di tavolozza
     resta indietro. */
  .gr-megamenu-testata__azione--evidenziata:hover {
    filter: brightness(0.92);
  }

  .gr-megamenu-testata__azione:not(.gr-megamenu-testata__azione--evidenziata):hover {
    border-color: var(--accento, currentColor);
    color: var(--accento, currentColor);
  }

  /* Lo scarto di 2px tiene il contorno FUORI dal pulsante. Dentro, su un
     pulsante pieno di accento, un contorno dello stesso accento non si vede: il
     comando resterebbe raggiungibile da tastiera e invisibile a chi lo raggiunge. */
  .gr-megamenu-testata__azione:focus-visible {
    outline: 2px solid var(--accento, currentColor);
    outline-offset: 2px;
  }

  .gr-megamenu-testata__etichetta {
    padding: 0.1rem 0.35rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    border-radius: 2px;
    background: var(--fondo, #fff);
    color: var(--testo, inherit);
  }

  /* Su un dispositivo a tocco l'altezza minima non e' questione di estetica:
     36 pixel stanno sotto la soglia di 44 che le linee guida chiedono per un
     bersaglio da dito, e un invito all'azione che si manca e' un invito che
     non viene raccolto. `pointer: coarse` e non un punto di rottura di
     larghezza: a decidere e' il dito, non lo schermo — un tablet da 1024 col
     tocco ha lo stesso problema di un telefono da 375. */
  @media (pointer: coarse) {
    .gr-megamenu-testata__azione {
      min-height: 2.75rem;
      padding-inline: 1.25rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gr-megamenu-testata__azione {
      transition: none;
    }
  }
}