/* =========================================================
   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;
}
/* 1) Separación del selector de idioma respecto al último item del menú */
#polylang-langswitcher,
.polylang-switcher,
.pll-parent-menu-item,
.lang-item {
  margin-left: 16px !important;
}

/* 2) Si el selector aparece como texto/enlace (ES/EN), mejora alineación */
#polylang-langswitcher a,
.polylang-switcher a,
.lang-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
}

/* 3) Ajuste fino del icono/bandera */
#polylang-langswitcher img,
.polylang-switcher img,
.lang-item img {
  height: 14px;
  width: auto;
  vertical-align: middle;
}
/* Mostrar solo el menú del idioma activo */
html[lang="es-ES"] .menu-en { display:none !important; }
html[lang="en-GB"] .menu-es { display:none !important; }
/* Ocultar texto del idioma y dejar solo banderas (Polylang switcher) */
.polylang-switcher a,
.lang-item a,
#polylang-langswitcher a {
  font-size: 0 !important;      /* oculta el texto */
  line-height: 0 !important;
}

/* Asegurar que la bandera siga visible */
.polylang-switcher img,
.lang-item img,
#polylang-langswitcher img {
  display: inline-block !important;
  height: 14px;                 /* ajusta tamaño */
  width: auto !important;
  vertical-align: middle;
}

/* Espaciado entre banderas */
.polylang-switcher .lang-item,
#polylang-langswitcher .lang-item,
.lang-item {
  margin-left: 10px;
}
html[lang="es-ES"] .footer-en { display: none !important; }
html[lang="en-GB"] .footer-es { display: none !important; }
/* WhatsApp button: icon only (no green square) */
.wa-icon,
.wa-icon .wp-block-button__link,
.wa-icon.wp-block-social-link {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* If the block is a Social Icon / SVG wrapper */
.wa-icon svg,
.wa-icon img {
  display: block;
}

/* Optional: remove hover background */
.wa-icon:hover,
.wa-icon:hover .wp-block-button__link,
.wa-icon.wp-block-social-link:hover {
  background: transparent !important;
  background-color: transparent !important;
}
.wa-icon { line-height: 0 !important; }
html[lang="es-ES"] .pattern-en { display:none !important; }
html[lang="en-GB"] .pattern-es { display:none !important; }

/* opcional: si tu inglés es en_US */
html[lang="en-US"] .pattern-es { display:none !important; }
/* ===== Language switch for Patterns (Polylang) ===== */

/* Hide both by default (prevents flicker) */
.lang-en-only,
.lang-es-only { display: none; }

/* Show EN pattern on EN pages */
html[lang^="en"] .lang-en-only { display: block; }

/* Show ES pattern on ES pages */
html[lang^="es"] .lang-es-only { display: block; }
/* ===== FULL WIDTH ONLY ON CASES (mobile) ===== */
@media (max-width: 900px){

  /* 1) Quita el límite del contenedor típico del tema */
  body.single-cases .site-content,
  body.single-cases .content-area,
  body.single-cases .site-main,
  body.single-cases article,
  body.single-cases .entry-content,
  body.single-cases .wp-block-group.is-layout-constrained {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 2) Fuerza el contenido a ocupar toda la pantalla */
  body.single-cases .entry-content{
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) Si hay columnas, que se apilen y usen 100% */
  body.single-cases .wp-block-columns { display:block !important; }
  body.single-cases .wp-block-column{
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* 4) Evita que títulos se “rompan” raro */
  body.single-cases h1, 
  body.single-cases h2, 
  body.single-cases h3{
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}