/**
 * Mou Gokart — mobile menu styles.
 *
 * Loads AFTER Bricks global CSS so it can override Bricks #brxe- element CSS.
 * Selectors are CLASS-based (not generated brxe- IDs, which change on every
 * header template re-import). The base layout rules (.mk-nav display,
 * .mk-mobile-toggle display, .mk-nav-list flex) live in Bricks global CSS —
 * this file only carries the active-link state, the open state, the burger
 * animation and the body scroll lock.
 */

/* Active menu state - CSS-only via aria-current (Bricks adds this automatically) */
.mk-nav a[aria-current="page"],
.mk-footer-links a[aria-current="page"],
.mk-nav-active {
  color: var(--mk-cyan) !important;
  background: rgba(52, 226, 255, 0.1) !important;
  position: relative;
}
.mk-nav a[aria-current="page"]::after,
.mk-footer-links a[aria-current="page"]::after,
.mk-nav-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--mk-cyan);
  border-radius: 1px;
}
/* Also highlight parent dropdown when submenu item is active */
.mk-nav-dropdown:has(a[aria-current="page"]) > a {
  color: var(--mk-cyan) !important;
}

/* Mobile menu open state + burger animation.
 * !important defends against Bricks #brxe- element CSS specificity. */
@media (max-width: 768px) {
  .mk-nav.mk-nav-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(10, 10, 26, 1) !important;
    z-index: 999 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
    overflow-y: auto !important;
  }
  .mk-nav.mk-nav-open .mk-nav-list {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.25rem !important;
  }
  .mk-nav.mk-nav-open .mk-nav-list > div,
  .mk-nav.mk-nav-open .mk-nav-list > li {
    display: block !important;
  }
  .mk-nav.mk-nav-open a {
    font-size: 1.4rem !important;
    padding: 0.75rem 1.5rem !important;
    color: var(--mk-text-bright) !important;
    text-decoration: none !important;
    display: block !important;
    text-align: center !important;
    transition: color 0.2s !important;
  }
  .mk-nav.mk-nav-open a:hover {
    color: var(--mk-cyan) !important;
  }
  .mk-nav.mk-nav-open .mk-nav-sub {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    /* Reset the desktop hover-dropdown hidden state so submenu links are
     * actually visible inside the mobile overlay (Bricks global CSS sets
     * opacity:0 / visibility:hidden / transform on .mk-nav-sub). */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }
  .mk-nav.mk-nav-open .mk-nav-sub a {
    font-size: 1.1rem !important;
    color: var(--mk-text-muted) !important;
    padding: 0.5rem 1.5rem !important;
  }
  .mk-mobile-toggle {
    position: relative !important;
    z-index: 1000 !important;
    cursor: pointer !important;
  }
  .mk-mobile-toggle span {
    transition: all 0.3s ease !important;
    transform-origin: center !important;
  }
  .mk-mobile-toggle.mk-toggle-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }
  .mk-mobile-toggle.mk-toggle-active span:nth-child(2) {
    opacity: 0 !important;
  }
  .mk-mobile-toggle.mk-toggle-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
  }
  body.mk-menu-open {
    overflow: hidden !important;
  }
}