/*
 * mobile-menu.css — Menú móvil premium 2 niveles
 *
 * Referencia: Bvlgari mobile menu.
 * Nivel 1: zona nav (crema) + zona secundaria (navy).
 * Nivel 2: slide horizontal completo, scroll interno.
 */

/* ── Backdrop (overlay oscuro detrás del menú — solo desktop) ───────────────── */

.rda-menu-backdrop {
  display: none; /* oculto en mobile — el menú ya es full-screen */
}

@media (min-width: 1024px) {
  .rda-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 190; /* debajo del header (--z-sticky: 200) para que el header flote encima */
    background: rgba(10, 23, 51, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 320ms var(--ease-out),
      visibility 0s 320ms;
  }

  .rda-menu-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 320ms var(--ease-out),
      visibility 0s 0s;
  }
}

/* ── Wrapper ─────────────────────────────────────────────────────────────────── */

.rda-mobile-menu {
  position: fixed;
  top: var(--header-height-mobile);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw; /* garantiza ancho viewport completo aunque body tenga position:fixed en iOS */
  z-index: var(--z-overlay);
  visibility: hidden;
  opacity: 0;
  pointer-events: none; /* impide clicks a través del menú durante la transición de cierre */
  transform: translateY(-16px);
  /* Entrada: 300ms transform + fade, salida: 250ms */
  transition:
    opacity 250ms var(--ease-out),
    transform 250ms var(--ease-out),
    visibility 0s 250ms linear;
}

.rda-mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 300ms var(--ease-out),
    transform 300ms var(--ease-out),
    visibility 0s 0s linear;
}

/*
 * Con la admin bar de WordPress visible (usuario logueado), el header
 * se desplaza hacia abajo (ver .admin-bar .rda-header en header.css) pero
 * este panel seguía anclado a --header-height-mobile sin sumar esa altura.
 * Resultado: el panel (z-index 300, por encima del header en 200) tapaba
 * la mitad inferior del header —incluida la X para cerrar— en mobile.
 * --rda-admin-bar-offset la mide header.js en vivo (0px si la admin bar
 * no está realmente position:fixed). Acotado a <1024px para no pisar el
 * "top: 0" del mega-menu desktop.
 */
@media (max-width: 1023px) {
  .admin-bar .rda-mobile-menu {
    top: calc(var(--header-height-mobile) + var(--rda-admin-bar-offset, 0px));
  }
}

/* ── Stage: recorta el deslizamiento lateral de los paneles ──────────────────── */

.rda-mobile-menu__stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ── Panel base ──────────────────────────────────────────────────────────────── */

.rda-mobile-menu__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* ── Nivel 1 ─────────────────────────────────────────────────────────────────── */

.rda-mobile-menu__panel--l1 {
  transition:
    transform 350ms var(--ease-out),
    visibility 0s 0s;
}

.rda-mobile-menu__panel--l1.is-pushed {
  transform: translateX(-100%);
  /* Ocultar del flujo de foco cuando está detrás del L2 */
  visibility: hidden;
  transition:
    transform 350ms var(--ease-out),
    visibility 0s 350ms;
}

/* Zona nav: fondo crema, ocupa el espacio restante, scroll propio */
.rda-mobile-menu__zone--nav {
  flex: 1 1 auto;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-cream-light);
}

.rda-mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Links del Nivel 1 ───────────────────────────────────────────────────────── */

.rda-mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-lg) var(--space-lg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-primary);
  text-decoration: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  cursor: pointer;
  text-align: left;
  line-height: var(--leading-tight);
  transition: color var(--duration-fast) var(--ease-out);
}

.rda-mobile-menu__link:hover,
.rda-mobile-menu__link:focus-visible {
  color: var(--color-gold-deep);
}

.rda-mobile-menu__link:focus-visible {
  outline: 2px solid var(--color-gold-base);
  outline-offset: -2px;
}

.rda-mobile-menu__link.is-active {
  color: var(--color-gold-deep);
}

.rda-mobile-menu__arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-gold-base);
  transition: color var(--duration-fast) var(--ease-out);
}

.rda-mobile-menu__link:hover .rda-mobile-menu__arrow,
.rda-mobile-menu__link.is-active .rda-mobile-menu__arrow {
  color: var(--color-gold-deep);
}

/* ── Zona secundaria (navy) ──────────────────────────────────────────────────── */

.rda-mobile-menu__zone--secondary {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-navy-base);
}

.rda-mobile-menu__sec-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cream-base);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.rda-mobile-menu__sec-link svg {
  color: var(--color-gold-soft);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.rda-mobile-menu__sec-link:hover,
.rda-mobile-menu__sec-link:focus-visible {
  color: var(--color-gold-soft);
}

.rda-mobile-menu__sec-link:focus-visible {
  outline: 2px solid var(--color-gold-base);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ── Nivel 2 ─────────────────────────────────────────────────────────────────── */

.rda-mobile-menu__panel--l2 {
  transform: translateX(100%);
  background: var(--color-cream-light);
  transition: transform 350ms var(--ease-out);
}

.rda-mobile-menu__panel--l2.is-active {
  transform: translateX(0);
}

/* ── Cabecera fija del L2 ────────────────────────────────────────────────────── */

.rda-mobile-menu__l2-head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-cream-light);
  flex-shrink: 0;
}

.rda-mobile-menu__back {
  width: 40px;
  height: 40px;
  color: var(--color-gold-base);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.rda-mobile-menu__back:hover,
.rda-mobile-menu__back:focus-visible {
  color: var(--color-gold-deep);
}

.rda-mobile-menu__back:focus-visible {
  outline: 2px solid var(--color-gold-base);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.rda-mobile-menu__l2-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-primary);
}

/* ── Cuerpo del L2 (scroll) ──────────────────────────────────────────────────── */

.rda-mobile-menu__l2-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--space-2xl);
}

/* ── Subtítulo organizador ───────────────────────────────────────────────────── */

.rda-mobile-menu__l2-subtitle {
  margin: 0;
  padding: var(--space-md) var(--space-lg) var(--space-xs);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-regular);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink-secondary);
}

/* ── Link destacado "Todas las…" ─────────────────────────────────────────────── */

.rda-mobile-menu__featured-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: color var(--duration-fast) var(--ease-out);
}

.rda-mobile-menu__featured-link:hover,
.rda-mobile-menu__featured-link:focus-visible {
  color: var(--color-gold-base);
}

.rda-mobile-menu__featured-link:focus-visible {
  outline: 2px solid var(--color-gold-base);
  outline-offset: -2px;
}

.rda-mobile-menu__featured-arrow {
  display: flex;
  align-items: center;
  color: currentColor;
  opacity: 0.7;
}

/* ── Grid de tarjetas (Devociones, Ocasiones, Protección, Tienda) ──────────── */

.rda-mobile-menu__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg) var(--space-md);
}

.rda-menu-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.rda-menu-card__img {
  position: relative;
  aspect-ratio: 3 / 4;  /* retrato — más producto visible */
  overflow: hidden;
  border-radius: 0;     /* look editorial limpio */
}

.rda-menu-card__img-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    145deg,
    var(--color-cream-light) 0%,
    var(--color-cream-base) 55%,
    var(--color-cream-warm) 100%
  );
  transition: transform 350ms var(--ease-out);
}

/* Foto real (devociones, categorías de tienda) */
.rda-menu-card__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 350ms var(--ease-out);
}

.rda-menu-card:hover .rda-menu-card__img-inner,
.rda-menu-card:hover .rda-menu-card__foto {
  transform: scale(1.06);
}

.rda-menu-card:hover .rda-menu-card__img {
  box-shadow: 0 8px 24px rgba(10, 23, 51, 0.09);
}

.rda-menu-card__nombre {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
  color: var(--color-ink-primary);
  text-align: center;
  line-height: var(--leading-snug);
  transition: color var(--duration-fast) var(--ease-out);
}

.rda-menu-card:hover .rda-menu-card__nombre {
  color: var(--color-gold-deep);
}

.rda-menu-card:focus-visible {
  outline: 2px solid var(--color-gold-base);
  outline-offset: 2px;
}

/* ── Lista del L2 (Tienda, Nosotros) ─────────────────────────────────────────── */

.rda-mobile-menu__l2-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rda-mobile-menu__l2-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: color var(--duration-fast) var(--ease-out);
}

.rda-mobile-menu__l2-link:hover,
.rda-mobile-menu__l2-link:focus-visible {
  color: var(--color-gold-deep);
}

.rda-mobile-menu__l2-link:focus-visible {
  outline: 2px solid var(--color-gold-base);
  outline-offset: -2px;
}

/* Item héroe (Todos los productos / Sobre Rosarios del Alma) */
.rda-mobile-menu__l2-link--hero {
  font-weight: var(--weight-semibold);
  color: var(--color-ink-primary);
}

.rda-mobile-menu__l2-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-gold-base);
}

/* ── Botón CTA "VER TODAS…" ──────────────────────────────────────────────────── */

.rda-mobile-menu__cta {
  display: block;
  width: fit-content;
  margin: var(--space-lg) auto;
  padding: var(--space-sm) var(--space-xl);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--color-gold-base);
  border-radius: 0;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.rda-mobile-menu__cta:hover,
.rda-mobile-menu__cta:focus-visible {
  background: var(--color-gold-base);
  color: var(--color-navy-base);
}

.rda-mobile-menu__cta:focus-visible {
  outline: 2px solid var(--color-gold-base);
  outline-offset: 3px;
}

/* ── 1024px+: mega-menu dos columnas (L1 fijo izquierda + L2 derecha) ─────────
 *
 * Igual a Chanel / Dior desktop:
 *  - Hamburguesa = clic para abrir/cerrar.
 *  - Hover sobre un ítem con sub → panel L2 aparece a la derecha con fade.
 *  - L1 nunca desaparece; L2 se superpone en su propia columna.
 *  - El body NO se bloquea; la página sigue siendo scrollable.
 *  - Total ancho: 1100px (L1 320px + L2 780px).
 */

@media (min-width: 1024px) {

  /* ── Wrapper: dos columnas 1100px total (L1 320 + L2 780) ──────────────────── */
  .rda-mobile-menu {
    top: 0;
    right: auto;
    width: 1100px;
    z-index: 195; /* encima del backdrop (190), debajo del header (200) */
    box-shadow:
      0 20px 60px rgba(10, 23, 51, 0.14),
      0 2px 0 rgba(201, 168, 76, 0.18);
  }

  /* ── L1: columna izquierda, siempre visible ──────────────────────────────── */

  .rda-mobile-menu__panel--l1 {
    right: auto;
    width: 320px;
    padding-top: var(--header-height-desktop); /* empuja el nav debajo del header flotante */
    box-shadow: 1px 0 0 var(--color-gold-soft), 4px 0 20px rgba(10, 23, 51, 0.04);
    transform: none !important;
    opacity: 1    !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  /* Items L1 con más respiro */
  .rda-mobile-menu__link {
    padding: var(--space-md) var(--space-lg);
    font-size: 12px;
    letter-spacing: 0.12em;
    transition:
      color var(--duration-fast) var(--ease-out),
      background var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
  }

  .rda-mobile-menu__link:hover {
    background: var(--color-cream-base);
    box-shadow: inset 3px 0 0 var(--color-gold-soft);
    color: var(--color-ink-primary);
  }

  .rda-mobile-menu__link.is-active {
    background: var(--color-cream-base);
    box-shadow: inset 3px 0 0 var(--color-gold-base);
    color: var(--color-gold-deep);
  }

  /* Zona navy compacta */
  .rda-mobile-menu__zone--secondary {
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .rda-mobile-menu__sec-link {
    font-size: 11px;
  }

  /* ── L2: columna derecha 570px, fade suave ───────────────────────────────── */

  .rda-mobile-menu__panel--l2 {
    left: 320px;
    right: 0;
    width: auto; /* cancela width:100% heredado; el ancho lo determinan left+right */
    background: var(--color-cream-light);
    padding-top: var(--header-height-desktop); /* alinea el contenido con el L1 */
    transform: none !important;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 200ms var(--ease-out),
      visibility 0s 200ms;
  }

  .rda-mobile-menu__panel--l2.is-active {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 200ms var(--ease-out),
      visibility 0s 0s;
  }

  /* L2 cabecera más compacta */
  .rda-mobile-menu__l2-head {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--color-gold-soft);
  }

  /* Subtítulo: más pequeño en desktop */
  .rda-mobile-menu__l2-subtitle {
    padding: var(--space-sm) var(--space-md) var(--space-2xs);
    font-size: 14px;
  }

  /* Link destacado */
  .rda-mobile-menu__featured-link {
    padding: var(--space-xs) var(--space-md);
    font-size: 11px;
  }

  /* Grid 3 columnas en los 780px del L2 */
  .rda-mobile-menu__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg) var(--space-lg);
  }

  /* Evita que las cards fuercen un ancho mínimo que desborde el grid */
  .rda-mobile-menu__grid .rda-menu-card {
    min-width: 0;
  }

  .rda-menu-card__nombre {
    font-size: 13px;
    margin-top: var(--space-xs);
  }

  /* Lista L2 con más padding */
  .rda-mobile-menu__l2-link {
    padding: var(--space-sm) var(--space-lg);
    font-size: 12px;
  }

  /* Subtítulo */
  .rda-mobile-menu__l2-subtitle {
    padding: var(--space-md) var(--space-lg) var(--space-xs);
    font-size: 15px;
  }

  /* Featured link */
  .rda-mobile-menu__featured-link {
    padding: var(--space-sm) var(--space-lg);
    font-size: 12px;
  }

  /* CTA */
  .rda-mobile-menu__cta {
    margin: var(--space-lg) auto;
    padding: var(--space-sm) var(--space-xl);
    font-size: 11px;
  }

}

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

@media (prefers-reduced-motion: reduce) {
  .rda-mobile-menu,
  .rda-mobile-menu__panel--l1,
  .rda-mobile-menu__panel--l2,
  .rda-menu-card__img-inner {
    transition: none;
  }
}