/* =========================================================
   ASIA MÍA — HEADER
   Header fijo, navegación desktop, selector de idioma,
   botón hamburguesa y menú móvil.

   Depende de los tokens de color/tipografía definidos en
   css/style.css (:root { --background, --foreground, ... })
   y de la clase .wrap / .btn ya definidas ahí — este archivo
   se enqueue DESPUÉS de style.css.
   ========================================================= */

header.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  border-bottom:1px solid transparent;
  transition:all .3s ease;
  /* Fondo translúcido SIEMPRE presente (no solo al hacer scroll), así el
     header nunca queda invisible aunque el JS que agrega .scrolled falle
     por alguna razón (caché, bloqueador de scripts, ruta rota, etc.). */
  background: rgba(245, 240, 228, 0.85); /* respaldo para navegadores sin oklch/color-mix */
  background: color-mix(in oklch, var(--background) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
header.site-header.scrolled{
  background: rgba(245, 240, 228, 0.95);
  background: color-mix(in oklch, var(--background) 92%, transparent);
  border-bottom-color:var(--border);
}

.nav-inner{
  max-width:var(--wrap); margin:0 auto; padding:0 24px;
  height:64px; display:flex; align-items:center; justify-content:space-between;
}

/* Color rosa para el enlace activo en el menú de WordPress */
.site-header .main-navigation ul li.current-menu-item > a,
.site-header .main-navigation ul li.current-page-ancestor > a {
    color: #e29caf !important;
    
}

/* ---- marca / logo ---- */
.brand{display:flex; align-items:center; gap:8px; font-weight:600;}
.brand-badge{
  width:32px; height:32px; border-radius:50%; background:#ffffff; color:var(--primary-foreground);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-badge svg{width:32px; height:32px;}
.brand-badge img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.brand-name{font-family:var(--font-serif); font-size:1.25rem; font-weight:600; letter-spacing:-0.01em;}

/* ---- navegación desktop ---- */
.nav-links{display:flex; align-items:center; gap:32px;}
.nav-links li{list-style:none;}
.nav-links a{font-size:0.9rem; font-weight:500; color:color-mix(in oklch, var(--foreground) 70%, transparent); transition:color .2s ease;}
.nav-links a:hover{color:var(--primary);}

.nav-right{display:flex; align-items:center; gap:12px;}

/* ---- selector de idioma ---- */
.lang-switch{display:flex; align-items:center; border:1px solid var(--border); border-radius:999px; padding:2px;}
.lang-switch button{
  border:none; background:none; border-radius:999px; padding:5px 10px; font-size:0.72rem; font-weight:600;
  color:color-mix(in oklch, var(--foreground) 60%, transparent);
}
.lang-switch button.active{background:var(--foreground); color:var(--background);}

/* ---- botón hamburguesa ---- */
.burger{
  display:none; width:36px; height:36px; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:999px; background:none;
}
.burger svg{width:20px; height:20px;}

/* ---- menú móvil desplegable ---- */
.mobile-nav{display:none; border-top:1px solid var(--border); background:var(--background);}
.mobile-nav.open{display:block;}
.mobile-nav .wrap{padding:16px 24px; display:flex; flex-direction:column; gap:4px;}
.mobile-nav li{list-style:none;}
.mobile-nav a{display:block; padding:10px 12px; border-radius:10px; font-size:0.9rem; font-weight:500;}
.mobile-nav a:hover{background:var(--muted);}
.mobile-nav .btn{margin-top:8px;}
.mobile-nav .mobile-lang-switch{
  display:flex; justify-content:center; margin-top:12px; align-self:center;
}

/* ---- responsive: pasa de nav horizontal a hamburguesa ---- */
@media (max-width: 768px){
  /* Ocultamos SOLO el <nav> de escritorio por su id — no usamos la clase
     .nav-links aquí porque el menú móvil reutiliza esa misma clase y
     quedaría oculto también. */
  #site-navigation{display:none;}
  .burger{display:flex;}
  .nav-right .lang-switch,
  .nav-right > .btn-primary{
    display:none;
  }
}

/* El <ul class="nav-links"> dentro del menú móvil reutiliza los estilos
   de link (color, hover) pero necesita apilarse en columna en vez del
   flex horizontal que usa la versión de escritorio. Esta regla tiene
   mayor especificidad (.mobile-nav .nav-links) así que gana siempre,
   sin depender del @media de arriba. */
.mobile-nav .nav-links{
  display:flex; flex-direction:column; align-items:stretch; gap:4px;
}