/* =========================================================
   NAVIGATION & MEGA MENU STYLES (Bootstrap Based)
   ========================================================= */

/* ---------------------------
   GENERAL DROPDOWN RESET
--------------------------- */
.navbar .dropdown-menu {
    display: none;
    border: none;
    padding: 0;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.35s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    border-radius: 0;
}

/* Overlay behind mega menu */
.mega-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ---------------------------
   DESKTOP (>=992px)
--------------------------- */
@media (min-width: 992px) {

    /* ============================
       HEADER WIDTH & SPACING
    ============================ */

    .navbar > .container {
        max-width: 1400px;
    }

    /* Push menu RIGHT away from logo */
    .navbar-collapse {
        margin-left: 4rem;
    }

    /* ============================
       EQUAL WIDTH PARENT ITEMS
    ============================ */

    .navbar-nav {
        display: flex;
        width: 100%;
    }

    .navbar-nav .nav-item {
        flex: 1 1 0;
        position: relative; /* needed for pseudo-elements */
        display: flex;
        justify-content: center;
    }

    /* ============================
       VISIBLE LINK (TEXT ONLY)
    ============================ */

    .navbar-nav .nav-link {
        position: relative;
        z-index: 2;

        padding: 0.75rem 0;     /* no horizontal padding */
        line-height: 1.2;

        color: #2e73b9 !important;
        font-weight: 500;
        text-align: center;

        background: none;       /* remove direct background */
    }

    /* ============================
       🔵 FIXED-WIDTH HIGHLIGHT
       (SAME FOR ALL PARENTS)
    ============================ */

    .navbar-nav .nav-item::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 120px;           /* 🔧 adjust highlight width */
        height: 36px;           /* highlight height */
        background: #2e73b9;
        border-radius: 4px;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 1;
        pointer-events: none;
    }

    .navbar-nav .nav-item:hover::before,
    .navbar-nav .nav-item:has(.nav-link.active)::before {
        opacity: 1;
    }

    .navbar-nav .nav-item:hover .nav-link,
    .navbar-nav .nav-link.active {
        color: #fff !important;
    }

    /* ============================
       🔥 INVISIBLE HOVER BUFFER
       (KEEP DROPDOWN OPEN)
    ============================ */

    .navbar-nav .nav-item::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 28px;           /* keep this large */
        background: transparent;
        pointer-events: auto;
    }

    /* ============================
       MEGA MENU
    ============================ */

    .navbar .dropdown-menu.mega-menu {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100vw;
        padding: 2rem 5vw;
        background-color: #fff;
        color: #2e73b9;
        opacity: 0;
        transform: translateY(-20px);
        pointer-events: none;
        border-radius: 0;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    }

    .navbar .dropdown:hover > .dropdown-menu.mega-menu {
        display: block;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .navbar .dropdown:hover ~ .mega-menu-overlay {
        display: block;
        opacity: 1;
    }

    .mega-menu .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center;
        gap: 40px;
        margin: 0;
        width: 100%;
    }

    .mega-menu .row > [class*="col-"]:not(:last-child) {
        width: 240px !important;
        padding: 0 1.5rem;
        border-right: 1px solid rgba(0, 0, 0, 0.05);
    }

    .mega-menu .row > [class*="col-"]:last-child {
        max-width: 400px !important;
        padding: 0 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mega-menu h6 {
        font-weight: 700;
        margin-bottom: 0.75rem;
        color: #2e73b9;
        border-bottom: 2px solid #2e73b9;
        padding-bottom: 0.25rem;
    }

    .mega-menu .dropdown-item {
        padding: 0.45rem 0;
        color: #2e73b9;
        background-color: #fff;
        transition: all 0.25s ease;
    }

    .mega-menu .dropdown-item:hover,
    .mega-menu .dropdown-item.active {
        background-color: #2e73b9;
        color: #fff;
        padding-left: 0.65rem;
    }

    .mega-menu img {
        max-width: 100%;
        border-radius: 6px;
        transition: transform 0.3s ease;
    }

    .mega-menu img:hover {
        transform: scale(1.05);
    }
}

/* ---------------------------
   MOBILE / TABLET (<992px)
--------------------------- */
@media (max-width: 991px) {

    .navbar .dropdown-menu.mega-menu {
        position: static;
        width: 100%;
        padding: 1rem;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        background-color: #fff;
        box-shadow: none;
    }

    .navbar .dropdown:hover > .dropdown-menu.mega-menu {
        display: none;
    }

    .mega-menu-overlay {
        display: none !important;
    }

    .mega-menu .row {
        flex-direction: column !important;
        gap: 20px;
    }

    .mega-menu .row > [class*="col-"] {
        width: 100% !important;
        padding: 0 !important;
        border: none;
    }

    .mega-menu img {
        width: 100%;
        margin-top: 1rem;
        border-radius: 6px;
    }
}