/* =========================================================
   CRAFT SPACE STUDIOS
   SHARED PUBLIC NAVIGATION
   ========================================================= */


/* =========================================================
   MENU WRAPPERS
   ========================================================= */

.menu,
.login-menu {
    --menu-color: #81452d;

    position: relative;
}


/* =========================================================
   MOBILE / TABLET MENU BUTTON
   ========================================================= */

.menu-button,
.login-menu-button {
    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 10px 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid var(--menu-color);
    border-radius: 10px;

    background: var(--menu-color);
    color: #ffffff;

    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(91, 45, 26, 0.14);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}


.menu-button:hover,
.login-menu-button:hover {
    border-color: var(--heading-dark, #472113);

    background: var(--heading-dark, #472113);
}


.menu-button[aria-expanded="true"],
.login-menu-button[aria-expanded="true"] {
    border-color: var(--heading-dark, #472113);

    background: var(--heading-dark, #472113);
}


.menu-button:focus-visible,
.login-menu-button:focus-visible {
    outline: 3px solid rgba(165, 95, 61, 0.3);
    outline-offset: 3px;
}


.menu-icon,
.login-menu-icon {
    font-size: 18px;
    line-height: 1;
}


/* =========================================================
   MOBILE DROPDOWN
   ========================================================= */

.site-header .dropdown-menu,
.login-header .login-dropdown-menu {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    z-index: 1000;

    width: 190px;
    min-width: 190px;

    margin: 0;
    padding: 8px;

    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;

    background: var(--cream, #fbf8f1);

    border: 1px solid rgba(73, 62, 48, 0.18);
    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(55, 43, 31, 0.14);
}


.site-header .dropdown-menu.open,
.login-header .login-dropdown-menu.open {
    display: flex;
}


/* =========================================================
   MOBILE LINKS
   ========================================================= */

.site-header .dropdown-menu a,
.login-header .login-dropdown-menu a {
    margin: 0;

    padding: 11px 14px;

    display: block;

    border-radius: 7px;

    color: var(--muted, #746d62);

    text-decoration: none;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


.site-header .dropdown-menu a:hover,
.login-header .login-dropdown-menu a:hover {
    background: rgba(165, 95, 61, 0.08);

    color: var(--heading-dark, #472113);
}

.site-header .dropdown-menu a.active,
.login-header .login-dropdown-menu a.active {
    color: var(--heading-dark, #472113);

    font-weight: 600;
}


/* =========================================================
   MOBILE
   NO ACTIVE UNDERLINE
   ========================================================= */

@media (max-width: 999px) {

    .site-header .dropdown-menu a::after,
    .login-header .login-dropdown-menu a::after {
        display: none !important;
        content: none !important;
    }

}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

@media (min-width: 1000px) {


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

    .site-header,
    .login-header {
        gap: clamp(26px, 3vw, 48px);
    }


    /* =====================================================
       MENU AREA
       ===================================================== */

    .site-header .menu,
    .login-header .login-menu {
        flex: 1 1 auto;

        min-width: 0;
    }


    /* =====================================================
       HIDE HAMBURGER
       ===================================================== */

    .site-header .menu-button,
    .login-header .login-menu-button {
        display: none;
    }


    /* =====================================================
       FULL NAVBAR
       ===================================================== */

    .site-header .dropdown-menu,
    .site-header .dropdown-menu.open,
    .login-header .login-dropdown-menu,
    .login-header .login-dropdown-menu.open {
        position: static;

        top: auto;
        right: auto;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: row;
        align-items: center;

        gap: clamp(22px, 1.8vw, 32px);

        background: transparent;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }


    /* =====================================================
       CENTRE MAIN NAVIGATION
       ===================================================== */

    .site-header .dropdown-menu > a:first-child,
    .login-header .login-dropdown-menu > a:first-child {
        margin-left: auto;
    }


    /* =====================================================
       NORMAL NAVIGATION LINKS
       ===================================================== */

    .site-header .dropdown-menu a,
    .login-header .login-dropdown-menu a {
        position: relative;

        flex: 0 0 auto;

        margin-top: 0;
        margin-bottom: 0;

        padding: 10px 0;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border: 0;
        border-radius: 0;

        background: transparent;

        color: var(--muted, #746d62);

        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;

        text-decoration: none;
        white-space: nowrap;

        transition:
            color 0.2s ease;
    }


    .site-header .dropdown-menu a:hover,
    .login-header .login-dropdown-menu a:hover {
        background: transparent;

        color: var(--ink, #29251f);
    }


    /* =====================================================
       NAVIGATION UNDERLINE
       ONLY FOR:
       Home
       Services
       About
       My Bookings
       Book Now
       Contact Us
       ===================================================== */

    .site-header
    .dropdown-menu
    a:not(.nav-auth):not(.nav-login):not(.nav-signup):not(.nav-logout):not(.nav-portal):not([href$="/login"]):not([href$="/signup"])::after,

    .login-header
    .login-dropdown-menu
    a:not(.nav-auth):not(.nav-login):not(.nav-signup):not(.nav-logout):not(.nav-portal):not([href$="/login"]):not([href$="/signup"])::after {
        content: "";

        position: absolute;

        left: 0;
        right: 0;
        bottom: 1px;

        display: block;

        width: 100%;
        height: 2px;

        border-radius: 999px;

        background: var(--accent, #a55f3d);

        transform: scaleX(0);

        transform-origin: center;

        transition:
            transform 0.2s ease;
    }


    /* =====================================================
       NAVIGATION HOVER
       ===================================================== */

    .site-header
    .dropdown-menu
    a:not(.nav-auth):not(.nav-login):not(.nav-signup):not(.nav-logout):not(.nav-portal):not([href$="/login"]):not([href$="/signup"]):hover::after,

    .login-header
    .login-dropdown-menu
    a:not(.nav-auth):not(.nav-login):not(.nav-signup):not(.nav-logout):not(.nav-portal):not([href$="/login"]):not([href$="/signup"]):hover::after {
        transform: scaleX(1);
    }


    /* =====================================================
       ACTIVE NAVIGATION
       Home / Services / About / My Bookings / Book Now
       ===================================================== */

    .site-header
    .dropdown-menu
    a.active:not(.nav-auth):not(.nav-login):not(.nav-signup):not(.nav-logout):not(.nav-portal):not([href$="/login"]):not([href$="/signup"]),

    .login-header
    .login-dropdown-menu
    a.active:not(.nav-auth):not(.nav-login):not(.nav-signup):not(.nav-logout):not(.nav-portal):not([href$="/login"]):not([href$="/signup"]) {
        background: transparent;

        color: var(--ink, #29251f);

        font-weight: 600;
    }


    .site-header
    .dropdown-menu
    a.active:not(.nav-auth):not(.nav-login):not(.nav-signup):not(.nav-logout):not(.nav-portal):not([href$="/login"]):not([href$="/signup"])::after,

    .login-header
    .login-dropdown-menu
    a.active:not(.nav-auth):not(.nav-login):not(.nav-signup):not(.nav-logout):not(.nav-portal):not([href$="/login"]):not([href$="/signup"])::after {
        display: block;

        transform: scaleX(1);
    }


    /* =====================================================
       LOGIN + SIGN UP GROUP
       ===================================================== */

    .site-header .dropdown-menu .nav-login,
    .login-header .login-dropdown-menu .nav-login,

    .site-header
    .dropdown-menu
    a[href$="/login"],

    .login-header
    .login-dropdown-menu
    a[href$="/login"] {
        margin-left: auto;
    }


    /* =====================================================
       COMMON AUTH BUTTON STRUCTURE
       ===================================================== */

    .site-header .dropdown-menu .nav-auth,
    .login-header .login-dropdown-menu .nav-auth,

    .site-header
    .dropdown-menu
    a[href$="/login"],

    .site-header
    .dropdown-menu
    a[href$="/signup"],

    .login-header
    .login-dropdown-menu
    a[href$="/login"],

    .login-header
    .login-dropdown-menu
    a[href$="/signup"] {
        min-width: 92px;

        height: 42px;

        padding: 0 18px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border-radius: 9px;

        font-size: 15px;
        font-weight: 600;
        line-height: 1;

        text-decoration: none;

        /*
         * Important:
         * auth buttons don't move or gain a shadow.
         */
        box-shadow: none;

        transform: none;

        transition:
            background-color 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease;
    }


    /* =====================================================
       REMOVE ALL ACTIVE / UNDERLINE EFFECTS
       FROM LOGIN AND SIGN UP
       ===================================================== */

    .site-header
    .dropdown-menu
    a[href$="/login"]::after,

    .site-header
    .dropdown-menu
    a[href$="/signup"]::after,

    .login-header
    .login-dropdown-menu
    a[href$="/login"]::after,

    .login-header
    .login-dropdown-menu
    a[href$="/signup"]::after,

    .site-header
    .dropdown-menu
    .nav-login::after,

    .site-header
    .dropdown-menu
    .nav-signup::after,

    .login-header
    .login-dropdown-menu
    .nav-login::after,

    .login-header
    .login-dropdown-menu
    .nav-signup::after {
        content: none !important;

        display: none !important;

        width: 0 !important;
        height: 0 !important;

        background: none !important;

        transform: none !important;

        box-shadow: none !important;
    }


    /* =====================================================
       LOGIN BUTTON
       ===================================================== */

    .site-header .dropdown-menu .nav-login,
    .login-header .login-dropdown-menu .nav-login,

    .site-header
    .dropdown-menu
    a[href$="/login"],

    .login-header
    .login-dropdown-menu
    a[href$="/login"] {
        border: 1px solid #93654d;

        background: transparent;

        color: #74432e;
    }


    .site-header .dropdown-menu .nav-login:hover,
    .login-header .login-dropdown-menu .nav-login:hover,

    .site-header
    .dropdown-menu
    a[href$="/login"]:hover,

    .login-header
    .login-dropdown-menu
    a[href$="/login"]:hover {
        border-color: #74432e;

        background: rgba(116, 67, 46, 0.05);

        color: #5e3423;

        box-shadow: none;

        transform: none;
    }


    /* =====================================================
       LOGIN ACTIVE STATE
       SAME AS NORMAL BUTTON
       ===================================================== */

    .site-header .dropdown-menu .nav-login.active,
    .login-header .login-dropdown-menu .nav-login.active,

    .site-header
    .dropdown-menu
    a[href$="/login"].active,

    .login-header
    .login-dropdown-menu
    a[href$="/login"].active {
        border: 1px solid #93654d;

        background: transparent;

        color: #74432e;

        box-shadow: none;

        transform: none;
    }


    /* =====================================================
       SIGN UP BUTTON
       ===================================================== */

    .site-header .dropdown-menu .nav-signup,
    .login-header .login-dropdown-menu .nav-signup,

    .site-header
    .dropdown-menu
    a[href$="/signup"],

    .login-header
    .login-dropdown-menu
    a[href$="/signup"] {
        /*
         * Pull Sign Up closer to Login.
         */
        margin-left: -20px;

        border: 1px solid #5b2d1a;

        background: #5b2d1a;

        color: #ffffff;

        box-shadow: none;

        transform: none;
    }


    .site-header .dropdown-menu .nav-signup:hover,
    .login-header .login-dropdown-menu .nav-signup:hover,

    .site-header
    .dropdown-menu
    a[href$="/signup"]:hover,

    .login-header
    .login-dropdown-menu
    a[href$="/signup"]:hover {
        border-color: #472214;

        background: #472214;

        color: #ffffff;

        box-shadow: none;

        transform: none;
    }


    /* =====================================================
       SIGN UP ACTIVE STATE
       SAME AS NORMAL BUTTON
       ===================================================== */

    .site-header .dropdown-menu .nav-signup.active,
    .login-header .login-dropdown-menu .nav-signup.active,

    .site-header
    .dropdown-menu
    a[href$="/signup"].active,

    .login-header
    .login-dropdown-menu
    a[href$="/signup"].active {
        border: 1px solid #5b2d1a;

        background: #5b2d1a;

        color: #ffffff;

        box-shadow: none;

        transform: none;
    }


    /* =====================================================
       LOGOUT BUTTON
       ===================================================== */

    .site-header .dropdown-menu .nav-logout,
    .login-header .login-dropdown-menu .nav-logout,

    .site-header
    .dropdown-menu
    a[href="#"][onclick*="requestSubmit"],

    .login-header
    .login-dropdown-menu
    a[href="#"][onclick*="requestSubmit"] {
        margin-left: auto;

        min-width: 92px;

        height: 42px;

        padding: 0 18px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border: 1px solid #93654d;
        border-radius: 9px;

        background: transparent;

        color: #74432e;

        font-size: 15px;
        font-weight: 600;
        line-height: 1;

        box-shadow: none;

        transform: none;
    }


    .site-header .dropdown-menu .nav-logout:hover,
    .login-header .login-dropdown-menu .nav-logout:hover,

    .site-header
    .dropdown-menu
    a[href="#"][onclick*="requestSubmit"]:hover,

    .login-header
    .login-dropdown-menu
    a[href="#"][onclick*="requestSubmit"]:hover {
        border-color: #74432e;

        background: rgba(116, 67, 46, 0.05);

        color: #5e3423;

        box-shadow: none;

        transform: none;
    }


    .site-header
    .dropdown-menu
    .nav-logout::after,

    .login-header
    .login-dropdown-menu
    .nav-logout::after,

    .site-header
    .dropdown-menu
    a[href="#"][onclick*="requestSubmit"]::after,

    .login-header
    .login-dropdown-menu
    a[href="#"][onclick*="requestSubmit"]::after {
        display: none !important;

        content: none !important;
    }


    /* =====================================================
       PORTAL LINK
       ===================================================== */

    /* =====================================================
       PORTAL LINK - FIXED ALIGNMENT
       ===================================================== */

    .site-header .dropdown-menu .nav-portal,
    .login-header .login-dropdown-menu .nav-portal {
        margin-left: 0;

        padding: 10px 0;

        color: #74432e;

        font-weight: 600;
    }

    .site-header
    .dropdown-menu
    .nav-portal
    ~ .nav-logout,
    .login-header
    .login-dropdown-menu
    .nav-portal
    ~ .nav-logout {
        margin-left: auto;
    }

} /* End of desktop navigation media query */


/* =========================================================
   SMALL DESKTOP / LAPTOP
   ========================================================= */

@media (min-width: 1000px) and (max-width: 1250px) {

    .site-header,
    .login-header {
        gap: 22px;
    }


    .site-header .dropdown-menu,
    .site-header .dropdown-menu.open,
    .login-header .login-dropdown-menu,
    .login-header .login-dropdown-menu.open {
        gap: 18px;
    }


    .site-header .dropdown-menu a,
    .login-header .login-dropdown-menu a {
        font-size: 14px;
    }


    .site-header .dropdown-menu .nav-auth,
    .login-header .login-dropdown-menu .nav-auth,

    .site-header
    .dropdown-menu
    a[href$="/login"],

    .site-header
    .dropdown-menu
    a[href$="/signup"],

    .login-header
    .login-dropdown-menu
    a[href$="/login"],

    .login-header
    .login-dropdown-menu
    a[href$="/signup"] {
        min-width: 82px;

        height: 40px;

        padding: 0 14px;

        font-size: 14px;
    }


    .site-header .dropdown-menu .nav-signup,
    .login-header .login-dropdown-menu .nav-signup,

    .site-header
    .dropdown-menu
    a[href$="/signup"],

    .login-header
    .login-dropdown-menu
    a[href$="/signup"] {
        margin-left: -8px;
    }

}


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

@media (max-width: 999px) {

    .site-header .menu,
    .login-header .login-menu {
        flex: 0 0 auto;
    }


    /*
     * Reset desktop spacing.
     */

    .site-header .dropdown-menu .nav-signup,
    .login-header .login-dropdown-menu .nav-signup,

    .site-header
    .dropdown-menu
    a[href$="/signup"],

    .login-header
    .login-dropdown-menu
    a[href$="/signup"] {
        margin-left: 0;
    }


    /*
     * Mobile Sign Up item.
     */

    .site-header .dropdown-menu .nav-signup,
    .login-header .login-dropdown-menu .nav-signup {
        background: #5b2d1a;

        color: #ffffff;

        text-align: center;
    }

}


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

@media (max-width: 600px) {

    .menu-button,
    .login-menu-button {
        padding: 9px 13px;

        font-size: 14px;

        border-radius: 9px;
    }


    .site-header .dropdown-menu,
    .login-header .login-dropdown-menu {
        width: min(
            230px,
            calc(100vw - 32px)
        );

        min-width: 0;
    }

}

/* =========================================================
   LOGGED-IN NAVIGATION: TRUE DESKTOP CENTER

   Applies to signed-in customers AND providers (including
   provider and customer pages). CakePHP FormHelper::postLink
   renders Logout as a link with an onclick requestSubmit.

   Navigation remains centered relative to the whole header;
   Logout stays at the right. Mobile is not changed.
   ========================================================= */

@media (min-width: 1280px) {

    .site-header:has(.dropdown-menu > a[href="#"][onclick*="requestSubmit"]),
    .login-header:has(.login-dropdown-menu > a[href="#"][onclick*="requestSubmit"]) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
        align-items: center;
    }

    .site-header:has(.dropdown-menu > a[href="#"][onclick*="requestSubmit"]) > .menu,
    .login-header:has(.login-dropdown-menu > a[href="#"][onclick*="requestSubmit"]) > .login-menu {
        grid-column: 2;
        width: max-content;
        min-width: 0;
        flex: none;
        position: static;
    }

    .site-header:has(.dropdown-menu > a[href="#"][onclick*="requestSubmit"]) .dropdown-menu,
    .login-header:has(.login-dropdown-menu > a[href="#"][onclick*="requestSubmit"]) .login-dropdown-menu {
        width: max-content;
        min-width: 0;
        gap: clamp(18px, 1.8vw, 30px);
    }

    .site-header:has(.dropdown-menu > a[href="#"][onclick*="requestSubmit"]) .dropdown-menu > a:first-child,
    .login-header:has(.login-dropdown-menu > a[href="#"][onclick*="requestSubmit"]) .login-dropdown-menu > a:first-child {
        margin-left: 0;
    }

    .site-header .dropdown-menu > a[href="#"][onclick*="requestSubmit"],
    .login-header .login-dropdown-menu > a[href="#"][onclick*="requestSubmit"] {
        position: absolute;
        top: calc(50% - 21px);
        right: max(28px, 6.5vw);
        margin-left: 0;
        transform: none;
    }
}