/* =========================================================
   EDUGATE PATHWAY
   GLOBAL HEADER
   FINAL CLEAN VERSION
   ========================================================= */


/* =========================================================
   HEADER SHELL
   ========================================================= */

   .site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: auto;

    z-index: 10000;

    margin: 0;
    padding: 0;

    background: transparent;

    border-bottom:
        1px solid transparent;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        backdrop-filter 0.25s ease;

}


/* =========================================================
   SCROLLED HEADER
   ========================================================= */

.site-header.is-scrolled {

    background:
        rgba(255, 255, 255, 0.97);

    border-bottom-color:
        var(--color-border-light, #e6e6e6);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.055);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

}


/* =========================================================
   NAVBAR
   ========================================================= */

.site-header .navbar {

    position: relative;

    width: 100%;

    min-height: 88px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 24px;

    margin: 0;
    padding: 0;

}


/* =========================================================
   LOGO
   ========================================================= */

.site-logo {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    width: max-content;

    margin: 0;
    padding: 0;

    text-decoration: none;

}


.site-logo img {

    display: block;

    width: auto;

    height: 70px;

    max-width: 180px;

    margin: 0;
    padding: 0;

    object-fit: contain;

}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.desktop-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 24px;

    height: 100%;

}


/* =========================================================
   DESKTOP NAV LINKS
   ========================================================= */

.desktop-nav .nav-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-height: 40px;

    margin: 0;
    padding: 8px 0;

    border: 0;
    outline: none;

    background: transparent;

    color:
        #252525;

    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        0.9rem;

    /*
     * Slightly stronger than the old version,
     * but not excessively bold.
     */

    font-weight:
        550;

    line-height:
        1.35;

    text-decoration:
        none;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        color 0.2s ease;

}


.desktop-nav .nav-link:hover,

.desktop-nav .nav-link:focus-visible {

    color:
        var(--color-teal, #218a86);

}


/* =========================================================
   DROPDOWN NAV ITEM
   ========================================================= */

.nav-item {

    position: relative;

    display: flex;

    align-items: center;

    height: 100%;

}


/* =========================================================
   DROPDOWN ARROW
   ========================================================= */

.dropdown-trigger .dropdown-icon {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;

    flex-shrink: 0;

    font-size: 0.72rem;
    line-height: 1;

    transition:
        transform 0.2s ease;

}


.nav-item:hover
.dropdown-trigger .dropdown-icon,

.nav-item.is-open
.dropdown-trigger .dropdown-icon {

    transform:
        rotate(180deg);

}


/* =========================================================
   DESKTOP DROPDOWN
   ========================================================= */

.desktop-nav .dropdown-menu {

    position: absolute;

    top:
        calc(100% + 8px);

    left:
        50%;

    z-index:
        10001;

    min-width:
        260px;

    max-width:
        320px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    margin: 0;

    padding:
        8px;

    background:
        #ffffff;

    border:
        1px solid
        var(--color-border, #e6e6e6);

    border-radius:
        14px;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.10);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateX(-50%)
        translateY(8px);

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;

}


/* =========================================================
   DROPDOWN HOVER BRIDGE

   This prevents the menu from disappearing when the
   mouse moves from the trigger to the dropdown.
   ========================================================= */

.desktop-nav .dropdown-menu::before {

    content: "";

    position: absolute;

    top:
        -10px;

    left:
        0;

    width:
        100%;

    height:
        10px;

}


/* =========================================================
   DROPDOWN OPEN STATES
   ========================================================= */

.desktop-nav .nav-item:hover
.dropdown-menu,

.desktop-nav .nav-item.is-open
.dropdown-menu,

.desktop-nav .nav-item:focus-within
.dropdown-menu {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateX(-50%)
        translateY(0);

}


/* =========================================================
   DROPDOWN LINKS
   ========================================================= */

.desktop-nav .dropdown-menu a {

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    min-height:
        42px;

    margin:
        0;

    padding:
        10px 13px;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        var(--color-text, #111111);

    font-family:
        var(--font-body, "Inter", sans-serif);

    font-size:
        0.83rem;

    font-weight:
        500;

    line-height:
        1.4;

    text-decoration:
        none;

    box-sizing:
        border-box;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;

}


.desktop-nav .dropdown-menu a:hover,

.desktop-nav .dropdown-menu a:focus-visible {

    color:
        var(--color-teal-dark, #176f6b);

    background:
        var(--color-teal-light, #e8f5f3);

}


/* =========================================================
   HEADER CTA
   ========================================================= */

.header-action {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    margin:
        0;

    padding:
        0;

}


.header-action .btn {

    white-space:
        nowrap;

}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu-toggle {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    width:
        44px;

    height:
        44px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        #202020;

    cursor:
        pointer;

    z-index:
        10004;

}


.mobile-menu-toggle span {

    display:
        block;

    width:
        22px;

    height:
        2px;

    margin:
        3px 0;

    border-radius:
        999px;

    background:
        currentColor;

    transition:
        transform 0.25s ease,
        opacity 0.2s ease;

}


/* =========================================================
   HAMBURGER ACTIVE
   Supports BOTH JS class names:
   .is-active and .is-open
   ========================================================= */

.mobile-menu-toggle.is-active
span:nth-child(1),

.mobile-menu-toggle.is-open
span:nth-child(1) {

    transform:
        translateY(8px)
        rotate(45deg);

}


.mobile-menu-toggle.is-active
span:nth-child(2),

.mobile-menu-toggle.is-open
span:nth-child(2) {

    opacity:
        0;

}


.mobile-menu-toggle.is-active
span:nth-child(3),

.mobile-menu-toggle.is-open
span:nth-child(3) {

    transform:
        translateY(-8px)
        rotate(-45deg);

}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.mobile-navigation {

    display:
        none;

}


/* =========================================================
   FLOATING ACTIONS
   HIDE WHILE MENU IS OPEN
   ========================================================= */

body.mobile-menu-open .floating-actions,

body.mobile-menu-open #floating-actions {

    display:
        none !important;

}


/* =========================================================
   TABLET / LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

    .desktop-nav {

        gap:
            18px;

    }


    .desktop-nav .nav-link {

        font-size:
            0.86rem;

    }


    .site-header .navbar {

        min-height:
            82px;

    }

}


/* =========================================================
   MOBILE / TABLET
   <= 960px
   ========================================================= */

@media (max-width: 960px) {


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .site-header {

        position:
            fixed !important;

        top:
            0 !important;

        left:
            0 !important;

        width:
            100% !important;

        height:
            76px !important;

        z-index:
            10000 !important;

        background:
            #ffffff !important;

        border-bottom:
            1px solid #edf0f1 !important;

        box-shadow:
            0 4px 20px
            rgba(0, 0, 0, 0.05) !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;

    }


    /* -----------------------------------------------------
       NAVBAR
       ----------------------------------------------------- */

    .site-header .navbar {

        width:
            100% !important;

        height:
            76px !important;

        min-height:
            76px !important;

        display:
            grid !important;

        grid-template-columns:
            1fr auto !important;

        align-items:
            center !important;

        gap:
            16px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            visible !important;

    }


    /* -----------------------------------------------------
       LOGO
       ----------------------------------------------------- */

    .site-logo img {

        display:
            block !important;

        width:
            auto !important;

        height:
            48px !important;

        max-width:
            150px !important;

        object-fit:
            contain !important;

    }


    /* -----------------------------------------------------
       HIDE DESKTOP
       ----------------------------------------------------- */

    .desktop-nav,

    .header-action {

        display:
            none !important;

    }


    /* -----------------------------------------------------
       MOBILE BUTTON
       ----------------------------------------------------- */

    .mobile-menu-toggle {

        display:
            flex !important;

        position:
            relative !important;

        z-index:
            10004 !important;

    }


    /* -----------------------------------------------------
       BODY
       ----------------------------------------------------- */

    body.mobile-menu-open {

        overflow:
            hidden !important;

    }


    /* =====================================================
       MOBILE NAVIGATION PANEL

       IMPORTANT:
       Use the ID selector here.

       This intentionally overrides the old
       .mobile-navigation max-height rules
       in components.css.
       ===================================================== */

    #mobile-navigation {

        position:
            fixed !important;

        top:
            76px !important;

        left:
            0 !important;

        right:
            0 !important;

        bottom:
            auto !important;

        width:
            100% !important;

        height:
            calc(100vh - 76px) !important;

        height:
            calc(100dvh - 76px) !important;

        max-height:
            none !important;

        min-height:
            0 !important;

        display:
            block !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        -webkit-overflow-scrolling:
            touch;

        overscroll-behavior:
            contain;

        background:
            #ffffff !important;

        border-top:
            1px solid #edf0f1 !important;

        box-shadow:
            0 18px 40px
            rgba(15, 23, 42, 0.10) !important;

        box-sizing:
            border-box !important;

        z-index:
            10002 !important;

        /*
         * CLOSED STATE
         */

        opacity:
            0 !important;

        visibility:
            hidden !important;

        pointer-events:
            none !important;

        transform:
            translateY(-6px) !important;

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease !important;

    }


    /* =====================================================
       MOBILE NAV OPEN
       ===================================================== */

    #mobile-navigation.is-open {

        height:
            calc(100vh - 76px) !important;

        height:
            calc(100dvh - 76px) !important;

        max-height:
            none !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        transform:
            translateY(0) !important;

    }


    /* =====================================================
       MOBILE CONTAINER
       ===================================================== */

    #mobile-navigation > .container {

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 20px !important;

        box-sizing:
            border-box !important;

    }


    /* =====================================================
       MOBILE INNER
       ===================================================== */

    #mobile-navigation .mobile-navigation-inner {

        display:
            flex !important;

        flex-direction:
            column !important;

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        margin:
            0 !important;

        padding:
            4px 0 32px !important;

        overflow:
            visible !important;

        box-sizing:
            border-box !important;

    }


    /* =====================================================
       MOBILE LINKS
       ===================================================== */

    #mobile-navigation .mobile-nav-link {

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            space-between !important;

        flex-shrink:
            0 !important;

        width:
            100% !important;

        min-height:
            54px !important;

        max-height:
            none !important;

        margin:
            0 !important;

        padding:
            15px 0 !important;

        border:
            0 !important;

        border-bottom:
            1px solid #edf0f1 !important;

        outline:
            none !important;

        background:
            transparent !important;

        color:
            #252525 !important;

        font-family:
            var(--font-body, "Inter", sans-serif) !important;

        font-size:
            0.95rem !important;

        font-weight:
            500 !important;

        line-height:
            1.4 !important;

        text-align:
            left !important;

        text-decoration:
            none !important;

        cursor:
            pointer !important;

        box-sizing:
            border-box !important;

    }


    #mobile-navigation .mobile-nav-link:hover,

    #mobile-navigation .mobile-nav-link:focus-visible {

        color:
            #218a86 !important;

    }


    /* =====================================================
       MOBILE NAV GROUP
       ===================================================== */

    #mobile-navigation .mobile-nav-group {

        display:
            block !important;

        width:
            100% !important;

        height:
            auto !important;

        max-height:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            visible !important;

        flex-shrink:
            0 !important;

    }


    /* =====================================================
       MOBILE DROPDOWN ARROW
       ===================================================== */

    #mobile-navigation
    .mobile-dropdown-trigger .dropdown-icon {

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            16px !important;

        height:
            16px !important;

        flex-shrink:
            0 !important;

        font-size:
            0.78rem !important;

        line-height:
            1 !important;

        transition:
            transform 0.2s ease !important;

    }


    #mobile-navigation
    .mobile-nav-group.is-open
    .mobile-dropdown-trigger .dropdown-icon {

        transform:
            rotate(180deg) !important;

    }


    /* =====================================================
       MOBILE DROPDOWN
       ===================================================== */

    #mobile-navigation .mobile-dropdown {

        display:
            none !important;

        width:
            100% !important;

        height:
            auto !important;

        max-height:
            none !important;

        margin:
            0 !important;

        padding:
            4px 0 8px 14px !important;

        overflow:
            visible !important;

        opacity:
            1 !important;

        box-sizing:
            border-box !important;

    }


    #mobile-navigation
    .mobile-nav-group.is-open
    .mobile-dropdown {

        display:
            block !important;

    }


    /* =====================================================
       MOBILE DROPDOWN LINKS
       ===================================================== */

    #mobile-navigation .mobile-dropdown a {

        display:
            flex !important;

        align-items:
            center !important;

        width:
            100% !important;

        min-height:
            42px !important;

        margin:
            0 !important;

        padding:
            9px 13px !important;

        border:
            0 !important;

        border-left:
            2px solid #d9eeeb !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        color:
            #4a5056 !important;

        font-family:
            var(--font-body, "Inter", sans-serif) !important;

        font-size:
            0.84rem !important;

        font-weight:
            400 !important;

        line-height:
            1.4 !important;

        text-decoration:
            none !important;

        box-sizing:
            border-box !important;

        transition:
            color 0.18s ease,
            background-color 0.18s ease,
            border-color 0.18s ease;

    }


    #mobile-navigation .mobile-dropdown a:hover,

    #mobile-navigation .mobile-dropdown a:focus-visible {

        color:
            #218a86 !important;

        background:
            #f4fbfa !important;

        border-left-color:
            #218a86 !important;

    }


    /* =====================================================
       MOBILE CTA
       ===================================================== */

    #mobile-navigation .mobile-nav-button {

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            100% !important;

        min-height:
            48px !important;

        margin:
            18px 0 0 !important;

        padding:
            12px 20px !important;

        border:
            0 !important;

        border-radius:
            9px !important;

        background:
            #111827 !important;

        color:
            #ffffff !important;

        font-family:
            var(--font-body, "Inter", sans-serif) !important;

        font-size:
            0.92rem !important;

        font-weight:
            600 !important;

        text-align:
            center !important;

        text-decoration:
            none !important;

        box-sizing:
            border-box !important;

    }


    #mobile-navigation .mobile-nav-button:hover {

        background:
            #218a86 !important;

        color:
            #ffffff !important;

    }

}


/* =========================================================
   SMALL MOBILE
   <= 600px
   ========================================================= */

@media (max-width: 600px) {


    .site-header {

        height:
            70px !important;

    }


    .site-header .navbar {

        height:
            70px !important;

        min-height:
            70px !important;

    }


    .site-logo img {

        height:
            44px !important;

        max-width:
            145px !important;

    }


    .mobile-menu-toggle {

        width:
            42px !important;

        height:
            42px !important;

    }


    #mobile-navigation {

        top:
            70px !important;

        height:
            calc(100vh - 70px) !important;

        height:
            calc(100dvh - 70px) !important;

    }


    #mobile-navigation.is-open {

        height:
            calc(100vh - 70px) !important;

        height:
            calc(100dvh - 70px) !important;

    }


    #mobile-navigation > .container {

        padding-left:
            20px !important;

        padding-right:
            20px !important;

    }

}


/* =========================================================
   VERY SMALL MOBILE
   <= 380px
   ========================================================= */

@media (max-width: 380px) {


    .site-header {

        height:
            66px !important;

    }


    .site-header .navbar {

        height:
            66px !important;

        min-height:
            66px !important;

    }


    .site-logo img {

        height:
            41px !important;

        max-width:
            135px !important;

    }


    #mobile-navigation {

        top:
            66px !important;

        height:
            calc(100vh - 66px) !important;

        height:
            calc(100dvh - 66px) !important;

    }


    #mobile-navigation.is-open {

        height:
            calc(100vh - 66px) !important;

        height:
            calc(100dvh - 66px) !important;

    }


    #mobile-navigation > .container {

        padding-left:
            16px !important;

        padding-right:
            16px !important;

    }


    #mobile-navigation .mobile-nav-link {

        min-height:
            50px !important;

        font-size:
            0.91rem !important;

    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-header,
    .desktop-nav .dropdown-menu,
    .mobile-navigation,
    .mobile-menu-toggle span,
    .dropdown-trigger .dropdown-icon,
    .mobile-dropdown-trigger .dropdown-icon {

        transition:
            none !important;

    }

}