/* Base do tema elfvape — só o alicerce mobile do contrato. */

:root {
  --elf-max: 1200px;
  --elf-gap: 16px;
  --elf-toque: 44px;              /* alvo mínimo de toque (contrato mobile) */
  --elf-safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

/* trava de overflow lateral: no WebKit a home media 419px de scrollWidth num
   viewport de 390 e "balançava" ao segurar e arrastar. `clip` no body é a trava boa (não
   cria contexto de rolagem e não quebra `position: sticky`); o `hidden` no html cobre o
   WebKit, que ignora o clip do body quando quem propaga a rolagem é o elemento raiz. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
/* letra em rem no tema todo (K21, A151): 1rem = 16px no padrão e acompanha o tamanho de letra escolhido
   no navegador. Os clamp() da home ficam em px: medem a arte do banner */
body { overflow-x: clip; margin: 0; font-size: 1rem; line-height: 1.5; }

img, video { max-width: 100%; height: auto; }

.elf-wrap { max-width: var(--elf-max); margin: 0 auto; padding: 0 var(--elf-gap); }

/* alvo de toque: nada clicável menor que 44px */
a.button, button, input[type="submit"] {
  min-height: var(--elf-toque);
  min-width: var(--elf-toque);
}

/* iOS só evita o auto-zoom com fonte >= 16px no campo */
input, select, textarea, button { font-size: 1rem; font-family: inherit; }

/* gaveta/drawer usa a altura REAL do viewport no celular (100vh mente com a barra do Safari) */
.elf-drawer { height: 100dvh; }

/* breakpoints da obra (mobile-first): 390 base · 768 tablet · 1024 desktop · 1440 largura do gabarito */
@media (min-width: 768px)  { :root { --elf-gap: 20px; } }
@media (min-width: 1024px) { :root { --elf-gap: 24px; } }