/* =========================================================
   ESTILOS DO CABECALHO, MENU E RODAPE
   ---------------------------------------------------------
   Este arquivo é MOBILE-FIRST: as regras "soltas" valem pro
   celular, e o bloco @media (min-width: 992px) lá embaixo
   adapta tudo pro desktop.

   Layout desktop (2 linhas):
     Linha 1: [Todas as categorias] [Logo] [Busca] [Conta|Carrinho]
     Linha 2: categorias lado a lado com dropdowns

   Layout celular:
     Linha 1: [Hamburguer] [Logo] [Conta|Carrinho]
     Linha 2: barra de busca (largura total)
     Menu: gaveta lateral
   ========================================================= */


/* =========================================================
   1. BARRA DO CABECALHO
   ========================================================= */

.cabecalho-site {
  position: sticky;   /* "Gruda" no topo quando a pagina rola */
  top: 0;
  z-index: 1000;      /* Fica POR CIMA do conteudo ao rolar */
  background-color: var(--cor-fundo-branco);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* Quando o usuario esta logado no WordPress, existe a barra
   preta de admin no topo (46px no celular, 32px no desktop).
   Sem este ajuste, nosso header ficaria escondido atras dela. */
.admin-bar .cabecalho-site {
  top: 46px;
}

/* O "trilho" da linha 1: segura todos os itens lado a lado.
   No celular, flex-wrap deixa a busca QUEBRAR pra linha de baixo. */
.cabecalho-container {
  display: flex;
  flex-wrap: wrap;                /* Permite a busca descer de linha no celular */
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-pequeno);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--espaco-pequeno) var(--espaco-medio);
  min-height: 60px;
}


/* =========================================================
   2. LOGO (texto por enquanto; vira imagem depois)
   ========================================================= */

.logo-texto {
  font-family: var(--fonte-titulos);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cor-texto);
  letter-spacing: 0.5px;
  white-space: nowrap;  /* "For You" nunca quebra em duas linhas */
}

.cabecalho-logo a {
  text-decoration: none;
}

.cabecalho-logo a:hover .logo-texto {
  color: var(--cor-destaque);
}


/* =========================================================
   3. BOTAO HAMBURGUER (so celular; desktop esconde)
   ========================================================= */

.botao-menu-mobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;          /* 44px = tamanho minimo confortavel pro dedo */
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger-linha {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--cor-texto);
  border-radius: 2px;
}


/* =========================================================
   4. BARRA DE BUSCA (sempre visivel)
   No celular: ocupa a linha inteira abaixo da logo.
   ========================================================= */

.cabecalho-busca {
  order: 5;             /* Empurra a busca pro FIM (vira a 2a linha no celular) */
  flex-basis: 100%;     /* Ocupa 100% da largura = quebra de linha */
  padding-bottom: var(--espaco-pequeno);
}

.cabecalho-busca form {
  display: flex;        /* Campo e botao lado a lado, colados */
}

.cabecalho-busca input[type="search"] {
  flex: 1;              /* O campo estica e ocupa todo o espaco livre */
  min-width: 0;         /* Evita estourar em telas muito estreitas */
  padding: 10px 14px;
  font-family: var(--fonte-principal);
  font-size: 1rem;
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-right: none;   /* Sem borda do lado que encosta no botao */
  border-radius: 6px 0 0 6px;  /* Arredonda so o lado esquerdo */
}

.cabecalho-busca input[type="search"]:focus {
  outline: none;
  border-color: var(--cor-destaque); /* Borda dourada ao focar */
  background-color: var(--cor-fundo-branco);
}

/* Botao da lupa: dourado, colado no campo */
.cabecalho-busca button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background-color: var(--cor-destaque);
  color: #fff;
  border: none;
  border-radius: 0 6px 6px 0;  /* Arredonda so o lado direito */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cabecalho-busca button:hover {
  background-color: var(--cor-destaque-escuro);
}

/* Texto so pra leitores de tela (acessibilidade):
   "visivel" pra quem usa leitor de tela, invisivel na tela */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}


/* =========================================================
   5. ICONES DA DIREITA (conta e carrinho, em SVG)
   ========================================================= */

.cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 2px;
}

.acao-icone {
  position: relative;        /* Referencia pro contador do carrinho */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--cor-texto);   /* O SVG herda essa cor (currentColor) */
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.acao-icone:hover {
  color: var(--cor-destaque); /* Icone "acende" dourado no hover */
}

/* A bolinha dourada com o numero de itens do carrinho */
.carrinho-contador {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background-color: var(--cor-destaque);
  color: #fff;
  font-family: var(--fonte-principal);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border-radius: 999px;
}


/* =========================================================
   6. BOTAO "TODAS AS CATEGORIAS" + PAINEL EM CASCATA
   Escondido no celular (a gaveta ja cumpre esse papel).
   As regras de aparencia estao no bloco desktop la embaixo.
   ========================================================= */

.menu-todas-categorias {
  display: none;
}


/* =========================================================
   7. MENU — VERSAO CELULAR (gaveta lateral)
   ---------------------------------------------------------
   A gaveta fica FORA da tela (translateX -105%) e desliza
   pra dentro quando o JavaScript adiciona a classe .menu-aberto
   ========================================================= */

.cabecalho-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 85%;
  max-width: 340px;
  background-color: var(--cor-fundo-branco);
  transform: translateX(-105%);        /* Escondida a esquerda */
  transition: transform 0.3s ease;
  z-index: 1200;
  overflow-y: auto;                    /* Rola se tiver muitas categorias */
  padding: 56px var(--espaco-medio) var(--espaco-grande);
}

/* Classe que o JavaScript adiciona/remove no clique do hamburguer */
.cabecalho-menu.menu-aberto {
  transform: translateX(0);
}

/* Botao X dentro da gaveta */
.fechar-menu {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--cor-texto);
  cursor: pointer;
}

/* Fundo escuro atras da gaveta (clicar nele fecha o menu).
   ATENCAO ao z-index: ele precisa ser MENOR que o do header (1000)!
   Por que? O header tem z-index proprio, o que cria um "contexto de
   empilhamento" — uma caixa de vidro. As gavetas estao DENTRO dessa
   caixa, entao o z-index delas (1200, 1400) so vale la dentro.
   Se o overlay (que esta FORA da caixa) tiver z-index maior que 1000,
   ele cobre a caixa INTEIRA — gavetas inclusas — e rouba os cliques.
   Ja quebramos o menu uma vez por causa disso. :) */
.menu-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.25); /* Escurecimento suave */
  z-index: 900;      /* ABAIXO do header (1000) — ver comentario acima */
  border: none;
}

/* Listas do menu: tira bolinhas e recuos padrao */
.menu-principal,
.submenu,
.painel-lista,
.sub-painel {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Linha divisoria entre categorias na gaveta */
.menu-principal > .menu-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* Links e botoes do menu: mesmo visual pros dois.
   font-weight: 400 é necessário porque <button> tem negrito por padrão no navegador. */
.menu-principal a,
.menu-link-botao {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  font-family: var(--fonte-principal);
  font-size: 1rem;
  font-weight: 400;
  color: var(--cor-texto);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.menu-principal a:hover,
.menu-link-botao:hover {
  color: var(--cor-destaque);
}

/* Submenu: escondido ate o JavaScript abrir */
.submenu {
  display: none;
  padding: 0 0 8px 16px;  /* Recuo pra mostrar hierarquia */
}

/* Quando o JS adiciona .submenu-aberto no item pai, o submenu aparece */
.menu-item-com-submenu.submenu-aberto > .submenu {
  display: block;
}

/* Links do submenu: menores e mais suaves */
.submenu a {
  padding: 10px 8px;
  font-size: 0.95rem;
  color: var(--cor-texto-suave);
}

/* A setinha gira 180 graus quando o submenu abre */
.seta-submenu {
  transition: transform 0.25s ease;
}

.menu-item-com-submenu.submenu-aberto .seta-submenu {
  transform: rotate(180deg);
}


/* =========================================================
   8. CONTEUDO PRINCIPAL (respiro basico das paginas)
   ========================================================= */

.container-principal {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--espaco-grande) var(--espaco-medio);
  min-height: 50vh; /* Evita rodape "subir" em paginas vazias */
}


/* =========================================================
   9. RODAPE
   ========================================================= */

.rodape-site {
  background-color: var(--cor-texto);  /* Grafite escuro */
  color: rgba(255, 255, 255, 0.75);
  margin-top: var(--espaco-enorme);
}

/* No celular: colunas empilhadas (grid de 1 coluna) */
.rodape-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-grande);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--espaco-grande) var(--espaco-medio);
}

.rodape-coluna h3 {
  font-family: var(--fonte-titulos);
  font-size: 1.05rem;
  color: var(--cor-fundo-branco);
  margin: 0 0 var(--espaco-medio);
}

.rodape-coluna ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rodape-coluna li {
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.rodape-coluna a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.rodape-coluna a:hover {
  color: var(--cor-destaque);
}

/* Logo "For You" no rodape fica branca */
.rodape-marca .logo-texto {
  color: var(--cor-fundo-branco);
}

.rodape-marca p {
  margin-top: var(--espaco-pequeno);
  font-size: 0.95rem;
}

/* Linha final de creditos */
.rodape-creditos {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: var(--espaco-medio);
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

.rodape-creditos p {
  margin: 0;
}


/* =========================================================
   10. DESKTOP (telas de 992px pra cima)
   ---------------------------------------------------------
   Aqui a gente DESFAZ a gaveta, mostra o botao "Todas as
   categorias" e transforma o menu na linha 2 horizontal.
   ========================================================= */

@media (min-width: 992px) {

  /* Admin bar do WordPress e mais fina no desktop */
  .admin-bar .cabecalho-site {
    top: 32px;
  }

  /* Hamburguer, botao X e overlay nao existem no desktop */
  .botao-menu-mobile,
  .fechar-menu {
    display: none;
  }

  /* (O overlay AGORA tambem funciona no desktop: ele escurece a
     pagina atras da gaveta de categorias, igual no celular.) */

  /* Linha 1 nao quebra mais: tudo numa linha so */
  .cabecalho-container {
    flex-wrap: nowrap;
    gap: 0;                       /* Sem gap: o espaco e controlado por margens */
    justify-content: flex-start;  /* Logo e hamburguer ficam a esquerda */
    position: relative;           /* Ancora o campo de busca que sera absoluto */
  }

  /* Espaco entre hamburguer e logo */
  .menu-todas-categorias {
    margin-right: var(--espaco-medio);
  }

  /* Logo nao cresce: ocupa o proprio tamanho */
  .cabecalho-logo {
    flex: 0 0 auto;
  }

  /* Icones ficam no lado direito (margin-left auto empurra pra la) */
  .cabecalho-acoes {
    margin-left: auto;
  }

  /* ── Busca: centralizada exatamente no meio do header ──────────────
     Usando position:absolute + left:50% + transform garantimos que
     a barra fica no centro geometrico do header, independente de
     quanto o logo ou os icones ocupam de espaco.
     Sem essa tecnica, o space-between do flex distribui as "sobras"
     de forma desigual e a busca fica ligeiramente deslocada. */
  .cabecalho-busca {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Centraliza nos 2 eixos */

    /* Largura responsiva: minimo 200px, ideal 38% do container, maximo 480px */
    width: clamp(200px, 38%, 480px);

    /* Anula as propriedades flex do mobile */
    flex: none;
    order: 0;
    max-width: none;
    padding-bottom: 0;

    /* Centraliza o <form> verticalmente dentro do div */
    display: flex;
    align-items: center;
  }

  /* O form preenche toda a largura do container de busca */
  .cabecalho-busca form {
    width: 100%;
  }

  /* ------------------------------------------------------
     BOTAO "TODAS AS CATEGORIAS" (aparece no desktop)
     ------------------------------------------------------ */

  .menu-todas-categorias {
    display: block;
    position: relative;  /* Referencia pro painel absoluto abaixo */
  }

  /* Botao quadrado so com as 3 barrinhas (spans pintados via CSS) */
  .botao-todas-categorias {
    display: flex;
    flex-direction: column;    /* Empilha as 3 barrinhas */
    align-items: center;
    justify-content: center;
    gap: 4px;                  /* Espaco entre as barrinhas */
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease;
  }

  /* As barrinhas dentro do botao: reaproveita a classe do celular,
     so ajustando a largura (la ela ocupa 100% do botao) */
  .botao-todas-categorias .hamburger-linha {
    width: 18px;
  }

  .botao-todas-categorias:hover {
    border-color: var(--cor-destaque);
  }

  .botao-todas-categorias:hover .hamburger-linha {
    background-color: var(--cor-destaque);
  }

  /* A GAVETA LATERAL de categorias:
     - fixa na lateral ESQUERDA, do topo ate embaixo da tela
     - comeca FORA da tela (translateX -105%)
     - desliza pra dentro quando o JS adiciona .painel-aberto
     (mesma tecnica da gaveta do celular) */
  .painel-todas-categorias {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;                /* top 0 + bottom 0 = altura total da tela */
    width: 360px;
    background-color: var(--cor-fundo-branco);
    transform: translateX(-105%);       /* Escondida a esquerda */
    transition: transform 0.3s ease;    /* Animacao do deslizar */
    overflow-y: auto;                   /* Rola por dentro se a lista crescer */
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 1400;            /* Acima do overlay (1100) e do header (1000) */
    padding-bottom: var(--espaco-grande);
  }

  .menu-todas-categorias.painel-aberto .painel-todas-categorias {
    transform: translateX(0); /* Desliza pra posicao visivel */
  }

  /* Logado no WordPress? A barra preta de admin (32px) cobriria
     o topo da gaveta. Este ajuste empurra a gaveta pra baixo dela. */
  .admin-bar .painel-todas-categorias {
    top: 32px;
  }

  /* Topo da gaveta: titulo "Categorias" + botao X */
  .painel-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 12px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 8px;
  }

  .painel-titulo {
    font-family: var(--fonte-titulos);
    font-size: 1.15rem;
    color: var(--cor-texto);
  }

  .fechar-painel {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--cor-texto);
    cursor: pointer;
  }

  .fechar-painel:hover {
    color: var(--cor-destaque);
  }

  /* Linha de cada categoria: nome (link) na esquerda, setinha (botao) na direita */
  .painel-linha {
    display: flex;
    align-items: center;
  }

  /* Links do painel */
  .painel-todas-categorias a {
    display: block;
    flex: 1;                 /* Nas linhas com setinha, o link ocupa o resto */
    padding: 11px 18px;
    font-family: var(--fonte-principal);
    font-size: 0.95rem;
    color: var(--cor-texto);
    text-decoration: none;
  }

  .painel-todas-categorias a:hover {
    background-color: var(--cor-fundo);
    color: var(--cor-destaque);
  }

  /* O botao da setinha (separado do link de proposito:
     clicar no NOME navega, clicar na SETA expande) */
  .botao-sub-painel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 6px;
    background: none;
    border: none;
    color: var(--cor-texto-suave);
    cursor: pointer;
  }

  .botao-sub-painel:hover {
    color: var(--cor-destaque);
  }

  /* Subcategorias (acordeao): escondidas ate o JS abrir */
  .sub-painel {
    display: none;
    padding-left: 14px;            /* Recuo pra mostrar hierarquia */
    border-left: 2px solid var(--cor-fundo); /* Linha guia sutil */
    margin-left: 18px;
  }

  /* Quando o JS adiciona .sub-aberto no item, as subcategorias aparecem */
  .painel-item-com-sub.sub-aberto > .sub-painel {
    display: block;
  }

  /* Subcategorias com texto mais suave */
  .sub-painel a {
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
    padding: 9px 14px;
  }

  /* A setinha gira quando o acordeao abre */
  .painel-item-com-sub.sub-aberto .seta-submenu {
    transform: rotate(180deg);
  }

  /* ------------------------------------------------------
     LINHA 2: categorias horizontais
     ------------------------------------------------------ */

  /* O menu deixa de ser gaveta e vira a linha 2 do header */
  .cabecalho-menu {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    padding: 0;
    overflow: visible;      /* IMPORTANTE: deixa os dropdowns "vazarem" pra fora */
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.06);  /* Linha separando da linha 1 */
  }

  /* Categorias lado a lado, centralizadas, SEM quebrar linha */
  .menu-principal {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 2px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--espaco-medio);
  }

  .menu-principal > .menu-item {
    border-bottom: none;
    position: relative;     /* Referencia pro dropdown absoluto */
  }

  .menu-principal a,
  .menu-link-botao {
    width: auto;
    padding: 11px 12px;
    font-size: 0.9rem;
    gap: 6px;
    white-space: nowrap;    /* Nome da categoria nunca quebra */
  }

  /* Dropdown da linha 2: caixa flutuante embaixo da categoria */
  .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    padding: 8px 0;
    background-color: var(--cor-fundo-branco);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1300;
  }

  .submenu a {
    padding: 10px 18px;
  }

  .submenu a:hover {
    background-color: var(--cor-fundo);
    color: var(--cor-destaque);
  }
}