/* Responsive tuning for wide desktops and compact header behavior on medium screens */
@media (min-width: 1600px) {
    .app-container.container-xxl,
    .container-xxl {
        max-width: 1560px;
    }
}

@media (min-width: 1920px) {
    .app-container.container-xxl,
    .container-xxl {
        max-width: 1720px;
    }
}

/* Keep header the same height at all times, on load and after scroll (KTSticky swaps this var). */
:root,
[data-kt-app-header-sticky="on"] {
    --bs-app-header-height: 70px !important;
    --bs-app-header-height-actual: 70px !important;
}

#kt_app_header_container {
    min-height: 70px;
}

/* Menu labels must never wrap onto a second line, even on narrower laptop screens. */
#kt_app_header_menu .menu-item {
    flex-wrap: nowrap;
}

#kt_app_header_menu .menu-link,
#kt_app_header_menu .menu-title,
#kt_app_header_menu .menu-title span {
    white-space: nowrap;
}

#kt_app_header .header-brand {
    min-width: 0;
    max-width: 100%;
    gap: 0.5rem;
    flex-shrink: 1;
}

#kt_app_header .header-brand__mark {
    display: block;
    width: clamp(38px, 3vw, 50px);
    height: auto;
    max-height: 50px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%);
}

#kt_app_header .header-brand__name {
    color: #FFC700;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
    font-size: clamp(1.5rem, 2vw, 2.15rem);
    font-weight: 800;
}

@media (max-width: 1399.98px) {
    #kt_app_header_container {
        min-height: 70px;
    }

    #kt_app_header_wrapper {
        flex: 0 0 auto;
    }

    #kt_app_header .app-header-menu {
        margin-left: auto;
    }
}

@media (max-width: 1199.98px) {
    #kt_app_header_container {
        min-height: 70px;
    }

    #kt_app_header_menu .menu-link {
        min-height: 44px;
    }

    #kt_app_header .header-brand__logo {
        width: clamp(130px, 20vw, 200px);
    }
}

@media (max-width: 767.98px) {
    #kt_app_header .header-brand {
        max-width: 100%;
    }

    #kt_app_header .header-brand__logo {
        width: clamp(110px, 36vw, 170px);
        max-height: 46px;
    }
}

@media (max-width: 479.98px) {
    #kt_app_header .header-brand {
        max-width: 100%;
    }

    #kt_app_header .header-brand__logo {
        width: clamp(90px, 44vw, 140px);
        max-height: 40px;
    }
}