/* ==================================================================
   Pannello di navigazione off canvas.
   Attivo da 1024px in giu': tablet in orizzontale compreso.
   ================================================================== */

/* Il pannello vive fuori dal flusso: di default non esiste. */
.pannello-menu { display: none; }

/* Scroll bloccato mentre il pannello e' aperto. */
.menu-aperto,
.menu-aperto body { overflow: hidden; }

@media (max-width: 1024px) {

  /* La navigazione a barra sparisce, resta il pulsante. */
  .nav-principale { display: none; }
  .menu-toggle { display: inline-flex; }

  .testata__interno { grid-template-columns: auto 1fr; }
  .marchio { justify-self: start; text-align: left; }
  .marchio--pie .marchio__sottotitolo,
  .testata .marchio__sottotitolo { padding-left: 0; }

  .pannello-menu {
    display: block;
    position: fixed;
    inset: 0;
    /* Sopra a tutto: testata sticky (50), barra catalogo (40) e admin bar. */
    z-index: 9999;
  }

  .pannello-menu__velo {
    position: absolute;
    inset: 0;
    background: rgba(35, 18, 22, 0.55);
    opacity: 0;
    transition: opacity var(--t-media) var(--easing);
  }
  .pannello-menu.is-aperto .pannello-menu__velo { opacity: 1; }

  .pannello-menu__corpo {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(400px, 86vw);
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    background: var(--crema);
    border-inline-start: 1px solid var(--filetto);
    box-shadow: -18px 0 44px rgba(40, 20, 25, 0.18);
    padding: var(--sp-s) var(--gutter) var(--sp-m);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--t-media) var(--easing);
  }
  .pannello-menu.is-aperto .pannello-menu__corpo { transform: translateX(0); }

  .pannello-menu__testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-s);
    padding-bottom: var(--sp-s);
    border-bottom: 1px solid var(--filetto);
  }
  .pannello-menu__testa .marchio { color: var(--bordeaux); }

  .pannello-menu__chiudi {
    background: none;
    border: 1px solid var(--filo-bordeaux);
    border-radius: var(--r-bottone);
    color: var(--bordeaux);
    font-size: 22px;
    line-height: 1;
    /* Bersaglio da 44px: sotto non e' comodo da toccare. */
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
  }
  .pannello-menu__chiudi:hover { background: var(--bordeaux); color: var(--crema); }

  .pannello-menu ul { display: grid; gap: 0; }
  .pannello-menu a {
    display: block;
    padding: 16px 0;
    font-family: var(--font-etichetta);
    font-size: 17px;
    letter-spacing: var(--ls-nav);
    text-transform: uppercase;
    color: var(--inchiostro);
    border-bottom: 1px solid var(--filetto);
  }
  .pannello-menu a:hover,
  .pannello-menu a[aria-current="page"] { color: var(--bordeaux); }

  /* Le eventuali voci di secondo livello restano leggibili come tali. */
  .pannello-menu .sotto-menu a {
    padding-left: var(--sp-s);
    font-size: 14px;
    color: var(--testo-tenue);
  }

  /* Chiusura del pannello: un link a filo e due recapiti minuti. Il resto
     del pannello e' tutto sottile, un bottone pieno qui pesava troppo. */
  .pannello-menu__pie {
    margin-top: auto;
    padding-top: var(--sp-s);
  }
  .pannello-menu__recapiti {
    display: grid;
    gap: 4px;
    margin-top: 18px;
  }
  .pannello-menu__recapiti a {
    /* Annulla lo stile delle voci di menu: qui non sono navigazione. */
    display: inline;
    padding: 0;
    border: 0;
    font-family: var(--font-corpo);
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: var(--testo-tenue);
  }
  .pannello-menu__recapiti a:hover { color: var(--bordeaux); }
}

/* A movimento ridotto il pannello compare senza scorrere. */
@media (prefers-reduced-motion: reduce) {
  .pannello-menu__corpo,
  .pannello-menu__velo { transition: none; }
}