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

   Purpose:
   - Global platform footer
   - Brand section
   - Navigation architecture
   - Social links
   - Legal footer
   - Mobile-first responsive design
   - Android / iOS WebView safe
   - Same horizontal container architecture as global header
   ========================================================================== */


/* ==========================================================================
   1. FOOTER BASE
   ========================================================================== */

.topperwork-footer {
    position: relative;
    z-index: var(--z-base);
    width: 100%;

    overflow: hidden;

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

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


.topperwork-footer::before {
    content: '';

    position: absolute;

    top: 0;

    right: 0;

    left: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-brand-gradient-start),
            transparent
        );
}


/* ==========================================================================
   2. MAIN FOOTER AREA
   ========================================================================== */

.topperwork-footer__main {
    position: relative;

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

    padding-right: 0;

    padding-bottom:
        var(--space-16);

    padding-left: 0;
}


.topperwork-footer__container {
    width: 100%;

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

    margin: 0 auto;

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

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

    display: grid;

    grid-template-columns:
        1fr;

    gap:
        var(--space-12);
}


/* ==========================================================================
   3. BRAND SECTION
   ========================================================================== */

.topperwork-footer__brand {
    padding-bottom:
        var(--space-10);

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


.topperwork-footer__brand-link {
    display: inline-flex;

    align-items: center;

    gap:
        var(--space-1);

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

    text-decoration: none;
}


.topperwork-footer__brand-mark {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 4rem;

    height: 4rem;

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

    background:
        linear-gradient(
            135deg,
            var(--color-info),
            var(--color-primary)
        );

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

    font-size:
        2rem;

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

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


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

    font-size:
        1.5rem;

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

    letter-spacing:
        -0.03em;
}


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

    -webkit-background-clip:
        text;

    background-clip:
        text;

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


.topperwork-footer__tagline {
    max-width: 22rem;

    margin:
        var(--space-6)
        0
        0;

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

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

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

    line-height:
        var(--line-height-relaxed);
}


.topperwork-footer__description {
    max-width: 24rem;

    margin:
        var(--space-6)
        0
        0;

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

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

    line-height:
        var(--line-height-relaxed);
}


/* ==========================================================================
   4. SOCIAL LINKS
   ========================================================================== */

.topperwork-footer__socials {
    display: flex;

    flex-wrap: wrap;

    gap:
        var(--space-3);

    margin-top:
        var(--space-8);
}


.topperwork-footer__social-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

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

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

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

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

    background:
        var(--color-surface-glass);

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

    text-decoration: none;

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

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


.topperwork-footer__social-link:hover {
    transform:
        translateY(-2px);

    background:
        var(--color-primary);

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

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


.topperwork-footer__social-link:active {
    transform:
        scale(0.94);
}


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

    outline-offset:
        3px;
}


/* ==========================================================================
   5. NAVIGATION AREA
   ========================================================================== */

.topperwork-footer__navigation {
    display: grid;

    grid-template-columns:
        1fr;

    gap:
        var(--space-10);
}


/* ==========================================================================
   6. FOOTER COLUMN
   ========================================================================== */

.topperwork-footer__column {
    min-width: 0;
}


.topperwork-footer__column-heading {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-4);

    margin-bottom:
        var(--space-4);
}


.topperwork-footer__column-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 2.5rem;

    height: 2.5rem;

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

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

    color:
        var(--color-info);

    font-size:
        1.125rem;
}


.topperwork-footer__column-heading h2 {
    margin: 0;

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

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

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

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


.topperwork-footer__column-heading p {
    margin:
        var(--space-2)
        0
        0;

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

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

    line-height:
        var(--line-height-normal);
}


/* ==========================================================================
   7. FOOTER LINKS
   ========================================================================== */

.topperwork-footer__links {
    display: flex;

    flex-direction: column;

    gap:
        0.15rem;
}


.topperwork-footer__links a {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        var(--space-3);

    min-height:
        auto;

    padding:
        0.45rem
        0;

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

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

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

    line-height:
        1.35;

    text-decoration: none;

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


.topperwork-footer__links a span {
    min-width: 0;
}


.topperwork-footer__links a i {
    flex-shrink: 0;

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

    font-size:
        0.7rem;

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


.topperwork-footer__links a:hover {
    color:
        var(--color-text-primary);

    transform:
        translateX(4px);
}


.topperwork-footer__links a:hover i {
    transform:
        translateX(3px);

    color:
        var(--color-info);
}


.topperwork-footer__links a:focus-visible {
    outline:
        2px solid
        var(--color-focus-ring);

    outline-offset:
        4px;

    border-radius:
        var(--radius-sm);
}


/* ==========================================================================
   8. FOOTER BOTTOM
   ========================================================================== */

.topperwork-footer__bottom {
    border-top:
        1px solid
        var(--color-border);

    background:
        var(--color-surface-glass);

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

    padding-right: 0;

    padding-bottom:
        calc(
            var(--space-6)
            + var(--safe-area-bottom)
        );

    padding-left: 0;
}


.topperwork-footer__bottom-container {
    width: 100%;

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

    margin: 0 auto;

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

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

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap:
        var(--space-4);
}


/* ==========================================================================
   9. COPYRIGHT
   ========================================================================== */

.topperwork-footer__copyright {
    margin: 0;

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

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

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

    text-align:
        center;
}


/* ==========================================================================
   10. LEGAL LINKS
   ========================================================================== */

.topperwork-footer__legal {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        var(--space-4);

    width: 100%;
}


.topperwork-footer__legal a {
    color:
        var(--color-text-secondary);

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

    text-decoration: none;

    transition:
        color var(--transition-fast);
}


.topperwork-footer__legal a:hover {
    color:
        var(--color-info);
}


.topperwork-footer__legal a:focus-visible {
    outline:
        2px solid
        var(--color-focus-ring);

    outline-offset:
        3px;

    border-radius:
        var(--radius-sm);
}


/* ==========================================================================
   11. BOTTOM ACTIONS
   ========================================================================== */

.topperwork-footer__bottom-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        var(--space-4);

    width: 100%;
}


/* ==========================================================================
   12. BACK TO TOP
   ========================================================================== */

.topperwork-footer__back-to-top {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 3.5rem;

    height: 3.5rem;

    border: 0;

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

    background:
        linear-gradient(
            135deg,
            var(--color-info),
            var(--color-primary)
        );

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

    font-size:
        1rem;

    cursor: pointer;

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

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);

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


.topperwork-footer__back-to-top:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 14px 35px
        var(--color-glow-primary);
}


.topperwork-footer__back-to-top:active {
    transform:
        scale(0.94);
}


.topperwork-footer__back-to-top:focus-visible {
    outline:
        3px solid
        var(--color-focus-ring);

    outline-offset:
        4px;
}


/* ==========================================================================
   13. TABLET
   ========================================================================== */

@media (
    min-width: 640px
) {

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

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


    .topperwork-footer__navigation {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap:
            var(--space-10);

        row-gap:
            var(--space-12);
    }


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

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

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;
    }


    .topperwork-footer__bottom-actions {
        width: auto;

        justify-content: center;

        margin-left: 0;
    }

}


/* ==========================================================================
   14. DESKTOP
   ========================================================================== */

@media (
    min-width: 1024px
) {

    .topperwork-footer__main {
        padding-top:
            var(--space-20);

        padding-right: 0;

        padding-bottom:
            var(--space-20);

        padding-left: 0;
    }


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

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

        grid-template-columns:
            minmax(15rem, 22rem)
            minmax(0, 1fr);

        gap:
            var(--space-12);
    }


    .topperwork-footer__brand {
        padding:
            var(--space-2)
            var(--space-10)
            var(--space-2)
            0;

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

        border-bottom: 0;
    }


    .topperwork-footer__navigation {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap:
            var(--space-8);
    }


    .topperwork-footer__bottom-container {
        padding-right:
            calc(
                var(--page-padding-desktop)
                + var(--safe-area-right)
            );

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

}


/* ==========================================================================
   15. LARGE DESKTOP
   ========================================================================== */

@media (
    min-width: 1280px
) {

    .topperwork-footer__container {
        gap:
            var(--space-16);
    }


    .topperwork-footer__navigation {
        gap:
            var(--space-10);
    }

}


/* ==========================================================================
   16. REDUCED MOTION
   ========================================================================== */

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

    .topperwork-footer__social-link,
    .topperwork-footer__links a,
    .topperwork-footer__links a i,
    .topperwork-footer__back-to-top {
        transition:
            none;
    }

}