/* Public-site mobile safeguards. Loaded on every public page after the page's own styles. */
@media (max-width: 900px) {
    /* Sticky headers declared as width:100% plus side padding must not push past the viewport. */
    html body header {
        box-sizing: border-box;
    }

    /* Media never wider than its column. */
    html body main img,
    html body main iframe,
    html body main video,
    html body main svg {
        max-width: 100%;
    }

    html body main table {
        max-width: 100%;
    }

    /* Flex/grid children may shrink below their content width instead of forcing sideways scroll. */
    html body main .step,
    html body main .step .col,
    html body main .tp-inner,
    html body main .tp-content,
    html body main .sp-card,
    html body main .sp-card-grid > li {
        min-width: 0;
    }

    html body main .step .col,
    html body main .step-title,
    html body main .step__text,
    html body main .sp-card {
        overflow-wrap: anywhere;
    }

    html body main .sp-prep-columns .sp-card-grid--lender .sp-card,
    html body main .sp-card-grid .sp-card {
        white-space: normal;
        width: auto;
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    /* Card grids with a fixed minimum column wider than a phone fall back to one column. */
    html body main .sp-card-grid--review,
    html body main .sp-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    /* Narrow phones: logo and menu button share the header row without overflowing. */
    html body header .mobile-links {
        margin-right: 10px !important;
        gap: 6px !important;
    }
}

@media (max-width: 600px) {
    /* Long words and URLs wrap instead of stretching the page. */
    html body main p,
    html body main li,
    html body main h1,
    html body main h2,
    html body main h3,
    html body main td {
        overflow-wrap: break-word;
    }

    /* Buttons never exceed the screen. */
    html body main .btn {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 360px) {
    html body header {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* County listings: long status badges wrap; the table (shown from 721px) scrolls instead of being clipped. */
@media (max-width: 900px) {
    html body .cl-badge {
        white-space: normal;
        max-width: 100%;
    }

    html body .county-listings__table-wrap {
        overflow-x: auto;
    }
}

/* Tablet header: the logo keeps its width instead of shrinking under the image. */
@media (min-width: 481px) and (max-width: 900px) {
    html body header .logo {
        flex-shrink: 0;
    }
}