/**
 * Header + Menu Overlay — redesign
 *
 * Baseado no Figma "Casa Noiva (Copy)" (fileKey h8qOPHxm0UXvdvNamLXQY2):
 *   - menu-overlay-new (desktop)  nodeId 2003:546
 *   - menu-overlay-tablet         nodeId 2014:294
 *   - menu-overlay-mobile         nodeId 2014:716
 *
 * Escopo: só as 2 páginas cobertas por esta task — home (body.home,
 * front-page.php) e cadastro de expositor (.page-cadastro,
 * page-cadastro-salao.php). As demais páginas que reaproveitam
 * template-parts/salao-header-menu.php (page-salao.php,
 * page-marcas.php, page-marcas-salao.php, archive-marca.php,
 * page-politica-cookies.php) continuam com a mecânica + visual
 * antigos de assets/styles/salao.css e assets/styles/page-styles.css
 * — este arquivo carrega DEPOIS deles e só sobrescreve cor/tipografia
 * dentro do seletor `body.home` / `.page-cadastro`.
 *
 * @package CasaModa_Theme
 */

/* ==========================================================
   Barra superior (fechada)
   ========================================================== */

.page-cadastro .festival-header {
  background-color: var(--sc-color-bg-dark);
}

.page-cadastro .festival-header-top .header-left,
.page-cadastro .festival-header-top .header-center,
.page-cadastro .festival-header-top .header-right,
.page-cadastro .festival-header-top .header-link {
  color: var(--sc-color-text-inverse) !important;
  font-family: var(--sc-font-body);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2.75px;
  text-transform: uppercase;
}

body.home .festival-header-top .header-left,
body.home .festival-header-top .header-center,
body.home .festival-header-top .header-right,
body.home .festival-header-top .header-link {
  font-family: var(--sc-font-body);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2.75px;
  text-transform: uppercase;
}

/* Nav (fechado) do Figma: NavBar com 40px de padding horizontal / 0
   vertical, medindo ~56px de altura útil, 32px abaixo do topo da seção
   (nodeId 2007:4). Com o texto do redesign (20px) a caixa herdada de
   .festival-header/.festival-header-top (--header-height:80px fixo +
   overflow:hidden em page-styles.css) cortava a letra — cresce um pouco
   e larga o clipping só nestas 2 páginas do redesign. */
body.home .festival-header:not(.menu-active),
.page-cadastro .festival-header:not(.menu-active) {
  max-height: 96px;
  overflow: visible;
}

body.home .festival-header-top,
.page-cadastro .festival-header-top {
  min-height: 96px;
}

body.home .festival-header-top .header-left,
body.home .festival-header-top .header-center,
body.home .festival-header-top .header-right,
.page-cadastro .festival-header-top .header-left,
.page-cadastro .festival-header-top .header-center,
.page-cadastro .festival-header-top .header-right {
  padding: 1.5rem 2.5rem;
}

/* CTA "SEJA UM EXPOSITOR" + botão fechar redondo, lado a lado */
body.home .sc-header-right,
.page-cadastro .sc-header-right {
  display: flex;
  align-items: center;
  gap: var(--sc-space-sm);
}

.sc-menu-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 100px;
  border: 1px solid var(--sc-color-text-muted);
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.sc-menu-close:hover {
  opacity: 0.7;
}

/* Só mostrar o "x" quando o overlay está de fato aberto */
body.home .festival-header.menu-active .sc-menu-close,
.page-cadastro .festival-header.menu-active .sc-menu-close {
  display: inline-flex;
}

body.home .festival-header.menu-active .sc-menu-close,
.page-cadastro .festival-header.menu-active .sc-menu-close {
  border-color: var(--sc-color-text-primary);
  color: var(--sc-color-text-primary);
}

/* ==========================================================
   Menu overlay aberto — cream / texto escuro / display serifado
   itálico (Figma usa "36px Display italic"; consolidado no token
   --sc-font-display, ver decisão no relatório da task)
   ========================================================== */

body.home .festival-header.menu-active,
.page-cadastro .festival-header.menu-active {
  background-color: var(--sc-color-bg-primary) !important;
}

body.home .festival-header.menu-active .festival-header-top .header-left,
body.home .festival-header.menu-active .festival-header-top .header-center,
body.home .festival-header.menu-active .festival-header-top .header-right,
body.home .festival-header.menu-active .festival-header-top .header-link,
.page-cadastro .festival-header.menu-active .festival-header-top .header-left,
.page-cadastro .festival-header.menu-active .festival-header-top .header-center,
.page-cadastro .festival-header.menu-active .festival-header-top .header-right,
.page-cadastro .festival-header.menu-active .festival-header-top .header-link {
  color: var(--sc-color-text-primary) !important;
}

body.home .menu-overlay,
.page-cadastro .menu-overlay {
  /* .page-salao .menu-overlay (salao.css) pinta cinza #a7a6a6 — home
     reaproveita o wrapper ".page-salao" do template legado (ver
     front-page.php) e herdava essa cor, ficando diferente do cream
     (--sc-color-bg-primary) que a barra fechada usa em
     .festival-header.menu-active logo abaixo. "body.home
     .menu-overlay" tem mais especificidade que ".page-salao
     .menu-overlay" (seletor de elemento "body" conta ponto a mais),
     então nem precisa de !important pra vencer. */
  background-color: var(--sc-color-bg-primary);
  color: var(--sc-color-text-primary);
}

body.home .menu-logo-wrapper,
.page-cadastro .menu-logo-wrapper {
  display: none;
}

body.home .menu-content,
.page-cadastro .menu-content {
  gap: var(--sc-space-md);
  padding: var(--sc-space-xl) var(--sc-space-2xl);
}

body.home .menu-navigation,
.page-cadastro .menu-navigation {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-md);
  max-width: 100%;
}

body.home .menu-item,
.page-cadastro .menu-item {
  color: var(--sc-color-text-primary);
  width: 100%;
  padding: var(--sc-space-sm) 0;
}

body.home .menu-item::after,
.page-cadastro .menu-item::after {
  background-color: var(--sc-color-text-primary);
}

body.home .menu-title,
.page-cadastro .menu-title {
  font-family: var(--sc-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 36px);
  letter-spacing: 0.5px;
  text-transform: none;
  color: inherit;
}

body.home .menu-item-disabled,
.page-cadastro .menu-item-disabled {
  cursor: default;
  opacity: 0.45;
  pointer-events: none;
}

body.home .menu-footer-title,
.page-cadastro .menu-footer-title {
  color: var(--sc-color-text-primary);
  font-family: var(--sc-font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-decoration: underline;
}

/* ==========================================================
   Responsivo — tablet (menu-overlay-tablet, nodeId 2014:294) e
   mobile (menu-overlay-mobile, nodeId 2014:716): mesma paleta,
   itens empilhados full-width, fonte reduzida.
   ========================================================== */
@media (max-width: 1024px) {
  body.home .menu-title,
  .page-cadastro .menu-title {
    font-size: clamp(1.5rem, 5vw, 28px);
  }
}

@media (max-width: 480px) {
  body.home .menu-content,
  .page-cadastro .menu-content {
    padding: var(--sc-space-lg) var(--sc-padding-h-mobile);
  }

  /* Barra fechada no mobile (Figma "TopNavigation", nodeId 2014:757,
     dentro de cadastro-page-mobile): só 2 itens — data à esquerda e
     "MENU" à direita, sem o CTA "SEJA UM EXPOSITOR" (ele reaparece como
     item de menu "CADASTRO EXPOSITOR" dentro do overlay). Sem isto os 3
     itens ficavam com a fonte de 20px do desktop (.header-center nem
     tinha override nenhum aqui) e a soma passava de 500px, vazando muito
     além dos 390px da tela — texto cortado/sobreposto. */
  .page-cadastro .festival-header-top .header-left,
  body.home .festival-header-top .header-left {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .page-cadastro .festival-header-top .header-center,
  body.home .festival-header-top .header-center {
    font-size: 11px;
    letter-spacing: 2px;
    /* No Figma o item fica só à direita, sem centralização absoluta —
       com o CTA escondido abaixo, sobra "data" à esquerda / "MENU" à
       direita numa linha só (justify-content:space-between herdado de
       .festival-header-top já cuida do espaçamento). */
    position: static;
    transform: none;
  }

  /* Botão "MENU" em pílula (Figma "TopNavigation" mobile, nodeId
     2014:757) — antes era só o texto solto, sem contorno.
     border-color: currentColor acompanha a cor herdada do
     header-link (branco sobre o hero escuro; escuro quando
     .menu-active abre o overlay claro), sem precisar duplicar a
     lógica de cor em cada estado. */
  .page-cadastro .festival-header-top .header-center .menu-toggle,
  body.home .festival-header-top .header-center .menu-toggle {
    border: 1px solid currentColor;
    border-radius: 100px;
    padding: 6px 20px;
  }

  /* Com o overlay aberto o botão vira um círculo com "×" — o texto
     "FECHAR" (setado via JS em script.js/script-common.js, sem
     duplicar a lógica de abrir/fechar aqui) fica com font-size:0 e o
     × é desenhado via ::after; a borda em pílula acima já vira
     circular só de igualar largura/altura com border-radius:100px. */
  .page-cadastro .festival-header.menu-active .header-center .menu-toggle,
  body.home .festival-header.menu-active .header-center .menu-toggle {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
  }

  .page-cadastro .festival-header.menu-active .header-center .menu-toggle::after,
  body.home .festival-header.menu-active .header-center .menu-toggle::after {
    content: "\2715";
    display: block;
    font-size: 16px;
    line-height: 1;
  }

  /* .header-right/.sc-header-right some inteiro do nav no mobile: o CTA
     "INGRESSO" já tem réplica dentro do overlay
     (.menu-navigation) e o botão .sc-menu-close (X) fica redundante —
     o próprio #menuToggle já vira "FECHAR" com o overlay aberto. */
  .page-cadastro .festival-header-top .header-right,
  body.home .festival-header-top .header-right {
    display: none;
  }
}