/*
 * Menu mobile a schermo intero, con la sua barra (logo + chiudi): funziona anche a metà pagina, dove l'header
 * (non sticky) è già uscito dallo schermo. Lo scroll si blocca sul body, mai su <html>. JS: components/menu.js.
 */
@layer components {
  .mobile-menu {
    /* pointer-events: sta dentro l'header, che scorrendo lascia passare i clic (site-header.css): qui vanno ripresi */
    position: fixed; inset: 0; z-index: 60; pointer-events: auto;
    display: flex; flex-direction: column; gap: 24px;
    padding: 16px var(--gutter) 32px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--color-primary-dark); color: #fff;
    &[hidden] { display: none; }
  }
  .mobile-menu__bar {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 8px 8px 8px 18px; border-radius: var(--radius-pill); background: var(--color-bg);
  }
  .mobile-menu__bar img { height: 42px; width: auto; }
  .mobile-menu__close {
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--color-primary); color: var(--color-on-primary);
  }
  .mobile-menu__nav { display: flex; flex-direction: column; }
  .mobile-menu__link {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 18px 4px; border-bottom: 1px solid rgb(255 255 255 / 0.18);
    color: #fff; font-weight: 600; font-size: 26px; letter-spacing: -0.03em;
    &:hover, &.is-current { color: var(--color-accent); }
  }
  /* Voci di secondo livello sotto la voce madre (la sezione decide la griglia) */
  .mobile-menu__sub { padding: 14px 0 18px; border-bottom: 1px solid rgb(255 255 255 / 0.18); }
  .mobile-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
  .mobile-menu__info { font-size: 15px; color: rgb(255 255 255 / 0.85); & a { color: #fff; font-weight: 700; } }
}