/* ==========================================================
   header.css — Regalos (AA CONTRASTE)
   - Header sticky con sombra
   - Menú siempre visible (wrap en móvil)
   - Contraste/Focus accesibles (WAVE AA)
   Compatible: WP 6.8.x • Woo 10.x • Blocksy 2.x
   ========================================================== */

/* Solo lectores de pantalla */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Foco visible */
a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(224, 0, 62, .28), 0 0 1px 0 rgba(224, 0, 62, .8));
  border-radius: .45rem;
}

/* ===== Header sticky ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background: var(--brand-600, #C81F4E); /* más oscuro = mejor contraste */
  color:#fff;
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.08));
}
.site-header a{ color:#fff; text-decoration:none; }
.site-header a:hover{ text-decoration:underline; }

/* Contenedor interno */
.header-container{
  display:flex; align-items:center; gap:.75rem;
  padding:.5rem 1rem;
  width:100%;
  max-width: var(--container, 1200px);
  margin-inline:auto;
}

/* Logo */
.site-branding{
  display:flex; align-items:center; gap:.5rem; min-width:0;
}
.site-branding img{
  display:block; height:40px; width:auto; object-fit:contain;
}
@media (min-width: 768px){
  .site-branding img{ height:48px; }
}

/* ===== Navegación ===== */
.main-navigation{ flex:1 1 auto; }
.menu-horizontal{
  display:flex; align-items:center; gap:.5rem;
  margin:0; padding:0; list-style:none;
}
.menu-horizontal > li > a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .8rem;
  border-radius:.55rem; line-height:1.2;
  transition: background 160ms ease, transform 120ms ease, color 160ms ease;
  color:#fff;
}
.menu-horizontal > li > a:hover,
.menu-horizontal > li > a:focus-visible{
  background: rgba(255,255,255,.18);
}
.menu-horizontal > li > a:active{
  transform: translateY(1px);
}

/* Estado activo (página actual) */
.menu-horizontal > li.current-menu-item > a,
.menu-horizontal > li.current_page_item > a,
.menu-horizontal > li > a[aria-current="page"]{
  background: rgba(255,255,255,.26);
}

/* ----- Móvil: “wrap” cuando no entra ----- */
@media (max-width: 768px){
  .header-container{ flex-wrap:wrap; row-gap:.5rem; }
  .menu-horizontal{ flex-wrap:wrap; }
  .menu-horizontal > li{ flex: 0 0 auto; }
}

/* ===== Acciones del header (buscador + carrito) ===== */
.header-actions{
  display:flex; align-items:center; gap:.5rem;
}

/* ===== Buscador (AA) ===== */
.header-search form{
  display:flex; align-items:center; gap:.4rem;
  background:#fff;                   /* fondo claro sólido para contraste */
  border:2px solid #172554;          /* borde visible */
  border-radius:.85rem;
  padding:.25rem .5rem;
}
.header-search input[type="search"]{
  min-width: 11rem;
  background: transparent;
  border: 0;
  color: var(--text, #1E0A7A);
  padding:.45rem .5rem;
  outline: none;
}
.header-search input::placeholder{
  color:#374151;                      /* placeholder legible */
  opacity:1;
}
.header-search button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  border:0;
  background: var(--accent, #0F7A8A); /* AA con blanco */
  color:#fff;
  border-radius:.65rem;
  padding:.45rem .6rem;
  cursor:pointer;
  transition: background 160ms ease, transform 120ms ease;
}
.header-search button[type="submit"]:hover{ background: var(--accent-600, #0A5860); }
.header-search button[type="submit"]:active{ transform: translateY(1px); }

/* ===== Carrito ===== */
.cart-link{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; color:#fff;
}
.cart-icon{ width:24px; height:24px; }
.cart-count{
  min-width:1.25rem; height:1.25rem; padding:0 .3rem;
  display:grid; place-items:center;
  font-weight:700; font-size:.75rem;
  background:#fff; color: var(--brand-600, #C81F4E); /* buen contraste */
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* ===== Hamburguesa opcional (si la usas) ===== */
.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:40px; height:40px;
  border:0; border-radius:.65rem;
  background: rgba(255,255,255,.18); color:#fff;
  cursor:pointer;
  transition: background 160ms ease, transform 120ms ease;
}
.nav-toggle:hover{ background: rgba(255,255,255,.28); }
.nav-toggle:active{ transform: translateY(1px); }

@media (max-width: 768px){
  .nav-toggle{ display:inline-flex; }
  .main-navigation[hidden]{ display:none !important; }
  .main-navigation.is-open{ display:block !important; width:100%; }
  .main-navigation.is-open .menu-horizontal{ flex-wrap:wrap; gap:.4rem; }
}

/* Alto contraste del sistema (opcional) */
@media (prefers-contrast: more){
  .menu-horizontal > li > a:hover,
  .menu-horizontal > li > a:focus-visible{
    background: rgba(0,0,0,.25);
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* ===== Efecto glass opcional ===== */
.site-header.has-glass{ background: rgba(200,31,78, .85); } /* basado en --brand-600 */
@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .site-header.has-glass{
    -webkit-backdrop-filter: saturate(120%) blur(6px);
    backdrop-filter: saturate(120%) blur(6px);
  }
}