/* ==========================================================================
   bilzur · header.css — adapta el diseño del header .bzr-* al HEADER NATIVO de
   GeneratePress, CONSERVANDO el menú de WordPress (editable en Apariencia →
   Menús). Patrón replicado de ClockZur: no se desactiva el header, se maquilla
   por CSS y los CTAs son ítems de menú con clase escrita en el campo
   "Clases CSS" de wp-admin (.bzr-nav-cta / .bzr-nav-cta--ghost).

   NOTA: los selectores atacan la maqueta real de GP (.site-header, .inside-header,
   .main-navigation…). Verificar en vivo tras el primer deploy (Ctrl+F5) y afinar
   contra el DOM concreto que renderice GP en este sitio.
   ========================================================================== */

/* --- Barra: blanca translúcida, sticky, con blur ligero (Layered Precision) --- */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(.875rem);
  -webkit-backdrop-filter:blur(.875rem);
  border-bottom:var(--bzr-border);
}

/* --- Contenedor alineado al ancho del sistema (1220px) ---
   Misma geometría EXACTA que .bzr-container (design-system.css) para que el
   borde del logo caiga sobre el borde del contenido en las páginas v2. Antes
   usaba max-width + padding:0 space-6 (48px), pero .bzr-container solo deja un
   gutter de 24px → el logo quedaba ~24-48px a la derecha del contenido. */
.inside-header{
  width:min(calc(100% - var(--bzr-space-6)), var(--bzr-container));
  max-width:none;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--bzr-space-4);
  padding-inline:0;
  min-height:5.25rem;
}

/* --- Logo --- */
.site-logo img,
.site-header .header-image{
  max-width:10.5rem;
  height:auto;
}
/* Logo en texto (placeholder hasta el isotipo SVG): on-brand navy + Manrope */
.site-header .main-title a{
  font-family:var(--bzr-font-heading);
  font-weight:800;
  color:var(--bzr-color-brand-navy);
}

/* --- Menú: enlaces pequeños y silenciosos --- */
.main-navigation,
.main-navigation .inside-navigation{
  background:transparent;
}
.main-navigation .main-nav > ul > li > a{
  color:var(--bzr-color-muted);
  font-size:.8125rem;
  font-weight:500;
  transition:color var(--bzr-motion-fast) var(--bzr-ease);
}
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a{
  color:var(--bzr-color-ink);
}
.main-navigation .main-nav > ul > li > a:focus-visible{
  outline:none;
  box-shadow:var(--bzr-focus-ring);
  border-radius:var(--bzr-radius-sm);
}

/* --- CTAs como ítems de menú (clase en el campo "Clases CSS" del menú) --- */
/* Altura CONTROLADA y centrado vertical. GP da a los <a> del menú una altura =
   alto del header; sin esto, el padding del botón se sumaba y se salía de la barra.
   Solución: altura fija, line-height:1, padding solo horizontal, centrado. */
.main-navigation .main-nav > ul > li.bzr-nav-cta,
.main-navigation .main-nav > ul > li.bzr-nav-cta--ghost{
  display:flex;
  align-items:center;
  /* GP no separa ítems de menú: sin esto los dos botones-pastilla se pegan. */
  margin-left:var(--bzr-space-2);
}
.main-navigation .main-nav > ul > li.bzr-nav-cta > a,
.main-navigation .main-nav > ul > li.bzr-nav-cta--ghost > a{
  height:2.5rem;
  padding:0 1.125rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border-radius:var(--bzr-radius-control);
  font-weight:700;
}

/* Iconos de los CTA. Al ser ítems de menú NO llevan SVG inline: el icono va por
   CSS (::before con background-image). Ambos botones tienen texto BLANCO, así que
   el SVG lleva stroke blanco fijo (si cambia el color del botón, actualizar el SVG). */
.main-navigation .main-nav > ul > li.bzr-nav-cta > a::before,
.main-navigation .main-nav > ul > li.bzr-nav-cta--ghost > a::before{
  content:"";
  width:1.05em;
  height:1.05em;
  flex:0 0 auto;
  background:center/contain no-repeat;
}
/* CTA-1 "Calcula tu margen" → calculadora */
.main-navigation .main-nav > ul > li.bzr-nav-cta--ghost > a::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cline x1='8' x2='16' y1='6' y2='6'/%3E%3Cline x1='16' x2='16' y1='14' y2='18'/%3E%3Cpath d='M16 10h.01M12 10h.01M8 10h.01M12 14h.01M8 14h.01M12 18h.01M8 18h.01'/%3E%3C/svg%3E");
}
/* CTA-2 "Programa piloto" → cohete (al pasar a sign-in, cambiar por icono de acceso) */
.main-navigation .main-nav > ul > li.bzr-nav-cta > a::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
}
/* Primario: relleno azul */
.main-navigation .main-nav > ul > li.bzr-nav-cta > a{
  color:var(--bzr-color-on-dark);
  background:var(--bzr-color-accent);
  border:0.0625rem solid var(--bzr-color-accent);
  box-shadow:var(--bzr-shadow-button-neutral),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform var(--bzr-motion-base) var(--bzr-ease);
}
.main-navigation .main-nav > ul > li.bzr-nav-cta > a:hover{
  color:var(--bzr-color-on-dark);
  transform:translateY(-.0625rem);
}
/* CTA-1 "Calcula tu margen": relleno NAVY (azul del logo) — experimento de color.
   (El ítem de menú conserva la clase --ghost; si el navy se queda, renombrar la
   clase en Apariencia → Menús para no confundir.) */
.main-navigation .main-nav > ul > li.bzr-nav-cta--ghost > a{
  color:var(--bzr-color-on-dark);
  background:var(--bzr-color-brand-navy);
  border:0.0625rem solid var(--bzr-color-brand-navy);
  box-shadow:var(--bzr-shadow-button-neutral),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform var(--bzr-motion-base) var(--bzr-ease);
}
.main-navigation .main-nav > ul > li.bzr-nav-cta--ghost > a:hover{
  color:var(--bzr-color-on-dark);
  transform:translateY(-.0625rem);
}

/* --- Móvil: hamburguesa sobre fondo blanco para casar con la barra --- */
@media(max-width:768px){
  .main-navigation .menu-toggle,
  .main-navigation.toggled .inside-navigation{
    background:var(--bzr-color-surface);
  }

  /* CTAs del menú móvil: a ancho completo y apilados (patrón ClockZur), no
     pastillas pequeñas pegadas a la izquierda. */
  .main-navigation .main-nav > ul > li.bzr-nav-cta,
  .main-navigation .main-nav > ul > li.bzr-nav-cta--ghost{
    display:block;
    margin-left:0;
    margin-top:var(--bzr-space-2);
    padding:0 var(--bzr-space-4);
  }
  .main-navigation .main-nav > ul > li.bzr-nav-cta > a,
  .main-navigation .main-nav > ul > li.bzr-nav-cta--ghost > a{
    width:100%;
    height:2.875rem;
    justify-content:center;
  }
}