/**
 * Site menu — overlay open state only.
 * Hamburger + close icon: themify.css (do not override).
 * Header is a sibling of #pagewrap so fixed overlay + link clicks work.
 */

/* ── Page recede behind open menu (content only, not header) ── */
#pagewrap {
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

body.mobile-menu-visible #pagewrap {
  transform: translateX(-4vw) scale(0.99);
  filter: brightness(0.78);
}

body.mobile-menu-visible {
  overflow: hidden !important;
}

/* ── Full-screen pink overlay (beat .header-overlay cream from themify.css) ── */
body.mobile-menu-visible #headerwrap,
.mobile-menu-visible #headerwrap {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  z-index: 100000 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: #ff3377 !important;
  background-color: #ff3377 !important;
}

body.mobile-menu-visible #headerwrap #mobile-menu.sidemenu-on {
  background: transparent !important;
  background-color: transparent !important;
}

.mobile-menu-visible #header {
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
}

.mobile-menu-visible .header-bar {
  position: absolute !important;
  top: 1.25em !important;
  left: 1.25em !important;
  z-index: 100003 !important;
}

.mobile-menu-visible #mobile-menu.sidemenu-on {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  perspective: none !important;
  padding: 5em 0 2em !important;
  box-sizing: border-box;
  pointer-events: auto !important;
}

.mobile-menu-visible #mobile-menu .overlay-menu-sticky {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 100% !important;
}

.mobile-menu-visible #main-nav-wrap {
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-menu-visible #main-nav {
  list-style: none !important;
  margin: 1.5em auto 2em !important;
  padding: 0 !important;
  max-width: 360px !important;
  width: 100% !important;
  text-align: left !important;
  pointer-events: auto !important;
}

.mobile-menu-visible #main-nav li {
  display: block !important;
  clear: both !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

.mobile-menu-visible #main-nav a,
.mobile-menu-visible #main-nav .current-menu-item > a,
.mobile-menu-visible #main-nav .current_page_item > a,
.mobile-menu-visible #main-nav .current-menu-item > a:hover,
.mobile-menu-visible #main-nav .current_page_item > a:hover {
  font-family: gilroy, "Proxima Nova", sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 5vw, 40px) !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: block !important;
  padding: 0.35em 0 !important;
  margin: 0 !important;
  width: 100% !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.mobile-menu-visible #main-nav a:hover,
.mobile-menu-visible #main-nav a:focus-visible {
  opacity: 0.85;
  color: #ffffff !important;
  background: none !important;
}

/* Close — use Themify X icon; only ensure visible when open */
#menu-icon-close {
  display: none;
}

.mobile-menu-visible #menu-icon-close {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  top: 1.25em !important;
  right: 1.25em !important;
  z-index: 100004 !important;
  color: #fff !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.mobile-menu-visible #menu-icon-close.tf_hide {
  display: block !important;
}

.mobile-menu-visible .header-icons {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #pagewrap {
    transition: none !important;
  }

  body.mobile-menu-visible #pagewrap {
    transform: none;
    filter: none;
  }
}