/* =========================================================
   MENU MOBILE em tela cheia: <dialog> nativo aberto com showModal().
   O navegador cuida de prender o foco, fechar no Esc e devolver o foco
   ao botão MENU. A saída animada é feita via .is-closing (drawer.js).
   ========================================================= */
@layer components {
  .drawer {
    position: fixed; inset: 0;
    width: 100%; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: rgba(34, 58, 44, .97); color: var(--c-white);
    opacity: 0;
    transition: opacity .35s ease;
  }
  .drawer[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 1; }
  .drawer.is-closing { opacity: 0; }
  @starting-style { .drawer[open] { opacity: 0; } }
  .drawer::backdrop { background: transparent; }

  /* "Fechar" ocupa exatamente o lugar do botão MENU */
  .drawer__close {
    position: absolute; top: 0; right: 20px; height: var(--nav-h);
    color: var(--c-white);
    font-family: var(--ff-sans); font-weight: 500; font-size: 13px; letter-spacing: .24em; text-transform: uppercase;
    padding: 10px 4px 10px 12px; margin-right: -.24em;
  }

  .drawer__list { display: flex; flex-direction: column; align-items: center; gap: 34px; list-style: none; }
  .drawer__list a { color: var(--c-white); font-size: 18px; letter-spacing: .18em; padding-block: 6px; }
  .drawer__list a[aria-current] { border-bottom: 1px solid var(--accent); }

  /* entrada em cascata dos links */
  .drawer__list li {
    opacity: 0; translate: 0 12px;
    transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
    transition-delay: calc(80ms + var(--i, 0) * 60ms);
  }
  .drawer[open]:not(.is-closing) .drawer__list li { opacity: 1; translate: 0 0; }
  @starting-style { .drawer[open] .drawer__list li { opacity: 0; translate: 0 12px; } }
}