/* ==========================================================================
   TOPPERWORK - GLOBAL LAYOUT FOUNDATION
   ==========================================================================
   Phase: 1.35

   Purpose:
   - Global content containment
   - Page layout foundation
   - Consistent vertical spacing
   - Horizontal overflow protection
   - Responsive content width
   - WebView-safe layout behavior
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL WIDTH SAFETY
   ========================================================================== */

html,
body,
#topperwork-app,
.topperwork-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


/* ==========================================================================
   2. GLOBAL CONTENT SAFETY
   ========================================================================== */

.topperwork-main > *,
.topperwork-main section,
.topperwork-main article,
.topperwork-main div {
    min-width: 0;
}


/* ==========================================================================
   3. GLOBAL CONTENT CONTAINER
   ========================================================================== */

.topperwork-container,
.topperwork-container-wide {
    width: 100%;
    max-width: 100%;

    margin-right: auto;
    margin-left: auto;

    min-width: 0;
}


/* ==========================================================================
   4. STANDARD CONTENT WIDTH
   ========================================================================== */

.topperwork-container {
    max-width: var(--container-max-width);
}


/* ==========================================================================
   5. WIDE CONTENT WIDTH
   ========================================================================== */

.topperwork-container-wide {
    max-width: var(--container-wide-max-width);
}


/* ==========================================================================
   6. READABLE CONTENT WIDTH
   ========================================================================== */

.topperwork-content {
    width: 100%;
    max-width: var(--content-max-width);

    margin-right: auto;
    margin-left: auto;

    min-width: 0;
}


/* ==========================================================================
   7. GLOBAL SECTION FOUNDATION
   ========================================================================== */

.topperwork-section {
    position: relative;

    width: 100%;
    min-width: 0;

    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}


/* ==========================================================================
   8. GLOBAL SECTION CONTENT
   ========================================================================== */

.topperwork-section__content {
    width: 100%;
    max-width: var(--content-max-width);

    margin-right: auto;
    margin-left: auto;

    min-width: 0;
}


/* ==========================================================================
   9. TEXT SAFETY
   ========================================================================== */

.topperwork-main h1,
.topperwork-main h2,
.topperwork-main h3,
.topperwork-main h4,
.topperwork-main h5,
.topperwork-main h6,
.topperwork-main p,
.topperwork-main a,
.topperwork-main span {
    max-width: 100%;
}


/* ==========================================================================
   10. LONG CONTENT SAFETY
   ========================================================================== */

.topperwork-main p,
.topperwork-main h1,
.topperwork-main h2,
.topperwork-main h3,
.topperwork-main h4,
.topperwork-main h5,
.topperwork-main h6 {
    overflow-wrap: anywhere;
    word-break: normal;
}


/* ==========================================================================
   11. GLOBAL FLEX / GRID CHILD SAFETY
   ========================================================================== */

.topperwork-main .d-flex > *,
.topperwork-main .d-inline-flex > *,
.topperwork-main .grid > * {
    min-width: 0;
}


/* ==========================================================================
   12. TABLE SAFETY
   ========================================================================== */

.topperwork-main table {
    max-width: 100%;
}


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

@media (max-width: 640px) {

    .topperwork-section {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }

}


/* ==========================================================================
   14. TABLET
   ========================================================================== */

@media (min-width: 641px) {

    .topperwork-section {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }

}


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

@media (min-width: 900px) {

    .topperwork-section {
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
    }

}


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

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

    .topperwork-main *,
    .topperwork-main *::before,
    .topperwork-main *::after {
        scroll-behavior: auto;
    }

}



/* ==========================================================================
   17. FOUNDATION PAGE
   ========================================================================== */

.topperwork-foundation {
    width: 100%;
    min-width: 0;

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

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

    display: flex;
    align-items: flex-start;

    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}


/* ==========================================================================
   FOUNDATION PAGE CONTENT
   ========================================================================== */

.topperwork-foundation__content {
    width: 100%;

    max-width: var(--content-max-width);

    min-width: 0;

    margin-right: 0;
    margin-left: 0;

    text-align: left;
}


.topperwork-foundation__eyebrow {
    display: inline-block;

    max-width: 100%;

    color: var(--color-primary);

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

    overflow-wrap: anywhere;
}


.topperwork-foundation__title {
    margin-top: var(--space-3);

    max-width: 100%;

    font-size:
        clamp(
            2rem,
            5vw,
            4rem
        );
}


.topperwork-foundation__message {
    width: 100%;
    max-width: 680px;

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

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

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


.topperwork-foundation__content .btn {
    margin-top: var(--space-6);
}


@media (min-width: 641px) {

    .topperwork-foundation {
        min-height: calc(
            100vh
            - var(--topperwork-header-height)
            - var(--safe-area-top)
        );

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

        align-items: flex-start;

        padding-top: var(--space-12);
        padding-bottom: var(--space-16);
    }

}