/* =================================================================== */
/*    ✅ FINAL & CLEAN navigation.css ✅                             */
/* =================================================================== */

/* --- Main Header Structure --- */
.main-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.4s ease;
    transform: translateZ(0);
    /* Promotes to a new rendering layer for performance */
}

.main-header.scrolled {
    position: fixed;
    background-color: #000000;
}

.main-header .container {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0 30px;
    /* Provides space on the left/right edges of the screen */
}

.logo img {
    height: 60px;
    width: auto;
    display: block;
    /* Ensures proper alignment */
}

.main-nav .nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
}

/* ============================================= */
/* --- 1. DESKTOP Navigation (> 1080px)      --- */
/* ============================================= */
@media (min-width: 1080px) {

    /* --- Layout and Spacing --- */
    .main-nav {
        margin-left: 3.3in;
    }

    .header-right {
        margin-left: auto;
        /* Pushes hamburger icon space to the right */
    }

    /* --- Base Link Styles --- */
    .main-nav .nav-links>li {
        margin: 0 15px;
        /* Space between links */
    }

    .main-nav .nav-links>li>a {
        color: #ffffff;
        font-weight: 500;
        font-size: 16px;
        transition: color 0.3s ease;
        padding: 10px;
        /* Or whatever padding you like */
    }

    .main-nav .nav-links>li>a:hover {
        color: #d80000;
    }

    /* ======================================== */
    /* --- ✅ CORRECTED DESKTOP DROPDOWN ✅ --- */
    /* ======================================== */

    .mega-menu {
        position: static;
        /* MUST be static to allow full-width dropdown */
    }

    .mega-menu .dropdown-content {
        position: absolute;
        top: 100px;
        /* Aligns to the bottom of the header */
        left: 0;
        /* Aligns to the far left of the page */
        width: 100%;
        /* Stretches to the far right of the page */

        background-color: #000000;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        padding: 30px 0;

        /* Default HIDDEN state */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        /* Cannot be clicked when hidden */
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Show dropdown on hover of the PARENT list item */
    .mega-menu.is-open>.dropdown-content {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0s;
    }

    /* --- Content inside the dropdown --- */
    .mega-menu-inner {
        width: 90%;
        max-width: 1280px;
        margin: 0 auto;
        display: flex;
        gap: 60px;
    }

    .mega-menu-column {
        flex: 1;
    }

    .mega-menu-column h4 {
        color: #d80000;
        font-size: 14px;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .mega-menu-column a {
        display: block;
        color: #fff;
        padding: 8px 0;
        transition: color 0.3s ease;
    }

    .mega-menu-column a:hover {
        color: #d80000;
    }

    .mega-menu-column:only-child {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px 30px;
    }

    .mega-menu-column:only-child h4 {
        grid-column: 1 / -1;
    }

    /* Hide Mobile-Only elements */
    .mobile-nav-toggle,
    .dropdown-arrow {
        display: none;
    }
}

/* ============================================= */
/* --- 2. MOBILE Navigation (<= 1080px)      --- */
/* ============================================= */
@media (max-width: 1080px) {

    /* Adjust header for mobile */
    .main-header {
        height: 80px;
    }

    .main-header.scrolled {
        background-color: #000;
    }

    .main-header .container {
        height: 100%;
        padding: 0 20px;
        justify-content: space-between;
    }

    .logo img {
        height: 40px;
    }

    .header-right {
        height: 100%;
    }

    .main-nav {
        display: block;
    }

    /* Ensure nav container exists */

    /* Hide the desktop links by default on mobile */
    .main-nav .nav-links {
        display: none;
    }

    /* When the menu is active, style the links container */
    .main-nav.active .nav-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 20px 0;
    }

    /* Hamburger Menu Icon (only appears on mobile) */
    .mobile-nav-toggle {
        display: flex;
        align-items: center;
        height: 100%;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 9999;
        padding: 15px;
    }

    .hamburger {
        display: block;
        position: relative;
        width: 24px;
        height: 2px;
        background-color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .hamburger::before {
        top: -8px;
    }

    .hamburger::after {
        bottom: -8px;
    }

    .mobile-nav-toggle.active .hamburger {
        background-color: transparent;
    }

    .mobile-nav-toggle.active .hamburger::before {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-nav-toggle.active .hamburger::after {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* The Main Mobile Navigation Panel that slides down */
    .main-nav {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: #111;
        height: calc(100vh - 80px);
        overflow-y: auto;
        /* Default HIDDEN state for the panel */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }

    .main-nav.active {
        /* This shows the panel when hamburger is clicked */
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Styling for links inside the mobile panel */
    .main-nav .nav-links>li {
        width: 100%;
    }

    .main-nav .nav-links>li>a {
        display: flex;
        /* This is crucial for the arrow alignment */
        align-items: center;
        font-size: 1.3rem;
        padding: 20px 30px;
    }

    .mega-menu-column h4 {
        display: none;
    }
    .main-nav .nav-links > li > a {
        display: flex;
        align-items: center;
        font-size: 1.3rem;
        padding: 20px 30px;
    }
    .dropdown-arrow {
        display: inline-block;
        margin-left: auto;
        width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
    }
    .mega-menu-column h4 { display: none; }
    
    /* Main accordion functionality */
    .mega-menu .dropdown-content {
        background-color: rgba(0,0,0,0.2);
        max-height: 0; /* Hidden by default */
        overflow: hidden;
        transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    }
    .mega-menu.active > .dropdown-content {
        max-height: 1000px;
        padding: 10px 0;
    }
    .mega-menu.active > a > .dropdown-arrow {
        transform: rotate(225deg);
    }
    
    /* --- THIS IS THE CRITICAL PART THAT FIXES THE CONFLICT --- */
    
    /* Step 1: Force the inner container to stack vertically. */
    .dropdown-content .mega-menu-inner,
    .dropdown-content .mega-menu-column {
        display: block; /* Overrides 'flex' or 'grid' from desktop */
        width: 100%;
    }

    /* Step 2: Make EACH LINK its own full-width block (its own row) */
    .dropdown-content .mega-menu-column a {
        display: block;
        width: 100%;
        font-size: 1rem;
        color: #ccc;
        padding: 14px 30px 14px 50px; /* Adjust padding as needed */
        text-align: left;
    }

}