/* ============================================================
   Strigard — cabecera compartida (la de la portada).

   Estos estilos vivían dentro del <style> de index.html. Se sacaron aquí
   cuando /guides pasó a usar la misma cabecera: tener dos copias del mismo
   nav es como acaban divergiendo entre páginas.

   Carga DESPUÉS de auth.css en las páginas que lo usen: varias reglas de
   abajo corrigen a propósito el .btn de auth.css, que es de ancho completo
   porque está pensado para formularios.

   El comportamiento (scroll, hamburguesa, sesión) está en site-nav.js.
   ============================================================ */

:root { --nav-h: 64px; }

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8, 9, 10, 0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

/* Equivale a .container + el antiguo .nav-inner: se funden aquí para que las
   páginas que no definen .container (todas menos la portada) alineen la marca
   exactamente en el mismo sitio. */
.nav-inner {
  display: flex; align-items: center; gap: 24px;
  width: 100%; max-width: var(--maxw, 1180px);
  margin: 0 auto; padding: 0 24px;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; flex-shrink: 0; }
.brand-logo { width: 30px; height: 30px; image-rendering: pixelated; }

.nav-links { display: none; align-items: center; gap: 28px; margin-left: 14px; }
/* Underline wipes IN from the left on hover and OUT to the right on leave.
   The trick is that transform-origin is not transitioned, it snaps: at rest
   it is origin right + scaleX(0), on hover origin left + scaleX(1). Moving
   the mouse between two links therefore reads as one line travelling with
   the cursor instead of two lines fading in and out. */
.nav-links a {
  position: relative;
  color: var(--text-secondary); font-size: 0.95rem; font-weight: 500;
  padding-bottom: 4px;
  transition: color .3s ease;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--text-primary); }
.nav-links a:hover::after, .nav-links a:focus-visible::after {
  transform: scaleX(1); transform-origin: left;
}
/* La sección en la que ya estás (Guides) se queda subrayada de forma fija.
   Es el equivalente al borde morado que marca la pestaña activa en el nav de
   la aplicación, pero con el lenguaje visual de la portada. */
.nav-links a[aria-current="page"] { color: var(--text-primary); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after { transition: none; }
}

.nav-actions { display: none; align-items: center; gap: 10px; margin-left: auto; }

/* Hamburger */
.nav-toggle {
  margin-left: auto;
  width: 42px; height: 42px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: rgba(8,9,10,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px 24px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 99;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-menu a:not(.btn) { padding: 12px 0; color: var(--text-secondary); font-weight: 500; border-bottom: 1px solid var(--border); }
.mobile-menu a:not(.btn):hover { color: var(--text-primary); }
.mobile-menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* auth-aware nav groups (Log in/Free trial  ↔  Dashboard/Log out) */
.auth-group { display: flex; align-items: center; gap: 10px; }
.nav-auth-in { display: none; }
html[data-auth="in"] .nav-auth-out { display: none; }
html[data-auth="in"] .nav-auth-in { display: flex; }
.mobile-menu-actions .auth-group { flex-direction: column; align-items: stretch; width: 100%; }

/* auth.css da a .btn ancho completo y 46px de alto porque allí los botones son
   de formulario. En la barra tienen que medir lo mismo que en la portada. */
.nav .btn, .mobile-menu .btn { width: auto; height: 42px; white-space: nowrap; }
.mobile-menu-actions .btn { width: 100%; height: 46px; }

@media (min-width: 940px) {
  .nav-links, .nav-actions { display: flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none; }
}