/* ============================================================================
   EMMA CAFÉ BISTROT — css/site.css
   Camada estrutural COMPARTILHADA por todas as páginas: header, navegação,
   menu mobile, rodapé, aviso de cookies. Consome DIRETAMENTE os tokens de
   design-system.css (--fundo, --vinho, --texto, --texto-muted, --footer-bg, --fonte-base,
   --tracking-*, --respiro-secao). Nenhum token legado, nenhuma cor crua.
   Zero card, zero borda decorativa, zero linha divisória, zero sombra,
   zero radius, zero pill, zero animação decorativa.
   Feito por Frame Tecnologia.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────
   SCROLLBAR ON-BRAND — vinho sobre o fundo, em todo o site.
   Firefox: scrollbar-width + scrollbar-color (aplicado globalmente).
   Webkit (Chrome/Safari/Edge): pseudo-elementos ::-webkit-scrollbar,
   também globais. Quadrada (zero radius/pill), como manda o sistema.
────────────────────────────────────────────────────────────── */
:root{
  scrollbar-width:thin;
  scrollbar-color:var(--vinho) var(--fundo);
}
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:var(--fundo); }
*::-webkit-scrollbar-thumb{
  background-color:var(--vinho);
  border:2px solid transparent; background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background-color:color-mix(in srgb, var(--vinho) 78%, black); }
*::-webkit-scrollbar-corner{ background:transparent; }

/* ─────────────────────────────────────────────────────────────
   ACESSIBILIDADE — pular para conteúdo
────────────────────────────────────────────────────────────── */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--vinho); color:var(--fundo);
  padding:.85rem 1.25rem;
  font-weight:var(--peso-medio); font-size:.875rem;
}
.skip-link:focus{ left:0; }

/* Oculta visualmente mantendo acessível a leitores de tela (ex: <h1> semântico
   sem repetir a logo, que já aparece no cabeçalho) */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Âncoras de seção não ficam escondidas atrás de elementos sticky */
main [id]{ scroll-margin-top: 96px; }

@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}

/* ─────────────────────────────────────────────────────────────
   HEADER / NAVEGAÇÃO — texto puro, sem botão, sem pill, sem fundo
   colorido. Hamburguer mobile só como controle funcional.
────────────────────────────────────────────────────────────── */
.site-header{
  position:relative; z-index:100;
  background:var(--fundo);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,32px); padding-block:1rem;
}
.header-logo{ display:inline-flex; align-items:center; flex-shrink:0; }
/* aspect-ratio explícito = proporção real do arquivo (2254x880), trava o espaço
   reservado ANTES do carregamento no mesmo valor da imagem decodificada — sem
   isso, o height:38px + width:auto reserva espaço com base no width/height do
   HTML (proporção diferente da do arquivo real) e causa reflow no load (CLS). */
.header-logo img{ width:auto; height:38px; aspect-ratio:2254 / 880; }

.nav-principal{ flex:1; }
.nav-lista{
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem);
  list-style:none; margin:0; padding:0;
}
.nav-link{
  display:inline-block; padding:.35rem 0; position:relative;
  color:var(--texto); font-weight:var(--peso-negrito);
  font-size:.78rem; letter-spacing:var(--tracking-rotulo); text-transform:uppercase;
  text-decoration:none; border-bottom:2px solid transparent;
  transition:color 160ms cubic-bezier(.22,1,.36,1), border-color 160ms cubic-bezier(.22,1,.36,1);
}
.nav-link:hover{ color:var(--vinho); text-decoration:none; }
.nav-link.is-active{ color:var(--vinho); border-color:var(--vinho); }

.header-acoes{ display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.header-whatsapp{ padding:.6rem 1.1rem; font-size:.78rem; }
.header-whatsapp .icon-whatsapp{ width:15px; height:15px; }

/* Botão hamburguer — some no desktop */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:0; border:0; background:transparent;
  cursor:pointer;
}
.hamburger-bar{
  display:block; width:100%; height:2px; background:var(--texto);
  transition:transform 160ms cubic-bezier(.22,1,.36,1), opacity 160ms cubic-bezier(.22,1,.36,1);
}
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-overlay{
  display:none; position:fixed; inset:0; z-index:90;
  background:rgba(0,0,0,.45);
}
.nav-overlay.is-open{ display:block; }

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .nav-principal{
    position:absolute; left:0; right:0; top:100%; z-index:95;
    background:var(--fundo);
    max-height:0; overflow:hidden; transition:max-height 260ms cubic-bezier(.22,1,.36,1);
  }
  .nav-principal.is-open{ max-height:80vh; overflow-y:auto; }
  .nav-lista{ flex-direction:column; align-items:flex-start; gap:0; padding:.5rem clamp(20px,4vw,56px) 1.25rem; }
  .nav-item{ width:100%; }
  .nav-link{ display:block; width:100%; padding:.85rem 0; }
  .header-whatsapp span{ display:none; }
  .header-whatsapp{ padding:.6rem .75rem; }
}

/* ─────────────────────────────────────────────────────────────
   RODAPÉ — faixa bordo (--footer-bg), full-bleed, texto em branco.
   Único bloco escuro do site (como no mockup referencia-rapha).
────────────────────────────────────────────────────────────── */
.site-footer{ background:var(--footer-bg); color:var(--branco); }
.footer-inner{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:clamp(24px,4vw,48px);
  padding-block:var(--respiro-secao);
}
.footer-logo{ display:inline-block; margin-bottom:1rem; }
/* mesma blindagem de CLS do .header-logo (ver comentário acima) — arquivo real
   também é 2254x880. */
.footer-logo img{ width:auto; height:40px; aspect-ratio:2254 / 880; }
.footer-assinatura{ max-width:32ch; color:color-mix(in srgb, var(--branco) 70%, transparent); font-size:.875rem; line-height:var(--altura-linha); margin:0 0 1.25rem; }
.footer-redes{ display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; }
.footer-rede{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none;
  color:var(--branco);
  transition:opacity 160ms cubic-bezier(.22,1,.36,1);
}
.footer-rede:hover{ opacity:.7; text-decoration:none; }
.footer-rede--soon{ opacity:.45; cursor:default; pointer-events:none; }

.footer-titulo{
  margin:0 0 .9rem; color:var(--branco); font-weight:var(--peso-negrito);
  font-size:.72rem; letter-spacing:var(--tracking-rotulo); text-transform:uppercase;
}
.footer-dado{ margin:0 0 .35rem; color:var(--branco); font-size:.875rem; font-style:normal; line-height:1.55; }
.footer-dado--destaque{ font-weight:var(--peso-medio); }
.footer-address{ font-style:normal; }
.footer-rota{ display:inline-block; margin-top:.75rem; }

.footer-nav-lista{ list-style:none; margin:0 0 1.25rem; padding:0; }
.footer-link{
  display:inline-block; padding:.3rem 0; color:var(--branco);
  font-size:.875rem; text-decoration:none;
}
.footer-link:hover{ color:var(--acento-salmao); text-decoration:none; }

.footer-base{ padding-block:1.25rem; }
.footer-base__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-copy{ margin:0; color:color-mix(in srgb, var(--branco) 70%, transparent); font-size:.78rem; }
.footer-legal{ display:flex; align-items:center; gap:.5rem; }
.footer-legal__link{ color:color-mix(in srgb, var(--branco) 70%, transparent); font-size:.78rem; text-decoration:none; }
.footer-legal__link:hover{ color:var(--acento-salmao); text-decoration:underline; }
.footer-legal__sep{ color:color-mix(in srgb, var(--branco) 70%, transparent); font-size:.78rem; }
@media (max-width:520px){
  .footer-base__inner{ flex-direction:column; text-align:center; }
}

@media (max-width:860px){
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .footer-marca{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .footer-inner{ grid-template-columns:1fr; }
}

/* ─────────────────────────────────────────────────────────────
   AVISO DE COOKIES (LGPD) — includes/cookie-consent.php.
   Faixa de largura total, ancorada no rodapé da viewport. Sem
   card, sem borda, sem radius, sem sombra, sem animação de
   entrada. Fundo sólido igual ao do site, texto preto suave, duas ações
   em texto sublinhado com o mesmo peso visual.
   Estado padrão: aria-hidden="true" (JS decide se e quando mostrar).
────────────────────────────────────────────────────────────── */
.cookie-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  width:100%; max-width:none; margin:0;
  padding:1.1rem 1.5rem;
  background:var(--fundo); color:var(--texto);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.5rem 2rem; text-align:center;
}
.cookie-consent[aria-hidden="true"]{ display:none; }
.cookie-consent__texto{ margin:0; max-width:70ch; font-size:.875rem; line-height:var(--altura-linha); color:var(--texto); }
.cookie-consent__texto a{ color:var(--vinho); text-decoration:underline; text-underline-offset:2px; }

.cookie-consent__acoes{ display:flex; align-items:center; gap:1.5rem; flex-shrink:0; }
.cookie-consent__btn{
  display:inline; padding:0; margin:0; border:0; background:transparent;
  font-family:var(--fonte-base); font-weight:var(--peso-medio); font-size:.82rem;
  letter-spacing:.02em; color:var(--vinho);
  text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}
/* "Aceitar" e "Recusar" com o mesmo peso visual (art. 8º da LGPD:
   consentimento livre — nunca destacar só a opção de aceitar). */
.cookie-consent__btn:hover{ color:color-mix(in srgb, var(--vinho) 78%, black); }

@media (max-width:600px){
  .cookie-consent{ padding:1rem 1.25rem; gap:.75rem; text-align:left; justify-content:flex-start; }
  .cookie-consent__texto{ width:100%; max-width:none; }
  .cookie-consent__acoes{ width:100%; justify-content:flex-start; }
}

/* ─────────────────────────────────────────────────────────────
   BOTÃO FLUTUANTE DE WHATSAPP — includes/whatsapp-fab.php.
   Fixo no canto inferior direito, em todas as páginas. Sobe
   automaticamente (--cookie-consent-h, setado por
   js/cookie-consent.js) enquanto o aviso de cookies estiver
   visível, pra nunca sobrepor o texto/ações do banner.
────────────────────────────────────────────────────────────── */
.whatsapp-float{
  position:fixed;
  right:clamp(16px,4vw,28px);
  bottom:calc(clamp(16px,4vw,28px) + var(--cookie-consent-h, 0px));
  z-index:9998; /* abaixo do cookie-consent (9999), acima do resto */
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:999px;
  background:var(--vinho); color:var(--fundo);
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  transition:background 160ms cubic-bezier(.22,1,.36,1), transform 160ms cubic-bezier(.22,1,.36,1), bottom 200ms cubic-bezier(.22,1,.36,1);
}
.whatsapp-float:hover{
  background:color-mix(in srgb, var(--vinho) 78%, black);
  transform:translateY(-2px);
  text-decoration:none;
}
.whatsapp-float:focus-visible{ outline:2px solid var(--vinho); outline-offset:3px; }
@media (max-width:600px){
  .whatsapp-float{ width:50px; height:50px; }
}