/**
 * header.css — Estilos del header (replica de Header.tsx del frontend Astro).
 *
 * Depende de: tokens.css (variables de color, tipografía y radio).
 * Contiene: pill desktop, pill mobile y menú fullscreen con animación stagger.
 */

/* ==========================================================================
   Contenedor fijo flotante
   ========================================================================== */
.lm-header {
  position: fixed;
  top: 1.5rem; /* top-6 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 110; /* z-110 */
  width: 95%; /* w-[95%] */
  max-width: 72rem; /* max-w-6xl */

  /* Colores hardcodeados de la pill en el TSX original */
  --header-pill-from: #f9e794;
  --header-pill-to: #f2d973;
  --header-pill-border: #d6bf5c;
  --header-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

/* Reset local de enlaces/botones/íconos (evita herencias de Astra) */
.lm-header a {
  text-decoration: none;
}
.lm-header button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.lm-header svg {
  display: block;
}

/* ==========================================================================
   Barra Desktop
   ========================================================================== */
.lm-header__desktop {
  display: none; /* se muestra en md */
  background: linear-gradient(
    to bottom,
    var(--header-pill-from),
    var(--header-pill-to)
  );
  border: 1px solid var(--header-pill-border);
  box-shadow: var(--header-shadow);
  border-radius: 9999px; /* rounded-full */
  padding: 0 1.5rem; /* px-6 */
  height: 3.5rem; /* h-14 */
  align-items: center;
  justify-content: space-between;
}

.lm-header__nav-left,
.lm-header__nav-right {
  display: flex;
  align-items: center;
  flex: 1;
}
.lm-header__nav-left {
  justify-content: flex-start;
  gap: 1.5rem; /* gap-6 */
}
.lm-header__nav-right {
  justify-content: flex-end;
  gap: 1rem; /* gap-4 */
}

.lm-header__logo-wrap {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 1rem; /* mx-4 */
}
.lm-header__logo {
  height: 3rem; /* h-12 */
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}
.lm-header__logo:hover {
  transform: scale(1.05); /* hover:scale-105 */
}

/* Enlaces de navegación (title-sm font-medium) */
.lm-nav-link {
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 500; /* font-medium */
  line-height: 1.2;
  color: color-mix(in srgb, var(--foreground) 90%, transparent);
  transition: color 0.2s ease;
}
.lm-nav-link:hover {
  color: var(--primary); /* hover:text-primary */
}

/* Grupo de íconos (Search / Cart / User) */
.lm-header__icons {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
}
.lm-icon-btn {
  padding: 0.375rem; /* p-1.5 */
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
  transition: color 0.2s ease;
  display: inline-flex;
}
.lm-icon-btn:hover {
  color: var(--primary);
}

/* ==========================================================================
   Barra Mobile (pill)
   ========================================================================== */
.lm-header__mobile {
  max-width: 12rem; /* max-w-48 */
  margin: 0 auto;
  box-shadow: var(--header-shadow);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem; /* px-2 */
  background: linear-gradient(
    to bottom,
    var(--header-pill-from),
    var(--header-pill-to)
  );
  border: 1px solid var(--header-pill-border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
/* Estado abierto: la pill cambia a fondo claro */
.lm-header__mobile.is-open {
  background: var(--background);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 50%, transparent);
}

.lm-header__burger {
  padding: 0.625rem 1.25rem; /* py-2.5 px-5 */
  display: flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
  transition: transform 0.2s ease;
}
.lm-header__burger:hover {
  transform: scale(1.05);
}
.lm-header__burger-label {
  font-family: var(--font-text);
  font-weight: 700; /* font-bold */
  letter-spacing: 0.025em; /* tracking-wide */
  color: var(--primary);
}
.lm-header__burger .lm-icon-menu {
  color: var(--primary);
}
/* Alterna icono/label según estado (clase is-open puesta por JS) */
.lm-header__mobile .lm-burger-close {
  display: none;
}
.lm-header__mobile.is-open .lm-burger-open {
  display: none;
}
.lm-header__mobile.is-open .lm-burger-close {
  display: flex;
}

.lm-header__mobile-logo {
  flex-shrink: 0;
  padding: 0.25rem 0.75rem; /* py-1 px-3 */
}
.lm-header__mobile-logo img {
  height: 2.25rem; /* h-9 */
  width: auto;
  object-fit: contain;
}

/* ==========================================================================
   Menú Fullscreen Mobile (replica del AnimatePresence de Framer Motion)
   ========================================================================== */
.lm-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100; /* z-100 (debajo del header z-110) */
  background: linear-gradient(
    to bottom,
    var(--header-pill-from, #f9e794),
    var(--header-pill-to, #f2d973)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7rem 1.5rem 0; /* pt-28 px-6 */
  max-height: 100svh;

  /* Estado cerrado: fuera de pantalla hacia arriba (y: -100%) */
  transform: translateY(-100%);
  transition: transform 0.5s ease-in-out; /* duration-500 easeInOut */
  will-change: transform;
  visibility: hidden;
}
.lm-mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
}

.lm-mobile-menu__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

/* --- Presentación de marca --- */
.lm-mobile-menu__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  margin-bottom: 2.5rem; /* mb-10 */
  flex-shrink: 0;
}
.lm-mobile-menu__brand h1 {
  font-family: var(--font-heading); /* headline-lg */
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--foreground);
  letter-spacing: 0.05em; /* tracking-wider */
  margin-bottom: 0.5rem;
}
.lm-mobile-menu__brand p {
  color: color-mix(in srgb, var(--foreground) 90%, transparent);
  font-family: var(--font-text);
  font-size: 0.875rem; /* text-sm */
  max-width: 250px;
  line-height: 1.6; /* leading-relaxed */
  font-weight: 400;
}

/* --- Navegación central --- */
.lm-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem; /* gap-6 */
  width: 100%;
  margin-bottom: 3rem; /* mb-12 */
}
.lm-mobile-menu__nav a {
  font-family: var(--font-heading); /* title-md */
  font-size: 1.5rem;
  color: var(--foreground);
  transition: color 0.2s ease;
}
.lm-mobile-menu__nav a:hover {
  color: var(--primary);
}

/* --- Redes sociales (footer del menú) --- */
.lm-mobile-menu__social {
  padding-bottom: 2rem; /* pb-8 */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}
.lm-mobile-menu__social-label {
  color: color-mix(in srgb, var(--foreground) 90%, transparent);
  margin-bottom: 1.25rem; /* mb-5 */
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.75rem; /* text-xs */
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.lm-mobile-menu__social-icons {
  display: flex;
  align-items: center;
  gap: 1.25rem; /* gap-5 */
}
.lm-mobile-menu__social-icons a {
  background: var(--background);
  padding: 0.75rem; /* p-3 */
  border-radius: 9999px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}
.lm-mobile-menu__social-icons a:hover {
  background: var(--tertiary); /* hover:bg-tertiary */
  transform: translateY(-0.25rem); /* hover:-translate-y-1 */
}
.lm-mobile-menu__social-icons img {
  width: 1.5rem; /* w-6 */
  height: 1.5rem;
  object-fit: contain;
}

/* ==========================================================================
   Animación stagger (fade-up escalonado de los hijos del menú)
   Replica delayChildren 0.2s + staggerChildren 0.1s de Framer Motion.
   ========================================================================== */
.lm-stagger {
  opacity: 0;
  transform: translateY(20px);
}
.lm-mobile-menu.is-open .lm-stagger {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.lm-mobile-menu.is-open .lm-stagger:nth-child(1) { transition-delay: 0.2s; }
.lm-mobile-menu.is-open .lm-stagger:nth-child(2) { transition-delay: 0.3s; }
.lm-mobile-menu.is-open .lm-stagger:nth-child(3) { transition-delay: 0.4s; }

/* ==========================================================================
   Breakpoint: Desktop (md ≥ 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .lm-header__desktop {
    display: flex;
  }
  .lm-header__mobile {
    display: none;
  }
  .lm-mobile-menu {
    display: none; /* el menú fullscreen solo existe en mobile */
  }
}