/* ============================================================
   Mind Sport brand header  -  added 2026-09-14
   Purple header + white menu text + centered one-line menu
   ============================================================ */

.header
{
    background-color: #573175;
}

.header .logo img
{
    max-height: 76px;
    width: auto;
    max-width: 100%;
}

/* footer logo (images/logo-footer.png) */
.footer .logo-title img
{
    max-width: 120px;
    height: auto;
}

/* ---------- desktop ---------- */
@media (min-width: 992px)
{
    /* pull the header contents closer to the edges */
    .header .container-fluid
    {
        padding-left: 20px;
        padding-right: 20px;
    }

    .header .container-fluid > .row
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    /* logo column keeps its width, menu column takes the rest */
    .header .container-fluid > .row > .col-md-2
    {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 130px;
    }
    .header .container-fluid > .row > .col-md-8
    {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    /* menu fills its column and sits in the middle instead of floating */
    #cssmenu
    {
        float: none;
        width: 100%;
        margin-top: 0;
    }

    /* keep every item on a single centered line */
    #cssmenu > ul
    {
        white-space: nowrap;
        text-align: center;
    }

    /* dropdowns follow the reading direction, not the centering */
    #cssmenu > ul ul
    {
        text-align: start;
    }

    #cssmenu > ul > li
    {
        vertical-align: middle;
    }

    #cssmenu > ul > li > a
    {
        color: #fff;
        padding-left: 12px;
        padding-right: 12px;
    }

    #cssmenu > ul > li.active > a,
    #cssmenu > ul > li:hover > a
    {
        color: #fcb70c;
    }

    .header-cources
    {
        margin-right: 12px !important;
        margin-left: 12px !important;
    }

    /* black "all courses" icon -> white */
    .header-cources a img
    {
        -webkit-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1);
        vertical-align: middle;
    }
}

/* ---------- wide desktop: offset the logo column so the menu is
             centered on the header, not just on its own column ---------- */
@media (min-width: 1200px)
{
    .header .container-fluid > .row > .col-md-8
    {
        -webkit-padding-end: 130px;
        padding-inline-end: 130px;
    }
}

/* ---------- narrow desktop: tighten spacing so the menu still fits
             one line ---------- */
@media (min-width: 992px) and (max-width: 1199px)
{
    #cssmenu > ul > li > a
    {
        padding-left: 7px;
        padding-right: 7px;
    }
    .header-cources
    {
        margin-right: 6px !important;
        margin-left: 6px !important;
    }
}

/* ---------- mobile: white hamburger + room for the bigger logo ---------- */
@media (max-width: 991px)
{
    #cssmenu #menu-button::after
    {
        background: #fff;
    }
    #cssmenu #menu-button::before
    {
        border-top-color: #fff;
        border-bottom-color: #fff;
    }
}

@media (max-width: 767px)
{
    .header .logo
    {
        width: 100px;
    }
}