/* --- Breakpoint: max-width 768px --- */
@media screen and (max-width: 768px) {
    /* Ensure hamburger menu is always visible on mobile */
    .hamburgerMenu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    main {
        margin-top: 5rem; /* moved up just a little bit more on medium screens */
    }

    .allItems {
        margin-right: 0 !important;
    }

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

/* --- Breakpoint: max-width 480px --- */
@media screen and (max-width: 480px) {
    nav {
        padding: 0 0.5rem;
        min-height: 4rem;
    }
    
    main {
        margin-top: 4rem; /* moved up just a little bit more on small mobile */
    }
    
    .logo img {
        height: 2.5rem;
    }
    
    .navElements {
        display: none !important;
    }
    
    .navElements.hamburgerNav {
        display: flex !important;
        left: 0 !important;
    }
    
    .hamburgerMenu {
        display: flex !important;
        width: 25px !important;
        height: 25px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .hamburgerMenu span {
        height: 2px !important;
    }

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

/* Mobile Navigation Override Styles */
@media screen and (max-width: 1400px) {
    .navElements.hamburgerNav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: var(--navBackgroundColor) !important;
        z-index: 1000 !important;
        padding: 80px 20px 20px 20px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .navElements.hamburgerNav li {
        margin: 15px 0 !important;
        list-style: none !important;
    }

    .navElements.hamburgerNav li a {
        color: white !important;
        text-decoration: none !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        padding: 10px 20px !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
        display: block !important;
    }

    .navElements.hamburgerNav li a:hover {
        background: rgba(255,255,255,0.1) !important;
        transform: translateY(-2px) !important;
    }

    /* Ensure long navigation items are properly centered */
    .navElements.hamburgerNav li a {
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    /* Old social media styles removed */
}

/* Desktop hover functionality for About Us dropdown */
@media screen and (min-width: 1401px) {
    .nestedElements {
        display: none !important;
        position: absolute !important;
        top: 100% !important;       /* flush under parent */
        left: 0 !important;         /* align to left edge */
        right: auto !important;
        margin: 0 !important;       /* remove hover gap */
        padding: 10px 0 !important;
        min-width: 220px !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        background: var(--navBackgroundColor) !important;
        border-radius: 6px !important;
        box-shadow: 0 10px 24px rgba(0,0,0,0.28) !important;
        z-index: 9999 !important;
        text-align: left !important;
    }    
    
    .navElements > li { position: relative !important; }

.navElements > li:hover > .nestedElements,
.navElements > li:focus-within > .nestedElements {
    display: block !important;
}

    
    .nestedElements li {
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        border: none !important;
        border-bottom: none !important;
        line-height: 0 !important;
        font-size: 0 !important;
        box-sizing: border-box !important;
    }
    
    .nestedElements li a {
        padding: 0.75rem 0 !important;
        display: block !important;
        color: var(--navTextColor) !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        background-color: var(--navBackgroundColor) !important;
        border-radius: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    .nestedElements li:hover {
        background-color: var(--logoBlue) !important;
    }
    
    .nestedElements li a:hover {
        color: white !important;
        background-color: var(--logoBlue) !important;
    }
}