/* ─── Menu único do site (home, produto, landing pages e blog) ────
   Fonte única: as páginas React importam este arquivo e o blog
   estático usa <link href="/site-header.css">. Marcação gerada por
   src/h2o/SiteHeader.jsx e por nav() em admin/api/build_html.py —
   as duas precisam usar as mesmas classes.
   Marinho nos dois temas, como o topo do blog.                     */
:root { --sh-h: 64px; }
.sh {
  --sh-bg: rgba(5, 13, 24, .97); --sh-line: rgba(255, 255, 255, .08);
  --sh-txt: #edf2f7; --sh-txt2: #9fb0c6; --sh-cyan: #00b5e2; --sh-navy: #050d18; --sh-panel: #0a1628;
  --sh-max: 1400px;
  position: sticky; top: 0; z-index: 300; color: var(--sh-txt); line-height: 1.5;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* fundo e linha num pseudo-elemento: backdrop-filter no próprio topo prenderia o painel fixo do celular */
.sh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sh-bg); box-shadow: inset 0 -1px 0 var(--sh-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sh *, .sh *::before, .sh *::after { box-sizing: border-box; }
.sh a { text-decoration: none; }
.sh button { line-height: inherit; }
.sh-in { max-width: var(--sh-max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); height: var(--sh-h); display: flex; align-items: center; gap: 18px; }
.sh-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.sh-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--sh-txt); font: 700 .95rem 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: 2px; white-space: nowrap; }
.sh-brand img { width: 30px; height: 30px; max-width: none; border-radius: 8px; background: #fff; padding: 3px; display: block; }
.sh-brand em { font-style: normal; color: var(--sh-cyan); }

.sh-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.sh-nav > a, .sh-dd-btn { color: var(--sh-txt2); font-family: inherit; font-weight: 600; font-size: .84rem; padding: 8px 12px; border-radius: 8px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sh-nav > a:hover, .sh-dd-btn:hover, .sh-nav > a[aria-current], .sh-dd-btn.on { color: var(--sh-txt); background: rgba(255, 255, 255, .06); }
.sh-dd { position: relative; }
.sh-dd-btn .sh-ico { width: 15px; height: 15px; transition: transform .2s; }
.sh-dd.open .sh-dd-btn .sh-ico { transform: rotate(180deg); }
.sh-dd-label, .sh-nav > a.sh-panel-cta { display: none; }
.sh-dd-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 290px; background: var(--sh-panel); border: 1px solid var(--sh-line); border-radius: 14px; padding: 8px; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .7); display: none; }
/* o submenu abre pelo estado (.open, controlado por JS); sem JS, pelo foco */
.sh-dd.open .sh-dd-menu, .sh:not(.js) .sh-dd:focus-within .sh-dd-menu { display: block; }
.sh-dd-menu a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--sh-txt); }
.sh-dd-menu a:hover, .sh-dd-menu a[aria-current] { background: rgba(255, 255, 255, .06); }
.sh-dd-menu b { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 700; }
.sh-dd-menu b i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--sh-cyan)); flex: none; }
.sh-dd-menu small { display: block; margin: 2px 0 0 16px; font-size: .76rem; color: var(--sh-txt2); line-height: 1.4; }

.sh-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.sh-btn { height: 36px; min-width: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: var(--sh-txt2); font: 700 .75rem 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; cursor: pointer; }
.sh-btn:hover { color: var(--sh-txt); border-color: rgba(255, 255, 255, .3); }
.sh-lang .sh-dd-menu { min-width: 150px; left: auto; right: 0; transform: none; }
.sh-lang .sh-dd-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; border: 0; background: none; color: var(--sh-txt); font-family: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; }
.sh-lang .sh-dd-menu button:hover, .sh-lang .sh-dd-menu button[aria-current] { background: rgba(255, 255, 255, .06); }
.sh-cta { background: var(--sh-cyan); color: var(--sh-navy); font-weight: 700; font-size: .82rem; line-height: 1.2; padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
.sh-cta:hover { filter: brightness(1.08); }
.sh-burger { display: none; }
/* ícones com dois estados (usados pelo blog estático; o React desenha só o ícone certo) */
.sh-burger .i-close { display: none; }
.sh.open .sh-burger .i-open { display: none; }
.sh.open .sh-burger .i-close { display: inline; }
.sh :focus-visible { outline: 2px solid var(--sh-cyan); outline-offset: 2px; }

/* celular e tablet: links num painel de tela cheia abaixo do topo */
@media (max-width: 980px) {
  .sh-burger { display: inline-flex; }
  .sh-nav { display: none; position: fixed; top: var(--sh-h); left: 0; right: 0; height: calc(100dvh - var(--sh-h)); overflow-y: auto; margin: 0; padding: 18px clamp(16px, 4vw, 40px) 32px; background: var(--sh-navy); flex-direction: column; align-items: stretch; gap: 4px; }
  .sh.open .sh-nav, .sh:not(.js):focus-within .sh-nav { display: flex; }
  .sh-nav > a { font-size: 1.05rem; padding: 12px 10px; width: 100%; }
  /* no painel, "Soluções" é só o título da lista (sempre aberta) */
  .sh-nav .sh-dd-btn { display: none; }
  .sh-nav .sh-dd-label { display: block; padding: 12px 10px 4px; font: 600 .74rem 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--sh-txt2); }
  .sh-nav .sh-dd-menu { position: static; transform: none; display: block; min-width: 0; box-shadow: none; border: 0; background: transparent; padding: 0 0 8px; }
  .sh-nav > a.sh-panel-cta { display: block; margin-top: 18px; text-align: center; background: var(--sh-cyan); color: var(--sh-navy); font-weight: 700; font-size: 1rem; padding: 13px; border-radius: 12px; }
  .sh-tools { margin-left: auto; }
}
@media (max-width: 480px) {
  .sh-in { gap: 10px; }
  .sh-brand { letter-spacing: 1px; gap: 8px; font-size: .88rem; }
  .sh-cta { padding: 8px 12px; font-size: .78rem; }
  .sh-lang { display: none; }
  .sh-nav .sh-lang-m { display: flex; }
}
@media (max-width: 350px) { .sh-tools .sh-cta { display: none; } }
/* idioma dentro do painel (só aparece no celular estreito) */
.sh-lang-m { display: none; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sh-line); }
.sh-lang-m button { flex: 1; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: none; color: var(--sh-txt2); font-family: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.sh-lang-m button[aria-current] { color: var(--sh-navy); background: var(--sh-txt); border-color: var(--sh-txt); }
@media (prefers-reduced-motion: reduce) { .sh-dd-btn .sh-ico { transition: none; } }