/* ===== Mobile Drill-Down Menu ===== */
/* Full-screen mobile nav: independent of Beaver Builder's own mobile nav
   (.navbar-toggle / .fl-page-nav-collapse), which is hidden below via
   header.css. Menu content is rendered server-side by
   SF_Mobile_Nav_Walker (classes/class-sf-mobile-nav-walker.php) against the
   same "header" menu location used by the desktop nav. */

.sf-menu-toggle {
  display: none;
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.sf-menu-toggle:active,
.sf-menu-toggle:focus,
.sf-menu-toggle:hover {
  border: none !important;
  background-color: transparent;
}

.sf-menu-toggle__icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.sf-menu-toggle__icon--open {
  background-image: url("../images/menu-open.svg");
}

.sf-menu-toggle__icon--close {
  display: none;
  background-image: url("../images/menu-close.svg");
}

.sf-menu-toggle.is-open .sf-menu-toggle__icon--open {
  display: none;
}

.sf-menu-toggle.is-open .sf-menu-toggle__icon--close {
  display: block;
}

body.sf-mobile-menu-open {
  overflow: hidden;
}

/* Deliberately no background here: while a panel is sliding in/out, the
   part of the viewport it hasn't reached yet should show the real page
   underneath (that's what makes it read as "sliding over the content"
   instead of a flash-cut). Whichever panel is staying put during a
   transition already covers the rest opaquely — see js/header-menu.js. */
.sf-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.sf-mobile-menu.is-open {
  display: block;
}

/* Every panel is nested inside its parent item's <li> (so JS can walk up to
   find "the panel one level up" for the back button), which rules out both
   display:none AND opacity:0 for the INACTIVE state: hiding an ancestor
   panel that way hides (display) or visually caps (opacity — a descendant
   can never be MORE opaque than an ancestor that set opacity:0, unlike
   visibility) any active descendant panel nested inside it too. A transform
   on an inactive ancestor is just as unsafe, since transform also creates a
   new containing block for position:absolute descendants, throwing off an
   active descendant's own inset:0 sizing. visibility is the one mechanism a
   descendant CAN override on its own, so it's the only thing that stays set
   on an inactive panel — transform/transition below only ever apply to
   whichever single panel is currently active, never to an inactive one
   sitting "behind" an active descendant. */
.sf-mobile-menu__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #f8f5ec;
  overflow-y: auto;
  visibility: hidden;
  pointer-events: none;
}

.sf-mobile-menu__panel.is-active {
  visibility: visible;
  pointer-events: auto;
}

.sf-mobile-menu__panel--root {
  background: rgba(248, 245, 236, 1);
}

.sf-mobile-menu__panel-header {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 19px 24px;
  background-color: white;
  justify-content: center;
}

.sf-mobile-menu__panel-header__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* Matches the collapsed mobile bar's own logo size (.fl-logo-img at this
   breakpoint, header.css) so the logo doesn't visibly shrink the moment the
   overlay opens. */
.sf-mobile-menu__logo {
}

.sf-mobile-menu__logo img {
  width: 108px;
  height: auto;
  display: block;
}

.sf-mobile-menu__title {
  flex: 1;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #000000;
}

.sf-mobile-menu__back,
.sf-mobile-menu__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  cursor: pointer;
}

.sf-mobile-menu__back {
  width: 16px;
  height: 16px;
  background-image: url("../images/expand-circle-left.svg");
  background-size: contain;
}

.sf-mobile-menu__close {
  background-image: url("../images/menu-close.svg");
  position: absolute !important;
  right: 12px !important;
}

.sf-mobile-menu__list,
.sf-mobile-menu__list-inner {
  list-style: none;
  margin: 0;
  padding: 8px 24px 32px;
}

/* Both sides reserve the same 36px regardless of whether this item has the
   arrow (below) or not — otherwise a childless item's text sits visually
   centered while a parent item's text (with only padding-right for the
   arrow) sits off-center, so rows look inconsistently aligned next to each
   other. */
.sf-mobile-menu__link {
  display: block;
  position: relative;
  padding: 7px 36px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: #000000;
  text-align: center;
  text-decoration: none;
}

.sf-mobile-menu__link:hover,
.sf-mobile-menu__link:focus {
  text-decoration: none;
  color: inherit;
}

/* Visual affordance so it's clear an item drills into a submenu — the whole
   row is still the tap target (data-sf-mm-open sits on the <a> itself),
   this arrow just marks it, flush to the right edge of the row. Desktop's
   own arrow-on-hover indicator (.fl-submenu-indicator, header.css) is
   untouched — this is mobile-only. */
.sf-mobile-menu__item--has-children > .sf-mobile-menu__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 16px;
  height: 24px;
  background-image: url("../images/arrow-right.svg");
  background-repeat: no-repeat;
  background-position: center;
}

/* Per Figma's own breakpoint note: the mobile drill-down menu takes over
   below 1120px (not the usual 768px "phone" cutoff) — there's no separate
   compact-desktop tablet nav in between. */
@media (min-width: 1120px) {
  .sf-mobile-menu,
  .sf-menu-toggle {
    display: none !important;
  }
}

@media (max-width: 1119px) {
  .sf-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The widgets column is a vertical stack on desktop/tablet (Book Now
     above the language switcher); on mobile it collapses into a single row
     — language switcher, Book Now, hamburger — as one line, per Figma
     ("Menú Mobile" collapsed bar), which is the opposite left-to-right
     order from the desktop stack. order only works on flex's own direct
     children, so it targets the widget wrapper around Book Now, not
     .btn-book-now itself. */
  .fl-page-header-widgets-col {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    padding: 0px;
  }

  .fl-page-header-widgets-col .lang-switcher {
    order: 1;
    margin-right: 0px;
  }

  .fl-page-header-widgets-col .widget_custom_html {
    order: 2;
  }

  .fl-page-header-widgets-col .sf-menu-toggle {
    order: 3;
  }

  .fl-page-header-widgets-col .sf-menu-toggle:hover {
    background-color: transparent;
    border: none;
  }

  /* The full desktop nav (#fl-page-nav-col) is hidden below 1120px — see
     header.css — leaving just logo + widgets-col (lang switcher, Book Now,
     hamburger) as the collapsed bar. */
}