/* StyleKit — header.css */
/* Este arquivo assume tokens definidos em stylekit/base.css e/ou presets */

/* Cabeçalho ocupa largura total, mas conteúdo é centralizado no .header-inner */
[data-el="header.container"] {
  background: var(--header-bg, var(--surface));
  color: var(--header-text, var(--page-text));
  border-bottom: var(--header-border, 1px solid rgba(2,6,23,.06));
  height: var(--header-height, 72px);
  position: relative;
  z-index: 50;
  display: block;
}

/* Wrapper interno centralizado e com largura útil */
[data-el="header.inner"] {
  max-width: var(--container-max, 1280px);
  margin-inline: auto;
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto; /* toggle | logo | CTA */
  align-items: center;
  gap: var(--header-gap, 20px);
  padding-inline: var(--container-padding, clamp(12px, 4vw, 24px));
}

/* Toggle (mobile) — escondido no desktop */
[data-el="header.mobile.toggle"] {
  display: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--toggle-size, 22px) * 2.2);
  height: calc(var(--toggle-size, 22px) * 2.2);
  border-radius: 10px;
  background: transparent;
  border: 0;
}
[data-el="header.mobile.toggle"] .nav-toggle-box {
  display: inline-flex;
  flex-direction: column;
  gap: calc(var(--toggle-size, 22px) * 0.25);
}
[data-el="header.mobile.toggle"] .nav-toggle-bar {
  width: calc(var(--toggle-size, 22px) * 1.4);
  height: 2px;
  background: var(--toggle-color, var(--page-text));
  border-radius: 2px;
}

/* Logo / Marca */
[data-el="header.logo.wrapper"] { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
[data-el="header.logo.link"] { display: inline-flex; align-items: center; gap: 8px; }
[data-el="header.logo.img"] { display: inline-block; max-height: 40px; width: auto; }
[data-el="header.logo.title"] {
  color: var(--logo-title-color, var(--page-text));
  font-weight: var(--logo-title-weight, 700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw; /* segurança p/ nomes longos */
}
[data-el="header.logo.owner"] {
  color: var(--owner-text-color, var(--muted));
  font-size: var(--owner-text-size, 0.875rem);
  font-weight: var(--owner-text-weight, 500);
  margin-left: 8px;
}

/* Navegação desktop */
[data-el="header.nav.container"] .menu {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
[data-el="header.nav.container"] a{
  position: relative;
  color: var(--nav-link-color, var(--page-text));
  font-weight: var(--nav-link-weight, 600);
  text-decoration: none;
}
[data-el="header.nav.container"] a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--highlight, var(--accent));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}
[data-el="header.nav.container"] a:hover::after,
[data-el="header.nav.container"] .current-menu-item > a::after,
[data-el="header.nav.container"] a[aria-current="page"]::after{
  transform: scaleX(1);
}
[data-el="header.nav.container"] a:hover { color: var(--nav-link-hover, var(--accent)); }
[data-el="header.nav.container"] .current-menu-item > a,
[data-el="header.nav.container"] a[aria-current="page"] { color: var(--nav-link-active, var(--accent)); }
[data-el="header.nav.container"]{
  justify-self: center;
  width: 100%;
}

/* CTA (fica à direita do menu) */
[data-el="header.cta.wrapper"] { display: inline-flex; align-items: center; gap: var(--header-cta-gap, 10px); }

/* WhatsApp CTA */
[data-el="header.cta.whatsapp.button"] {
  --_bg: var(--wa-bg, #25d366);
  --_fg: var(--wa-text, #ffffff);
  --_icon: var(--wa-icon);
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--_bg);
  color: var(--_fg);
  border-radius: var(--btn-radius, 8px);
  box-shadow: var(--btn-shadow, 0 4px 10px rgba(0,0,0,.08));
  padding: 10px 14px;
  line-height: 1;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
[data-el="header.cta.whatsapp.button"][data-variant="disabled"] { opacity: .45; pointer-events: none; }
[data-el="header.cta.whatsapp.button"]:hover { filter: brightness(0.96); }
[data-el="header.cta.whatsapp.icon"] { inline-size: 18px; block-size: 18px; }
[data-el="header.cta.whatsapp.text"] { font-weight: 600; }

/* Drawer mobile */
[data-el="header.mobile.drawer"] {
  position: fixed; inset: 0 auto 0 0;
  width: var(--drawer-width, 320px);
  max-width: 420px;
  background: var(--drawer-bg, var(--surface));
  color: var(--drawer-text, var(--page-text));
  box-shadow: var(--drawer-shadow, 0 20px 40px rgba(0,0,0,.18));
  transform: translateX(-110%);
  transition: transform .18s ease;
  z-index: 60;
}
[data-el="header.mobile.drawer"][data-open="true"] { transform: translateX(0); }
[data-el="header.mobile.drawer.inner"] { padding: 18px; }
[data-el="header.mobile.drawer"] .mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* zera bullets em possíveis <ul> internos do menu móvel */
[data-el="header.mobile.drawer"] .mobile-menu ul,
[data-el="header.mobile.drawer"] .mobile-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
[data-el="header.mobile.drawer"] .mobile-menu a { color: var(--drawer-text, var(--page-text)); }

/* Backdrop */
[data-el="header.mobile.backdrop"] {
  position: fixed; inset: 0;
  background: var(--backdrop-bg, rgba(0,0,0,.45));
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 55;
}
[data-el="header.mobile.backdrop"][data-open="true"] { opacity: 1; visibility: visible; }

/* Responsivo */
@media (max-width: 960px) {
  /* mais espaço nas laterais: padding menor */
  [data-el="header.inner"] {
    grid-template-columns: auto 1fr auto; /* toggle | logo | CTA */
    gap: 10px;
    padding-inline: clamp(8px, 3vw, 14px);
  }

  /* hambúrguer menor e mais próximo da borda */
  [data-el="header.mobile.toggle"] {
    display: inline-flex;
    width: calc(var(--toggle-size, 22px) * 1.7);
    height: calc(var(--toggle-size, 22px) * 1.7);
    margin-left: -2px; /* “cola” um pouco na borda esquerda */
  }
  [data-el="header.mobile.toggle"] .nav-toggle-bar {
    width: calc(var(--toggle-size, 22px) * 1.15);
  }

  /* menu desktop some no mobile */
  [data-el="header.nav.container"] { display: none; }

  /* nome do site menor para caber melhor */
  [data-el="header.logo.title"] {
    font-size: 0.95rem;
    max-width: 46vw;
  }

  /* CTA WhatsApp mais compacto, mantendo o texto no mobile */
  [data-el="header.cta.whatsapp.button"] {
    padding: 8px 10px;
    gap: 8px;
  }
  [data-el="header.cta.whatsapp.icon"] {
    inline-size: 16px; block-size: 16px;
  }
  [data-el="header.cta.whatsapp.text"]{
    font-size: .85rem;
    font-weight: 600;
    display: inline;
  }
}

/* Extra tiny screens: apertamos ainda um pouco */
@media (max-width: 400px) {
  [data-el="header.logo.title"] { font-size: 0.88rem; max-width: 42vw; }
  /* Mantém o texto “Fale comigo” visível mesmo em telas muito pequenas */
  [data-el="header.cta.whatsapp.text"] { display: inline; }
  [data-el="header.cta.whatsapp.button"] { padding: 8px; }
}