/**
 * =============================================================
 * PRCF GLOBAL DIGITAL INSTITUTION
 * HEADER.CSS
 * AUTHORITATIVE PRODUCTION HEADER
 * =============================================================
 *
 * Future Header presentation edits belong HERE only.
 * =============================================================
 */


/* =============================================================
   01. GLOBAL STACK
   ============================================================= */

.site-header {
    position: relative;
    z-index: 5000;
    overflow: visible;
}


.site-header .top-bar,
.site-header .main-header,
.site-header .main-header-inner {
    position: relative;
    overflow: visible;
}


/* =============================================================
   02. TOP UTILITY ROW
   ============================================================= */

.site-header .top-bar {
    z-index: 5300;

    border-bottom:
        1px solid
        rgba(127,127,127,.16);
}


.site-header
.top-bar-inner {
    min-height: 42px;
}


@media (min-width: 1101px) {

    .site-header
    .top-bar-inner {
        display: grid;

        grid-template-columns:
            minmax(0,1fr)
            auto
            minmax(0,1fr);

        align-items: center;

        gap: 16px;

        padding-top: 4px;
        padding-bottom: 4px;
    }


    .site-header
    .institution-label {
        grid-column: 1;

        justify-self: start;

        min-width: 0;

        margin: 0;

        font-size: .69rem;

        line-height: 1.4;

        opacity: .62;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .site-header
    .cida-header-languages {
        grid-column: 2;

        justify-self: center;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 4px;

        margin: 0;

        padding:
            0
            13px;

        border-left:
            1px solid
            rgba(127,127,127,.17);

        border-right:
            1px solid
            rgba(127,127,127,.17);
    }


    .site-header
    .display-controls {
        grid-column: 3;

        justify-self: end;

        display: inline-flex;

        align-items: center;

        gap: 5px;

        margin: 0;
    }

}


/* =============================================================
   03. LANGUAGE BUTTONS
   ============================================================= */

.cida-header-language-link,
.cida-header-language-more {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 30px;

    padding:
        5px
        9px;

    border:
        1px solid
        transparent;

    border-radius: 6px;

    background: transparent;

    color: inherit;

    font: inherit;

    font-size: .72rem;

    font-weight: 650;

    line-height: 1.4;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;
}


.cida-header-language-link:hover,
.cida-header-language-more:hover,
.cida-header-language-link:focus-visible,
.cida-header-language-more:focus-visible {
    background:
        rgba(127,127,127,.10);
}


.cida-header-language-link.active {
    background:
        rgba(127,127,127,.15);

    font-weight: 800;
}


/* =============================================================
   04. LANGUAGE POPUP
   ============================================================= */

.cida-header-more-languages {
    position: relative;
}


.cida-header-language-dropdown {
    position: absolute;

    top:
        calc(100% + 7px);

    right: 0;

    z-index: 10000;

    width:
        min(
            300px,
            calc(100vw - 24px)
        );

    max-height: 60vh;

    overflow-y: auto;

    padding: 10px;

    border:
        1px solid
        var(
            --border,
            rgba(127,127,127,.22)
        );

    border-radius: 9px;

    background:
        var(
            --surface,
            #121c2b
        );

    box-shadow:
        0
        18px
        44px
        rgba(0,0,0,.32);
}


.cida-header-language-dropdown[hidden] {
    display: none !important;
}


.cida-header-language-dropdown
.language-dropdown-title {
    padding:
        7px
        8px
        9px;

    font-size: .68rem;

    font-weight: 800;

    opacity: .70;
}


.cida-header-language-dropdown > button {
    display: flex;

    justify-content:
        space-between;

    gap: 10px;

    width: 100%;

    padding:
        9px
        8px;

    border: 0;

    background:
        transparent;

    color: inherit;

    text-align: left;
}


/* =============================================================
   05. DISPLAY CONTROLS
   ============================================================= */

.site-header
.display-controls {
    display: inline-flex;

    align-items: center;

    gap: 5px;
}


.site-header
.display-control {
    min-width: 32px;

    height: 30px;

    border-radius: 6px;
}


.site-header
.display-control.zoom-value {
    min-width: 48px;
}


/* =============================================================
   06. DESKTOP MAIN HEADER
   ============================================================= */

@media (min-width: 1101px) {

    .main-header {
        z-index: 5200;
    }


    /*
     * ONE COLUMN HEADER GRID
     *
     * Brand has its own centered row.
     * Navigation has its own centered row.
     *
     * No 1fr/auto/1fr brand-side calculations.
     */

    .main-header
    .main-header-inner {
        display: grid;

        grid-template-columns: 1fr;

        justify-items: center;

        align-items: center;

        width: 100%;

        padding-top: 9px;

        padding-bottom: 0;
    }


    /*
     * LOGO + TITLE
     */

    .main-header
    .brand {
        display: inline-flex;

        align-items: center;

        justify-content: center;

        justify-self: center;

        width: max-content;

        max-width:
            calc(100% - 40px);

        min-width: 0;

        margin:
            0
            auto;

        padding:
            4px
            0
            10px;

        gap: 14px;

        text-decoration: none;
    }


    .main-header
    .brand-mark {
        display: flex;

        align-items: center;

        justify-content: center;

        flex:
            0
            0
            46px;

        width: 46px;

        height: 46px;

        min-width: 46px;

        margin: 0;

        padding: 0;

        border: 0 !important;

        background:
            transparent;

        overflow: hidden;
    }


    .main-header
    .brand-mark img {
        display: block;

        flex: none;

        width: 46px;

        height: 46px;

        max-width: 46px;

        object-fit: contain;

        object-position: center;
    }


    .main-header
    .brand-text {
        display: flex;

        align-items: center;

        flex:
            0
            1
            auto;

        width: auto;

        min-width: 0;

        margin: 0;

        padding: 0;
    }


    .main-header
    .brand-text strong {
        display: block;

        width: auto;

        margin: 0;

        padding: 0;

        font-size:
            clamp(
                .90rem,
                .90vw,
                1.02rem
            );

        font-weight: 760;

        line-height: 1.25;

        letter-spacing: -.005em;

        white-space: nowrap;

        word-break: normal;

        overflow: visible;
    }


    html[lang="my"]
    .main-header
    .brand-text strong {
        font-size:
            clamp(
                .82rem,
                .80vw,
                .92rem
            );

        line-height: 1.32;
    }


    /*
     * no third title line
     */

    .main-header
    .brand-text span {
        display: none !important;
    }


    .main-header
    .mobile-menu-toggle {
        display: none;
    }

}


/* =============================================================
   07. DESKTOP NAVIGATION
   ============================================================= */

@media (min-width: 1101px) {

    .main-header
    .primary-navigation {
        position: relative;

        display: flex;

        flex-wrap: nowrap;

        align-items: stretch;

        justify-content: center;

        width: 100%;

        min-width: 0;

        min-height: 49px;

        margin: 0;

        padding: 0;

        gap:
            clamp(
                16px,
                1.35vw,
                26px
            );

        border-top:
            1px solid
            var(
                --border,
                rgba(127,127,127,.18)
            );

        overflow: visible;

        white-space: nowrap;
    }


    .main-header
    .primary-navigation > a,

    .main-header
    .primary-navigation
    .nav-parent-link {
        display: inline-flex;

        align-items: center;

        justify-content: center;

        flex:
            0
            0
            auto;

        min-height: 48px;

        margin: 0 !important;

        padding: 0;

        color: inherit;

        font-size:
            clamp(
                .78rem,
                .72vw,
                .87rem
            );

        font-weight: 700;

        line-height: 1.4;

        text-decoration: none;

        white-space: nowrap;
    }


    html[lang="my"]
    .main-header
    .primary-navigation {
        gap:
            clamp(
                11px,
                .95vw,
                18px
            );
    }


    html[lang="my"]
    .main-header
    .primary-navigation > a,

    html[lang="my"]
    .main-header
    .primary-navigation
    .nav-parent-link {
        font-size:
            clamp(
                .71rem,
                .64vw,
                .79rem
            );

        line-height: 1.65;
    }


    /*
     * NEWS NEVER LEAVES THE GROUP
     */

    .main-header
    .primary-navigation
    > a:last-child {
        margin-left: 0 !important;

        margin-right: 0 !important;
    }

}


/* =============================================================
   08. DESKTOP DROPDOWN ROOT
   ============================================================= */

@media (min-width: 1101px) {

    .primary-navigation
    .nav-dropdown {
        position: relative;

        display: flex;

        align-items: stretch;

        flex:
            0
            0
            auto;
    }


    .primary-navigation
    .nav-parent-row {
        display: inline-flex;

        align-items: center;

        min-height: 48px;

        gap: 3px;
    }


    .primary-navigation
    .nav-dropdown-toggle {
        appearance: none;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        flex:
            0
            0
            28px;

        width: 28px;

        height: 34px;

        margin: 0;

        padding: 0;

        border: 0;

        border-radius: 5px;

        background: transparent;

        color: inherit;

        font: inherit;

        font-size: .66rem;

        cursor: pointer;
    }


    .primary-navigation
    .nav-dropdown-toggle:hover,

    .primary-navigation
    .nav-dropdown-toggle:focus-visible {
        background:
            rgba(127,127,127,.10);
    }

}


/* =============================================================
   09. DESKTOP COMPACT DROPDOWN
   SINGLE COLUMN — NO EMPTY SECOND COLUMN
   ============================================================= */

@media (min-width: 1101px) {

    .primary-navigation
    .nav-submenu {
        position: absolute;

        top:
            calc(100% - 1px);

        left: 50%;

        z-index: 9000;

        display: block;

        width: max-content;

        min-width: 235px;

        max-width: 330px;

        margin: 0;

        padding:
            9px;

        border:
            1px solid
            var(
                --border,
                rgba(127,127,127,.22)
            );

        border-radius: 9px;

        background:
            var(
                --surface,
                #121c2b
            );

        box-shadow:
            0
            18px
            42px
            rgba(0,0,0,.30);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translate(
                -50%,
                5px
            );

        transition:
            opacity .12s ease,
            transform .12s ease,
            visibility .12s ease;
    }


    .primary-navigation
    .nav-submenu::before {
        content: "";

        position: absolute;

        left: 0;

        right: 0;

        top: -8px;

        height: 10px;
    }


    .primary-navigation
    .nav-dropdown:hover
    > .nav-submenu,

    .primary-navigation
    .nav-dropdown:focus-within
    > .nav-submenu,

    .primary-navigation
    .nav-dropdown.is-open
    > .nav-submenu {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translate(
                -50%,
                0
            );
    }


    .primary-navigation
    .nav-submenu > a {
        display: block;

        width: 100%;

        min-height: 40px;

        padding:
            9px
            10px;

        border-radius: 6px;

        color: inherit;

        font-size: .80rem;

        font-weight: 650;

        line-height: 1.5;

        text-decoration: none;

        white-space: normal;

        overflow-wrap: anywhere;
    }


    html[lang="my"]
    .primary-navigation
    .nav-submenu > a {
        font-size: .78rem;

        line-height: 1.7;
    }


    .primary-navigation
    .nav-submenu > a:hover,

    .primary-navigation
    .nav-submenu > a:focus-visible {
        background:
            rgba(127,127,127,.10);
    }

}


/* =============================================================
   10. MOBILE / TABLET
   ============================================================= */

@media (max-width: 1100px) {

    .site-header
    .institution-label {
        display: none;
    }


    /*
     * Utility row
     */

    .site-header
    .top-bar-inner {
        display: grid;

        grid-template-columns:
            minmax(0,1fr)
            auto;

        align-items: center;

        gap: 7px;

        min-height: 40px;

        padding-top: 3px;

        padding-bottom: 3px;
    }


    .site-header
    .cida-header-languages {
        display: flex;

        align-items: center;

        min-width: 0;

        gap: 2px;

        overflow-x: auto;

        scrollbar-width: none;
    }


    .site-header
    .cida-header-languages::-webkit-scrollbar {
        display: none;
    }


    .cida-header-language-link,
    .cida-header-language-more {
        flex: 0 0 auto;

        padding:
            4px
            6px;

        font-size: .67rem;
    }


    .site-header
    .display-controls {
        justify-self: end;

        gap: 3px;
    }


    .site-header
    .display-control {
        min-width: 28px;

        width: 28px;

        height: 28px;

        padding: 0;

        font-size: .66rem;
    }


    .site-header
    .display-control.zoom-value {
        min-width: 42px;

        width: 42px;
    }


    /*
     * Mobile identity row
     */

    .main-header
    .main-header-inner {
        display: flex;

        align-items: center;

        justify-content: space-between;

        min-height: 64px;

        padding-top: 8px;

        padding-bottom: 8px;
    }


    .main-header
    .brand {
        display: flex;

        align-items: center;

        flex:
            1
            1
            auto;

        min-width: 0;

        max-width:
            calc(100% - 54px);

        gap: 9px;

        margin: 0;

        padding: 0;

        text-decoration: none;
    }


    .main-header
    .brand-mark {
        flex:
            0
            0
            42px;

        width: 42px;

        height: 42px;

        min-width: 42px;

        padding: 0;

        border: 0 !important;

        background: transparent;

        overflow: hidden;
    }


    .main-header
    .brand-mark img {
        display: block;

        width: 42px;

        height: 42px;

        object-fit: contain;
    }


    .main-header
    .brand-text {
        min-width: 0;
    }


    .main-header
    .brand-text strong {
        display: block;

        margin: 0;

        padding: 0;

        font-size: .76rem;

        line-height: 1.45;

        white-space: normal;

        word-break: normal;
    }


    html[lang="my"]
    .main-header
    .brand-text strong {
        font-size: .73rem;

        line-height: 1.55;
    }


    .main-header
    .brand-text span {
        display: none !important;
    }


    .main-header
    .mobile-menu-toggle {
        display: inline-flex;

        align-items: center;

        justify-content: center;

        flex:
            0
            0
            42px;

        width: 42px;

        height: 42px;
    }


    /*
     * Main mobile menu.
     * main.js owns .open
     */

    .main-header
    .primary-navigation {
        position: absolute !important;

        top: 100% !important;

        left: 0 !important;

        right: 0 !important;

        z-index: 9500 !important;

        display: none !important;

        width: 100% !important;

        max-height:
            calc(100vh - 105px);

        overflow-y: auto;

        flex-direction:
            column !important;

        align-items:
            stretch !important;

        gap: 0 !important;

        margin: 0 !important;

        padding:
            8px
            13px
            14px !important;

        border-top:
            1px solid
            var(
                --border,
                rgba(127,127,127,.18)
            );

        border-bottom:
            1px solid
            var(
                --border,
                rgba(127,127,127,.18)
            );

        background:
            var(
                --surface,
                #121c2b
            ) !important;

        box-shadow:
            0
            18px
            42px
            rgba(0,0,0,.30);

        white-space: normal !important;
    }


    .main-header
    .primary-navigation.open {
        display: flex !important;
    }


    /*
     * ordinary mobile links
     */

    .main-header
    .primary-navigation > a {
        display: flex !important;

        align-items: center;

        width: 100%;

        min-height: 44px;

        margin: 0 !important;

        padding:
            9px
            7px !important;

        border-bottom:
            1px solid
            rgba(127,127,127,.14);

        font-size: .82rem;

        font-weight: 700;

        line-height: 1.55;

        text-decoration: none;

        white-space: normal !important;
    }


    /*
     * dropdown group
     */

    .main-header
    .primary-navigation
    .nav-dropdown {
        display: block !important;

        position: relative;

        width: 100%;
    }


    .main-header
    .primary-navigation
    .nav-parent-row {
        display: grid !important;

        grid-template-columns:
            minmax(0,1fr)
            44px;

        align-items: center;

        width: 100%;

        min-height: 44px;

        border-bottom:
            1px solid
            rgba(127,127,127,.14);
    }


    .main-header
    .primary-navigation
    .nav-parent-link {
        display: flex !important;

        align-items: center;

        width: 100%;

        min-width: 0;

        min-height: 44px;

        margin: 0;

        padding:
            9px
            7px !important;

        border: 0;

        font-size: .82rem;

        font-weight: 700;

        line-height: 1.55;

        text-decoration: none;

        white-space: normal !important;
    }


    html[lang="my"]
    .main-header
    .primary-navigation > a,

    html[lang="my"]
    .main-header
    .primary-navigation
    .nav-parent-link {
        font-size: .79rem;

        line-height: 1.7;
    }


    /*
     * big reliable touch target
     */

    .main-header
    .primary-navigation
    .nav-dropdown-toggle {
        appearance: none;

        display: inline-flex !important;

        align-items: center;

        justify-content: center;

        width: 40px;

        height: 40px;

        margin:
            0
            2px
            0
            auto;

        padding: 0;

        border:
            1px solid
            rgba(127,127,127,.20);

        border-radius: 6px;

        background:
            transparent;

        color: inherit;

        cursor: pointer;

        touch-action: manipulation;
    }


    .main-header
    .primary-navigation
    .nav-dropdown.is-open
    .nav-dropdown-toggle {
        background:
            rgba(127,127,127,.11);
    }


    /*
     * CLOSED submenu
     */

    .main-header
    .primary-navigation
    .nav-submenu {
        position: static !important;

        display: none !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        margin: 0 !important;

        padding:
            4px
            0
            7px
            13px !important;

        border: 0 !important;

        border-left:
            1px solid
            rgba(127,127,127,.22)
            !important;

        border-radius: 0 !important;

        background:
            transparent !important;

        box-shadow: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;
    }


    /*
     * OPEN submenu
     */

    .main-header
    .primary-navigation
    .nav-dropdown.is-open
    > .nav-submenu {
        display: block !important;
    }


    .main-header
    .primary-navigation
    .nav-submenu > a {
        display: flex !important;

        align-items: center;

        width: 100%;

        min-height: 39px;

        padding:
            8px
            9px !important;

        border: 0;

        border-radius: 5px;

        font-size: .78rem;

        line-height: 1.6;

        text-decoration: none;

        white-space: normal !important;
    }


    html[lang="my"]
    .main-header
    .primary-navigation
    .nav-submenu > a {
        font-size: .77rem;

        line-height: 1.72;
    }


    /*
     * Language popup stays attached to utility row.
     */

    .site-header
    .cida-header-language-dropdown {
        position: absolute !important;

        top:
            calc(100% + 6px)
            !important;

        right: 0 !important;

        left: auto !important;

        width:
            min(
                280px,
                calc(100vw - 20px)
            ) !important;

        transform: none !important;
    }

}


/* =============================================================
   11. ACCESSIBILITY
   ============================================================= */

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

    .site-header * {
        transition:
            none !important;
    }

}


/* =============================================================
   CIDA MOBILE HEADER POLISH
   Languages Popup + Hamburger Visibility
   ============================================================= */

@media (max-width: 1100px) {

    /*
    -------------------------------------------------------------
    1. TOP UTILITY ROW
    -------------------------------------------------------------
    */

    .site-header
    .top-bar {
        overflow: visible !important;
    }


    .site-header
    .top-bar-inner {
        position: relative;

        overflow: visible !important;
    }


    /*
     * CRITICAL FIX:
     *
     * Previous overflow-x:auto clipped the absolute
     * Languages popup on mobile.
     */

    .site-header
    .cida-header-languages {
        position: relative;

        overflow: visible !important;

        min-width: 0;

        white-space: nowrap;
    }


    .site-header
    .cida-header-more-languages {
        position: relative;

        overflow: visible !important;
    }


    /*
    -------------------------------------------------------------
    2. MOBILE LANGUAGE DROPDOWN
    -------------------------------------------------------------
    */

    .site-header
    .cida-header-language-dropdown {

        position: absolute !important;

        top:
            calc(100% + 8px)
            !important;

        right: 0 !important;

        left: auto !important;

        z-index: 20000 !important;


        width:
            min(
                285px,
                calc(100vw - 20px)
            ) !important;


        max-height: 58vh;

        overflow-y: auto !important;

        overflow-x: hidden !important;


        margin: 0 !important;


        transform: none !important;


        border:
            1px solid
            var(
                --border,
                rgba(127,127,127,.28)
            );


        border-radius: 9px;


        background:
            var(
                --surface,
                #121c2b
            ) !important;


        box-shadow:
            0
            18px
            46px
            rgba(0,0,0,.38);
    }


    .site-header
    .cida-header-language-dropdown[hidden] {
        display: none !important;
    }


    /*
     * Make Languages trigger easier to tap.
     */

    .site-header
    .cida-header-language-more {

        min-height: 30px;

        padding:
            4px
            7px;

        border:
            1px solid
            rgba(127,127,127,.18);

        border-radius: 5px;

        touch-action: manipulation;

        -webkit-tap-highlight-color:
            transparent;
    }


    .site-header
    .cida-header-language-more:hover,

    .site-header
    .cida-header-language-more:focus-visible {

        background:
            rgba(127,127,127,.12);
    }


    /*
    -------------------------------------------------------------
    3. HAMBURGER BUTTON
    -------------------------------------------------------------
    */

    .main-header
    .mobile-menu-toggle {

        position: relative;


        display: inline-flex !important;

        align-items: center;

        justify-content: center;


        flex:
            0
            0
            42px;


        width: 42px;

        height: 42px;


        margin: 0;

        padding: 0;


        border:
            1px solid
            rgba(255,255,255,.28)
            !important;


        border-radius: 7px;


        background:
            rgba(255,255,255,.035)
            !important;


        color:
            currentColor;


        font-size: 0 !important;


        cursor: pointer;


        touch-action: manipulation;


        box-shadow:
            inset
            0
            0
            0
            1px
            rgba(255,255,255,.025);


        -webkit-tap-highlight-color:
            transparent;
    }


    /*
     * Replace weak system ☰ glyph with
     * three strong CSS lines.
     */

    .main-header
    .mobile-menu-toggle::before {

        content: "";


        display: block;


        width: 18px;

        height: 12px;


        border-top:
            2px solid
            currentColor;


        border-bottom:
            2px solid
            currentColor;


        box-sizing:
            border-box;


        opacity: .96;
    }


    .main-header
    .mobile-menu-toggle::after {

        content: "";


        position: absolute;


        left: 50%;

        top: 50%;


        width: 18px;

        height: 2px;


        background:
            currentColor;


        transform:
            translate(
                -50%,
                -50%
            );


        border-radius: 2px;


        opacity: .96;
    }


    .main-header
    .mobile-menu-toggle:hover,

    .main-header
    .mobile-menu-toggle:focus-visible {

        background:
            rgba(255,255,255,.09)
            !important;


        border-color:
            rgba(255,255,255,.46)
            !important;
    }


    .main-header
    .mobile-menu-toggle:focus-visible {

        outline:
            2px solid
            currentColor;

        outline-offset:
            2px;
    }


    /*
     * Visual open state.
     */

    .main-header
    .mobile-menu-toggle[aria-expanded="true"] {

        background:
            rgba(255,255,255,.11)
            !important;


        border-color:
            rgba(255,255,255,.50)
            !important;
    }

}


/* =============================================================
   SMALL MOBILE
   ============================================================= */

@media (max-width: 520px) {

    /*
     * Keep utility controls within narrow phones
     * without clipping Languages popup.
     */

    .site-header
    .cida-header-language-link,

    .site-header
    .cida-header-language-more {

        padding:
            4px
            5px;

        font-size: .64rem;
    }


    html[lang="my"]
    .site-header
    .cida-header-language-link,

    html[lang="my"]
    .site-header
    .cida-header-language-more {

        font-size: .62rem;
    }


    .site-header
    .display-control {

        min-width: 27px;

        width: 27px;

        height: 27px;
    }


    .site-header
    .display-control.zoom-value {

        min-width: 40px;

        width: 40px;
    }


    .site-header
    .cida-header-language-dropdown {

        width:
            min(
                270px,
                calc(100vw - 16px)
            ) !important;
    }

}


/* =============================================================
   CIDA DESKTOP BRAND GEOMETRY FINAL
   ============================================================= */

@media (min-width: 1101px) {

    /*
     * Logo and institutional title use two independent cells.
     * The combined group itself is centered.
     */

    .main-header .brand {

        position: relative;

        display: grid !important;

        grid-template-columns:
            46px
            auto;

        align-items: center;

        justify-content: center;

        justify-self: center;

        column-gap: 18px;

        width: max-content;

        max-width:
            calc(100% - 40px);

        min-width: 0;

        margin:
            0
            auto !important;

        padding:
            4px
            0
            10px !important;

        transform: none !important;
    }


    /*
     * Dedicated logo cell.
     */

    .main-header .brand-mark {

        grid-column: 1;

        position: relative;

        display: block !important;

        flex: none !important;

        width: 46px !important;

        min-width: 46px !important;

        max-width: 46px !important;

        height: 46px !important;

        min-height: 46px !important;

        max-height: 46px !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

        overflow: hidden !important;

        transform: none !important;
    }


    /*
     * Logo artwork cannot enter title cell.
     */

    .main-header .brand-mark img {

        position: static !important;

        display: block !important;

        width: 46px !important;

        min-width: 46px !important;

        max-width: 46px !important;

        height: 46px !important;

        min-height: 46px !important;

        max-height: 46px !important;

        margin: 0 !important;

        padding: 0 !important;

        object-fit: contain !important;

        object-position: center !important;

        transform: none !important;

        inset: auto !important;
    }


    /*
     * Dedicated title cell.
     */

    .main-header .brand-text {

        grid-column: 2;

        position: relative;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start;

        width: auto !important;

        min-width: 0 !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        transform: none !important;
    }


    .main-header .brand-text strong {

        position: relative;

        display: block;

        width: auto;

        margin: 0 !important;

        padding: 0 !important;

        line-height: 1.25;

        white-space: nowrap;

        transform: none !important;
    }


    /*
     * Burmese script needs slightly more physical space
     * between logo artwork and glyphs.
     */

    html[lang="my"]
    .main-header .brand {

        column-gap: 20px;
    }


    html[lang="my"]
    .main-header
    .brand-text strong {

        line-height:
            1.28 !important;
    }

}


/* =============================================================
   CIDA BURMESE BRAND OVERLAP FINAL FIX
   ============================================================= */

@media (min-width: 1101px) {

    /*
     * Completely isolate brand geometry from older global CSS.
     */

    .main-header .brand {

        position: static !important;

        display: grid !important;

        grid-template-columns:
            46px
            max-content !important;

        align-items: center !important;

        justify-content: center !important;

        justify-items: start !important;

        justify-self: center !important;

        column-gap: 20px !important;

        width: max-content !important;

        max-width:
            calc(100% - 40px) !important;

        min-width: 0 !important;

        margin:
            0
            auto !important;

        padding:
            4px
            0
            10px !important;

        inset: auto !important;

        left: auto !important;

        right: auto !important;

        top: auto !important;

        bottom: auto !important;

        transform: none !important;
    }


    /*
     * LOGO CELL
     */

    .main-header .brand-mark {

        grid-column: 1 !important;

        grid-row: 1 !important;

        position: relative !important;

        display: block !important;

        width: 46px !important;

        min-width: 46px !important;

        max-width: 46px !important;

        height: 46px !important;

        min-height: 46px !important;

        max-height: 46px !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        inset: auto !important;

        left: auto !important;

        right: auto !important;

        top: auto !important;

        bottom: auto !important;

        transform: none !important;

        z-index: 1 !important;
    }


    .main-header .brand-mark img {

        position: absolute !important;

        inset: 0 !important;

        display: block !important;

        width: 46px !important;

        min-width: 46px !important;

        max-width: 46px !important;

        height: 46px !important;

        min-height: 46px !important;

        max-height: 46px !important;

        margin: 0 !important;

        padding: 0 !important;

        object-fit: contain !important;

        object-position: center !important;

        transform: none !important;
    }


    /*
     * TITLE CELL
     */

    .main-header .brand-text {

        grid-column: 2 !important;

        grid-row: 1 !important;

        position: static !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        width: max-content !important;

        min-width: 0 !important;

        max-width: none !important;

        height: auto !important;

        min-height: 46px !important;

        margin: 0 !important;

        padding: 0 !important;

        inset: auto !important;

        left: auto !important;

        right: auto !important;

        top: auto !important;

        bottom: auto !important;

        transform: none !important;

        z-index: 2 !important;
    }


    .main-header
    .brand-text strong {

        position: static !important;

        display: block !important;

        width: max-content !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 0 !important;

        inset: auto !important;

        left: auto !important;

        right: auto !important;

        top: auto !important;

        bottom: auto !important;

        transform: none !important;

        translate: none !important;

        text-indent: 0 !important;

        white-space: nowrap !important;

        overflow: visible !important;
    }


    /*
     * BURMESE-SPECIFIC
     *
     * Extra physical separation so Burmese glyphs
     * cannot visually collide with the logo.
     */

    html[lang="my"]
    .main-header .brand {

        grid-template-columns:
            46px
            max-content !important;

        column-gap: 28px !important;
    }


    html[lang="my"]
    .main-header
    .brand-text {

        margin-left: 0 !important;

        padding-left: 0 !important;
    }


    html[lang="my"]
    .main-header
    .brand-text strong {

        margin-left: 0 !important;

        padding-left: 0 !important;

        font-size:
            clamp(
                .82rem,
                .80vw,
                .92rem
            ) !important;

        line-height:
            1.30 !important;

        letter-spacing:
            0 !important;
    }

}


/* =============================================================
   CIDA HEADER BRAND SCALE + CENTER FINAL
   ============================================================= */

@media (min-width: 1101px) {

    /*
     * Give institutional identity its own balanced visual zone.
     */

    .main-header
    .main-header-inner {

        padding-top: 0 !important;

        padding-bottom: 0 !important;
    }


    /*
     * Bigger + vertically centered brand lockup.
     */

    .main-header
    .brand {

        display: grid !important;

        grid-template-columns:
            58px
            max-content !important;

        align-items: center !important;

        justify-content: center !important;

        justify-self: center !important;

        column-gap: 20px !important;

        width: max-content !important;

        max-width:
            calc(100% - 60px) !important;

        min-height: 104px !important;

        margin:
            0
            auto !important;

        padding:
            20px
            0
            20px !important;

        transform: none !important;
    }


    /*
     * Larger logo.
     */

    .main-header
    .brand-mark {

        width: 58px !important;

        min-width: 58px !important;

        max-width: 58px !important;

        height: 58px !important;

        min-height: 58px !important;

        max-height: 58px !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        align-self: center !important;
    }


    .main-header
    .brand-mark img {

        width: 58px !important;

        min-width: 58px !important;

        max-width: 58px !important;

        height: 58px !important;

        min-height: 58px !important;

        max-height: 58px !important;

        margin: 0 !important;

        padding: 0 !important;

        object-fit: contain !important;

        object-position: center !important;

        transform: none !important;
    }


    /*
     * Title area.
     */

    .main-header
    .brand-text {

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        min-height: 58px !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /*
     * English institutional title.
     */

    .main-header
    .brand-text strong {

        margin: 0 !important;

        padding: 0 !important;

        font-size:
            clamp(
                1.06rem,
                1.06vw,
                1.22rem
            ) !important;

        font-weight: 760 !important;

        line-height: 1.32 !important;

        white-space: nowrap !important;

        transform: none !important;
    }


    /*
     * Myanmar title:
     * large enough to have the same institutional weight.
     */

    html[lang="my"]
    .main-header
    .brand {

        grid-template-columns:
            58px
            max-content !important;

        column-gap: 22px !important;
    }


    html[lang="my"]
    .main-header
    .brand-text strong {

        font-size:
            clamp(
                .98rem,
                1.00vw,
                1.14rem
            ) !important;

        line-height: 1.42 !important;

        letter-spacing: 0 !important;
    }


    /*
     * Keep navigation clearly separated from brand row.
     */

    .main-header
    .primary-navigation {

        margin-top: 0 !important;
    }

}


/* =============================================================
   VERY LARGE DESKTOP
   ============================================================= */

@media (min-width: 1600px) {

    .main-header
    .brand {

        grid-template-columns:
            62px
            max-content !important;

        min-height: 112px !important;

        column-gap: 22px !important;
    }


    .main-header
    .brand-mark,
    .main-header
    .brand-mark img {

        width: 62px !important;

        min-width: 62px !important;

        max-width: 62px !important;

        height: 62px !important;

        min-height: 62px !important;

        max-height: 62px !important;
    }


    .main-header
    .brand-text strong {

        font-size: 1.18rem !important;
    }


    html[lang="my"]
    .main-header
    .brand-text strong {

        font-size: 1.08rem !important;
    }

}