/* ==========================================================================
   AVD Slide Navigation
   A lightweight slide-panel navigation overlay for mobile/tablet.
   ========================================================================== */

/* ---------- Overlay ---------- */
.avd-slide-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 99; /* sits below the Elementor header (typically z-index 100+) */
  visibility: hidden;
  overflow: hidden;
}

body.avd-nav-open .avd-slide-nav {
  visibility: visible;
}

/* Lock body scroll when nav is open */
body.avd-nav-open {
  overflow: hidden;
}

/* Hide mobile top bar when nav is open */
body.avd-nav-open .mobile-top-bar {
  display: none !important;
}

/* ---------- Panels container ---------- */
.avd-slide-nav__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---------- Individual panel ---------- */
/* top is set dynamically by JS based on actual header height */
.avd-slide-nav__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  display: none;
}

.avd-slide-nav__panel--active {
  display: block;
}

/* ---------- Back button ---------- */
.avd-slide-nav__back,
button.avd-slide-nav__back {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px 24px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid #eee !important;
  border-radius: 0 !important;
  background: #F9F8F5 !important;
  cursor: pointer;
  font-family: "Raleway", Sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #54595F !important;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.avd-slide-nav__back span {
  flex: 1;
  min-width: 0;
}

.avd-slide-nav__back:active {
  opacity: 0.7;
}

.avd-slide-nav__back-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #54595F;
}

/* ---------- Menu list ---------- */
.avd-slide-nav__list {
  list-style: none;
  margin: 0;
  padding: 8px 24px 40px;
  display: flex;
  flex-direction: column;
}

/* ---------- Menu link ---------- */
.avd-slide-nav__link,
.avd-slide-nav a.avd-slide-nav__link,
a.avd-slide-nav__link {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  text-decoration: none !important;
  font-family: "Raleway", Sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #54595F !important;
  line-height: 1.3 !important;
  -webkit-tap-highlight-color: transparent;
}

.avd-slide-nav__link:hover,
.avd-slide-nav__link:focus,
a.avd-slide-nav__link:hover,
a.avd-slide-nav__link:focus {
  color: #9EAD3A !important;
}

/* ---------- Chevron (right arrow for items with children) ---------- */
.avd-slide-nav__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #9EAD3A;
}

/* ==========================================================================
   AVD Menu Toggle (hamburger / X)
   Fade + scale cross-fade between states. Driven by body.avd-nav-open.
   ========================================================================== */

/* Reset all Elementor button/widget styling */
.elementor-widget-avd-menu-toggle,
.elementor-widget-avd-menu-toggle .elementor-widget-container {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.avd-menu-toggle,
button.avd-menu-toggle,
.elementor-widget-avd-menu-toggle button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 28px !important;
  padding: 4px !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 0 !important;
  box-sizing: content-box !important;
  position: relative;
}

/* --- Hamburger bars (open state icon) --- */
.avd-menu-toggle__open {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.avd-menu-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #54595F !important;
  border-radius: 1px;
}

/* --- Close icon (X SVG) --- */
.avd-menu-toggle__close {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 86%;
  height: 86%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  color: #54595F !important;
  stroke: #54595F !important;
}

/* --- Swap: hamburger fades out, X fades in --- */
body.avd-nav-open .avd-menu-toggle__open {
  opacity: 0;
  transform: scale(0.5);
}

body.avd-nav-open .avd-menu-toggle__close {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ==========================================================================
   Desktop: disable slide nav above 1160px
   ========================================================================== */
@media (min-width: 1161px) {
  .avd-slide-nav {
    display: none !important;
    visibility: hidden !important;
  }

  .elementor-widget-avd-menu-toggle {
    display: none !important;
  }

  /* Undo body lock in case window is resized while nav is open */
  body.avd-nav-open {
    overflow: auto !important;
  }

  body.avd-nav-open .mobile-top-bar {
    display: flex !important;
  }
}