/* Generic Serepok mobile header and drawer layout. */
@media (max-width: 1199.98px) {
    body .section-header {
        height: auto !important;
        min-height: 0 !important;
    }

    .section-header .nav-div,
    .section-header .navbar,
    .section-header #header {
        min-height: 64px !important;
        height: 64px !important;
    }

    /* CMS-generated header rules can switch the desktop utility group back on
       at 1101px. Keep the mobile header contract intact until Bootstrap's
       actual xl breakpoint begins at 1200px. */
    .section-header #header,
    .section-header #header > .container,
    .section-header .serepok-brand-wrap {
        flex-wrap: nowrap !important;
    }

    .section-header #header .serepok-primary-nav-wrap,
    .section-header #header .navbar-end {
        display: none !important;
    }

    .section-header #header > .container {
        width: 100% !important;
        max-width: none !important;
        min-height: 64px !important;
        height: 100% !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .section-header .serepok-brand-wrap {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        align-items: center !important;
    }

    .section-header .navbar-brand.serepok-brand,
    .section-header a.navbar-brand.serepok-brand {
        min-height: 0 !important;
        height: auto !important;
        align-self: center !important;
        align-items: center !important;
        line-height: 0 !important;
    }

    .section-header .navbar-brand.serepok-brand .serepok-brand-logo,
    .section-header a.navbar-brand.serepok-brand .serepok-brand-logo {
        display: block !important;
        max-height: 48px !important;
        height: auto !important;
        align-self: center !important;
    }

    .section-header .serepok-menu-toggle {
        display: inline-flex !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        align-self: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .section-header .serepok-menu-toggle-icon {
        display: block !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}