/* ------------------------------------------------------------------
   Custom mobile fixes — loaded after the theme CSS so these win.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Mobile submenu (Servicios) — React-controlled collapse/expand.
   The .submenu-arrow is hidden on desktop (dropdown shows on hover);
   on mobile it's a tappable chevron and the submenu animates open when
   the parent <li> has .submenu-open.
   ------------------------------------------------------------------ */
.submenu-arrow {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  appearance: none;
}

@media (max-width: 992px) {
  header.header-mobile #mainmenu li.has-child {
    position: relative;
  }

  /* tappable arrow on the right of the "Servicios" row */
  header.header-mobile #mainmenu .submenu-arrow {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 44px;
    cursor: pointer;
    z-index: 2;
  }
  header.header-mobile #mainmenu .submenu-arrow::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 22px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    opacity: 0.7;
  }
  header.header-mobile #mainmenu li.submenu-open > .submenu-arrow::before {
    transform: rotate(-135deg);
  }

  /* hide the theme's static chevron on mobile (we use our own arrow) */
  header.header-mobile #mainmenu > li.has-child::after {
    display: none;
  }

  /* collapsed by default; expands when React adds .submenu-open.
     Also overrides the theme's fixed height:30px on submenus. */
  header.header-mobile #mainmenu li.has-child > ul {
    height: auto;
    max-height: 0;
    overflow: hidden;
    display: block;
    transition: max-height 0.3s ease;
  }
  header.header-mobile #mainmenu li.submenu-open > ul {
    max-height: 600px;
  }
}

/* Hero overlay cards (Horario / teléfono) are absolutely positioned for the
   desktop layout. On mobile they overlapped and cropped the hero image.
   Below ~992px we let the image show in full and stack the cards beneath it. */
@media (max-width: 992px) {
  #section-intro .relative {
    display: flex;
    flex-direction: column;
  }

  #section-intro .relative > img {
    order: -1;                /* image first, cards below */
    width: 100%;
    height: auto;
    margin-bottom: 1.25rem;
  }

  #section-intro .relative .abs {
    position: static !important;
    transform: none !important;
    width: 100%;
    margin: 0 0 1rem !important;
  }

  /* Spacers only exist to make room for the absolute cards on desktop. */
  #section-intro .relative .spacer-triple,
  #section-intro .relative .spacer-double {
    display: none;
  }
}