/* ── Design Tokens ── edit these to match your brand kit ────── */
:root {
  --menu-bg:            transparent;   /* desktop background */
  --menu-blur:          0px;           /* desktop blur */
  --menu-item-color:    #ffffff;       /* resting item colour */
  --menu-item-hover:    rgba(255,255,255,0.7); /* hover/active colour */
  --menu-item-size:     clamp(28px, 7vw, 38px); /* responsive font size*/
  --menu-item-weight:   500;           /* font weight */
  --menu-item-spacing:  1.2rem;        /* gap between items */
  --menu-item-tracking: 0.02em;        /* letter spacing */
  --menu-transition:    0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --menu-z:             99990;
}

@media (max-width: 767px) {
  :root {
    --menu-bg:            rgba(0, 1, 37, 0.85); /* mobile blurred background */
    --menu-blur:          15px;                 /* mobile blur */
  }
}

/* ── Hide the default Elementor hamburger & off-canvas ──────── */
.elementor-menu-toggle,
.elementor-nav-menu--dropdown.elementor-nav-menu__container,
.elementor-location-header .elementor-nav-menu--indicator {
  display: none !important;
}

/* ── Custom burger button ────────────────────────────────────── */
#dmBurger_2f4e1a67 {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: calc(var(--menu-z) + 1);
  width: 44px;
  height: 44px;
  display: none; /* shown only on mobile (see below) */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Show burger on mobile only */
@media (max-width: 767px) {
  #dmBurger_2f4e1a67 { display: flex; }
}

#dmBurger_2f4e1a67 span {
  display: block;
  width: 26px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.77, 0, 0.18, 1);
  transform-origin: center;
}

/* Burger → X animation */
#dmBurger_2f4e1a67.dm-open span:nth-child(1) { transform: translateY(7px) rotate(45deg);  }
#dmBurger_2f4e1a67.dm-open span:nth-child(2) { opacity: 0; transform: scaleX(0);          }
#dmBurger_2f4e1a67.dm-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Full-screen overlay ─────────────────────────────────────── */
#dmMenuOverlay_2f4e1a67 {
  position: fixed;
  inset: 0;
  z-index: var(--menu-z);
  background: var(--menu-bg);
  backdrop-filter: blur(var(--menu-blur));
  -webkit-backdrop-filter: blur(var(--menu-blur));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 5vw 60px;
  
  /* hidden state */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--menu-transition), visibility var(--menu-transition);
}

#dmMenuOverlay_2f4e1a67.dm-open {
  opacity: 1;
  visibility: visible;
}

/* Ensure the overlay takes up the whole screen properly on mobile */
@media (max-width: 767px) {
  #dmMenuOverlay_2f4e1a67 {
    height: 100dvh;
    width: 100vw;
  }
}


/* ── Menu list ───────────────────────────────────────────────── */
#dmMenuOverlay_2f4e1a67 .elementor-nav-menu,
#dmMenuOverlay_2f4e1a67 ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--menu-item-spacing);
  width: 100%;
}

/* ── Individual menu items ───────────────────────────────────── */
#dmMenuOverlay_2f4e1a67 .elementor-nav-menu > li > a,
#dmMenuOverlay_2f4e1a67 ul > li > a,
#dmMenuOverlay_2f4e1a67 .elementor-nav-menu > li > span {
  font-size:      var(--menu-item-size)   !important;
  font-weight:    var(--menu-item-weight) !important;
  letter-spacing: var(--menu-item-tracking) !important;
  color:          var(--menu-item-color)  !important;
  text-decoration: none !important;
  display: block;
  padding: 10px 20px;
  border: none !important;
  background: none !important;
  line-height: 1.2;

  /* stagger-in animation */
  opacity: 0;
  transform: translateY(20px);
  transition:
    color 0.25s ease,
    transform var(--menu-transition),
    opacity var(--menu-transition);
}

/* Stagger delays for each item */
#dmMenuOverlay_2f4e1a67.dm-open li:nth-child(1) a { transition-delay: 0.1s; }
#dmMenuOverlay_2f4e1a67.dm-open li:nth-child(2) a { transition-delay: 0.15s; }
#dmMenuOverlay_2f4e1a67.dm-open li:nth-child(3) a { transition-delay: 0.2s; }
#dmMenuOverlay_2f4e1a67.dm-open li:nth-child(4) a { transition-delay: 0.25s; }
#dmMenuOverlay_2f4e1a67.dm-open li:nth-child(5) a { transition-delay: 0.3s; }
#dmMenuOverlay_2f4e1a67.dm-open li:nth-child(6) a { transition-delay: 0.35s; }
#dmMenuOverlay_2f4e1a67.dm-open li:nth-child(7) a { transition-delay: 0.4s; }
#dmMenuOverlay_2f4e1a67.dm-open li:nth-child(8) a { transition-delay: 0.45s; }
#dmMenuOverlay_2f4e1a67.dm-open li:nth-child(9) a { transition-delay: 0.5s; }

#dmMenuOverlay_2f4e1a67.dm-open li > a,
#dmMenuOverlay_2f4e1a67.dm-open li > span {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

#dmMenuOverlay_2f4e1a67 li > a:hover,
#dmMenuOverlay_2f4e1a67 li > a:focus,
#dmMenuOverlay_2f4e1a67 li.current-menu-item > a {
  color: var(--menu-item-hover) !important;
  transform: scale(1.05) translateY(0) !important; /* Scale up slightly on hover */
}

/* ── No borders, no sub-menus on mobile overlay ─────────────── */
#dmMenuOverlay_2f4e1a67 li {
  border: none !important;
  padding: 0 !important;
  width: auto;
}
#dmMenuOverlay_2f4e1a67 .sub-menu { display: none !important; }

/* ── Body scroll lock when menu is open ──────────────────────── */
body.dm-menu-open_2f4e1a67 { overflow: hidden; }

/* Ensure desktop menu doesn't break if script runs */
@media (min-width: 768px) {
  #dmMenuOverlay_2f4e1a67 {
      display: none !important;
  }
}
