/* ==========================================================
   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
   - Compatible con Blocksy (incluye override contra inline CSS del tema)
   Compatible: WP 6.8+ · Woo 10.x · Blocksy 2.x
   Cargar DESPUÉS de variables.css y base.css
   ========================================================== */

/* ==========================================================
   1) Tokens locales (NO pisan variables globales)
   ========================================================== */
:root{
  /* Base del header: 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 sombra */
  --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 */
  --header-min-h:         var(--header-min-h, 62px);
}

/* ==========================================================
   2) Utilidades / Accesibilidad
   ========================================================== */
.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;
}

:where(a,button,input):focus-visible{
  outline:none;
  box-shadow: var(--header-focus-ring);
  border-radius:.45rem;
}

/* ==========================================================
   3) Header base (genérico)
   ========================================================== */
.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; }
}

/* ==========================================================
   4) Navegación (genérica + estilo “pill”)
   ========================================================== */
.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:10px 12px;
  border-radius:999px;
  line-height:1;
  text-decoration:none;

  color: var(--header-on-bg);
  transition: background 160ms ease, transform 120ms ease, color 160ms ease;
}

@media (hover:hover){
  .menu-horizontal > li > a:hover,
  .menu-horizontal > li > a:focus-visible{
    background: rgba(255,255,255,.14);
    text-decoration:none;
  }
}

.menu-horizontal > li > a:active{ transform: translateY(1px); }

/* 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,.20);
  font-weight: 700;
}

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

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

/* Buscador */
.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);
}

/* ==========================================================
   6) 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; justify-content:center; }
}

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

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

/* ==========================================================
   8) 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);
  }
}

/* ==========================================================
   9) HARDLOCK BLOCKSY (FINAL)
   - Blocksy inyecta <style id="ct-main-styles-inline-css"> y puede
     pintar el header (row middle) en blanco.
   - Forzamos turquesa + blanco SIEMPRE, SOLO en header type-1.
   ========================================================== */

/* =========================================================
   MA_BLOCKSY_HEADER_HARDLOCK_FINAL (2026-01-07)
   ========================================================= */

/* Fondo del header (row middle) */
[data-header*="type-1"] .ct-header [data-row*="middle"]{
  background-color: var(--ma-teal-500, #0AC5CA) !important;
  background-image: none !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.08) !important;
}

/* Texto e iconos a blanco dentro del row middle */
[data-header*="type-1"] .ct-header [data-row*="middle"] a,
[data-header*="type-1"] .ct-header [data-row*="middle"] span,
[data-header*="type-1"] .ct-header [data-row*="middle"] svg{
  color: #ffffff !important;
  fill: currentColor !important;
}

/* Menú pill + hover premium (solo header type-1) */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a{
  padding: 10px 12px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}

@media (hover:hover){
  [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a:hover,
  [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a:focus-visible{
    background: rgba(255,255,255,.18) !important;
    text-decoration: none !important;
  }
}

/* Activo */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-item > a,
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current_page_item > a,
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a[aria-current="page"]{
  background: rgba(255,255,255,.26) !important;
  font-weight: 700 !important;
}

/* Móvil: alinear altura con Blocksy (70px) para evitar CLS */
@media (max-width: 999.98px){
  :root{ --header-min-h: 70px; }
}

/* =========================================================
   MA_MENU_HOVER_ACTIVE_V2 (2026-01-07)
   Ajuste fino: hover/active más premium + focus visible
   Alcance: SOLO header type-1 (Blocksy)
   ========================================================= */

[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a{
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

@media (hover:hover){
  [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a:hover{
    background: rgba(255,255,255,.16) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
  }
}

/* Focus accesible (teclado) */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.12) !important;
}

/* Activo más “marcado” */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-item > a,
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current_page_item > a,
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-ancestor > a,
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a[aria-current="page"]{
  background: rgba(255,255,255,.24) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28) !important;
}