/* ==============================================
   MOBILE MENU - CLEAN REBUILD V32.0
   ============================================== */

/* Hide checkbox */
.menu-toggle-input {
    display: none;
}

/* Hamburger button */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 24px;
    cursor: pointer;
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 99999999; /* ALWAYS on top */
    background: transparent;
}

.hamburger-btn span {
    width: 100%;
    height: 3px;
    background: #A4D233 !important; /* BRIGHT GREEN */
    border-radius: 2px;
    display: block;
    transition: all 0.3s ease;
}

/* Mobile menu container - Hidden by default */
.mobile-menu {
    display: none;
    background: #000000; /* SOLID BLACK */
    background-color: #000000; /* SOLID BLACK */
}

/* When checkbox is checked, show menu */
#menu-toggle:checked ~ .mobile-menu {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #000000 !important; /* SOLID BLACK HEX */
    background-color: #000000 !important; /* SOLID BLACK HEX */
    backdrop-filter: none !important; /* NO BLUR - SOLID BLACK */
    -webkit-backdrop-filter: none !important; /* NO BLUR - SOLID BLACK */
    z-index: 9999999 !important;
    padding: 80px 32px 32px !important;
    overflow-y: auto !important;
    opacity: 1 !important; /* FULL OPACITY */
    visibility: visible !important;
}

/* HIDE hero section when menu open */
#menu-toggle:checked ~ * {
    visibility: hidden !important;
}

/* But keep menu visible */
#menu-toggle:checked ~ .mobile-menu {
    visibility: visible !important;
}

/* Keep nav visible */
#menu-toggle:checked ~ .nav-container {
    visibility: visible !important;
}

/* Menu links */
.mobile-menu-link {
    display: block;
    padding: 20px 24px;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgba(164, 210, 51, 0.15);
    margin-bottom: 8px;
}

/* CTA button */
.mobile-menu-cta {
    display: block;
    margin-top: 32px;
    padding: 20px 32px;
    background: linear-gradient(135deg, #A4D233 0%, #8DB82A 100%);
    color: #000;
    text-align: center;
    border-radius: 16px;
    font-weight: 800;
    font-size: 19px;
    text-decoration: none;
}

/* Hamburger animation */
#menu-toggle:checked ~ .nav-container .hamburger-btn span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

#menu-toggle:checked ~ .nav-container .hamburger-btn span:nth-child(2) {
    opacity: 0;
}

#menu-toggle:checked ~ .nav-container .hamburger-btn span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* Lock body scroll when menu open */
#menu-toggle:checked ~ body,
body:has(#menu-toggle:checked) {
    overflow: hidden;
}

/* Mobile breakpoint */
@media (max-width: 767px) {
    .hamburger-btn {
        display: flex !important;
    }
    
    .nav-menu {
        display: none !important;
    }
}