/* ==========================================================
   header.css — Mascotas Ayacucho (AA • CONTRASTE • CLS bajo)
   - Header sticky en turquesa (support)
   - Menú y textos blancos
   - Accesibilidad: foco visible, wrap móvil, reduce motion
   - Sin auto-referencias y alineado a --header-min-h global
   Compatible: WP 6.8.x · Woo 10.x · Blocksy 2.x
   Cargar DESPUÉS de variables.css y base.css
   ========================================================== */

/* ---- Aliases locales (no pisan variables globales) ---- */
:root{
  /* Base del header: usa tokens globales con fallback seguro */
  --header-bg:           var(--ma-teal-500, #0AC5CA);
  --header-on-bg:        #ffffff;

  /* Derivados para hover (con fallback si no hay color-mix) */
  --header-bg-600:       color-mix(in srgb, var(--header-bg) 72%, #000);
  --header-bg-600-fb:    #0A5860; /* fallback aproximado */

  /* Acento (botón buscador, etc.) */
  --header-accent:       var(--ma-teal-500, #0AC5CA);
  --header-accent-600:   color-mix(in srgb, var(--header-accent) 68%, #000);
  --header-accent-600-fb:#0F7A8A;

  /* Contenedor y shadow */
  --header-container:    var(--container, 1200px);
  --header-shadow:       var(--shadow, 0 8px 24px rgba(0,0,0,.08));

  /* Focus ring: reutiliza global */
  --header-focus-ring:   var(--focus-ring, 0 0 0 3px rgba(255,0,0,.35));

  /* Alto mínimo coherente para reducir CLS y ajustar anclas */
  --header-min-h:        var(--header-min-h, 62px);
}

/* 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 (AA) */
:where(a,button,input):focus-visible{
  outline:none;
  box-shadow: var(--header-focus-ring);
  border-radius:.45rem;
}

/* ===== Header sticky ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background: var(--header-bg);
  color: var(--header-on-bg);
  box-shadow: var(--header-shadow);
  min-height: var(--header-min-h);
}
.site-header a{ color: var(--header-on-bg); text-decoration:none; }
@media (hover:hover){
  .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(--header-container);
  margin-inline:auto;
}

/* Logo (dimensiones estables) */
.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: var(--header-on-bg);
}
@media (hover:hover){
  .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 */
.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;
  border:2px solid;
  border-color: var(--header-bg-600);
  border-radius:.85rem;
  padding:.25rem .5rem;
}
@supports not (color: color-mix(in srgb, black 10%, white)){
  .header-search form{ border-color: var(--header-bg-600-fb); }
}
.header-search input[type="search"]{
  min-width:11rem; background:transparent; border:0;
  color:#0a0a0a; padding:.45rem .5rem; outline:none;
}
.header-search input::placeholder{ color:#374151; opacity:1; }
.header-search button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  border:0; background: var(--header-accent); color:#fff;
  border-radius:.65rem; padding:.45rem .6rem; cursor:pointer;
  transition: background 160ms ease, transform 120ms ease;
}
@media (hover:hover){
  @supports (color: color-mix(in srgb, black 10%, white)){
    .header-search button[type="submit"]:hover{ background: var(--header-accent-600); }
  }
  @supports not (color: color-mix(in srgb, black 10%, white)){
    .header-search button[type="submit"]:hover{ background: var(--header-accent-600-fb); }
  }
}
.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(--header-bg);
  border-radius:999px; box-shadow:0 1px 0 rgba(0,0,0,.08);
}

/* ===== Hamburguesa opcional ===== */
.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;
}
@media (hover:hover){
  .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 */
@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: color-mix(in srgb, var(--header-bg) 85%, transparent);
}
@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);
  }
}