/* ============================================================
   NAV CIRCLE FIX - Add this to your main CSS file (style.css)
   OR include it as a separate <link> after your existing CSS
   ============================================================ */

/* Fix: The nav-menu-wrapper must be fixed and full-screen */
.nav-menu-wrapper {
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto ;
  z-index: 1000 !important;
}

/* Fix: The center-container-menu must also fill and flex-center */
.center-container-menu {
  position: fixed !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  pointer-events: none;
  z-index: 1000 !important;
}

/* Fix: Navigation circle - centered via transform */
nav.navigation-menu,
nav.navigation-menu.show {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
  -webkit-transform: translate(-50%, -50%) scale(1) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

/* Override the hidden (not-show) state — keep centered but scaled down */
nav.navigation-menu {
  transform: translate(-50%, -50%) scale(0.75) !important;
  -webkit-transform: translate(-50%, -50%) scale(0.75) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

nav.navigation-menu.show {
  transform: translate(-50%, -50%) scale(1) !important;
  -webkit-transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Allow clicks through the wrapper when nav is shown */
.nav-menu-wrapper.nav-open {
  pointer-events: auto;
}

nav.navigation-menu.show {
  pointer-events: auto !important;
}
