/* A GAVETA DO MENU, NO BLOG — ESTE ARQUIVO É GERADO.
   Não o edite: ele é recortado de design/tokens-e-base.css, design/confirmacao-da-compra.css
   e design/cabecalho-gaveta-e-idioma.css a cada construção, pelo
   .github/scripts/a_gaveta_do_app_no_blog.py. Mexer na gaveta se faz LÁ, e a do blog
   acompanha sozinha. */

/* Os tokens do app, só dentro da gaveta e do véu. */
.nav-drawer, .nav-scrim{
  --card:#FFFFFF;
  --border:rgba(31,26,18,0.10);
  --border-soft:rgba(31,26,18,0.06);
  --brass:#C29E6F;
  --brass-dark:#526578;
  --brass-light:#F2E7D5;
  --ink:#162435;
  --ink-soft:#33415A;
  --radius-sm:3px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-base:240ms;
  --fonte-interface:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Inter', Roboto, system-ui, sans-serif;
  --c-corpo:14.5px;
  --c-etiqueta:10.5px;
}

.nav-drawer{position:fixed; top:0; left:0; bottom:0; z-index:200;
  width:min(330px, 86vw); background:var(--card); border-right:1px solid var(--border);
  
  transform:translateX(-100%); transition:transform var(--dur-base) var(--ease);
  display:flex; flex-direction:column; overscroll-behavior:contain;}
.nav-drawer.show{transform:translateX(0); box-shadow:14px 0 44px rgba(20,16,25,0.18);}
.nav-drawer-head{flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--border-soft);}
.nav-drawer-close{width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:#fff; color:var(--ink-soft); font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center;}
.nav-drawer-close:hover{border-color:var(--brass); color:var(--brass-dark);}
.nav-drawer-body{flex:1; overflow-y:auto; padding:10px 10px 28px;}
.nav-drawer-body::-webkit-scrollbar{width:6px;}
.nav-drawer-body::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px;}
.nav-cat > summary{font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.11em; color:var(--brass-dark);
  font-weight:700; padding:14px 12px 12px; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-radius:var(--radius-sm);}
.nav-cat > summary::-webkit-details-marker{display:none;}
.nav-cat > summary::marker{content:"";}
.nav-cat > summary::after{content:""; width:7px; height:7px; flex:none; margin-right:4px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur-base) var(--ease);}
.nav-cat[open] > summary::after{transform:rotate(-135deg) translate(-3px,-3px);}
.nav-cat > a{padding-left:22px;}
.nav-cat[open]{margin-bottom:8px;}
.nav-drawer a{display:block; font-size:var(--c-corpo); font-weight:500; color:var(--ink-soft); line-height:1.35;
  padding:10px 12px; border-radius:var(--radius-sm);}
.nav-drawer a:hover{background:var(--brass-light); color:var(--brass-dark);}
.nav-drawer a.is-current{background:var(--brass-light); color:var(--brass-dark); font-weight:600;}
.nav-drawer a.nav-inicio{font-weight:700; color:var(--brass-dark);}
.nav-drawer a.nav-login{text-align:center; font-weight:700; color:var(--brass-dark);
  background:var(--brass-light); border:1px solid rgba(194,158,111,0.38);
  padding:12px; margin:2px 2px 4px;}
.nav-drawer a.nav-login:hover{background:var(--brass); color:#fff; border-color:var(--brass);}
.nav-sep{height:1px; background:var(--border-soft); margin:8px 12px;}
@media (hover:hover) and (pointer:fine){.nav-cat > summary:hover{background:var(--brass-light); color:var(--brass-dark);}}
@media (prefers-reduced-motion:reduce){.nav-cat > summary::after{transition:none;}}

/* O véu atrás da gaveta. */
.nav-scrim{position:fixed; inset:0; z-index:190; background:rgba(20,16,25,0.42);
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);}
.nav-scrim.show{opacity:1; pointer-events:auto;}

/* AS LINHAS PRÓPRIAS DESTE ARQUIVO, e cada uma tem motivo:
   1. a página do blog escreve em Inter, e a gaveta do app em fonte de interface do
      aparelho: sem esta linha o mesmo menu sairia em duas letras;
   2. o link do blog é sublinhado por regra geral, e o da gaveta não;
   3. fechada, a gaveta só está fora da tela, e a tecla Tab entraria nos links invisíveis
      dela: `visibility:hidden` a tira da ordem do teclado, depois que a saída termina;
   4. a cabeça da gaveta leva o `✕` à direita: no app isso é um `style` escrito dentro do
      `index.html`, que não é folha e por isso não vem junto. */
.nav-drawer{font-family:var(--fonte-interface);}
.nav-drawer-head{justify-content:flex-end;}
.nav-drawer a{text-decoration:none;}
.nav-drawer:not(.show){visibility:hidden; transition:transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);}
.nav-drawer.show{visibility:visible; transition:transform var(--dur-base) var(--ease);}