/* Site header (Views/Shared/_Layout.cshtml, _LoginPartial.cshtml) and the slide-out menu it opens (#nav, which
   HighvaleFE's landingsite.js and Content/nav.css drive). Replaces Bootstrap's black navbar. */

body {
    padding-top: 60px; /* Site.css's 50px was for the Bootstrap navbar */
}

.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 60px;
    padding: 0 clamp(12px, 3vw, 32px);
    border-bottom: 1px solid #e3e7ee;
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.site-header-brand {
    display: flex;
    flex: none;
    align-items: center;
    height: 100%;
}

    .site-header-brand img {
        display: block;
        width: auto;
        height: 40px;
    }

.site-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.site-header-form {
    display: inline;
    margin: 0;
}

.site-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: #18202c;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

    .site-header-btn .fa {
        color: #5d6878;
        font-size: 16px;
    }

    .site-header-btn:hover,
    .site-header-btn:focus {
        background-color: #f3f5f8;
        color: #18202c;
        text-decoration: none;
    }

    .site-header-btn:focus-visible {
        outline: 2px solid #1f6feb;
        outline-offset: 2px;
    }

.site-header-menu,
.site-header-menu .fa {
    color: #ffffff;
}

.site-header-menu {
    margin-left: 4px;
    background-color: #1f6feb;
}

    .site-header-menu:hover,
    .site-header-menu:focus {
        background-color: #1a5fd0;
        color: #ffffff;
    }

.site-header-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 38px;
    margin: 0 4px;
    padding: 0 8px 0 12px;
    border-left: 1px solid #e3e7ee;
    color: #18202c;
    font-size: 14px;
    font-weight: 500;
}

    .site-header-user .site-header-label {
        max-width: 22ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.site-header-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e8effc;
    color: #1f6feb;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .site-header-label {
        display: none;
    }

    .site-header-btn {
        padding: 0 10px;
    }

    .site-header-user {
        padding-left: 8px;
    }

    .site-header-brand img {
        height: 34px;
    }
}

/* The slide-out menu: a white drawer instead of nav.css's black, upper-case panel. */
body #nav {
    padding: 56px 12px 16px;
    border-left: 1px solid #e3e7ee;
    background-color: #ffffff;
    color: #18202c;
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    text-transform: none;
}

    body #nav.visible {
        box-shadow: -12px 0 32px rgba(16, 24, 40, 0.18);
    }

    body #nav > ul.links > li > a:not(.button) {
        padding: 10px 12px;
        border-top: 0;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        transition: background-color 0.15s, color 0.15s;
    }

        body #nav > ul.links > li > a:not(.button):hover,
        body #nav > ul.links > li > a:not(.button):focus {
            background-color: #f3f5f8;
            color: #1f6feb;
        }

    body #nav .close {
        height: 52px;
        color: #5d6878;
        line-height: 52px;
    }

        body #nav .close:hover {
            color: #18202c;
        }