/* ==========================================================================
   TOPPERWORK - GLOBAL APPLICATION HEADER
   ==========================================================================
   Phase: 2A.1

   Design Direction:
   - Modern dark navy platform UI
   - Blue primary action system
   - Purple brand accent system
   - Glass-inspired dark surfaces
   - Mobile-first
   - Android / iOS WebView safe
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL HEADER SIZE TOKENS
   ========================================================================== */

:root {

    --topperwork-header-height: 4.75rem;

    --topperwork-header-mobile-height: 4.25rem;

}


/* ==========================================================================
   2. GLOBAL APPLICATION HEADER
   ========================================================================== */

.topperwork-header {
    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    z-index:
        var(--z-header);

    width: 100%;

    min-height:
        calc(
            var(--topperwork-header-mobile-height)
            + var(--safe-area-top)
        );

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-lg);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    -webkit-tap-highlight-color:
        transparent;
}


/* ==========================================================================
   3. HEADER GRADIENT ACCENT
   ========================================================================== */

.topperwork-header::after {
    display: none;
}


/* ==========================================================================
   4. HEADER CONTAINER
   ========================================================================== */

.topperwork-header__container {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        var(--space-4);

    width: 100%;

    max-width:
        var(--container-wide-max-width);

    min-height:
        calc(
            var(--topperwork-header-mobile-height)
            + var(--safe-area-top)
        );

    margin: 0 auto;

    padding-top:
        var(--safe-area-top);

    padding-right:
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        );

    padding-bottom: 0;

    padding-left:
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        );
}


/* ==========================================================================
   5. BRAND
   ========================================================================== */

.topperwork-header__brand {
    display: inline-flex;

    align-items: center;

    gap:
        var(--space-1);

    flex-shrink: 0;

    min-width: 0;

    text-decoration: none;

    -webkit-tap-highlight-color:
        transparent;
}


.topperwork-header__brand-mark {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 2.35rem;

    height: 2.35rem;

    border-radius: 50%;

    overflow: hidden;

    background:
        transparent;

    color:
        var(--color-text-primary);

    line-height: 1;

    box-shadow:
        0 8px 22px
        var(--color-glow-accent);

    -webkit-tap-highlight-color:
        transparent;
}


.topperwork-header__brand-mark img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}


.topperwork-header__brand-text {
    color:
        var(--color-text-primary);

    font-size:
        1.125rem;

    font-weight:
        var(--font-weight-extrabold);

    letter-spacing:
        -0.025em;

    line-height:
        var(--line-height-tight);

    white-space: nowrap;
}


.topperwork-header__brand-text span {
    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-accent)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;
}


/* ==========================================================================
   6. DESKTOP NAVIGATION
   ========================================================================== */

.topperwork-header__navigation {
    display: none;

    align-items: center;

    justify-content: center;

    gap:
        var(--space-2);

    min-width: 0;

    margin: 0 auto;
}


.topperwork-header__nav-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height:
        var(--touch-target-min);

    padding:
        var(--space-2)
        var(--space-4);

    border-radius:
        var(--radius-md);

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-medium);

    line-height:
        var(--line-height-tight);

    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);

    -webkit-tap-highlight-color:
        transparent;
}


.topperwork-header__nav-link:hover {
    background:
        var(--color-surface-hover);

    color:
        var(--color-text-primary);
}


.topperwork-header__nav-link:active {
    transform:
        scale(0.97);
}


.topperwork-header__nav-link.is-active {
    color:
        var(--color-text-primary);

    font-weight:
        var(--font-weight-semibold);
}


.topperwork-header__nav-link.is-active::after {
    content: '';

    position: absolute;

    right:
        var(--space-4);

    bottom: 0;

    left:
        var(--space-4);

    height: 2px;

    border-radius:
        var(--radius-full);

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-accent)
        );

    box-shadow:
        0 0 12px
        var(--color-glow-accent);
}


/* ==========================================================================
   7. HEADER ACTIONS
   ========================================================================== */

.topperwork-header__actions {
    display: none;

    align-items: center;

    gap:
        var(--space-3);

    flex-shrink: 0;
}


.topperwork-header__actions .btn {
    min-height:
        var(--touch-target-min);
}


/* ==========================================================================
   7A. THEME SWITCH
   ========================================================================== */

.topperwork-theme-toggle {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap:
        var(--space-2);

    min-height:
        var(--touch-target-min);

    padding:
        0
        var(--space-3);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-surface);

    color:
        var(--color-text-secondary);

    font-family:
        inherit;

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-medium);

    line-height:
        1;

    cursor:
        pointer;

    white-space:
        nowrap;

    box-shadow:
        var(--shadow-sm);

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);

    -webkit-tap-highlight-color:
        transparent;
}


.topperwork-theme-toggle:hover {
    border-color:
        var(--color-primary);

    background:
        var(--color-primary-soft);

    color:
        var(--color-text-primary);
}


.topperwork-theme-toggle:active {
    transform:
        scale(0.96);
}


.topperwork-theme-toggle:focus-visible {
    outline:
        3px solid
        var(--color-focus-ring);

    outline-offset:
        2px;
}


.topperwork-theme-toggle__icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width:
        1.125rem;

    height:
        1.125rem;

    flex-shrink: 0;

    font-size:
        1rem;

    line-height: 1;
}


.topperwork-theme-toggle__text {
    line-height:
        var(--line-height-tight);
}


/* ==========================================================================
   7B. MOBILE THEME SWITCH
   ========================================================================== */

.topperwork-mobile-navigation__actions
.topperwork-theme-toggle {
    width: 100%;
}


.topperwork-theme-toggle--mobile {
    margin-bottom:
        var(--space-1);
}


.topperwork-mobile-navigation__auth {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        var(--space-3);

    width: 100%;
}


.topperwork-mobile-navigation__auth .btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height:
        var(--touch-target-min);
}


/* ==========================================================================
   8. LOGIN BUTTON
   ========================================================================== */

.topperwork-header .btn-outline,
.topperwork-header__login {
    border-color:
        var(--color-border-strong);

    background:
        var(--color-surface);

    color:
        var(--color-text-primary);
}


.topperwork-header .btn-outline:hover,
.topperwork-header__login:hover {
    border-color:
        var(--color-primary);

    background:
        var(--color-primary-soft);

    color:
        var(--color-text-primary);
}


/* ==========================================================================
   9. GET STARTED BUTTON
   ========================================================================== */

.topperwork-header .btn-primary,
.topperwork-header__register {
    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            var(--color-primary-active) 0%,
            var(--color-primary) 52%,
            var(--color-accent) 100%
        );

    color:
        var(--color-primary-contrast);

    box-shadow:
        0 8px 24px
        var(--color-glow-accent);
}


.topperwork-header .btn-primary:hover,
.topperwork-header__register:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 12px 30px
        var(--color-glow-primary);
}


/* ==========================================================================
   10. MOBILE MENU BUTTON
   ========================================================================== */

.topperwork-header__menu-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width:
        var(--touch-target-min);

    height:
        var(--touch-target-min);

    padding: 0;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-surface);

    color:
        var(--color-text-secondary);

    cursor: pointer;

    box-shadow:
        var(--shadow-md);

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);

    -webkit-tap-highlight-color:
        transparent;
}

body.topperwork-mobile-menu-open {
    overflow: hidden;
}


.topperwork-header__menu-button:hover {
    border-color:
        var(--color-primary);

    background:
        var(--color-primary-soft);

    color:
        var(--color-text-primary);
}


.topperwork-header__menu-button:active {
    transform:
        scale(0.96);
}


.topperwork-header__menu-button.is-active {
    border-color:
        var(--color-primary);

    background:
        var(--color-primary-soft);

    color:
        var(--color-text-primary);
}


.topperwork-header__menu-button:focus-visible {
    outline:
        3px solid
        var(--color-focus-ring);

    outline-offset:
        2px;
}


/* ==========================================================================
   11. MOBILE MENU ICON
   ========================================================================== */

.topperwork-header__menu-icon {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap:
        0.25rem;

    width:
        1.25rem;

    height:
        1.25rem;
}


.topperwork-header__menu-icon span {
    display: block;

    width:
        1.125rem;

    height:
        2px;

    border-radius:
        var(--radius-full);

    background:
        currentColor;

    transition:
        transform var(--transition-normal),
        opacity var(--transition-fast);
}

body.topperwork-mobile-menu-open {
    overflow: hidden;
}


/* ==========================================================================
   12. ACTIVE MENU ICON
   ========================================================================== */

.topperwork-header__menu-button.is-active
.topperwork-header__menu-icon span:nth-child(1) {
    transform:
        translateY(0.375rem)
        rotate(45deg);
}


.topperwork-header__menu-button.is-active
.topperwork-header__menu-icon span:nth-child(2) {
    opacity: 0;
}


.topperwork-header__menu-button.is-active
.topperwork-header__menu-icon span:nth-child(3) {
    transform:
        translateY(-0.375rem)
        rotate(-45deg);
}


/* ==========================================================================
   13. MOBILE NAVIGATION
   ========================================================================== */

.topperwork-mobile-navigation {
    position: fixed;

    top:
        calc(
            var(--topperwork-header-mobile-height)
            + var(--safe-area-top)
        );

    right: 0;

    left: 0;

    z-index:
        calc(
            var(--z-header) - 1
        );

    max-height:
        calc(
            100vh
            - var(--topperwork-header-mobile-height)
            - var(--safe-area-top)
        );

    max-height:
        calc(
            100dvh
            - var(--topperwork-header-mobile-height)
            - var(--safe-area-top)
        );

    overflow-y:
        auto;

    overflow-x:
        hidden;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;

    visibility: hidden;

    opacity: 0;

    transform:
        translateY(-0.75rem);

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            var(--color-surface-elevated) 0%,
            var(--color-page-bg) 100%
        );

    border-bottom:
        1px solid
        var(--color-border);

    box-shadow:
        var(--shadow-lg);

    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal),
        visibility var(--transition-normal);
}


.topperwork-mobile-navigation.is-open {
    visibility: visible;

    opacity: 1;

    transform:
        translateY(0);

    pointer-events: auto;
}


/* ==========================================================================
   14. MOBILE NAVIGATION CONTENT
   ========================================================================== */

.topperwork-mobile-navigation__content {
    display: flex;

    flex-direction: column;

    gap:
        var(--space-1);

    width: 100%;

    max-width:
        var(--container-wide-max-width);

    margin: 0 auto;

    padding:
        var(--space-4)
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-right)
        )
        calc(
            var(--space-5)
            + var(--safe-area-bottom)
        )
        calc(
            var(--page-padding-mobile)
            + var(--safe-area-left)
        );
}


/* ==========================================================================
   15. MOBILE NAVIGATION LINKS
   ========================================================================== */

.topperwork-mobile-navigation__link {
    display: flex;

    align-items: center;

    width: 100%;

    min-height:
        var(--touch-target-min);

    padding:
        var(--space-3)
        var(--space-4);

    border:
        1px solid
        transparent;

    border-radius:
        var(--radius-lg);

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-size-base);

    font-weight:
        var(--font-weight-medium);

    text-decoration: none;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);

    -webkit-tap-highlight-color:
        transparent;
}


.topperwork-mobile-navigation__link:hover {
    background:
        var(--color-surface-hover);

    color:
        var(--color-text-primary);
}


.topperwork-mobile-navigation__link:active {
    transform:
        scale(0.985);
}


.topperwork-mobile-navigation__link.is-active {
    border-color:
        var(--color-border-strong);

    background:
        var(--color-primary-soft);

    color:
        var(--color-text-primary);

    font-weight:
        var(--font-weight-semibold);
}


/* ==========================================================================
   16. MOBILE NAVIGATION ACTIONS
   ========================================================================== */

.topperwork-mobile-navigation__actions {
    display: flex;

    flex-direction: column;

    gap:
        var(--space-3);

    margin-top:
        var(--space-4);

    padding-top:
        var(--space-4);

    border-top:
        1px solid
        var(--color-border);
}





/* ==========================================================================
   17. FIXED HEADER CONTENT OFFSET
   ========================================================================== */

.topperwork-main {
    min-height:
        100vh;

    padding-top:
        calc(
            var(--topperwork-header-mobile-height)
            + var(--safe-area-top)
        );
}


/* ==========================================================================
   18. TABLET
   ========================================================================== */

@media (
    min-width: 641px
) {

    .topperwork-header__container {
        padding-right:
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-right)
            );

        padding-left:
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-left)
            );
    }


    .topperwork-mobile-navigation__content {
        padding-right:
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-right)
            );

        padding-left:
            calc(
                var(--page-padding-tablet)
                + var(--safe-area-left)
            );
    }

}


/* ==========================================================================
   19. DESKTOP
   ========================================================================== */

@media (
    min-width: 900px
) {

    .topperwork-header {
        min-height:
            calc(
                var(--topperwork-header-height)
                + var(--safe-area-top)
            );
    }


    .topperwork-header__container {
        min-height:
            calc(
                var(--topperwork-header-height)
                + var(--safe-area-top)
            );

        padding-right:
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-right)
            );

        padding-left:
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-left)
            );
    }


    .topperwork-header__navigation {
        display: flex;
    }


    .topperwork-header__actions {
        display: flex;
    }


    .topperwork-header__menu-button {
        display: none;
    }


    .topperwork-mobile-navigation {
        display: none;
    }


    .topperwork-main {
        padding-top:
            calc(
                var(--topperwork-header-height)
                + var(--safe-area-top)
            );
    }

}


/* ==========================================================================
   20. LARGE DESKTOP
   ========================================================================== */

@media (
    min-width: 1200px
) {

    .topperwork-header__navigation {
        gap:
            var(--space-3);
    }


    .topperwork-header__nav-link {
        padding-right:
            var(--space-5);

        padding-left:
            var(--space-5);
    }

}


/* ==========================================================================
   21. REDUCED MOTION
   ========================================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    .topperwork-header__nav-link,
    .topperwork-header__menu-button,
    .topperwork-header__menu-icon span,
    .topperwork-mobile-navigation,
    .topperwork-mobile-navigation__link,
    .topperwork-header .btn {
        transition:
            none;
    }

}