/* DesignAlot Performance UI v1.0
   Universal stylesheet loader
*/
@import url("variables.css");
@import url("reset.css");
@import url("typography.css");
@import url("layout.css");
@import url("navbar.css?v=20260917-1");
@import url("buttons.css");
@import url("hero.css?v=20260827-1");
@import url("cards.css");
@import url("projects.css");
@import url("dashboard.css");
@import url("performance.css");
@import url("testimonials.css");
@import url("forms.css?v=20260818-5");
@import url("contact-modal.css?v=20260818-2");
@import url("footer.css");
@import url("animations.css");
@import url("resources.css?v=20261022-8");
@import url("responsive.css");

/* Load texture overrides last so the texture system wins cleanly. */
@import url("textures.css");

/* =========================================================
   CLIENT LOGIN — AUTOMOTIVE DOOR-LOCK CONTROL
========================================================= */

.da-nav-list__item--client {
    display: flex;
    align-items: center;
}

.da-client-login {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--da-text-muted);
    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--da-transition),
        transform var(--da-transition);
}

.da-client-login__lock {
    position: relative;

    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #b9b9bd;

    background:
        radial-gradient(
            circle at 36% 28%,
            #55565b 0%,
            #292a2e 24%,
            #111216 52%,
            #050506 78%,
            #17181b 100%
        );

    border: 1px solid rgba(255,255,255,.20);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.22),
        inset 0 -3px 8px rgba(0,0,0,.72),
        0 0 0 2px rgba(0,0,0,.78),
        0 2px 8px rgba(0,0,0,.45);

    transition:
        color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease,
        filter 220ms ease;
}

.da-client-login__lock::after {
    content: "";

    position: absolute;
    inset: 4px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.055);

    pointer-events: none;
}

.da-client-login__lock svg {
    width: 29px;
    height: 29px;

    overflow: visible;
}

.da-client-login__bezel {
    fill: none;
    stroke: rgba(255,255,255,.18);
    stroke-width: 1.5;
}

.da-client-login__keyhole {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.da-client-login__label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;

    color: inherit;
}

.da-client-login:hover,
.da-client-login:focus-visible {
    color: #ffb13b;
}

.da-client-login:hover .da-client-login__lock,
.da-client-login:focus-visible .da-client-login__lock {
    color: #ffb13b;

    transform: translateY(-1px) scale(1.055);

    border-color: rgba(255,177,59,.72);

    filter: brightness(1.12);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.25),
        inset 0 -3px 8px rgba(0,0,0,.62),
        0 0 0 2px rgba(63,34,5,.72),
        0 0 7px rgba(255,177,59,.78),
        0 0 18px rgba(255,126,17,.38),
        0 0 32px rgba(255,94,0,.16);
}

.da-client-login:focus-visible {
    outline: none;
}

.da-client-login:focus-visible .da-client-login__lock {
    outline: 2px solid rgba(255,177,59,.72);
    outline-offset: 4px;
}


/* Compact desktop/tablet navigation: keep the lock, hide its label. */
@media (max-width: 1300px) and (min-width: 701px) {
    .da-client-login__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}


/* Mobile menu: present Client Login as a deliberate control row. */
@media (max-width: 700px) {
    .da-nav-list__item--client {
        width: 100%;
    }

    .da-client-login {
        width: 100%;

        padding: 10px 4px;

        gap: 13px;
    }

    .da-client-login__lock {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .da-client-login__label {
        font-size: .78rem;
    }
}

/* =========================================================
   CLIENT LOGIN — FULL HAMBURGER MENU ROW
========================================================= */

/*
   Keep the compact icon-only version in the horizontal navbar,
   but as soon as the hamburger menu is open, restore the label
   and make the entire row clickable/hoverable.
*/

.da-nav-panel.is-open .da-nav-list__item--client {
    width: 100%;
    display: block !important;
}

.da-nav-panel.is-open .da-client-login {
    width: 100%;
    min-height: 72px;

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

    gap: 16px;

    padding: 12px 22px;

    border-radius: 12px;

    color: var(--da-text-muted);

    transition:
        color var(--da-transition),
        background-color var(--da-transition),
        box-shadow var(--da-transition);
}

/* Restore the label that is visually hidden at tighter desktop widths. */
.da-nav-panel.is-open .da-client-login__label {
    position: static !important;

    width: auto !important;
    height: auto !important;

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

    overflow: visible !important;

    clip: auto !important;
    clip-path: none !important;

    white-space: nowrap !important;

    display: inline-block !important;

    color: inherit;

    font-size: 1rem;
    font-weight: 600;

    letter-spacing: 0;
    text-transform: none;
}

/* Keep the lock at its dashboard-control size. */
.da-nav-panel.is-open .da-client-login__lock {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;
}

/* Make the whole row respond, not only the round lock. */
.da-nav-panel.is-open .da-client-login:hover,
.da-nav-panel.is-open .da-client-login:focus-visible {
    color: #ffb13b;

    background:
        linear-gradient(
            90deg,
            rgba(255, 177, 59, 0.055),
            rgba(255, 126, 17, 0.015)
        );

    box-shadow:
        inset 3px 0 0 rgba(255, 177, 59, 0.72),
        0 0 20px rgba(255, 126, 17, 0.06);
}

/* Illuminate the lock when any part of the row is hovered/focused. */
.da-nav-panel.is-open .da-client-login:hover .da-client-login__lock,
.da-nav-panel.is-open .da-client-login:focus-visible .da-client-login__lock {
    color: #ffb13b;

    transform: translateY(-1px) scale(1.055);

    border-color: rgba(255, 177, 59, 0.72);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.25),
        inset 0 -3px 8px rgba(0,0,0,.62),
        0 0 0 2px rgba(63,34,5,.72),
        0 0 7px rgba(255,177,59,.78),
        0 0 18px rgba(255,126,17,.38),
        0 0 32px rgba(255,94,0,.16);
}



/* =========================================================
   EXPRESS DESIGN — EXTRA TOP-LEVEL NAV ITEM
========================================================= */
@media (min-width:1081px) and (max-width:1400px) {
    .da-nav-list {
        gap: 13px;
    }

    .da-nav-link {
        font-size: .68rem;
        letter-spacing: .075em;
    }

    .da-client-login__label {
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0,0,0,0);
        white-space:nowrap;
        border:0;
    }
}