/* Taller header/sidebar-brand bar to fit the larger FCCF logo without overlapping content or menu */
:root {
    --fccf-header-height: 130px;
}

.navbar-header {
    height: var(--fccf-header-height) !important;
}

.header-item {
    height: var(--fccf-header-height);
}

.logo {
    line-height: var(--fccf-header-height) !important;
}

.main-content .content {
    margin-top: var(--fccf-header-height) !important;
}

.sidebar-menu-scroll {
    margin-top: var(--fccf-header-height) !important;
    height: calc(100% - calc(var(--fccf-header-height) + 26px)) !important;
}

.page-content {
    padding-top: var(--fccf-header-height) !important;
}

/* Sidebar logo: laid out here (not with d-flex, whose !important defeats the theme's
   logo-lg / logo-sm switching and produced a double logo when the menu was collapsed) */
body:not([data-sidebar-size=sm]):not([data-sidebar-size=md]) .vertical-menu .logo span.logo-lg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vertical-menu .logo span.logo-lg img {
    height: calc(var(--fccf-header-height) - 20px);
    width: auto;
    max-width: 100%;
}

/* Collapsed sidebar (70px): keep the small logo inside the brand box */
body[data-sidebar-size=sm] .navbar-brand-box {
    padding: 0 !important;
}

body[data-sidebar-size=sm] .navbar-brand-box img {
    height: auto;
    max-width: 56px;
}

@media (max-width: 991.98px) {
    :root {
        --fccf-header-height: 70px;
    }

    .vertical-menu {
        top: var(--fccf-header-height) !important;
        width: 270px !important;
        max-width: 85vw;
    }

    .navbar-header .navbar-brand-box {
        padding: 0 0.5rem;
    }

    .navbar-header .navbar-brand-box img {
        height: 48px;
        width: auto;
    }

    /* Dim the page behind the open menu; tapping it closes the menu */
    body.sidebar-enable::after {
        content: "";
        position: fixed;
        top: var(--fccf-header-height);
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1004;
    }
}

@media (max-width: 600px) {
    .navbar-header .dropdown .dropdown-menu {
        transform: translate3d(0px, var(--fccf-header-height), 0px) !important;
    }
}