/*
 * HANDL — Premium Mobile Main Menu
 * v1.0.0
 *
 * Desktop navigation is intentionally left untouched.
 */

.handl-mobile-only,
.handl-mobile-nav-icon {
    display: none !important;
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 991px) {

    /*
     * The :has() selector lets us style only the public menu containing
     * the HANDL primary-navigation items, without relying on a Homey
     * theme_location name.
     */
    ul:has(> li.handl-mobile-nav-find-service) {
        box-sizing: border-box !important;
        width: calc(100% - 16px) !important;
        max-width: 720px !important;
        margin: 8px auto 18px !important;
        padding: 18px 18px 22px !important;

        background: #ffffff !important;
        border: 1px solid rgba(17, 24, 39, .08) !important;
        border-radius: 18px !important;

        box-shadow:
            0 18px 45px rgba(15, 23, 42, .11) !important;

        overflow: hidden !important;
    }

    ul:has(> li.handl-mobile-nav-find-service) > li {
        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       EXISTING FIVE PUBLIC LINKS
       ----------------------------------------------------- */

    li.handl-mobile-nav-item {
        display: block !important;
        float: none !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
    }

    li.handl-mobile-nav-item > a {
        position: relative !important;

        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) 22px !important;
        align-items: center !important;
        gap: 15px !important;

        width: 100% !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 7px 2px !important;

        color: #10182b !important;
        background: transparent !important;
        border: 0 !important;

        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;

        white-space: normal !important;

        transition:
            color .18s ease,
            transform .18s ease !important;
    }

    li.handl-mobile-nav-item > a::after {
        content: "›" !important;

        grid-column: 3 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 22px !important;
        height: 22px !important;

        color: #4b5563 !important;

        font-size: 30px !important;
        font-weight: 300 !important;
        line-height: 1 !important;

        transform: translateY(-1px) !important;
    }

    li.handl-mobile-nav-item > a:hover,
    li.handl-mobile-nav-item > a:focus {
        color: #5d3df0 !important;
        transform: translateX(2px) !important;
    }

    li.handl-mobile-nav-item > a:hover::after,
    li.handl-mobile-nav-item > a:focus::after {
        color: #5d3df0 !important;
    }

    .handl-mobile-nav-icon {
        grid-column: 1 !important;

        display: grid !important;
        place-items: center !important;

        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #272064 !important;
        background: #f8f8fb !important;
        border: 1px solid #efedf5 !important;
        border-radius: 50% !important;
    }

    .handl-mobile-nav-icon svg {
        display: block !important;
        width: 23px !important;
        height: 23px !important;

        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .handl-mobile-nav-label {
        grid-column: 2 !important;
        display: block !important;
        min-width: 0 !important;
    }

    li.handl-mobile-nav-for-handlers {
        padding-bottom: 15px !important;
        margin-bottom: 0 !important;

        border-bottom: 1px solid #ececf2 !important;
    }


    /* -----------------------------------------------------
       MOBILE-ONLY SECTIONS
       ----------------------------------------------------- */

    .handl-mobile-only {
        display: block !important;
    }

    li.handl-mobile-menu-section {
        float: none !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
        border: 0 !important;
        background: transparent !important;
    }

    li.handl-mobile-menu-section > span {
        display: block !important;

        margin: 0 !important;
        padding: 20px 2px 11px !important;

        color: #777d8f !important;

        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: .18em !important;
        text-transform: uppercase !important;
    }


    /* -----------------------------------------------------
       PREMIUM PORTAL CARDS
       ----------------------------------------------------- */

    li.handl-mobile-menu-portal {
        display: block !important;
        float: none !important;

        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;

        list-style: none !important;
        border: 0 !important;
        background: transparent !important;
    }

    li.handl-mobile-menu-portal > a {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) 24px !important;
        align-items: center !important;
        gap: 14px !important;

        width: 100% !important;
        min-height: 94px !important;
        margin: 0 !important;
        padding: 14px 16px !important;

        border-radius: 16px !important;

        text-decoration: none !important;
        white-space: normal !important;

        box-shadow:
            0 7px 18px rgba(31, 25, 69, .045) !important;

        transition:
            transform .18s ease,
            box-shadow .18s ease,
            background .18s ease !important;
    }

    li.handl-mobile-menu-portal > a:hover,
    li.handl-mobile-menu-portal > a:focus {
        transform: translateY(-1px) !important;
        box-shadow:
            0 11px 24px rgba(31, 25, 69, .08) !important;
    }

    .handl-mobile-menu-portal__icon {
        display: grid !important;
        place-items: center !important;

        width: 56px !important;
        height: 56px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 50% !important;
    }

    .handl-mobile-menu-portal__icon svg {
        display: block !important;
        width: 27px !important;
        height: 27px !important;

        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .handl-mobile-menu-portal__copy {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;

        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .handl-mobile-menu-portal__copy strong {
        display: block !important;

        margin: 0 0 5px !important;
        padding: 0 !important;

        font-size: 16px !important;
        font-weight: 750 !important;
        line-height: 1.2 !important;
    }

    .handl-mobile-menu-portal__copy > span {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #5f6678 !important;

        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.38 !important;
    }

    .handl-mobile-menu-portal__arrow {
        display: grid !important;
        place-items: center !important;

        width: 24px !important;
        height: 24px !important;
    }

    .handl-mobile-menu-portal__arrow svg {
        display: block !important;
        width: 22px !important;
        height: 22px !important;

        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }


    /* HANDLORD — violet */

    li.handl-mobile-menu-portal--handlord > a {
        color: #5f3be8 !important;
        background: #fbfaff !important;
        border: 1px solid #d9d0ff !important;
    }

    li.handl-mobile-menu-portal--handlord .handl-mobile-menu-portal__icon {
        color: #613cf0 !important;
        background: #f0ebff !important;
    }

    li.handl-mobile-menu-portal--handlord > a:hover,
    li.handl-mobile-menu-portal--handlord > a:focus {
        background: #f7f4ff !important;
    }


    /* HANDLER — orange */

    li.handl-mobile-menu-portal--handler > a {
        color: #ef4a18 !important;
        background: #fffaf7 !important;
        border: 1px solid #ffd0bf !important;
    }

    li.handl-mobile-menu-portal--handler .handl-mobile-menu-portal__icon {
        color: #f04a18 !important;
        background: #fff0e9 !important;
    }

    li.handl-mobile-menu-portal--handler > a:hover,
    li.handl-mobile-menu-portal--handler > a:focus {
        background: #fff6f1 !important;
    }


    /* -----------------------------------------------------
       SUPPORT LINKS
       ----------------------------------------------------- */

    li.handl-mobile-menu-section--support {
        margin-top: 5px !important;
        padding-top: 4px !important;

        border-top: 1px solid #ececf2 !important;
    }

    li.handl-mobile-menu-section--support > span {
        padding-top: 18px !important;
    }

    li.handl-mobile-menu-support-link {
        display: block !important;
        float: none !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
        border: 0 !important;
        background: transparent !important;
    }

    li.handl-mobile-menu-support-link > a {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) 22px !important;
        align-items: center !important;
        gap: 13px !important;

        width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding: 5px 2px !important;

        color: #10182b !important;
        background: transparent !important;
        border: 0 !important;

        font-size: 14px !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;

        text-decoration: none !important;
        white-space: normal !important;
    }

    .handl-mobile-menu-support-link__icon {
        display: grid !important;
        place-items: center !important;

        width: 38px !important;
        height: 38px !important;

        color: #172033 !important;
        background: #fafafa !important;
        border: 1px solid #e7e8ec !important;
        border-radius: 50% !important;
    }

    .handl-mobile-menu-support-link__icon svg,
    .handl-mobile-menu-support-link__arrow svg {
        display: block !important;
        width: 19px !important;
        height: 19px !important;

        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.75 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .handl-mobile-menu-support-link__arrow {
        display: grid !important;
        place-items: center !important;
        color: #545b6a !important;
    }

    li.handl-mobile-menu-support-link > a:hover,
    li.handl-mobile-menu-support-link > a:focus {
        color: #5f3be8 !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    ul:has(> li.handl-mobile-nav-find-service) {
        width: calc(100% - 12px) !important;
        margin-top: 6px !important;
        padding: 14px 13px 18px !important;
        border-radius: 15px !important;
    }

    li.handl-mobile-nav-item > a {
        grid-template-columns: 44px minmax(0, 1fr) 18px !important;
        gap: 12px !important;
        min-height: 62px !important;

        font-size: 16px !important;
    }

    .handl-mobile-nav-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .handl-mobile-nav-icon svg {
        width: 21px !important;
        height: 21px !important;
    }

    li.handl-mobile-menu-portal > a {
        grid-template-columns: 52px minmax(0, 1fr) 20px !important;
        gap: 12px !important;

        min-height: 88px !important;
        padding: 12px 13px !important;
    }

    .handl-mobile-menu-portal__icon {
        width: 50px !important;
        height: 50px !important;
    }

    .handl-mobile-menu-portal__copy strong {
        font-size: 15px !important;
    }

    .handl-mobile-menu-portal__copy > span {
        font-size: 11px !important;
    }
}


/* =========================================================
   v1.0.1 — MOBILE MENU STACKING FIX
   Keep the HANDL mobile navigation above page-level search
   controls (including the "All Services" custom selector).
   ========================================================= */

@media (max-width: 991px) {

    /*
     * HANDL search dropdowns intentionally use very high z-index values.
     * The public mobile header/menu therefore needs its own higher
     * stacking context so page controls can never bleed through it.
     */
    #homey_nav_sticky,
    header.header-nav,
    .header-nav,
    .header-mobile,
    .mobile-header {
        z-index: 2000001 !important;
    }

    nav:has(ul > li.handl-mobile-nav-find-service),
    .navbar-collapse:has(ul > li.handl-mobile-nav-find-service),
    .nav-dropdown:has(ul > li.handl-mobile-nav-find-service),
    .main-nav-dropdown:has(ul > li.handl-mobile-nav-find-service) {
        position: relative !important;
        z-index: 2000002 !important;
        isolation: isolate !important;
    }

    ul:has(> li.handl-mobile-nav-find-service) {
        position: relative !important;
        z-index: 2000003 !important;
        isolation: isolate !important;
    }

    /*
     * Extra protection while a Bootstrap/Homey mobile collapse is open.
     * This does not alter the search UI when the menu is closed.
     */
    body:has(.collapse.in ul > li.handl-mobile-nav-find-service)
    .handl-search-premium-shell,
    body:has(.show ul > li.handl-mobile-nav-find-service)
    .handl-search-premium-shell {
        z-index: 1 !important;
    }
}