/* Component: header
 *
 * Tres estados visuales:
 *  1) Inicial:     topbar visible, logo grande, barra principal alta.
 *  2) Scrolled:    topbar oculta, logo encogido, barra principal compacta.
 *  3) Mega-open:   sub-menu de "Tienda" desplegado bajo el header.
 *
 * Sticky-scroll-shrink controlado por `body.pf-riojano-is-scrolled`
 * (script.js mantiene esta clase según window.scrollY).
 */

/* ------------------------------------------------------------------
 * Header wrapper (sticky)
 * ------------------------------------------------------------------ */
.pf-riojano-header {
  /* Fixed: el <main> reserva su altura con padding-top
   * (var(--pf-riojano-header-h)). Páginas con hero anulan ese padding
   * para que el hero quede full-bleed por debajo del header. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--pf-riojano-neutral-white);
  border-bottom: 1px solid rgba(31, 32, 105, 0.04);
  box-shadow: none;
  transition: background var(--pf-riojano-transition-base),
              border-color var(--pf-riojano-transition-base),
              box-shadow var(--pf-riojano-transition-base);
}

/* Páginas con hero (body.pf-riojano-has-hero): header transparente en
 * reposo para que se vea el hero por debajo. Al hacer scroll el header
 * vuelve a su estado opaco normal (regla siguiente). */
body.pf-riojano-has-hero .pf-riojano-header {
  background: transparent;
  border-bottom-color: transparent;
}

/* Estado scrolled (común a todas las páginas): fondo blanco + borde
 * inferior muy sutil. Si la página es hero, esto sobrescribe el
 * transparente en reposo cuando se hace scroll. */
body.pf-riojano-is-scrolled .pf-riojano-header {
  background: var(--pf-riojano-neutral-white);
  border-bottom-color: rgba(31, 32, 105, 0.04);
}

/* ------------------------------------------------------------------
 * <main> debajo del header fixed: reserva espacio por defecto.
 * Las páginas con hero (body.pf-riojano-has-hero) anulan el padding
 * para que su hero quede pegado al top del viewport.
 * ------------------------------------------------------------------ */
.pf-riojano-main {
  padding-top: var(--pf-riojano-header-h);
}
body.pf-riojano-has-hero .pf-riojano-main {
  padding-top: 0;
}
@media (max-width: 1080px) {
  .pf-riojano-main { padding-top: var(--pf-riojano-header-h-mobile); }
}

/* ------------------------------------------------------------------
 * Top bar: socials + mensaje promo (estado inicial)
 * ------------------------------------------------------------------ */
.pf-riojano-header__topbar {
  background: var(--pf-riojano-brand-primary);
  color: var(--pf-riojano-neutral-white);
  overflow: hidden;
  max-height: 56px;
  transition: max-height 200ms ease, opacity 160ms ease, padding 200ms ease;
}
.pf-riojano-header__topbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--pf-riojano-space-3);
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.pf-riojano-header__topbar-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--pf-riojano-space-3);
}
.pf-riojano-header__topbar-socials a {
  color: var(--pf-riojano-neutral-white);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Tap-friendly: 28px de glifo + padding genera ~36px de área tappable.
   * En mobile no son críticos (la marca aparece de nuevo en el footer),
   * los ocultamos en <480px para liberar ancho a la promo. */
  width: 28px;
  height: 28px;
  transition: opacity var(--pf-riojano-transition-fast);
}
.pf-riojano-header__topbar-socials a:hover { opacity: 0.7; }
.pf-riojano-header__topbar-message {
  margin: 0;
  text-align: center;
  font-family: var(--pf-riojano-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.pf-riojano-header__topbar-spacer { display: inline-block; }

/* Hide topbar when page is scrolled. */
.pf-riojano-is-scrolled .pf-riojano-header__topbar {
  max-height: 0;
  opacity: 0;
  padding: 0;
}

/* ------------------------------------------------------------------
 * Main bar: nav-left | brand | nav-right | actions
 * ------------------------------------------------------------------ */
.pf-riojano-header__bar {
  /* Grid simétrico: el brand queda exactamente en el centro del container
   * (y, por margin:auto del container, en el centro del viewport).
   * Los iconos viven en position:absolute para no robar espacio al grid. */
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--pf-riojano-space-4);
  min-height: 96px;
  padding-top: var(--pf-riojano-space-2);
  padding-bottom: var(--pf-riojano-space-2);
  transition: min-height 200ms ease;
}
.pf-riojano-is-scrolled .pf-riojano-header__bar { min-height: 64px; }

.pf-riojano-header__nav--left  { justify-self: end; }
.pf-riojano-header__nav--right { justify-self: start; }
.pf-riojano-header__actions {
  position: absolute;
  /* Mismo gutter que `.pf-riojano-container` para que los iconos queden
   * alineados con el borde interior del container, no con el viewport. */
  right: var(--pf-riojano-gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.pf-riojano-header__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--pf-riojano-brand-primary);
}
/* Specificity reforzada (0,2,0) para ganar a la regla de WC
 * `.woocommerce img, .woocommerce-page img { height:auto; max-width:100% }`
 * que se carga en cualquier página de tienda/producto/cart/account. */
.pf-riojano-header .pf-riojano-header__logo {
  height: 90px;
  width: auto;
  max-width: none;
  transition: height 200ms ease;
}
.pf-riojano-is-scrolled .pf-riojano-header .pf-riojano-header__logo { height: 56px; }

.pf-riojano-header__brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.pf-riojano-header__brand-name {
  font-family: var(--pf-riojano-font-accent);
  font-size: var(--pf-riojano-fs-xl);
  letter-spacing: 0.5px;
}
.pf-riojano-header__brand-tagline {
  font-family: var(--pf-riojano-font-body);
  font-size: var(--pf-riojano-fs-xs);
  color: var(--pf-riojano-brand-primary-soft);
}

/* ------------------------------------------------------------------
 * Menú top-level (HOME · TIENDA · NOSOTROS · CONTACTO)
 * ------------------------------------------------------------------ */
.pf-riojano-header__menu {
  list-style: none;
  display: flex;
  gap: var(--pf-riojano-space-5);
  margin: 0;
  padding: 0;
  align-items: center;
}
.pf-riojano-header__menu-item { position: static; }
.pf-riojano-header__menu-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--pf-riojano-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--pf-riojano-brand-primary);
  text-decoration: none;
  padding: var(--pf-riojano-space-2) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--pf-riojano-transition-fast),
              color var(--pf-riojano-transition-fast);
}
.pf-riojano-header__menu-link:hover,
.pf-riojano-header__menu-link[aria-expanded="true"],
.pf-riojano-header__menu-item.is-active > .pf-riojano-header__menu-link {
  color: var(--pf-riojano-brand-accent-strong);
}
.pf-riojano-header__menu-caret { font-size: 0.7rem; transition: transform 160ms ease; }
.pf-riojano-header__menu-item--has-mega.is-open > .pf-riojano-header__menu-link .pf-riojano-header__menu-caret {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------------
 * Megamenú (hover/focus en item con children)
 *
 * Estructura: container > ul.megamenu-grid (4 columnas × 5 filas)
 * ------------------------------------------------------------------ */
.pf-riojano-header__megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--pf-riojano-neutral-white);
  border-top: var(--pf-riojano-border-soft);
  border-bottom: var(--pf-riojano-border-soft);
  box-shadow: 0 12px 24px rgba(31, 32, 105, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 60;
  padding: var(--pf-riojano-space-6) 0;
}
.pf-riojano-header__menu-item--has-mega:hover > .pf-riojano-header__megamenu,
.pf-riojano-header__menu-item--has-mega:focus-within > .pf-riojano-header__megamenu,
.pf-riojano-header__menu-item--has-mega.is-open > .pf-riojano-header__megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pf-riojano-header__megamenu-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-auto-rows: auto;
  /* Reparte automáticamente N items en 4 columnas equilibradas. */
  grid-template-rows: repeat(var(--pf-riojano-mega-rows, 5), auto);
  column-gap: var(--pf-riojano-space-6);
  row-gap: var(--pf-riojano-space-3);
}

.pf-riojano-header__megamenu-cell { list-style: none; }
.pf-riojano-header__megamenu-link {
  display: inline-block;
  font-family: var(--pf-riojano-font-body);
  font-size: 1rem;
  color: var(--pf-riojano-brand-primary);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--pf-riojano-transition-fast),
              color var(--pf-riojano-transition-fast);
}
.pf-riojano-header__megamenu-link:hover {
  color: var(--pf-riojano-brand-accent-strong);
  border-bottom-color: var(--pf-riojano-brand-accent-strong);
}

/* ------------------------------------------------------------------
 * Actions (search/user/cart)
 * ------------------------------------------------------------------ */
.pf-riojano-header__actions {
  display: flex;
  align-items: center;
  gap: var(--pf-riojano-space-2);
}
.pf-riojano-header__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44×44 = mínimo recomendado para touch (Apple HIG / Material). En
   * mobile representamos ~80 % de la base de usuarios — priorizamos
   * que cada icono sea pulsable sin precisión. */
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--pf-riojano-brand-primary);
  cursor: pointer;
  border-radius: var(--pf-riojano-radius-md);
  text-decoration: none;
  font-size: 1.1rem;
  transition: background var(--pf-riojano-transition-fast),
              color var(--pf-riojano-transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.pf-riojano-header__icon-btn:hover {
  background: var(--pf-riojano-neutral-cream);
  color: var(--pf-riojano-brand-accent-strong);
}
.pf-riojano-header__cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--pf-riojano-brand-accent-strong);
  color: var(--pf-riojano-brand-primary);
  font-family: var(--pf-riojano-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  border-radius: 9px;
  text-align: center;
}

/* ------------------------------------------------------------------
 * Toggle móvil
 * ------------------------------------------------------------------ */
.pf-riojano-header__nav-toggle {
  /* Por defecto oculto (override a `inline-flex` en mobile). Cuando se
   * activa, queremos las mismas reglas de centrado que `__icon-btn`
   * para que el `<i>` quede vertical/horizontalmente centrado dentro
   * del 44×44 — sin esto, el icono se alinea al baseline y aparece
   * desplazado respecto a los iconos hermanos. */
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--pf-riojano-brand-primary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--pf-riojano-radius-md);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--pf-riojano-transition-fast);
}
.pf-riojano-header__nav-toggle:hover,
.pf-riojano-header__nav-toggle[aria-expanded="true"] {
  background: var(--pf-riojano-neutral-soft);
}

/* ------------------------------------------------------------------
 * Search panel
 * ------------------------------------------------------------------ */
.pf-riojano-header__search {
  border-top: var(--pf-riojano-border-soft);
  background: var(--pf-riojano-neutral-cream);
  padding: var(--pf-riojano-space-3) 0;
}
.pf-riojano-header__search form { display: flex; gap: var(--pf-riojano-space-2); }
.pf-riojano-header__search-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--pf-riojano-space-2);
  background: var(--pf-riojano-neutral-white);
  border: var(--pf-riojano-border-soft);
  border-radius: var(--pf-riojano-radius-md);
  padding: 0 var(--pf-riojano-space-3);
}
.pf-riojano-header__search-label input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--pf-riojano-font-body);
  font-size: var(--pf-riojano-fs-base);
  padding: var(--pf-riojano-space-3) 0;
  color: var(--pf-riojano-brand-primary);
}
.pf-riojano-header__search-submit {
  background: var(--pf-riojano-brand-primary);
  color: var(--pf-riojano-neutral-white);
  border: none;
  padding: 0 var(--pf-riojano-space-4);
  border-radius: var(--pf-riojano-radius-md);
  font-family: var(--pf-riojano-font-display);
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
}

/* ------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------ */
.pf-riojano-header__nav-mobile { display: none; }

@media (max-width: 1080px) {
  /* En mobile la topbar (promo + sociales) se oculta del chrome.
   * Su contenido vive ahora dentro del drawer (card + circles), para
   * que el bar sea mínimo y el contenido del producto gane viewport. */
  .pf-riojano-header__topbar { display: none; }

  /* Bar mobile: flex linear. Logo a la izquierda, todo lo demás (iconos
   * + hamburger) empujado a la derecha por `margin-right: auto` del
   * brand. Nada de grid en mobile — es más predecible y permite
   * reordenar con `order` sin tocar el HTML. */
  .pf-riojano-header__bar {
    display: flex;
    align-items: center;
    gap: var(--pf-riojano-space-1);
    min-height: 80px;
  }
  .pf-riojano-is-scrolled .pf-riojano-header__bar { min-height: 64px; }

  .pf-riojano-header__nav-toggle {
    display: inline-flex;
    order: 99;   /* siempre al final, después de los iconos */
  }
  .pf-riojano-header__nav--left,
  .pf-riojano-header__nav--right { display: none; }
  .pf-riojano-header__brand {
    justify-self: start;
    margin-right: auto;  /* empuja iconos + hamburger a la derecha */
  }
  /* Logo mobile un pelín más grande para que el escudo se lea bien. */
  .pf-riojano-header .pf-riojano-header__logo { height: 64px; }
  .pf-riojano-is-scrolled .pf-riojano-header .pf-riojano-header__logo { height: 48px; }
  /* Iconos: ya no son absolute en mobile, fluyen como flex item. */
  .pf-riojano-header__actions {
    position: static;
    transform: none;
    gap: 0;  /* los 44px de touch target ya dan separación visual */
  }

  /* ============================================================
   * Drawer fullscreen overlay (slide desde la derecha).
   * Deja una franja del header asomando a la izquierda para dar
   * sensación de que el chrome sigue ahí debajo (no oscurecemos).
   * ============================================================ */
  .pf-riojano-header__nav-mobile {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;  /* siempre montado para que el slide pueda animar */
    pointer-events: none;
  }
  .pf-riojano-header__nav-mobile[hidden] { display: none; }  /* fallback no-JS */
  .pf-riojano-header__nav-mobile[data-open="true"] { pointer-events: auto; }

  .pf-riojano-header__nav-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;  /* dejamos ver el chrome detrás */
    cursor: pointer;
  }

  .pf-riojano-header__nav-panel {
    position: relative;
    margin-left: auto;
    width: calc(100% - 56px);   /* franja izq por la que asoma el header */
    max-width: 420px;
    height: 100%;
    background: var(--pf-riojano-brand-primary);
    color: var(--pf-riojano-neutral-white);
    padding: var(--pf-riojano-space-6) var(--pf-riojano-space-4) var(--pf-riojano-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--pf-riojano-space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(.22, .8, .36, 1);
  }
  .pf-riojano-header__nav-mobile[data-open="true"] .pf-riojano-header__nav-panel {
    transform: translateX(0);
  }

  /* Close circular en esquina superior derecha del panel. */
  .pf-riojano-header__nav-close {
    position: absolute;
    top: var(--pf-riojano-space-3);
    right: var(--pf-riojano-space-3);
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--pf-riojano-neutral-white);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--pf-riojano-transition-fast);
  }
  .pf-riojano-header__nav-close:hover,
  .pf-riojano-header__nav-close:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    outline: none;
  }

  /* Card de promo (lo que en desktop es la topbar). */
  .pf-riojano-header__nav-promo {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--pf-riojano-radius-md);
    padding: var(--pf-riojano-space-3);
    margin-top: var(--pf-riojano-space-6);
    margin-right: 60px;  /* no tape el close */
  }
  .pf-riojano-header__nav-promo p {
    margin: 0;
    font-size: var(--pf-riojano-fs-sm);
    line-height: 1.4;
    color: var(--pf-riojano-neutral-white);
  }

  /* Items del menú dentro del drawer (uppercase, grande, blanco). */
  .pf-riojano-header__menu--mobile {
    list-style: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 0;
  }
  .pf-riojano-header__menu--mobile .pf-riojano-header__menu-item {
    border-bottom: 0;  /* el espaciado lo dan los padding del link */
  }
  .pf-riojano-header__menu--mobile .pf-riojano-header__menu-link {
    color: var(--pf-riojano-neutral-white);
    font-family: var(--pf-riojano-font-display);
    font-size: var(--pf-riojano-fs-xl);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: var(--pf-riojano-space-2) 0;
    border-bottom: 0;
    justify-content: space-between;
    width: 100%;
  }
  .pf-riojano-header__menu--mobile .pf-riojano-header__menu-link:hover,
  .pf-riojano-header__menu--mobile .pf-riojano-header__menu-item.is-open
    > .pf-riojano-header__menu-link {
    color: var(--pf-riojano-brand-accent-strong);
  }
  .pf-riojano-header__menu--mobile .pf-riojano-header__menu-caret {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
  }

  /* Megamenú dentro del drawer (acordeón). */
  .pf-riojano-header__menu--mobile .pf-riojano-header__megamenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 var(--pf-riojano-space-3);
    display: none;
    background: transparent;
  }
  .pf-riojano-header__menu--mobile .pf-riojano-header__megamenu .pf-riojano-container {
    padding: 0;  /* anular gutter del container heredado */
  }
  .pf-riojano-header__menu--mobile .pf-riojano-header__menu-item.is-open .pf-riojano-header__megamenu {
    display: block;
  }
  .pf-riojano-header__menu--mobile .pf-riojano-header__megamenu-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    column-gap: var(--pf-riojano-space-3);
    row-gap: var(--pf-riojano-space-2);
  }
  .pf-riojano-header__menu--mobile .pf-riojano-header__megamenu-link {
    color: rgba(255, 255, 255, 0.78);
    padding: var(--pf-riojano-space-2) 0;
    font-size: 0.95rem;
  }
  .pf-riojano-header__menu--mobile .pf-riojano-header__megamenu-link:hover {
    color: var(--pf-riojano-neutral-white);
    border-bottom-color: transparent;
  }

  /* Sociales al pie del drawer, circulares. */
  .pf-riojano-header__nav-socials {
    list-style: none;
    display: flex;
    gap: var(--pf-riojano-space-3);
    margin: auto 0 0;        /* empuja al fondo del flex column */
    padding: var(--pf-riojano-space-3) 0 0;
  }
  .pf-riojano-header__nav-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;
    color: var(--pf-riojano-neutral-white);
    font-size: 1rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--pf-riojano-transition-fast),
                border-color var(--pf-riojano-transition-fast);
  }
  .pf-riojano-header__nav-socials a:hover,
  .pf-riojano-header__nav-socials a:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.40);
    outline: none;
  }

  /* Bloqueo de scroll del body cuando el drawer está abierto. */
  body.pf-riojano-nav-open {
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  .pf-riojano-header__topbar-message { font-size: 0.7rem; letter-spacing: 0.3px; }
  .pf-riojano-header__menu--mobile .pf-riojano-header__megamenu-grid {
    grid-template-columns: 1fr;
  }
}

/* Pantallas muy estrechas: liberamos espacio en la topbar ocultando los
 * iconos sociales (el footer los muestra de nuevo) para que el mensaje
 * promo no tenga que partir en dos líneas. */
@media (max-width: 480px) {
  .pf-riojano-header__topbar-socials { display: none; }
  .pf-riojano-header__topbar-inner { grid-template-columns: 1fr; }
  .pf-riojano-header__topbar-spacer { display: none; }
}