/* =========================================================
   MID HEADER
========================================================= */

.mid-header {
    position: relative;
    width: 100%;
    padding: 0;
    background: #fff;
    z-index: 900;
}


.mid-header-inner {
    width: 100%;
    min-height: 70px;
    padding: 5px clamp(18px, 3vw, 52px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(18px, 2.5vw, 40px);
    box-sizing: border-box;
}

/* =========================================================
   BRAND
========================================================= */

.mid-header-brand {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}


.hudco-brand-link {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: clamp(8px, .8vw, 12px);
    text-decoration: none;
}


.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin: 0;
}


.hudco-brand-name {
    display: block;
    margin: 0;
    font-size: clamp(1rem, .78rem + .55vw, 1.45rem);
    line-height: 1.05;
    color: #12336b;
    white-space: nowrap;
}

.funding {
    display: block;
    min-height: 1.2em;
    margin-top: 2px;
    font-size: clamp(.60rem, .5rem + .25vw, .82rem);
    line-height: 1.15;
    font-weight: 600;
    color: #980000;
    white-space: nowrap;
}

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

.mid-header-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}


.menu-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
}

.mid-header {
    display: block;
}

.hudco-citylogo {
    margin: 0;
}

.menu-container {
    left: auto;
    max-height: none;
    padding: 0;
    gap: 0;
    white-space: normal;
}

:lang(hi) .menu-container {
    gap: 0;
}

.main-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1.2vw, 24px);
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

:lang(hi) .main-menu {
    gap: clamp(8px, 1vw, 18px);
}

.main-menu > .parent-menu {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    border-radius: 8px;
}

    .main-menu > .parent-menu > a {
        display: inline-flex;
        align-items: center;
        padding: 8px 5px;
        font-size: clamp(.82rem, .68rem + .28vw, 1rem);
        line-height: 1.2;
        white-space: nowrap;
    }

.sub-menu li a {
    font-size: clamp(.78rem, .72rem + .12vw, .9rem);
}

.hamburger-menu {
    display: none;
}

@media (max-width: 1199px) {

    .mid-header-inner {
        padding-inline: 20px;
        gap: 18px;
    }


    .hudco-citylogo {
        width: clamp(46px, 4.5vw, 54px);
    }


    .hudco-brand-name {
        font-size: clamp(1rem, 1.8vw, 1.35rem);
    }


    .funding {
        font-size: .68rem;
    }


    .main-menu {
        gap: clamp(10px, 1vw, 16px);
    }


        .main-menu > .parent-menu > a {
            font-size: clamp(.82rem, 1.2vw, .95rem);
        }
}

@media (max-width: 992px) {

    .mid-header-inner {
        min-height: 64px;
        padding: 7px clamp(12px, 2.5vw, 22px);
        gap: 12px;
    }


    .mid-header-brand {
        flex: 1 1 auto;
    }


    .hudco-citylogo {
        width: clamp(44px, 6vw, 58px);
    }


    .hudco-brand-name {
        font-size: clamp(.9rem, 2vw, 1.2rem);
    }


    .funding {
        font-size: clamp(.56rem, 1.2vw, .7rem);
    }


    .mid-header-navigation {
        flex: 0 0 auto;
    }


    .hamburger-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        color: #111;
        background: transparent;
        border: 0;
        font-size: 1.2rem;
        text-decoration: none;
        cursor: pointer;
    }


    /*
       Desktop menu is no longer part
       of the header layout.
    */

    .mobile-menu-panel .main-menu {
        display: block;
    }
}

@media (max-width: 767px) {

    .mid-header-inner {
        min-height: 58px;
        padding: 6px 10px;
        gap: 8px;
    }


    .hudco-citylogo {
        width: 40px;
    }


    .hudco-brand-link {
        margin-right: 6px;
    }


    .hudco-brand-name {
        font-size: .82rem;
    }


    .funding {
        max-width: 190px;
        font-size: .52rem;
        white-space: normal;
    }


    .hamburger-menu {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

@media (max-width: 420px) {

    .mid-header-inner {
        padding-inline: 8px;
    }


    .hudco-citylogo {
        width: 36px;
    }


    .hudco-brand-name {
        font-size: .76rem;
    }


    .funding {
        max-width: 165px;
        font-size: .48rem;
    }
}

/* =========================================================
   REMOVE LEGACY MENU POSITIONING
========================================================= */

#hudco-midheader .menu-container {
    left: auto;
    width: 100%;
    max-height: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

#hudco-midheader .main-menu {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(6px, 0.8vw, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
}

    #hudco-midheader .main-menu > .parent-menu {
        flex: 0 0 auto;
        width: auto;
        padding: 0;
        white-space: nowrap;
    }

        #hudco-midheader .main-menu > .parent-menu > a {
            padding: 8px clamp(4px, 0.45vw, 8px);
            font-size: clamp(.78rem, 1rem + .24vw, .96rem);
            line-height: 1.2;
        }

:lang(hi) #hudco-midheader .menu-container {
    gap: 0;
}

:lang(hi) #hudco-midheader .main-menu {
    gap: clamp(4px, 0.6vw, 12px);
}

/* =========================================================
   MOBILE SLIDING MENU — MUST REMAIN LAST
========================================================= */

@media (max-width: 992px) {

    #hudco-midheader .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .6);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
        z-index: 10990;
    }

        #hudco-midheader .mobile-menu-overlay.is-open {
            opacity: 1;
            visibility: visible;
        }


    #hudco-midheader .mobile-menu-panel {
        position: fixed;
        top: 0;
        right: 0;
        width: min(86vw, 360px);
        max-width: none;
        height: 100vh;
        height: 100dvh;
        padding: 58px 18px 24px;
        display: flex;
        flex-direction: column;
        background: #b30000;
        color: #fff;
        box-shadow: -5px 0 18px rgba(0, 0, 0, .3);
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(105%);
        transition: transform .3s ease;
        z-index: 11000;
    }

        #hudco-midheader .mobile-menu-panel.is-open {
            right: 0;
            transform: translateX(0);
        }


    #hudco-midheader .mobile-menu-close {
        position: absolute;
        top: 12px;
        right: 14px;
        width: 38px;
        height: 38px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        color: #fff;
        border: 0;
        border-radius: 50%;
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
        z-index: 11010;
    }


    /* Force menu back to vertical layout */

    #hudco-midheader .mobile-menu-panel .main-menu {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        #hudco-midheader .mobile-menu-panel .main-menu > .parent-menu {
            display: block;
            width: 100%;
            padding: 0;
            margin: 0;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, .25);
            border-radius: 0;
        }

            #hudco-midheader .mobile-menu-panel .main-menu > .parent-menu > a {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 13px 4px;
                color: #fff;
                font-size: .95rem;
                line-height: 1.3;
                text-decoration: none;
                white-space: normal;
            }

    #hudco-midheader .mobile-menu-panel .parent-menu:hover {
        background: transparent;
        transform: none;
    }


    /* Mobile submenu */

    #hudco-midheader .mobile-menu-panel .sub-menu {
        position: static !important;
        display: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 3px 0 8px;
        background: #970000;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    #hudco-midheader
    .mobile-menu-panel
    .has-children.open > .sub-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    #hudco-midheader .mobile-menu-panel .sub-menu li {
        width: 100%;
    }

        #hudco-midheader .mobile-menu-panel .sub-menu li a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 10px 12px;
            color: #ffecec;
            font-size: .88rem;
            line-height: 1.35;
            white-space: normal;
            border-bottom: 1px solid rgba(255, 255, 255, .14);
        }

            #hudco-midheader .mobile-menu-panel .sub-menu li a:hover {
                background: rgba(255, 255, 255, .1);
                color: #fff;
            }
    /* Create a stacking level above .topheader */
    #hudco-midheader {
        z-index: 2000;
    }

        #hudco-midheader .mobile-menu-overlay {
            z-index: 10990;
        }

        #hudco-midheader .mobile-menu-panel {
            z-index: 11000;
        }

        #hudco-midheader .mobile-menu-close {
            top: 12px;
            right: 14px;
            display: inline-flex;
            visibility: visible;
            opacity: 1;
            color: #fff;
            background: rgba(0, 0, 0, .18);
            z-index: 11010;
        }

            #hudco-midheader .mobile-menu-close:hover,
            #hudco-midheader .mobile-menu-close:focus-visible {
                background: rgba(0, 0, 0, .3);
            }

    body.mobile-menu-open .social-floating,
    body.mobile-menu-open .hudco-social,
    body.mobile-menu-open .social-card {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

}


/* =========================================================
   APPROVED DESKTOP HEADER COMPOSITION
   Top header overlays the upper-right of the mid header
========================================================= */

@media (min-width: 993px) {

    /*
       The fixed header becomes the positioning reference
       for the compact top utility bar.
    */

    .header-container {
        position: fixed;
    }


        /* -----------------------------------------
       TOP UTILITY BAR
    ----------------------------------------- */

        .header-container .topheader {
            position: absolute;
            top: 0;
            right: 0;
            width: fit-content;
            max-width: calc(100% - 310px);
            margin: 0;
            z-index: 1200;
        }


    /* -----------------------------------------
       COMPLETE MID HEADER
    ----------------------------------------- */

    #hudco-midheader {
        position: relative;
        width: 100%;
        padding: 0;
        background: #fff;
        z-index: 900;
    }


        #hudco-midheader .mid-header-inner {
            width: 100%;
            /*
           Compact but scalable approved height.
           About 90px around tablet/laptop widths,
           growing to no more than 106px.
        */

            height: clamp(90px, 6.6vw, 106px);
            min-height: 0;
            padding: 5px clamp(22px, 3vw, 50px);
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            gap: clamp(18px, 2.5vw, 38px);
            box-sizing: border-box;
        }


        /* -----------------------------------------
       BRANDING — occupies full header height
    ----------------------------------------- */

        #hudco-midheader .mid-header-brand {
            display: flex;
            align-items: center;
            flex: 0 1 auto;
            min-width: 0;
            height: 100%;
        }


        #hudco-midheader .hudco-citylogo {
            display: block;
            width: clamp(50px, 3.6vw, 58px);
            height: auto;
            max-width: 100%;
            margin: 0;
        }


        #hudco-midheader .hudco-brand-link {
            display: flex;
            align-items: center;
            flex: 0 0 auto;
            margin-right: clamp(8px, .8vw, 12px);
        }


        #hudco-midheader .hudco-brand-name {
            font-size: clamp(1.05rem, .82rem + .55vw, 1.5rem);
            line-height: 1.05;
        }


        #hudco-midheader .funding {
            min-height: 1.15em;
            margin-top: 3px;
            font-size: clamp(.60rem, .5rem + .25vw, .82rem);
            line-height: 1.15;
        }


        /* -----------------------------------------
       NAVIGATION — positioned below utility bar
    ----------------------------------------- */

        #hudco-midheader .mid-header-navigation {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            align-self: stretch;
            flex: 1 1 auto;
            min-width: 0;
            /*
           Reserves the upper portion for the
           utility header without increasing
           the total header height.
        */

            padding-top: 30px;
            box-sizing: border-box;
        }


        #hudco-midheader .menu-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            width: 100%;
            margin: 0;
            padding: 0;
            left: auto;
        }


        #hudco-midheader .main-menu {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            width: auto;
            margin: 0;
            padding: 0;
            gap: clamp(7px, .8vw, 16px);
        }


            #hudco-midheader
            .main-menu > .parent-menu {
                flex: 0 0 auto;
                width: auto;
                margin: 0;
                padding: 0;
            }


                #hudco-midheader
                .main-menu > .parent-menu > a {
                    padding: 7px clamp(4px, .45vw, 8px);
                    font-size: clamp(.80rem, .69rem + .25vw, .98rem);
                    line-height: 1.2;
                    white-space: nowrap;
                }
}