/* ------------------------------------------------------------------
 * Mobile rescue for the RTI / RTS / NewsFeed PDF viewer pages
 *
 * Those three views (Views/RTI, Views/RTS, Views/NewsFeed — PdfViewer.cshtml) share one
 * layout: a 60px header (Home / Sitemap nav, centred title, search box) above an iframe.
 *
 * THE BUG THIS FIXES
 * iOS Safari and Android Chrome refuse to render application/pdf inside a nested browsing
 * context, so the iframe painted blank on every phone with no link and no message. Those
 * pages also set overflow:hidden on html/body, so the blank page could not even be scrolled.
 *
 * DELIBERATELY SCOPED TO MOBILE
 * Every rule except the .pdfv-fallback default sits inside the media query at the foot of
 * this file, and .pdfv-fallback styles an element that did not previously exist. Desktop
 * rendering is therefore untouched — the existing inline <style> in each view still governs
 * it exactly as before. This file is linked AFTER that block so these rules win where they
 * apply, without the inline block needing to be rewritten.
 * ------------------------------------------------------------------ */

/* Hidden by default; the media query below reveals it where the iframe cannot work. */
.pdfv-fallback {
    display: none;
    padding: 32px 16px;
    text-align: center;
}

    .pdfv-fallback p {
        max-width: 34em;
        margin: 0 auto 24px;
        font-size: 16px;
        line-height: 1.6;
        color: #212529;
    }

    .pdfv-fallback .pdfv-btn {
        display: inline-block;
        padding: 14px 28px;
        border: 2px solid var(--nav-bg, #b1004c);
        border-radius: 4px;
        background: var(--nav-bg, #b1004c);
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
    }

        .pdfv-fallback .pdfv-btn:hover,
        .pdfv-fallback .pdfv-btn:focus {
            background: #fff;
            color: var(--nav-bg, #b1004c);
            text-decoration: underline;
        }

        .pdfv-fallback .pdfv-btn:focus-visible {
            outline: 3px solid var(--nav-bg, #b1004c);
            outline-offset: 2px;
        }

/* Touch devices are the ones that refuse inline PDF, whatever their width; the width clause
   catches a narrow window and anything reporting pointer capabilities oddly. */
@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {

    /* The page set overflow:hidden with a full-height chain, which killed touch scrolling
       and could collapse the frame to zero height against a dynamic viewport. */
    html,
    body {
        height: auto;
        overflow: auto;
    }

    .iframe-container {
        display: none;
    }

    .pdfv-fallback {
        display: block;
    }

    /* The header is a 1fr 2fr 1fr grid holding a fixed 220px search box. Below ~400px that
       box is wider than its column and pushes the page into horizontal scroll, so the three
       items stack instead. Without this the rescued page would still break at 320px. */
    .pdf-header {
        display: block;
        height: auto;
        padding: 12px 16px;
        text-align: center;
    }

    .title-text {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        margin: 8px 0;
    }

    .search-minimal {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        justify-self: auto;
    }
}