/* ==========================================================================
   Componentes compartilhados
   - Button (Figma component set 7073:166)
   - Site header (7073:253 default / 7073:254 scroll)
   ========================================================================== */

/* ---------- Button -------------------------------------------------------
   Variantes Figma → classes:
   Type=Primary,  Background=Light  → .btn.btn--primary
   Type=Primary,  Background=Dark   → .btn.btn--primary-dark
   Type=Secondary,Background=Light  → .btn.btn--secondary
   Type=Tertiary, Background=Light  → .btn-link
   Type=Tertiary, Background=Dark   → .btn-link.btn-link--dark
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 32px;                 /* px-[32px] py-[20px] */
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-button);        /* 18px */
  line-height: var(--lh-btn);         /* 25px → altura total 65px (Figma) */
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn--primary { background: var(--color-red-700); color: var(--color-cream-50); }
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--color-red-600); }

.btn--primary-dark { background: var(--color-cream-50); color: var(--color-red-700); }
.btn--primary-dark:hover,
.btn--primary-dark:focus-visible { background: var(--color-cream-100); }

.btn--secondary {
  border: 1px solid var(--color-red-700);
  color: var(--color-red-700);
}
.btn--secondary:hover,
.btn--secondary:focus-visible { border-color: var(--color-red-600); color: var(--color-red-600); }

/* Tertiary = link de texto */
.btn-link {
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-button);
  line-height: var(--lh-display);     /* 1.2 */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-red-700);
  text-decoration: none;
  text-underline-position: from-font;
  transition: color var(--dur) var(--ease);
}
.btn-link:hover,
.btn-link:focus-visible,
.btn-link.is-active { color: var(--color-red-600); text-decoration: underline; text-decoration-thickness: from-font; }

.btn-link--dark { color: var(--color-cream-50); }
.btn-link--dark:hover,
.btn-link--dark:focus-visible,
.btn-link--dark.is-active { color: var(--color-cream-100); }

/* ---------- Site header --------------------------------------------------
   Default (7073:253): 1440×124, px 112, menus py 24 gap 24, logo 108.103×124
   Scroll  (7073:254): 1440×70,  logo 88.051×101 absoluto, centrado, top 0
   Anotação Figma: "Após o scroll, o menu deve ser fixo no topo. O logo
   diminui e fica em posição absoluta."
   ------------------------------------------------------------------------- */
.site-header {
  /* placeholder em fluxo: reserva a altura do header default (evita layout shift) */
  position: relative;
  z-index: 100;
  height: var(--header-h);
}

.site-header__bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: var(--color-cream-50);
  transition: height var(--dur) var(--ease);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
  /* mesma largura do .container: com --section-px = (100vw − 1216)/2 em telas
     largas, um max-width de 1440 deixava só (1440 − 2·px) para menu + logo + menu
     (96px em 2560 — o menu se empilhava sobre o logo com Ctrl −) */
  max-width: calc(var(--content-w) + 2 * var(--section-px));
  margin-inline: auto;
  padding-inline: var(--section-px);
}

.site-header__nav { display: flex; align-self: stretch; }

.site-header__menu {
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  padding-block: 24px;
  margin: 0;
  list-style: none;
}
.site-header__menu--left { width: 346px; padding-right: 24px; }
.site-header__menu--right { width: 346px; justify-content: flex-end; padding-left: 24px; }
.site-header__menu li { display: flex; }

/* Selo redondo (o mesmo do rodapé), centrado na altura da barra */
.site-logo {
  --logo-top: calc((var(--header-h) - var(--logo-h)) / 2);
  position: absolute;
  top: var(--logo-top);
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: var(--logo-w);
  height: var(--logo-h);
  border-radius: 50%;
  transition: width var(--dur) var(--ease), height var(--dur) var(--ease), top var(--dur) var(--ease);
}
.site-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.site-header.is-scrolled .site-header__bar { height: var(--header-h-scroll); }
.site-header.is-scrolled .site-logo {
  --logo-top: calc((var(--header-h-scroll) - var(--logo-h-scroll)) / 2);
  width: var(--logo-w-scroll);
  height: var(--logo-h-scroll);
}

/* 1024–1199 (iPad deitado): o menu do desktop continua, mas os links têm só
   22px de altura. Área de toque invisível de 44px (22 + 11 + 11) e 12px a
   mais de cada lado — com o gap de 24 as áreas vizinhas não se sobrepõem, e
   o padding-block de 24 do menu comporta os 11px (também no header de 70px
   depois do scroll). Nada visual muda; ≥1200 fica como no Figma. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .site-header__menu .btn-link { position: relative; }
  .site-header__menu .btn-link::after {
    content: "";
    position: absolute;
    inset: -11px -12px;
  }
}

/* Desktop (≥1024): menu | logo | menu num grid de 3 colunas. O logo entra no
   fluxo (antes era absolute e não ocupava espaço, então nada impedia o menu de
   passar por baixo dele quando a área útil encolhia — zoom do navegador,
   escala do Windows, fonte maior). Colunas laterais iguais = logo exatamente
   no centro (665.95 @1440, como no Figma). Se faltar espaço, o menu quebra
   em 2 linhas dentro da própria coluna em vez de invadir o logo. */
@media (min-width: 1024px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
  }
  .site-header__inner > .site-header__nav:first-of-type { grid-column: 1; min-width: 0; }
  .site-header__inner > .site-header__nav:last-of-type { grid-column: 3; justify-self: end; min-width: 0; }
  .site-logo {
    position: relative;
    top: var(--logo-top);
    left: auto;
    grid-column: 2;
    grid-row: 1;
    transform: none;
  }
  .site-header__menu--left,
  .site-header__menu--right {
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* ---------- Header: tablet/mobile (padrão do site de referência) ---------
   O Figma só tem desktop 1440. Abaixo de 1024px: barra 72px com borda
   inferior, logo à esquerda, hambúrguer 44×44 à direita; menu em painel
   abaixo da barra com links em lista, divisores e CTAs no fim.
   ------------------------------------------------------------------------- */
.site-header__toggle,
.site-header__drawer { display: none; }

@media (max-width: 1023.98px) {
  .site-header__nav { display: none; }

  .site-header__bar { border-bottom: 1px solid var(--color-red-700-a15); }
  .site-header__inner { align-items: center; }

  .site-logo {
    left: var(--section-px);
    transform: none;
  }
  /* menu aberto: logo no tamanho reduzido para não cobrir as opções */
  .site-header.is-menu-open .site-logo {
    --logo-top: calc((var(--header-h-scroll) - var(--logo-h-scroll)) / 2);
    width: var(--logo-w-scroll);
    height: var(--logo-h-scroll);
  }

  .site-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    margin-right: -10px;
    color: var(--color-red-700);
  }
  .site-header__toggle-bars,
  .site-header__toggle-bars::before,
  .site-header__toggle-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .site-header__toggle-bars { position: relative; }
  .site-header__toggle-bars::before,
  .site-header__toggle-bars::after { content: ""; position: absolute; left: 0; }
  .site-header__toggle-bars::before { top: -7px; }
  .site-header__toggle-bars::after { top: 7px; }
  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars { background: transparent; }
  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::before { transform: translateY(7px) rotate(45deg); background: var(--color-red-700); }
  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); background: var(--color-red-700); }

  /* Painel do menu (pedido do cliente: redesenho) — tela cheia abaixo da
     barra, links grandes em Anton com divisores, sabores em chips com a cor
     de cada sabor e ações da marca no pé (pílulas do componente Button). */
  .site-header__drawer {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 8px var(--section-px) calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--color-cream-50);
    overscroll-behavior: contain;
  }
  .site-header__drawer[hidden] { display: none; }

  .mobile-nav__list,
  .mobile-nav__chips { margin: 0; padding: 0; list-style: none; }

  .mobile-nav__item { border-bottom: 1px solid var(--color-red-700-a15); }

  .mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-red-700);
  }
  /* seta → à direita de cada link */
  .mobile-nav__link::after {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur) var(--ease);
  }

  /* Sabores: submenu leve em 2 colunas — bolinha na cor do sabor + texto
     (mesmas cores do cardápio). Compacto, sem borda nem fundo. */
  .mobile-nav__item--sabores .mobile-nav__link { padding-bottom: 10px; }
  .mobile-nav__chips {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 2px 28px;
    padding-bottom: 16px;
  }
  .mobile-nav__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;                   /* alvo de toque com o texto pequeno */
    padding: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-red-700);
    transition: color var(--dur) var(--ease);
  }
  .mobile-nav__chip::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip, var(--color-red-700));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1);
  }
  .mobile-nav__chip:active { color: var(--color-red-600); }

  /* Ações no pé do painel (sobem para junto da lista quando sobra espaço) */
  .mobile-nav__actions {
    display: grid;
    gap: 12px;
    margin-top: auto;
    padding-top: 28px;
  }
  .mobile-nav__btn { width: 100%; gap: 10px; }
  .mobile-nav__wa {
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("../images/icon-whatsapp.svg") no-repeat center / contain;
            mask: url("../images/icon-whatsapp.svg") no-repeat center / contain;
  }

  .mobile-nav__contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    margin: 0;
    padding-top: 18px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-red-700);
  }
  .mobile-nav__contact a {
    text-decoration: underline;
    text-decoration-color: var(--color-red-700-a15);
    text-underline-offset: 3px;
  }

  /* com o menu aberto: página parada atrás e sem o botão flutuante por cima */
  html.is-menu-open { overflow: hidden; }
  .site-header.is-menu-open ~ .whatsapp-fab { opacity: 0; visibility: hidden; }

  /* entrada: painel desce e os itens chegam em cascata */
  @media (prefers-reduced-motion: no-preference) {
    .site-header__drawer:not([hidden]) {
      animation: mobile-nav-in .32s var(--ease) both;
    }
    .site-header__drawer:not([hidden]) .mobile-nav__item,
    .site-header__drawer:not([hidden]) .mobile-nav__actions,
    .site-header__drawer:not([hidden]) .mobile-nav__contact {
      animation: mobile-nav-item-in .5s var(--ease) both;
    }
    .site-header__drawer .mobile-nav__item:nth-child(1) { animation-delay: .06s; }
    .site-header__drawer .mobile-nav__item:nth-child(2) { animation-delay: .1s; }
    .site-header__drawer .mobile-nav__item:nth-child(3) { animation-delay: .14s; }
    .site-header__drawer .mobile-nav__item:nth-child(4) { animation-delay: .18s; }
    .site-header__drawer .mobile-nav__item:nth-child(n+5) { animation-delay: .22s; }
    .site-header__drawer .mobile-nav__actions { animation-delay: .26s; }
    .site-header__drawer .mobile-nav__contact { animation-delay: .3s; }
  }
}

@keyframes mobile-nav-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes mobile-nav-item-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Tablet: links um pouco maiores e painel mais arejado --------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .site-header__drawer { padding-top: 16px; }
  .mobile-nav__link { font-size: 36px; padding-block: 20px; }
  .mobile-nav__actions { grid-template-columns: 1fr 1fr; }
}

/* ---------- Menu em telas baixas (celular deitado) ----------------------- */
@media (max-width: 1023.98px) and (max-height: 560px) {
  .mobile-nav__link { font-size: 22px; padding-block: 10px; }
  .mobile-nav__item--sabores .mobile-nav__link { padding-bottom: 8px; }
  .mobile-nav__chips { padding-bottom: 10px; }
  .mobile-nav__chip { min-height: 28px; }
  .mobile-nav__actions { grid-template-columns: 1fr 1fr; padding-top: 16px; }
  .mobile-nav__contact { padding-top: 10px; }
}

/* ---------- Botão flutuante do WhatsApp (tablet/mobile, como na referência) */
.whatsapp-fab { display: none; }
@media (max-width: 1023.98px) {
  .whatsapp-fab {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-whatsapp);
    box-shadow: 0 6px 20px rgb(0 0 0 / .18);
  }
  .whatsapp-fab::before {
    content: "";
    width: 28px;
    height: 28px;
    background: var(--color-white);
    -webkit-mask: url("../images/icon-whatsapp.svg") no-repeat center / contain;
            mask: url("../images/icon-whatsapp.svg") no-repeat center / contain;
  }
}

/* ---------- Botões no mobile: mais compactos (50px de altura) ---------- */
@media (max-width: 767.98px) {
  .btn { padding: 14px 24px; }
}