/*
 * header.css — Header premium
 * Layout: [☰ 🔍]  ·  LOGO  ·  [👤 🛒]
 * Grid 1fr auto 1fr: logo siempre equidistante de ambos lados.
 */

/* ── Skip link ─────────────────────────────────────────────────────────────── */

.rda-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: var(--z-toast);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-gold-base);
  color: var(--color-navy-base);
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}

.rda-skip-link:focus {
  top: var(--space-md);
}

/* ── Header base ───────────────────────────────────────────────────────────── */

.rda-header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(253, 250, 245, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-cream-warm);
  box-shadow: 0 1px 0 rgba(201, 168, 76, 0.08);
  transition:
    background var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.rda-header.is-scrolled {
  background: rgba(253, 250, 245, 0.98);
  box-shadow:
    var(--shadow-soft),
    0 1px 0 rgba(201, 168, 76, 0.12);
}

/*
 * Con el menú móvil abierto, el body queda en position:fixed (scroll lock).
 * El header (sticky) pierde su referencia de scroll y en móviles reales
 * puede recortarse al hacer scroll interno del menú (colapso de la barra
 * de direcciones). Fijarlo explícitamente evita que la X de cerrar
 * desaparezca.
 */
.rda-header.rda-header--menu-open {
  position: fixed;
  left: 0;
  right: 0;
}

/* ── Inner: grid 1fr auto 1fr ──────────────────────────────────────────────── */
/*
 * La columna central (auto) toma el ancho natural del logo.
 * Las dos columnas 1fr se reparten el espacio restante a partes iguales,
 * manteniendo el logo perfectamente centrado sin importar cuántos
 * iconos haya a cada lado.
 */
.rda-header__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-sm);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-height-mobile);
}

/* ── Izquierda: hamburguesa + buscar ───────────────────────────────────────── */

.rda-header__left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

/* ── Centro: logo ──────────────────────────────────────────────────────────── */

.rda-header__brand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rda-header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.rda-header .rda-header__logo-img {
  display: block;
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* ── Derecha: cuenta + carrito ─────────────────────────────────────────────── */

.rda-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

/* ── Botones de acción (compartido izq y der) ──────────────────────────────── */

.rda-header__hamburger,
.rda-header__action-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-ink-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-decoration: none;
  flex-shrink: 0;
  transition:
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.rda-header__hamburger:hover,
.rda-header__hamburger:focus-visible,
.rda-header__action-btn:hover,
.rda-header__action-btn:focus-visible {
  color: var(--color-gold-deep);
  transform: scale(1.08);
}

.rda-header__hamburger:focus-visible,
.rda-header__action-btn:focus-visible {
  outline: 2px solid var(--color-gold-base);
  outline-offset: 2px;
}

/* ── Badge del carrito ─────────────────────────────────────────────────────── */

.rda-cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-gold-base);
  color: var(--color-navy-base);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 16px;
  text-align: center;
  border-radius: var(--radius-full);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.rda-cart-badge.is-empty {
  display: none;
}

/* ── Botón ícono base (compartido con otros componentes) ───────────────────── */

.rda-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: currentColor;
  line-height: 1;
}

/* ── 640px+: logo y padding un poco más generosos ──────────────────────────── */

@media (min-width: 640px) {
  .rda-header__inner {
    padding: 0 var(--space-md);
  }

  .rda-header .rda-header__logo-img {
    height: 42px;
  }

  .rda-header__left,
  .rda-header__actions {
    gap: var(--space-2xs);
  }
}

/* ── 1024px+: altura desktop, logo prominente ──────────────────────────────── */

@media (min-width: 1024px) {
  .rda-header__inner {
    padding: 0 var(--space-lg);
    min-height: var(--header-height-desktop);
  }

  .rda-header .rda-header__logo-img {
    height: 50px;
  }

  .rda-header__hamburger,
  .rda-header__action-btn {
    width: 44px;
    height: 44px;
  }

  .rda-header__left,
  .rda-header__actions {
    gap: var(--space-xs);
  }
}

/* ── Admin bar de WordPress (usuarios logueados en el backend) ─────────────── */

/*
 * --rda-admin-bar-offset la fija header.js midiendo #wpadminbar en vivo
 * (0px si no existe o si WordPress la puso position:absolute — pasa por
 * debajo de 600px de ancho, ahí la admin bar se desplaza con la página en
 * vez de quedarse fija arriba). Así el header solo reserva el espacio
 * exacto que la admin bar realmente ocupa en cada momento, en vez de
 * adivinar sus breakpoints (32px/46px) a mano.
 */
.admin-bar .rda-header {
  top: var(--rda-admin-bar-offset, 0px);
}

/* ── prefers-reduced-motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .rda-header,
  .rda-header__hamburger,
  .rda-header__action-btn {
    transition: none;
  }
}