/* ==========================================
   MOBILE HEADER - CASSIOPEIA
   ========================================== */

@media (max-width: 767px) {

    /* Header background */
    header.container-header {
        position: relative !important;
        background: linear-gradient(110deg, #102b50, #183b65) !important;
        padding: 0 !important;
    }

    /* Logo row */
    header.container-header > .grid-child:not(.container-nav) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 12px 15px !important;
        gap: 10px !important;
    }

    /* Brand */
    header.container-header .navbar-brand {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header.container-header a.brand-logo {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }

    header.container-header a.brand-logo span {
        display: block !important;
        font-size: 0 !important;
        line-height: 1.2 !important;
    }

    header.container-header a.brand-logo span::before {
        content: "SPORTSBOOK";
        display: block;
        color: #ffffff;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: .02em;
    }

    header.container-header a.brand-logo span::after {
        content: "PHILADELPHIA";
        display: block;
        color: #29a9ff;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: .02em;
    }

    /* Navigation container */
    header.container-header > .grid-child.container-nav {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header.container-header .container-nav nav.navbar {
        display: block !important;
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hamburger: same row as logo */
    header.container-header .navbar-toggler {
        display: flex !important;
        position: absolute !important;
        top: 12px !important;
        right: 15px !important;
        z-index: 10 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 6px !important;
        color: #ffffff !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    header.container-header .navbar-toggler .icon-menu::before {
        color: #ffffff !important;
    }

    /* Menu closed */
    header.container-header .navbar-collapse:not(.show) {
        display: none !important;
    }

    /* Menu open: below logo row */
    header.container-header .navbar-collapse.show {
        display: block !important;
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 15px 10px !important;
    }

    /* Menu list */
    header.container-header .navbar-collapse .mod-menu {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header.container-header .navbar-collapse .metismenu-item {
        display: block !important;
        width: 100% !important;
    }

    header.container-header .navbar-collapse .nav-link,
    header.container-header .navbar-collapse a {
        display: block !important;
        color: #ffffff !important;
    }
}