.site-navbar {
    position: sticky;
    top: 0;
    z-index: 900;
    min-height: 68px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 30px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    min-width: 0;
}


/* LEFT */

.navbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
}

.logo {
    color: var(--color-text);
    font-size: 22px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

    .logo:hover {
        color: var(--color-text);
}

.navbar-left > * { order: 2; }
.navbar-left .beta-badge { display: inline-block; flex-shrink: 0; white-space: nowrap; margin-left: 4px; padding: 3px 6px; border: 1px solid var(--color-blue-border); border-radius: 999px; color: var(--color-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1; vertical-align: middle; }
.navbar-left .logo { order: 1; }

.navbar-find-professional {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 4px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.navbar-mobile-link {
    display: none;
}
.navbar-dropdown .navbar-small-post { display: none; }

    .navbar-find-professional:hover {
        color: var(--color-text);
    }

    .navbar-find-professional:focus-visible {
        outline: 2px solid var(--color-focus);
        outline-offset: 3px;
        border-radius: 3px;
    }


/* CURRENT MODE */

.navbar-mode-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
}

.navbar-mode-customer {
    background: var(--color-surface-subtle);
    color: var(--color-blue);
}

.navbar-mode-professional {
    background: var(--color-surface-subtle);
    color: var(--color-green);
}


/* MAIN NAVIGATION */

.site-nav {
    display: flex;
    align-items: center;
    gap: 25px;
    flex: 1;
}

    .site-nav a {
        color: var(--color-text);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

        .site-nav a:hover {
            color: var(--color-text);
        }


/* RIGHT SIDE */

.navbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
    flex-shrink: 0;
}

.notification-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--color-text); font-size: 20px; text-decoration: none; }
.notification-bell:hover { color: var(--color-blue); }
.navbar-unread-dot { position: absolute; top: 5px; right: 4px; width: 9px; height: 9px; border: 2px solid var(--color-border); border-radius: 50%; background: var(--color-danger-solid); }

.navbar-mode-form,
.logout-form {
    margin: 0;
}


/* MODE SWITCH */

.navbar-mode-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .navbar-mode-switch:hover {
        background: var(--color-surface-subtle);
        color: var(--color-text);
    }


/* ACCOUNT */

.navbar-account-link,
.navbar-simple-link {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

    .navbar-account-link:hover,
    .navbar-simple-link:hover {
        color: var(--color-text);
    }

.logout-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

    .logout-button:hover {
        color: var(--color-text);
    }


/* PRIMARY CUSTOMER ACTION */

.post-job-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--color-orange-solid);
    color: var(--color-on-accent);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

    .post-job-button:hover {
        background: var(--color-orange-solid);
        color: var(--color-on-accent);
    }


/* TABLET */

@media (max-width: 1050px) {

    .site-navbar {
        padding: 0 20px;
        gap: 18px;
    }

    .site-nav {
        gap: 18px;
    }

    .navbar-actions {
        gap: 10px;
    }

    .navbar-mode-switch {
        padding: 0 10px;
        font-size: 12px;
    }
}


/* MOBILE */

@media (max-width: 800px) {

    .site-navbar {
        padding: 13px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .navbar-left {
        flex: 1 0 auto;
        min-width: 0;
    }

    .navbar-actions {
        margin-left: auto;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .site-nav {
        display: none;
        order: 3;
    }

    .navbar-find-professional {
        display: none;
    }

    .navbar-mobile-link {
        display: block;
    }

    .navbar-mode-label {
        display: none;
    }

    .navbar-mode-switch {
        min-height: 44px;
        padding: 0 9px;
    }

    .post-job-button {
        min-height: 44px;
        padding: 0 11px;
        font-size: 13px;
    }

    .notification-bell,
    .navbar-menu-button {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }
}


/* SMALL PHONES */

@media (max-width: 560px) {

    .site-navbar {
        padding: 12px 14px;
    }

    .logo {
        font-size: 20px;
    }

    /* Keep the brand on one line on phones with limited header width. */
    .navbar-left .beta-badge { display: none; }

    .navbar-account-link {
        display: none;
    }

    .navbar-mode-switch {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navbar-actions {
        min-width: 0;
    }

    .post-job-button {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .post-job-button.service-guide-post-job-button { max-width: 110px; }

        .site-nav a {
            font-size: 13px;
        }

    .navbar-dropdown {
        position: fixed;
        top: 70px;
        right: 14px;
        width: min( 280px, calc(100vw - 28px) );
    }
}

/* =========================
   DROPDOWN MENU
   ========================= */
@media (max-width: 360px) {
    .navbar-actions > .post-job-button { display: none; }
    .navbar-dropdown .navbar-small-post { display: block; }
}

.navbar-menu {
    position: relative;
}

    .navbar-menu summary {
        list-style: none;
    }

        .navbar-menu summary::-webkit-details-marker {
            display: none;
        }


/* HAMBURGER BUTTON */

.navbar-menu-button {
    width: 42px;
    height: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    cursor: pointer;
}

    .navbar-menu-button:hover {
        background: var(--color-surface-subtle);
    }

    .navbar-menu-button span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--color-blue-solid);
    }


/* DROPDOWN */

.navbar-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1000;
    width: 250px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 10px 30px rgba(var(--color-shadow-rgb), 0.10);
}

.navbar-dropdown-utilities {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 7px;
}

.navbar-dropdown-utilities .saved-menu-link {
    flex: 1;
    width: auto;
}

.saved-menu-star {
    margin-right: 8px;
    color: #f2c94c;
    font-size: 16px;
    line-height: 1;
}


/* MODE LABEL */

.navbar-dropdown-mode {
    padding: 10px 12px;
    color: var(--color-text-subtle);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* LINKS + BUTTONS */

.navbar-dropdown-link,
.navbar-dropdown-button {
    width: 100%;
    display: block;
    min-height: 44px;
    padding: 11px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .navbar-dropdown-link:hover,
    .navbar-dropdown-button:hover {
        background: var(--color-surface-subtle);
        color: var(--color-text);
    }


/* FORMS */

.navbar-dropdown-form {
    margin: 0;
}


/* DIVIDER */

.navbar-dropdown-divider {
    height: 1px;
    margin: 7px 5px;
    background: var(--color-surface-hover);
}


/* LOG OUT */

.navbar-dropdown-logout {
    color: var(--color-danger);
}

    .navbar-dropdown-logout:hover {
        background: var(--color-surface-subtle);
        color: var(--color-danger);
    }

.professional-entry-link {
    color: var(--color-blue) !important;
    font-weight: 700 !important;
}

    .professional-entry-link:hover {
        color: var(--color-blue) !important;
    }