/* =========================================
   FAMILY DENTAL CLINIC
   MOBILE HEADER
========================================= */

.mobile-menu {

    display: none;

}


@media (max-width: 900px) {


    /* =====================================
       MOBILE HEADER
    ===================================== */

    .header-inner {

        min-height: 70px;

    }


    .desktop-nav {

        display: none;

    }


    .menu-toggle {

        display: block;

        flex: 0 0 44px;

    }


    .brand {

        min-width: 0;

        gap: 7px;

    }


    .brand-logo {

        width: 49px;

        height: 49px;

    }


    .brand-text strong {

        font-size: 0.94rem;

    }


    .brand-text small {

        font-size: 0.56rem;

    }


    /* =====================================
       MOBILE MENU
    ===================================== */

    .mobile-menu[hidden] {

        display: none;

    }


    .mobile-menu:not([hidden]) {

        display: block;

        position: fixed;

        top: 70px;

        left: 0;

        right: 0;

        z-index: 999;

        max-height:
            calc(100dvh - 70px);

        overflow-y: auto;

        background: #ffffff;

        border-bottom:
            1px solid #dcebed;

        box-shadow:
            0 18px 35px
            rgba(0, 0, 0, 0.10);

    }


    .mobile-menu-inner {

        padding:
            12px 4%
            25px;

        display: grid;

        gap: 4px;

    }


    /* MENU TOP */

    .mobile-menu-top {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding:
            6px 4px 12px;

        color: #075a86;

        font-weight: 800;

    }


    /* CLOSE */

    .mobile-menu-close {

        width: 36px;

        height: 36px;

        border:
            1px solid #dce9ed;

        border-radius: 9px;

        background: #f7fcfd;

        color: #075a86;

        font-size: 24px;

        line-height: 1;

        cursor: pointer;

    }


    /* NORMAL LINKS */

    .mobile-menu-inner > a {

        padding:
            13px 12px;

        border-radius: 10px;

        color: #23465d;

        font-weight: 700;

    }


    .mobile-menu-inner > a:hover {

        background: #effbfd;

    }


    /* =====================================
       MOBILE SERVICES
    ===================================== */

    .mobile-service-menu {

        border-radius: 10px;

        overflow: hidden;

    }


    .mobile-service-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

    }


    .mobile-service-title {

        flex: 1;

        padding:
            13px 12px;

        color: #23465d;

        font-weight: 700;

    }


    .mobile-service-toggle {

        width: 46px;

        height: 46px;

        border: 0;

        background: transparent;

        color: #0875b9;

        font-size: 24px;

        cursor: pointer;

    }


    .mobile-service-toggle span {

        display: block;

        transition:
            transform 0.2s ease;

    }


    .mobile-service-menu.is-open
    .mobile-service-toggle span {

        transform: rotate(45deg);

    }


    /* SUBMENU */

    .mobile-service-submenu {

        padding:
            4px 0 8px 14px;

        border-left:
            2px solid #c9eef0;

        margin-left: 12px;

    }


    .mobile-service-submenu[hidden] {

        display: none;

    }


    .mobile-service-submenu a {

        display: block;

        padding:
            10px 12px;

        color: #426477;

        font-size: 0.9rem;

        font-weight: 600;

        border-radius: 8px;

    }


    .mobile-service-submenu a:hover {

        background: #effbfd;

        color: #0875b9;

    }


    /* MOBILE CTA */

    .mobile-menu-cta {

        margin-top: 10px;

        text-align: center;

        color: #ffffff !important;

        background:
            linear-gradient(
                135deg,
                #0875b9,
                #08a7b2
            );

        box-shadow:
            0 8px 20px
            rgba(8,117,185,.18);

    }

}