/* Shared guardrails for the preserved React frontends on narrow screens. */
html,
body.react-site,
body.react-site #root,
body.react-site #root > div,
body.react-site main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

body.react-site *,
body.react-site *::before,
body.react-site *::after {
    box-sizing: border-box;
}

body.react-site :where(header, nav, main, section, article, aside, footer, div, form) {
    min-width: 0;
}

body.react-site :where(img, picture, video, canvas, iframe, svg) {
    max-width: 100%;
}

body.react-site :where(h1, h2, h3, p, a, button, label, span) {
    overflow-wrap: break-word;
}

body.react-site :where(.grid, [class*="grid-cols-"]) > * {
    min-width: 0;
}

body.react-site :where(.flex, [class*="flex-"]) > * {
    min-width: 0;
}

@media (max-width: 639px) {
    body.react-site :where(h1, h2) {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    body.react-site-nhrc main h1,
    body.react-site-dhr main h1,
    body.react-site-ecourse main h1,
    body.react-site-library main h1 {
        font-size: clamp(2.15rem, 10.5vw, 2.85rem) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.025em !important;
    }

    body.react-site :where(a, button, input, select, textarea) {
        max-width: 100%;
    }

    body.react-site :where([class*="max-w-"], [class*="min-w-"]) {
        max-width: 100%;
    }

    body.react-site-ecourse main section:first-of-type [class*="space-x-8"],
    body.react-site-library main section:first-of-type [class*="space-x-"] {
        column-gap: 1rem !important;
    }

    body.react-site-youth [data-yf-enhanced-home] :where(.grid, [class*="grid-cols-"]) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* A single readable urgent item is preferable to a clipped marquee on touch layouts. */
@media (max-width: 1023px) {
    body.react-site-nhrc div.bg-blue-950.py-3.overflow-hidden.border-y .flex-1 > .flex {
        display: block !important;
        transform: none !important;
    }

    body.react-site-nhrc div.bg-blue-950.py-3.overflow-hidden.border-y .flex-1 > .flex > a {
        display: none !important;
    }

    body.react-site-nhrc div.bg-blue-950.py-3.overflow-hidden.border-y .flex-1 > .flex > a:first-child {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    body.react-site-nhrc div.bg-blue-950.py-3.overflow-hidden.border-y .flex-1 > .flex > a:first-child > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@supports not (overflow: clip) {
    html,
    body.react-site,
    body.react-site #root,
    body.react-site #root > div,
    body.react-site main {
        overflow-x: hidden;
    }
}