/* ==========================================================
   Fusion Slide Menu
   Transforms Porto's popup overlay menu into a left-sliding
   panel that matches the Fusion Punta Cana reference design.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap');

:root {
  --fsm-panel-width: 320px;
  --fsm-panel-bg: #ffffff;
  --fsm-text-color: #2a2a2a;
  --fsm-accent: #a58e65;
  --fsm-muted: #807d7a;
  --fsm-border: #e2dfdc;
  --fsm-overlay-bg: rgba(0, 0, 0, 0.5);
  --fsm-speed: 0.4s;
  --fsm-easing: ease-in-out;
  --fsm-font-heading: 'Playfair Display', Georgia, serif;
  --fsm-font-body: 'Inter', -apple-system, sans-serif;
}

/* ----------------------------------------------------------
   1. Container
   Keep it inline — do NOT let .opened make it full-screen.
   The overlay is handled by ::before instead.
   ---------------------------------------------------------- */
.porto-popup-menu {
  line-height: 0;
}

.porto-popup-menu.opened {
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  margin: 0 !important;
  z-index: auto !important;
}

/* ----------------------------------------------------------
   2. Overlay backdrop (::before pseudo-element)
   Fades in smoothly on .opened
   ---------------------------------------------------------- */
.porto-popup-menu::before {
  content: '';
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--fsm-overlay-bg);
  z-index: 9047;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--fsm-speed) ease,
              visibility 0s var(--fsm-speed);
}

.porto-popup-menu.opened::before {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--fsm-speed) ease,
              visibility 0s 0s;
}

/* ----------------------------------------------------------
   3. Slide Panel (.main-menu)
   Always rendered off-screen; slides in on .opened.
   Uses #header for specificity over Porto's theme.css rules.
   ---------------------------------------------------------- */
#header .porto-popup-menu .main-menu,
.porto-popup-menu .main-menu {
  display: flex !important;
  flex-direction: column;
  position: fixed !important;
  top: 0;
  left: 0;
  width: var(--fsm-panel-width);
  max-width: 85vw;
  height: 100vh;
  max-height: none !important;
  min-width: 0 !important;
  background: var(--fsm-panel-bg) !important;
  padding: 5rem 2rem 2rem;
  box-shadow: 5px 0 20px rgba(0, 0, 0, 0.15);
  z-index: 9048;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: default;
  text-align: left;

  visibility: hidden;
  transform: translateX(-100%);
  transition: transform var(--fsm-speed) var(--fsm-easing),
              visibility 0s var(--fsm-speed);
}

#header .porto-popup-menu .main-menu:not(.scroll-content),
.porto-popup-menu .main-menu:not(.scroll-content) {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0 !important;
}

#header .porto-popup-menu.opened .main-menu,
.porto-popup-menu.opened .main-menu {
  visibility: visible;
  transform: translateX(0);
  transition: transform var(--fsm-speed) var(--fsm-easing),
              visibility 0s 0s;
}

/* ----------------------------------------------------------
   4. Hamburger / Close button
   ---------------------------------------------------------- */
.porto-popup-menu .hamburguer-btn {
  margin: 0 15px;
}

.porto-popup-menu.opened .hamburguer-btn {
  position: fixed;
  top: 1.5rem;
  left: calc(min(var(--fsm-panel-width), 85vw) - 3.5rem);
  right: auto;
  z-index: 9049;
}

.porto-popup-menu.opened .hamburguer-btn .close span {
  background: var(--fsm-text-color);
}

.admin-bar .porto-popup-menu.opened .hamburguer-btn {
  top: calc(1.5rem + 32px);
}

.admin-bar #header .porto-popup-menu .main-menu,
.admin-bar .porto-popup-menu .main-menu {
  padding-top: calc(5rem + 32px);
}

.admin-bar .porto-popup-menu::before {
  top: 32px;
  height: calc(100vh - 32px);
}

@media (max-width: 782px) {
  .admin-bar .porto-popup-menu.opened .hamburguer-btn {
    top: calc(1.5rem + 46px);
  }
  .admin-bar #header .porto-popup-menu .main-menu,
  .admin-bar .porto-popup-menu .main-menu {
    padding-top: calc(5rem + 46px);
  }
  .admin-bar .porto-popup-menu::before {
    top: 46px;
    height: calc(100vh - 46px);
  }
}

/* ----------------------------------------------------------
   5. Menu Items
   ---------------------------------------------------------- */
#header .porto-popup-menu .main-menu > li.menu-item,
.porto-popup-menu .main-menu > li.menu-item {
  float: none !important;
  margin: 0 !important;
}

.porto-popup-menu .main-menu > li.menu-item .popup {
  transform: none;
}

#header .porto-popup-menu .main-menu li.menu-item > a,
.porto-popup-menu .main-menu li.menu-item > a,
.porto-popup-menu.opened .main-menu li.menu-item > a {
  display: block;
  text-align: left !important;
  font-family: var(--fsm-font-heading);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--fsm-text-color);
  padding: 0.7rem 0;
  width: auto !important;
  line-height: 1.3;
  position: relative;
  left: 0;
  transition: color 0.3s ease !important;
}

#header .porto-popup-menu .main-menu li.menu-item > a:hover,
.porto-popup-menu .main-menu li.menu-item > a:hover,
.porto-popup-menu.opened .main-menu li.menu-item > a:hover {
  color: var(--fsm-accent) !important;
  left: 0 !important;
  opacity: 1;
}

/* ----------------------------------------------------------
   6. Submenus (accordion inside panel)
   ---------------------------------------------------------- */
.porto-popup-menu .main-menu .sub-menu {
  display: none;
  padding: 0.25rem 0 0.5rem 1rem;
  line-height: 1.6;
}

.porto-popup-menu .main-menu li.menu-item.opened > .sub-menu {
  display: block;
}

.porto-popup-menu .sub-menu li.menu-item,
.porto-popup-menu .sub-menu li.menu-item > a {
  line-height: inherit;
}

.porto-popup-menu .sub-menu li.menu-item > a {
  font-size: 1rem;
  font-family: var(--fsm-font-body);
  padding: 0.35rem 0;
  color: var(--fsm-muted);
}

.porto-popup-menu .sub-menu .sub-menu {
  font-size: 0.9em;
  opacity: 0.8;
}

/* ----------------------------------------------------------
   7. Language Selector (pushed to bottom of panel)
   ---------------------------------------------------------- */
#header .porto-popup-menu .main-menu li.lang-item,
.porto-popup-menu .main-menu li.lang-item {
  display: inline-flex;
  align-items: center;
  float: none !important;
}

#header .porto-popup-menu .main-menu li.lang-item > a,
.porto-popup-menu .main-menu li.lang-item > a {
  font-size: 0 !important;
  padding: 0.4rem 0.5rem !important;
  display: inline-flex;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.3s ease !important;
}

.porto-popup-menu .main-menu li.lang-item > a:hover {
  opacity: 0.8 !important;
  color: inherit !important;
}

.porto-popup-menu .main-menu li.lang-item > a img {
  width: 24px !important;
  height: auto !important;
}

#header .porto-popup-menu .main-menu li.lang-item-first,
.porto-popup-menu .main-menu li.lang-item-first {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fsm-border);
}

/* ----------------------------------------------------------
   8. Scroll wrapper override (if scrollbar plugin injects)
   ---------------------------------------------------------- */
.porto-popup-menu.opened .scroll-wrapper {
  width: var(--fsm-panel-width) !important;
  max-width: 85vw !important;
  position: fixed !important;
  top: 0;
  left: 0;
  height: 100vh;
}

/* ----------------------------------------------------------
   9. Responsive
   ---------------------------------------------------------- */
@media (max-width: 991px) {
  #header .porto-popup-menu .main-menu,
  #header .porto-popup-menu.opened .main-menu {
    display: flex !important;
  }
}

@media (max-width: 575px) {
  #header .porto-popup-menu .main-menu li.menu-item > a,
  .porto-popup-menu .main-menu li.menu-item > a,
  .porto-popup-menu.opened .main-menu li.menu-item > a {
    font-size: 1.2rem;
    padding: 0.6rem 0;
  }
}