/* START Enhance mobile header */
@media (width <=960px) {
    #view-header #cms-header .mobile-header {
        justify-content: center;
        box-sizing: border-box;
        align-items: flex-start;
        gap: 10px 35px;
        padding-bottom: 10px !important;
        padding-top: 20px;

        &.menu-open {
            max-height: calc(100dvh + 48px) !important;

            .mobile-element:has(#schools-header, #explore-header) {
                display: none;
            }

            .menu-mobile {
                overflow-x: hidden;
                /* width: auto !important; */
                order: 3;
            }

            #schoolsbutton {
                display: none;
            }
        }

        .left-icon {
            position: static;
            transform: none;
            margin: 0;

            #closebutton {
                svg path {
                    fill: var(--primary-color);
                }
            }

            #menubutton {
                width: auto;
                height: auto;
                border-radius: none;

                .button-action-content {
                    align-items: center;
                }

                svg.hamburger {
                    width: 26px;
                    height: 26px;

                    rect {
                        fill: var(--primary-color);
                    }

                    path {
                        fill: var(--primary-color-contrast);
                    }
                }
            }
        }

        .main-content {
            min-width: 100%;
            box-sizing: border-box;
            order: -1;
            height: auto;
        }

        #schoolsbutton {
            position: static !important;
            transform: none;
        }

        .logo {
            margin: 0;
        }

        &:not(.menu-open):not(.shrink) {
            .logo {
                height: 60px;
            }
        }

        #schoolsbutton .button-action-content {
            display: flex;
            align-items: center;
            gap: 3px;
        }
    }

    #cms-header .right-mobile,
    #cms-header .header-container .right {
        display: none !important;
    }
}

@media (width <=500px) {
    #view-header #cms-header .mobile-header:has(.dynamicLink) {
        gap: 10px;
        align-items: center;

        .left-icon #menubutton svg.hamburger {
            width: 23px;
            height: 23px;
        }

        .menu .button-action-content,
        #schoolsbutton .menu-field::after {
            font-size: 15px;
        }

        .dynamicLink {
            padding: 4px;
            font-size: 15px;
        }
    }
}

/* END Enhance mobile header */