/* ============================================
   15. RESPONSIVE: NAVIGATION (all hamburger/mobile nav rules)
   ============================================ */

/* --- Breakpoint: max-width 1400px --- */
@media screen and (max-width: 1400px) {
    /* Force hamburger menu to be visible on all mobile/tablet devices */
    .hamburgerMenu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 1000 !important;
        background: rgba(0,0,0,0.9) !important;
        border-radius: 8px !important;
        padding: 15px 12px !important;
        margin: 0 !important;
        border: 2px solid var(--logoBlue) !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Style the hamburger lines */
    .hamburgerMenu span {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        background: white !important;
        margin: 3px 0 !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
        transform-origin: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 1001 !important;
    }
    
    /* Force all spans to be visible */
    .hamburgerMenu span:nth-child(1),
    .hamburgerMenu span:nth-child(2),
    .hamburgerMenu span:nth-child(3) {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        background: white !important;
        margin: 3px 0 !important;
        border-radius: 2px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Hover effect */
    .hamburgerMenu:hover {
        background: rgba(0,0,0,1) !important;
        border-color: white !important;
        transform: scale(1.1) !important;
    }
    
    /* Active/open state */
    .hamburgerMenu.hamburgerMenuOpen span:nth-child(1) {
        transform: none !important;
    }
    
    .hamburgerMenu.hamburgerMenuOpen span:nth-child(2) {
        opacity: 1 !important;
    }
    
    .hamburgerMenu.hamburgerMenuOpen span:nth-child(3) {
        transform: none !important;
    }
    
    /* Hide desktop navigation on mobile */
    .navElements {
        display: none !important;
    }
    
    /* Show mobile navigation when hamburger is open */
    .navElements.hamburgerNav {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--navBackgroundColor) !important;
        z-index: 999 !important;
        padding: 20px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    }

    .logo {
        margin-left: -3px !important;
        transform: translateX(-3px) !important;
    }
}

/* --- Breakpoint: max-width 1400px, portrait --- */
@media screen and (max-width: 1400px)  , (orientation:portrait){

/* Header ----------*/

body{
    margin-top: 4rem;


}

nav{
    width:100vw;
    height:20vh;
}

.navElements {
    padding:0;
}
.navElements{
    padding:0;
    flex-direction: column;
    background-color: var(--navBackgroundColor);
    height:100vh;
    position: absolute;
    top: 35rem;
    left: 0;
    align-items: center;
    transform:translateX(-100vw);
    transition:.6s;
    width:50%;
    gap: 0.1rem;
    overflow-y: auto;
}
.navElements li{
    transform:translate(-8rem,0);
    transition: .4s;
    padding:1rem;
    margin: 0;
    /* opacity:0; */
}
.navElements li a{
    padding:.5rem;
}


.navElements li:nth-child(2){
    transition: .5s;
}
.navElements li:nth-child(3){
    transition: .6s;
}
.navElements li:nth-child(4){
    transition: .7s;
}
.navElements li:nth-child(5){
    transition: .8s;
}
.navElements li:nth-child(6){
    transition: .9s;
}
.navElements li:nth-child(7){
    transition: 1s;
}
.logo{
    top:.5rem;
    left: .5rem;
}
.logo img{
    height: 3rem;
}

.hamburgerNav{
    transform: translateY(0);
    opacity: 1;
    width:100%;
}
.hamburgerNav li{
    transform: translate(0,0);
    opacity:1;
    margin: 0;
}
.hamburgerMenu{
    display:flex;
    flex-direction: column;
    position: absolute;
    top:1rem;
    right:1.3rem;
}
.hamburgerMenu span{
    transition:.4s;
    height:.2rem;
    width:2rem;
    background-color: var(--navTextColor);
    margin-top:.3rem;
    border-radius: 1rem;
}

.hamburgerMenuOpen span:nth-child(1){
    transform: translate(-.3rem,.7rem) rotate(45deg) ;
}
.hamburgerMenuOpen span:nth-child(2){
    transform: translateY(.6rem) scale(0) ;

}
.hamburgerMenuOpen span:nth-child(3){
    transform: rotate(-45deg) translateY(-.4rem);
}

} /* close @media max-width 1400px portrait */


/* Desktop hover functionality - moved to media query below */
/* Removed conflicting nestedElements rules - handled in media query */

/* --- Breakpoint: max-width 1400px (mobile dropdown/menu items) --- */
@media screen and (max-width: 1400px) {
    /* Disable all hover animations for mobile */
    .navElements li a:hover,
    .navElements li a:focus,
    .hamburgerMenu:hover,
    .hamburgerMenu:focus {
        background: none !important;
        transform: none !important;
        color: inherit !important;
        text-decoration: none !important;
    }
    
    /* Show dropdown on mobile when clicked */
    .nestedElements {
        display: none;
        position: relative;
        background-color: var(--navBackgroundColor);
        border-radius: 8px;
        margin-top: 0.5rem;
        padding: 0.5rem;
        width: 100%;
    }
    
    .nestedElements.show {
        display: block !important;
    }
    
    /* Mobile dropdown styling complete */
    

    
    /* Mobile menu item styling */
    .navElements li {
        text-align: center;
        width: 100%;
        margin: 0 !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    
    .navElements li a {
        display: block;
        padding: 0.3rem !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        color: var(--navTextColor) !important;
    }
    

} 

.navElements li a.active i.fa-caret-down {
    transform: rotate(180deg) !important;
}

/* Mobile nested elements styling */
    .nestedElements li {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .nestedElements li a {
        padding: 15px 20px !important;
        font-size: 16px !important;
        display: block !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
        border-radius: 8px !important;
        margin: 5px 10px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    .nestedElements li a:hover {
        color: var(--logoBlue) !important;
        background: rgba(255,255,255,0.15) !important;
        transform: translateX(5px) !important;
    }
    
    /* Old mobile social media styles removed - now handled in footer */
    
    /* Logo positioning for mobile */
    .logo {
        z-index: 1001 !important;
    }
    
    /* Overlay for mobile menu */
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.3) !important;
        z-index: 999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        pointer-events: none !important;
    }
    
    .mobile-menu-overlay.show {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
    }
    
    /* Ensure navigation elements are above overlay and clickable */
    .navElements.hamburgerNav {
        z-index: 1000 !important;
        pointer-events: auto !important;
    }
    
    /* Ensure hamburger menu button is always clickable */
    .hamburgerMenu {
        z-index: 1001 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
    }
    
    .hamburgerMenu.hamburgerMenuOpen {
        z-index: 1001 !important;
        pointer-events: auto !important;
    }
    
    /* Ensure navigation links are clickable */
    .navElements.hamburgerNav li {
        pointer-events: auto !important;
        z-index: 1002 !important;
        position: relative !important;
    }
    
    .navElements.hamburgerNav li a {
        pointer-events: auto !important;
        z-index: 1003 !important;
        position: relative !important;
        cursor: pointer !important;
        display: block !important;
    }
    
    /* Old social media clickable styles removed */
    
    /* Hamburger menu animations */
    @keyframes slideInFromTop {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }

    }
    
    .navElements.hamburgerNav {
        animation: slideInFromTop 0.3s ease-out !important;
}

/* --- Breakpoint: 769px - 1024px --- */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    nav {
        padding: 0 1.5rem;
    }
    
    .navElements li a {
        padding: 1rem 0.5rem;
        font-size: 14px;
    }
    
    .logo img {
        height: 3rem;
    }
}