/* ==========================================================
   MONGOLIA-SWISS CCIS
   HEADER + LOGO + MAIN NAVIGATION
   ========================================================== */


/* ==========================================================
   1. BRAND COLOURS
   ========================================================== */

:root {
    --ccis-blue: #173D73;
    --ccis-dark-blue: #0F2F5D;
    --ccis-white: #FFFFFF;
    --ccis-red: #D9081F;
    --ccis-light-grey: #F5F7FA;
    --ccis-text: #202A35;
}


/* ==========================================================
   2. MAIN HEADER
   White background
   ========================================================== */

.container-header {
    background: var(--ccis-white) !important;
    background-image: none !important;
    color: var(--ccis-blue) !important;
}


/* ==========================================================
   3. LOGO AREA
   Center logo horizontally
   ========================================================== */

.container-header .grid-child:has(.navbar-brand) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* Logo container */

.container-header .navbar-brand {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;
}


/* Logo image */

.container-header .navbar-brand img {
    display: block !important;

    width: 100% !important;
    max-width: 680px !important;
    height: auto !important;

    margin: 0 auto !important;
}


/* ==========================================================
   4. NAVIGATION AREA

   IMPORTANT:
   Keep Joomla's container full width.
   The BLUE background itself is visually limited to 1320px.
   ========================================================== */

.container-header .container-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: transparent !important;

    background-image:
        linear-gradient(
            var(--ccis-blue),
            var(--ccis-blue)
        ) !important;

    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: min(1320px, 100%) 100% !important;
}


/* ==========================================================
   5. CENTER THE MENU INSIDE THE BLUE BAR
   ========================================================== */

.container-header .container-nav nav {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 1320px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;
}


/* ==========================================================
   6. MAIN MENU
   ========================================================== */

.container-header .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    justify-content: center !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 1320px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    gap: 0 !important;
}


/* ==========================================================
   7. EQUAL TOP-LEVEL MENU SECTIONS

   Every section receives equal space.
   ========================================================== */

.container-header .mod-menu > li {
    flex: 1 1 0 !important;
    min-