/* ==========================================================================
   01-header.css — barra do topo (SPEC §3.2/§4.1/§4.16, BUILD_PLAN 01-header)
   104px ≥769 · 90px <769 · NÃO sticky (D3) · trilhos hachurados só aqui
   ========================================================================== */

/* --c-brand-* : cores do wordmark PicPag (assets/svg/logo.svg). Locais ao header porque
   css/tokens.css é intocável neste trabalho; o lockup do rodapé é SVG e leva os hex no
   próprio arquivo. */
.hdr{position:relative;z-index:var(--z-header);--c-brand-ink:#17181C;--c-brand-green:#8B5CF6}

/* ---------- célula ---------- */
.hdr__cell{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);
  min-height:var(--header-h);            /* 90 → 104 ≥769 */
  padding-inline:var(--header-pad);      /* 24 → 32 ≥769 */
  overflow:visible;                      /* deixa os painéis de dropdown saírem da célula */
}

/* ---------- logo PicPag ----------
   A caixa do <svg> continua 26×26 e o chevron ocupa 17,8×20 de tinta dentro dela — a mesma
   densidade do ladrilho 18×18 da marca anterior (medido no render em 1440: x125–142 /
   y41–61), então TODA a métrica calibrada da barra continua valendo: caixa centrada nos
   104/90px, folga de 9px embutida à esquerda reproduzindo o recuo da referência, e
   gap:7px entre a tinta do símbolo e a tinta da palavra (a referência mostra 9px de
   BRANCO; os 2px restantes são o lado esquerdo do glifo). */
.hdr__logo{
  position:relative;display:flex;align-items:center;gap:7px;flex-shrink:0;
  border-radius:var(--r-cell);color:var(--c-brand-ink);  /* só herança do wordmark: o chevron
                                                            tem cores próprias, sem currentColor */
}
/* alvo de toque de 44px de altura (WCAG 2.5.5) sem tocar no desenho de 26px da referência */
.hdr__logo::after{content:"";position:absolute;inset:-9px 0}
.hdr__logo-mark{display:block;width:26px;height:26px;flex:none}
/* Wordmark em duas cores, igual ao lockup de assets/svg/logo.svg: "pague" quase-preto e
   "nex" verde-vivo, em CAIXA BAIXA e peso 700 (era 500 — a marca anterior era caixa-alta).
   24px/700 com -0,045em dá ~118px de palavra; com o símbolo de 26 e o gap de 7 o logo
   inteiro mede ~151px, folga de sobra ao lado do hambúrguer em 390. */
.hdr__logo-word{
  font:700 24px/1 var(--font-display);letter-spacing:-.045em;
  color:var(--c-brand-ink);white-space:nowrap;
}
.hdr__logo-word-alt{color:var(--c-brand-green)}

/* ---------- nav central (≥1025) ----------
   1025–1439: item de fluxo centrado entre logo e CTA (evita sobrepor o CTA).
   ≥1440: absolutamente centrada na célula, como no screenshot (Produtos x476 … Preços x963). */
.hdr__nav{display:none;min-width:0}
.hdr__list{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}

.hdr__nav-item{
  position:relative;                     /* âncora do alvo de toque de 44px (::after) */
  display:flex;align-items:center;gap:6px;
  height:40px;padding:0 var(--sp-3);
  border:0;border-radius:var(--r-pill);background:none;
  font:600 var(--fs-body)/var(--lh-tight-ui) var(--font-display);
  color:var(--c-ink-800);white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-base) var(--ease-default),transform var(--dur-base) var(--ease-default);
}
/* WCAG 2.5.5: o item mede 40px de altura no design de referência (posições medidas ao pixel
   logo acima) e o CTA compacto ao lado, idem. Mesma técnica de .pill/.link-u/.hdr__logo:
   pseudo transparente fora de fluxo leva só a ÁREA DE TOQUE a 44px — 2px para cada lado,
   dentro da barra de 104px, sem mover um pixel do render. Só há vizinhos na horizontal
   (gap 2–4px), então a expansão vertical não rouba clique de ninguém. */
.hdr__nav-item::after,
.hdr__actions .btn--compact::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.hdr__actions .btn--compact{position:relative}
@media (hover:hover) and (pointer:fine){
  .hdr__nav-item:hover{background:var(--c-surface-soft);transform:scale(var(--hover-scale))}
}
.hdr__nav-item:active{transform:scale(var(--active-scale))}
/* Itens SEM dropdown (<a>) — 1px de arredondamento a menos.
   --lh-tight-ui é 11px (ímpar) dentro de uma caixa flex de 40px: (40−11)/2 = 14,5, e o Chrome
   arredonda para lados diferentes no item anônimo de texto de um <a> e na caixa de conteúdo
   anônima de um <button>. Na referência os itens sem chevron ficam 1px ACIMA dos com chevron;
   este line-height par reproduz esse desalinhamento (Blog y43–58, Preços y44–59, como o original).
   NÃO generalizar para todos os .hdr__nav-item nem mexer no token global: os três <button>
   (Produtos 44–56, Soluções 44–60, Recursos 45–56) já batem ao pixel e subiriam 1px. */
.hdr__list > li:not(.hdr__dd) > .hdr__nav-item{line-height:12px}

.hdr__chev{width:var(--icon-xs);height:var(--icon-xs);flex-shrink:0;transition:transform var(--dur-200) var(--ease-default)}
[aria-expanded="true"] > .hdr__chev{transform:rotate(180deg)}

/* ---------- painel do dropdown (SPEC §5.2 #11) ---------- */
.hdr__dd{position:relative}
.hdr__panel{
  position:absolute;top:calc(100% + var(--sp-2));left:0;
  min-width:240px;padding:var(--sp-2);
  background:var(--c-surface);border:var(--border-1);border-radius:var(--r-lg);
  box-shadow:var(--sh-pill);
  transform-origin:top left;
  opacity:0;transform:translateY(-4px) scale(.98);visibility:hidden;
  transition:opacity var(--dur-dd-close) var(--ease-out-strong),
             transform var(--dur-dd-close) var(--ease-out-strong),
             visibility 0s linear var(--dur-dd-close);
  z-index:var(--z-dd);
}
.hdr__panel.is-open{
  opacity:1;transform:none;visibility:visible;
  transition-duration:var(--dur-dd-open),var(--dur-dd-open),0s;
  transition-delay:0s;
}
/* WCAG 2.5.5 — padding-block 13 (era --sp-2-5 = 10): 13 + 18,2 (14/1.3) + 13 = 44,2px.
   O painel só aparece aberto (estado interativo, fora do screenshot de referência 1440). */
.hdr__panel-link{
  display:block;padding:13px var(--sp-3);border-radius:var(--r-cell);
  font:600 var(--fs-small)/1.3 var(--font-display);color:var(--c-ink-800);white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-default);
}
.hdr__panel-link:hover{background:var(--c-surface-soft)}

/* ---------- ações à direita (≥1025) ---------- */
.hdr__actions{display:none;align-items:center;gap:var(--sp-3);flex-shrink:0}
.hdr__divider{display:block;width:1px;height:35px;background:var(--c-hairline);flex-shrink:0}

/* ---------- hambúrguer (<1025) — 42×42 ---------- */
.hdr__burger{
  position:relative;                     /* âncora do alvo de toque de 44×44 (::after) */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:42px;height:42px;padding:var(--sp-2-5);flex-shrink:0;
  border:var(--border-1);border-radius:var(--r-pill);background:var(--c-surface);
  color:var(--c-ink-800);cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-default),transform 120ms ease-out;
}
.hdr__burger:hover{background:var(--c-surface-soft)}
.hdr__burger:active{transform:scale(.95)}
/* alvo de toque de 44×44 (WCAG 2.5.8) sem tocar no desenho de 42×42 da referência */
.hdr__burger::after{content:"";position:absolute;inset:-1px}
.hdr__burger span{
  display:block;width:16px;height:2px;margin:2px 0;border-radius:2px;background:currentColor;
  transition:transform var(--dur-200) var(--ease-default),opacity var(--dur-fast) var(--ease-default);
}
.hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- menu mobile (<1025) (SPEC §5.2 #12) ---------- */
.hdr__menu{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:var(--z-menu);
  background:rgba(28,18,56,.24);overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-200) ease,visibility 0s linear var(--dur-200);
}
.hdr__menu.is-open{opacity:1;visibility:visible;transition-delay:0s}

.hdr__menu-panel{
  background:var(--c-surface);border-bottom:var(--border-1);
  padding:var(--sp-4) var(--sp-6) var(--sp-6);
  max-height:calc(100dvh - var(--header-h));overflow:auto;
  transform:translateY(-8px);opacity:0;
  transition:transform 160ms var(--ease-drawer),opacity 160ms ease;
}
.hdr__menu.is-open .hdr__menu-panel{transform:none;opacity:1;transition-duration:var(--dur-menu)}

.hdr__menu-link{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  width:100%;padding:14px 0;border:0;background:none;text-align:left;
  font:600 20px/1.4 var(--font-display);letter-spacing:var(--ls-card);color:var(--c-ink-800);
  cursor:pointer;
}
.hdr__menu-group + .hdr__menu-group > .hdr__menu-link,
.hdr__menu-group + .hdr__menu-link,
.hdr__menu-link + .hdr__menu-link{border-top:var(--border-1)}

.hdr__menu-sub{
  display:grid;grid-template-rows:0fr;visibility:hidden;opacity:0;
  transition:grid-template-rows var(--dur-base) var(--ease-default),
             opacity var(--dur-base) var(--ease-default),
             visibility 0s linear var(--dur-base);
}
.hdr__menu-sub.is-open{grid-template-rows:1fr;visibility:visible;opacity:1;transition-delay:0s}
.hdr__menu-sub > div{overflow:hidden;min-height:0}
/* WCAG 2.5.5 — padding-block 11 (era --sp-2-5 = 10): 11 + 22,4 (16/1.4) + 11 = 44,4px.
   Medido em 360/390/430 o alvo dava 42,4px. O menu só existe <1025, então nada muda em 1440. */
.hdr__menu-sub a{
  display:block;padding:11px 0 11px var(--sp-4);
  font:600 var(--fs-body)/1.4 var(--font-display);color:var(--c-ink-600);
  transition:color var(--dur-fast) var(--ease-default);
}
.hdr__menu-sub a:hover{color:var(--c-link-green,#5B21B6)}
.hdr__menu-sub > div > a:last-child{margin-bottom:var(--sp-2)}

.hdr__menu-cta{margin-top:var(--sp-6);height:var(--btn-h);justify-content:center}

/* ---------- breakpoints ---------- */
@media (min-width:1025px){
  .hdr__nav{display:flex;flex:1 1 auto;justify-content:center}
  .hdr__actions{display:flex}
  .hdr__burger,.hdr__menu{display:none}
}
/* 1025–1199: medido em 1025 a .hdr__list pede 471px e a .hdr__nav só tem 458 — a lista
   transborda 6px de cada lado e come metade do gap de 16px que separa logo e CTA
   (clearance real de 10px). Fechar o padding dos itens de 12 para 8 devolve 40px de folga
   e mantém a lista dentro da própria caixa. ≥1200 volta ao padding cheio; ≥1440 (a
   referência calibrada) usa --sp-4 e não é tocado. */
@media (min-width:1025px) and (max-width:1199px){
  .hdr__nav-item{padding-inline:var(--sp-2)}
}
@media (min-width:1440px){
  .hdr__nav{position:absolute;left:50%;transform:translateX(-50%);flex:0 0 auto}
  .hdr__list{gap:var(--sp-1)}
  .hdr__nav-item{padding-inline:var(--sp-4)}
}

/* ---------- menu aberto: o FAB do chat não pode ficar clicável sobre o scrim ----------
   (main.js marca body.menu-open; o FAB vive em z-index 2147483000, acima do menu) */
body.menu-open .chat-fab{opacity:0;pointer-events:none;transition:opacity 150ms var(--ease-default)}

/* ---------- sem JS (main.js não marcou <html class="js">) ----------
   Abaixo de 1025px o único caminho de navegação é o hambúrguer, que depende do JS.
   Aqui o painel do menu vira navegação estática; nenhuma destas regras vale com JS ativo.
   Acima de 1025px o .hdr__menu continua display:none (bloco acima) e o nav normal aparece. */
/* <1025: o menu sai da fileira flex dos trilhos e desce para o fluxo, abaixo da barra.
   ≥1025 o header fica intacto (trilhos hachurados + nav normal). */
@media (max-width:1024px){html:not(.js) .hdr{display:block}}
html:not(.js) .hdr__burger{display:none}
html:not(.js) .hdr__menu{position:static;inset:auto;opacity:1;visibility:visible;background:none;overflow:visible}
html:not(.js) .hdr__menu-panel{max-height:none;overflow:visible;transform:none;opacity:1}
html:not(.js) .hdr__menu-sub{grid-template-rows:1fr;visibility:visible;opacity:1}
html:not(.js) .hdr__menu-toggle{cursor:default}
html:not(.js) .hdr__menu-toggle > .hdr__chev{display:none}
/* ≥1025 sem JS: os dropdowns do nav abrem por hover/foco, já que não há clique */
@media (min-width:1025px){
  html:not(.js) .hdr__dd:hover > .hdr__panel,
  html:not(.js) .hdr__dd:focus-within > .hdr__panel{
    opacity:1;transform:none;visibility:visible;
    transition-duration:var(--dur-dd-open),var(--dur-dd-open),0s;transition-delay:0s;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hdr__nav-item:hover,.hdr__nav-item:active,.hdr__burger:active{transform:none}
  .hdr__panel{transform:none}
  .hdr__panel.is-open{transform:none}
  .hdr__menu-panel{transform:none}
  .hdr__menu.is-open .hdr__menu-panel{transform:none}
  .hdr__menu-sub{transition:opacity var(--dur-fast) var(--ease-default),visibility 0s linear var(--dur-fast)}
  .hdr__chev{transition:none}
}