/* ===== Ícones inline (ver inc/icons.php) ===== */
.icone{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}
.icone svg{
    width: 100%;
    height: 100%;
}

/* ===== Header principal =====
   Fundo verde-mata sólido (pedido do Ricardo, 21/07/2026: "um menu que o
   usuário vê", não a barra de admin do WordPress que ele nunca quis mexer).
   Antes era fundo branco/creme com texto verde; agora inverte pra fundo
   verde com texto/ícone branco. */
#site-header{
    background: var(--cor-mata);
}
#site-header .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-lg);
    padding-block: var(--espaco-sm);
}

.logo,
.logo__texto{
    color: var(--cor-branco);
}
.logo img{
    height: 48px;
    width: auto;
}

.menu-principal{
    display: none;
}
.menu-principal ul{
    display: flex;
    align-items: center;
    gap: var(--espaco-md);
}
.menu-principal li{
    display: flex;
    align-items: center;
}
.menu-principal a{
    display: flex;
    align-items: center;
    font-family: var(--fonte-corpo);
    font-weight: 600;
    font-size: var(--texto-sm);
    color: var(--cor-branco);
    padding: var(--espaco-xs) var(--espaco-sm);
    white-space: nowrap;
}
.menu-principal a:hover{
    color: var(--cor-terracota-claro);
}

.header-acoes{
    display: flex;
    align-items: center;
    gap: var(--espaco-md);
}

.carrinho-trigger{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}
.carrinho-trigger svg{
    width: 26px;
    height: 26px;
    color: var(--cor-branco);
}
.carrinho-trigger .cart-count{
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--cor-terracota);
    color: var(--cor-branco);
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.busca-header{
    display: none;
}
/* Achado real (auditoria de responsividade, 01/08/2026): em exatamente
   992px (o breakpoint em que o menu desktop liga), logo + menu + busca
   (200px fixos) + carrinho nao cabiam no container, gerando overflow
   horizontal de ~109px. A barra de busca era o unico elemento com largura
   fixa nesse grupo; virou fluida (clamp) pra encolher na faixa estreita
   992-1199px e so chegar aos 200px completos a partir de 1200px, onde ja
   sobra espaco real (confirmado ao vivo, sem overflow em nenhum
   breakpoint testado depois da correcao). */
.busca-header input{
    background: var(--cor-linho-2);
    border: none;
    border-radius: var(--raio-pill);
    padding: var(--espaco-xs) var(--espaco-md);
    font-size: var(--texto-sm);
    width: clamp(120px, 16vw, 200px);
}

.menu-toggle{
    display: flex;
    align-items: center;
    gap: var(--espaco-2xs);
    font-weight: 700;
    font-size: var(--texto-sm);
    color: var(--cor-branco);
    /* Área de toque real mínima 44x44px (WCAG 2.5.5). A largura visual já
       passava de 44px, faltava altura: medido ao vivo em 22px (mobile) e
       23px (tablet) contra um header com espaço de sobra. Padding vertical
       + min-height cobrem o mínimo sem redesenhar o ícone nem mudar a
       posição visual (ícone+texto seguem centralizados pelo align-items).
       Mapeamento de Oportunidades Fase 1, item 4 do resumo executivo (Alta). */
    padding-block: var(--espaco-sm);
    min-height: 44px;
    min-width: 44px;
}
.menu-toggle .icone-barras{
    display: block;
    width: 22px;
    height: 2px;
    background: var(--cor-branco);
    position: relative;
    transition: background 0.2s ease;
}
.menu-toggle .icone-barras::before,
.menu-toggle .icone-barras::after{
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--cor-branco);
    transition: top 0.2s ease, transform 0.2s ease;
}
.menu-toggle .icone-barras::before{ top: -6px; }
.menu-toggle .icone-barras::after{ top: 6px; }

/* ===== Estado aberto: ícone vira X e o rótulo muda pra "FECHAR" =====
   O JS (main.js, não editado aqui) já alterna aria-expanded="true"/"false"
   no botão ao abrir/fechar o menu mobile: essa regra só reage ao atributo
   que já existe, sem precisar de classe nova nem de JS adicional. Os dois
   rótulos (".menu-toggle__rotulo-fechado" / "-aberto") ficam os dois no
   HTML (header.php) e alternam só por CSS; como o oculto usa display:none,
   leitor de tela nunca anuncia os dois ao mesmo tempo.
   Mapeamento de Oportunidades Fase 1, "Botão MENU não muda visualmente"
   (Média). */
.menu-toggle[aria-expanded="true"] .icone-barras{
    background: transparent;
}
.menu-toggle[aria-expanded="true"] .icone-barras::before{
    top: 0;
    transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .icone-barras::after{
    top: 0;
    transform: rotate(-45deg);
}
.menu-toggle__rotulo-aberto{ display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__rotulo-fechado{ display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__rotulo-aberto{ display: inline; }

.menu-mobile{
    display: none;
    background: var(--cor-branco);
    border-top: 1px solid var(--cor-linho-2);
}
.menu-mobile.is-aberto{
    display: block;
}
.menu-mobile ul{
    padding: var(--espaco-sm) var(--espaco-lg);
}
.menu-mobile li{
    border-bottom: 1px solid var(--cor-linho-2);
}
.menu-mobile li:last-child{ border-bottom: none; }
.menu-mobile a{
    display: block;
    padding: var(--espaco-sm) 0;
    font-weight: 600;
    color: var(--cor-cacau);
}
.menu-mobile a:hover{ color: var(--cor-terracota); }

/* Busca do header some abaixo de 1200px e nao existia nenhum equivalente
   no menu mobile — site inteiro ficava sem forma de busca em mobile/tablet
   (achado real, corrigido 04/08/2026, auditoria 360). A regra de largura
   base de .busca-header (display:none) e sobrescrita aqui pra essa copia
   dentro do menu mobile, so aparece quando o menu esta aberto. */
.busca-header--mobile{
    display: block;
    padding: var(--espaco-sm) var(--espaco-lg) 0;
}
.busca-header--mobile input{
    width: 100%;
}

/* Achado real (auditoria de responsividade, 01/08/2026): o breakpoint de
   992px (token global do site, usado em varios componentes) era estreito
   demais especificamente pro header: com 8 itens de menu, mesmo depois de
   encolher a busca (fix acima), ainda sobravam ~68px de overflow real
   medido ao vivo. Nao mexemos no token global de 992px (outros
   componentes do site dependem dele e nao tem esse problema, so o header
   tinha conteudo largo demais pro espaco). O header ganhou seu PROPRIO
   breakpoint so pra essas 4 regras.

   Corrigido de novo no mesmo dia: a primeira tentativa usou 1100px, que
   tirava o overflow horizontal mas nao deixava espaco de sobra pra logo
   "Eu Quero Mais Saude" — auditoria ao vivo achou a logo quebrando em 3-4
   linhas soltas e o header dobrando de altura (72px -> 120px) bem em
   1100-1150px, porque a e o menu ja tomavam quase toda a largura
   disponivel. Medido ao vivo: 1200px e o primeiro breakpoint onde a logo
   volta a quebrar limpo em 2 linhas (118-138px) com altura normal de
   header (72px), sem overflow. Breakpoint final: 1200px (coincide com o
   token global "desktop" de 00-tokens.css, nao e mais um valor arbitrario
   isolado). Hamburguer agora cobre 992-1199px inteiro. */
@media (min-width: 1200px){
    .menu-principal{ display: block; }
    .busca-header{ display: block; }
    .menu-toggle{ display: none; }
    .menu-mobile{ display: none !important; }
}

/* ===== Footer ===== */
#site-footer{
    padding-block: var(--espaco-2xl) var(--espaco-lg);
}
.footer-grade{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--espaco-xl);
    margin-bottom: var(--espaco-xl);
}
.footer-logo img{
    height: 90px;
    width: auto;
    margin-bottom: var(--espaco-md);
}
.footer-redes{
    display: flex;
    gap: var(--espaco-sm);
}
.footer-redes a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 50%;
    background: var(--cor-linho);
    color: var(--cor-mata);
}
.footer-redes a:hover{
    background: var(--cor-mata);
    color: var(--cor-branco);
}
.footer-coluna h6{
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--texto-sm);
    margin-bottom: var(--espaco-md);
}
.footer-coluna ul li{
    margin-bottom: var(--espaco-xs);
}
.footer-coluna a, .footer-coluna p{
    font-size: var(--texto-sm);
    color: var(--cor-cacau-70);
}
.footer-coluna a:hover{
    color: var(--cor-mata);
}
.footer-base{
    text-align: center;
    padding-top: var(--espaco-lg);
    border-top: 1px solid rgba(51, 41, 31, 0.12);
    font-size: var(--texto-xs);
    color: var(--cor-cacau-70);
}
.footer-base img{
    max-width: 320px;
    margin: 0 auto var(--espaco-sm);
}

/* ===== Redesign 20/08/2026 (simplificado a pedido do Ricardo): so 1 barra,
   arredondada, verde com glassmorfismo. Sem barra fixa/flutuante, sem
   camada dupla, sem logo separada em selo -- so a barra normal (sticky, ja
   era o comportamento padrao do site) virando pill com vidro. */
#site-header{
    background: transparent;
    padding-block: 14px;
}
#site-header .container{
    background: rgba(47, 74, 51, 0.82);
    border-radius: var(--raio-pill);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(244,239,229,0.14);
    box-shadow: var(--sombra-md);
}