/* ============================================================
   Sakura & Co. — Menú del header (desktop + drawer móvil)
   Versión final (Pasos 1+2 aprobados por Nicely, 2026-09-15):
   - Paso 1: solo la página actual (Inicio) en cursiva Pinyon
     Script rosa con línea inferior; los demás en Montserrat
     normal. Los enlaces "#" (placeholders) NUNCA reciben la
     clase activa (ver header-menu.js).
   - Paso 2: flor oficial (flor-menu.png) junto a cada opción,
     aire entre opciones (desktop 26px / móvil ~10px), sin
     viñetas (list-style none).
   Flor oficial: assets/flor-menu.png. Se inyecta en cada enlace
   via header-menu.js; este CSS solo da estilo.
   NO cambia URLs, clases del bloque ni funcionalidad del menú.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Montserrat:wght@400;500;600&display=swap');

/* ---------- contenedor: fila horizontal desktop, sin viñetas ---------- */
nav.wp-block-navigation ul.wp-block-navigation__container {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px); /* aire aprobado: 26px a 1920px */
}

/* ---------- enlace base del menú: flor + texto alineados ---------- */
nav.wp-block-navigation a.wp-block-navigation-item__content {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: .92rem;
  font-weight: 500;
  font-style: normal; /* nada del menú hereda cursiva */
  letter-spacing: .02em;
  color: #111111;
  text-decoration: none; /* sin subrayado: solo Inicio tiene línea (estado activo) */
  -webkit-tap-highlight-color: transparent; /* móvil: sin recuadro gris al tocar */
  transition: color .3s ease;
}

/* Clic con ratón: SIN cuadrado ni borde de foco (el anillo por defecto
   del navegador no forma parte del diseño). */
nav.wp-block-navigation a.wp-block-navigation-item__content:focus:not(:focus-visible) {
  outline: none;
}

/* Foco de TECLADO (accesibilidad): anillo rosa suave y discreto,
   solo cuando se navega con Tab — nunca al hacer clic. */
nav.wp-block-navigation a.wp-block-navigation-item__content:focus-visible {
  outline: 2px solid rgba(192, 108, 132, .55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Cobertura GLOBAL del header: ningún elemento interactivo muestra
   recuadro al tocar/clic (móvil: tap-highlight gris del navegador;
   desktop: anillo de foco del ratón). El foco de teclado se conserva
   con el anillo rosa discreto de :focus-visible. */
header.wp-block-template-part * {
  -webkit-tap-highlight-color: transparent !important;
}
header.wp-block-template-part a:focus:not(:focus-visible),
header.wp-block-template-part button:focus:not(:focus-visible),
header.wp-block-template-part input:focus:not(:focus-visible),
header.wp-block-template-part .wp-block-navigation__responsive-container-close:focus:not(:focus-visible) {
  outline: none !important;
}
header.wp-block-template-part a:focus-visible,
header.wp-block-template-part button:focus-visible,
header.wp-block-template-part input:focus-visible {
  outline: 2px solid rgba(192, 108, 132, .55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Desktop: sin botón de menú ni X — solo el header horizontal.
   (El CSS del tema padre ya los oculta; esta regla garantiza que
   nunca aparezcan aunque cambie el tema padre.) */
@media (min-width: 641px) {
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    display: none !important;
  }
}

/* flor oficial del menú (la misma en desktop y en el drawer móvil) */
nav.wp-block-navigation .sc-mfl {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter .3s ease, transform .3s ease;
}
nav.wp-block-navigation .sc-mfl img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* HOVER: texto rosa + glow muy suave en la flor */
nav.wp-block-navigation a.wp-block-navigation-item__content:hover {
  color: #C06C84;
}
nav.wp-block-navigation a.wp-block-navigation-item__content:hover .sc-mfl {
  filter: drop-shadow(0 0 4px rgba(192, 108, 132, .55));
  transform: scale(1.1);
}

/* ---------- Inicio activo: cursiva Pinyon Script rosa + línea inferior ---------- */
nav.wp-block-navigation a.wp-block-navigation-item__content.sc-is-current {
  font-family: 'Pinyon Script', cursive;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: #C06C84;
  padding-top: 2px;
  position: relative;
}
nav.wp-block-navigation a.sc-is-current .sc-mfl {
  width: 19px;
  height: 19px;
}
nav.wp-block-navigation a.sc-is-current::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 2px;
  bottom: -2px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #C06C84, #FAD0C4);
  opacity: .9;
}
nav.wp-block-navigation a.sc-is-current:hover .sc-mfl {
  filter: drop-shadow(0 0 6px rgba(192, 108, 132, .6));
}

/* ---------- Fondo floral del drawer móvil (referencia completa de Nicely) ----------
   La imagen completa de la referencia (adaptada a 390x844, con el texto original
   limpiado) es el fondo del menú móvil. OCULTO en desktop; solo visible dentro
   del drawer móvil abierto. El contenido del drawer va por encima (z-index 2). */
.sc-nav-bg {
  display: none !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sc-nav-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- MÓVIL: drawer del menú (vertical, aire, sin viñetas) ---------- */
@media (max-width: 640px) {
  /* fondo del panel: crema (el fondo floral cubre encima) */
  .wp-block-navigation__responsive-container.is-menu-open {
    background: #FDFBF7;
  }

  /* fondo completo de la referencia */
  .sc-nav-bg { display: block !important; }

  /* contenido por encima del fondo */
  .wp-block-navigation__responsive-container-content {
    position: relative;
    z-index: 2;
  }

  /* lista vertical con aire cómodo entre opciones; baja para dejar
     la rama superior izquierda libre y desplazada a la izquierda para
     coincidir con la posición del menú en la referencia original
     (medido en la referencia: flores x 82-104, letras desde x~92 a 390px) */
  nav.wp-block-navigation .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 195px 22px 30px 37px;
  }

  /* flor pequeña y delicada, alineada con el texto */
  nav.wp-block-navigation .sc-mfl {
    width: 14px;
    height: 14px;
  }
  nav.wp-block-navigation a.sc-is-current .sc-mfl {
    width: 17px;
    height: 17px;
  }

  /* opciones espaciadas, limpias */
  nav.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
    gap: 8px;
    padding: 11px 8px;
    font-size: 1rem; /* aprobado: tamaño ligero, como la referencia */
  }

  /* HOVER/TOUCH móvil (aprobado): texto rosa suave + glow delicado en la flor.
     Se activa al pasar el dedo (o clic) sobre cualquier opción; Inicio
     mantiene su estado activo (cursiva rosa + línea, nunca pierde estilo). */
  nav.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover,
  nav.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:active {
    color: #C06C84;
  }
  nav.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover .sc-mfl,
  nav.wp-block-navigation .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:active .sc-mfl {
    filter: drop-shadow(0 0 5px rgba(192, 108, 132, .55));
    transform: scale(1.1);
  }

  /* Inicio (ÚNICA clase activa): Pinyon Script + tamaño de título.
     Selectores con la misma (o mayor) especificidad que la regla
     base de desktop para que ganen en móvil. */
  nav.wp-block-navigation .wp-block-navigation__responsive-container-content a.sc-is-current {
    font-family: 'Pinyon Script', cursive;
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1;
    color: #C06C84;
  }
}