/* =========================================================
   RHINOPLASTYMADRID.COM – MOBILE MENU + SUBMENUS + TOGGLES
   Objetivo:
   - Desktop: NO tocar (menú horizontal normal)
   - Mobile: mantener hamburguesa (evitar “flash”)
   - Submenús: cerrados por defecto, abrir al tocar
   - Toggles/Details: no mostrarse abiertos al cargar
   ========================================================= */

@media (max-width: 980px) {

  /* ---------------------------------------------------------
     1) MENÚ: evita que se muestre como lista desktop en móvil
     --------------------------------------------------------- */
  .wp-block-navigation .wp-block-navigation__container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  /* Botón hamburguesa visible */
  .wp-block-navigation__responsive-container-open,
  button.wp-block-navigation__responsive-container-open {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Panel responsive CERRADO por defecto (evita flash) */
  .wp-block-navigation__responsive-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Panel visible SOLO cuando está abierto */
  .wp-block-navigation__responsive-container.is-menu-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: #fff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Dentro del panel abierto se muestran links */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* ---------------------------------------------------------
     2) SUBMENÚS: cerrados por defecto en móvil
     --------------------------------------------------------- */
  .wp-block-navigation__submenu-container {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Asegura que el botón flecha sea clicable */
  .wp-block-navigation-submenu__toggle {
    display: inline-flex !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* ---------------------------------------------------------
     3) SUBMENÚS: abrir cuando el toggle está expandido
        (cubriendo estructuras diferentes de temas)
     --------------------------------------------------------- */

  /* Estructura 1: toggle + submenu contiguo */
  .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container,

  /* Estructura 2: submenu no contiguo, pero en el mismo nivel */
  .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,

  /* Estructura 3: el foco queda dentro del item (tap en móvil) */
  .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container,
  .wp-block-navigation-item:focus-within .wp-block-navigation__submenu-container {
    display: block !important;
    max-height: 9999px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ---------------------------------------------------------
     4) TOGGLES / ACCORDION (Details block):
        evitar que aparezcan abiertos al cargar
     --------------------------------------------------------- */
  /* Oculta el contenido de details en móvil aunque venga "open" */
  details > *:not(summary),
  details[open] > *:not(summary),
  .wp-block-details > *:not(summary),
  .wp-block-details[open] > *:not(summary) {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Permite ver el contenido cuando el usuario interactúa */
  details:focus-within > *:not(summary),
  details[open]:focus-within > *:not(summary),
  .wp-block-details:focus-within > *:not(summary),
  .wp-block-details[open]:focus-within > *:not(summary) {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  details > summary,
  .wp-block-details > summary {
    cursor: pointer !important;
  }
}
/* === Mobile submenu arrows: make them visible === */
@media (max-width: 980px) {

  /* Botón flecha (toggle) */
  .wp-block-navigation-submenu__toggle {
    color: #000 !important;          /* color del icono si hereda currentColor */
    opacity: 1 !important;
    filter: none !important;
  }

  /* SVG del icono */
  .wp-block-navigation-submenu__toggle svg {
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
  }

  /* A veces el tema pone el icono dentro de span */
  .wp-block-navigation-submenu__toggle span,
  .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon {
    color: #000 !important;
    opacity: 1 !important;
  }

  /* Mejor usabilidad: área de toque más grande */
  .wp-block-navigation-submenu__toggle {
    width: 44px !important;
    height: 44px !important;
    justify-content: center !important;
    align-items: center !important;
  }
}
/* =========================================================
   MOBILE ICON STYLE: remove grey boxes + blue "+" toggles
   and hamburger without grey background
   ========================================================= */
@media (max-width: 980px) {

  /* ---------- 1) HAMBURGER: quitar recuadro gris ---------- */
  .wp-block-navigation__responsive-container-open,
  button.wp-block-navigation__responsive-container-open {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 10px !important;         /* área de toque */
    border-radius: 0 !important;
  }

  /* Si el tema aplica un fondo a un wrapper */
  .wp-block-navigation__responsive-container-open *,
  button.wp-block-navigation__responsive-container-open * {
    box-shadow: none !important;
  }

  /* Color del icono hamburguesa */
  .wp-block-navigation__responsive-container-open svg,
  button.wp-block-navigation__responsive-container-open svg {
    fill: #0aa7d8 !important;
    stroke: #0aa7d8 !important;
    opacity: 1 !important;
  }

  /* ---------- 2) SUBMENU TOGGLES: quitar recuadro gris ---------- */
  .wp-block-navigation-submenu__toggle {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 8px !important;
    border-radius: 0 !important;
    min-width: 36px !important;
    min-height: 36px !important;
    position: relative !important;
  }

  /* Oculta el icono original (flecha) */
  .wp-block-navigation-submenu__toggle svg,
  .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon {
    display: none !important;
  }

  /* Dibuja un "+" azul por defecto */
  .wp-block-navigation-submenu__toggle::before {
    content: "+" !important;
    color: #0aa7d8 !important;        /* azul */
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    display: inline-block !important;
    transform: translateY(-1px);
  }

  /* Cuando está abierto, muestra "–" azul */
  .wp-block-navigation-submenu__toggle[aria-expanded="true"]::before {
    content: "–" !important;
  }

  /* (Opcional) alinear toggle a la derecha del item */
  .wp-block-navigation-item__content {
    align-items: center !important;
  }

  /* ---------- 3) BOTÓN CERRAR (X): quitar recuadro gris ---------- */
  .wp-block-navigation__responsive-container-close,
  button.wp-block-navigation__responsive-container-close {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 10px !important;
    border-radius: 0 !important;
  }

  .wp-block-navigation__responsive-container-close svg,
  button.wp-block-navigation__responsive-container-close svg {
    fill: #0aa7d8 !important;
    stroke: #0aa7d8 !important;
  }
 }
/* Oculta títulos/captions en lightbox/galerías comunes */
.wp-caption-text,
.gallery-caption,
.fancybox-caption,
.fancybox__caption,
.lg-sub-html,
.pswp__caption,
.pswp__caption__center,
.mfp-title {
  display: none !important;
}