body, html {
    font-family: dana, sans-serif;
}

.mobileMenuOpen {
    display: block;
}

.offcanvas__header--menu__open {
    line-height: 1;
    display: none;
}

.offcanvas__header--menu__open--btn > * {
    pointer-events: none;
}

@media only screen and (max-width: 991px) {
    .offcanvas__header--menu__open {
        display: block;
    }
}

.offcanvas__header.open {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.offcanvas__header.open ~ .offcanvas-overlay {
    visibility: visible;
    opacity: 0.75;
}

.mobile-menu-icon {
    width: 24px;
    height: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu-bar {
    display: block;
    height: 3px;
    width: 100%;
    border-radius: 3px;
    background-color: currentColor;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* When menu is active */
.menu-active .menu-bar-top {
    transform: rotate(45deg) translate(5px, 7px);
    width: 100%;
}

.menu-active .menu-bar-middle {
    opacity: 0;
    transform: translateX(-20px);
}

.menu-active .menu-bar-bottom {
    transform: rotate(-45deg) translate(5px, -7px);
    width: 100%;
}

/* Mobile Menu Slide Animation */
#mobileMenuSection {
    transform: translateX(100%); /* Start off-screen */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

#mobileMenuSection.active {
    transform: translateX(0); /* Slide in */
}

/* Menu item animation */
#mobileMenuSection nav ul li {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: calc(0.05s * var(--item-index, 0));
}

#mobileMenuSection.active nav ul li {
    opacity: 1;
    transform: translateY(0);
}

/* Background overlay for mobile menu */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Fix for mobile menu stacking context issues */
.mobile-menu-container {
    isolation: isolate;
}

/* Set extremely high z-index and ensure proper stacking */
#mobileMenuSection {
    position: fixed;
    z-index: 2147483647 !important; /* Maximum possible z-index */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    /* Force hardware acceleration to create a new stacking context */
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

#mobileMenuSection.active {
    transform: translateX(0);
}

#mobileMenuOverlay {
    position: fixed;
    z-index: 2147483646 !important; /* One less than the menu */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#mobileMenuOverlay.active {
    opacity: 1;
    visibility: visible;
}

#mobileMenuButton {
    position: relative;
    z-index: 2147483647 !important; /* Same as menu to stay on top */
}

/* Ensure body when modal open doesn't create new stacking context */
body.menu-open {
    overflow: hidden;
    height: 100vh;
}

/* Also add this fix for image containers that might be causing issues */
.aspect-square,
.aspect-video,
[class*="relative"] {
    isolation: isolate;
    z-index: 1;
}