/* ON211 print stylesheet. Linked from ON211/Templates/Primary.master with media="print".

   "Print Detail" (and Ctrl+P) prints the page as it looks on screen: header, breadcrumb, record,
   sidebar, map and footer all come out. The only things dropped are overlays that aren't part of
   the page itself - the Print Detail button, the cookie banner, the page-transition spinner and
   the feedback modal.

   A printed page is only ~720-760 CSS px wide, so every min-width: 768px / 992px rule (Bootstrap's
   and custom.css's) is off and every max-width rule is on - the page would print in its phone
   layout. The desktop rules the header, detail pages and footer rely on are restated here.

   Selectors are prefixed with "html" so they outrank the Bootstrap utilities they restate
   (same !important, one more element of specificity) regardless of stylesheet load order. */

@media print {

    @page {
        margin: 12mm;
    }

    /* The desktop header alone needs ~925px; a Letter/A4 page gives ~705-725px. Zooming the root
       lays the page out at ~1000px - the desktop layout - and scales it onto the paper, rather
       than letting the right-hand side of the header and grid run off the page and get clipped. */
    html {
        zoom: .7;
    }

    /* ── Colour ───────────────────────────────────────────────────────────────
       Browsers drop backgrounds and lighten colours in print by default. Keep them as on screen. */
    html *,
    html *::before,
    html *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        animation: none !important;
        transition: none !important;
    }

    /* ── Overlays: not part of the page ────────────────────────────────────── */
    html .detail-actions,
    html .cookie-consent,
    html #SpinnerRedirect,
    html #ProgressRedirect,
    html .agency-feedback-modal,
    html .agency-feedback-modal-backdrop,
    html .agency-feedback-modal-dialog {
        display: none !important;
    }

    /* ── Containers ───────────────────────────────────────────────────────────
       Bootstrap caps .container at 540px at this width. Let it use the whole printable width. */
    html .container,
    html .container-sm,
    html .container-md,
    html .container-lg,
    html .container-xl,
    html .container-xxl {
        max-width: 100% !important;
    }

    /* ── Grid: md and lg columns ──────────────────────────────────────────────
       Bootstrap 5.3 values, restated for both breakpoints since both are off in print. lg comes
       after md so an element carrying both (col-md-6 col-lg-4) takes its desktop width. */
    html .col-md { flex: 1 0 0%; }
    html .col-md-auto { flex: 0 0 auto; width: auto; }
    html .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
    html .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
    html .col-md-3 { flex: 0 0 auto; width: 25%; }
    html .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
    html .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
    html .col-md-6 { flex: 0 0 auto; width: 50%; }
    html .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
    html .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
    html .col-md-9 { flex: 0 0 auto; width: 75%; }
    html .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
    html .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
    html .col-md-12 { flex: 0 0 auto; width: 100%; }

    html .col-lg { flex: 1 0 0%; }
    html .col-lg-auto { flex: 0 0 auto; width: auto; }
    html .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
    html .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
    html .col-lg-3 { flex: 0 0 auto; width: 25%; }
    html .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    html .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
    html .col-lg-6 { flex: 0 0 auto; width: 50%; }
    html .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
    html .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
    html .col-lg-9 { flex: 0 0 auto; width: 75%; }
    html .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
    html .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
    html .col-lg-12 { flex: 0 0 auto; width: 100%; }

    html .g-md-0, html .gx-md-0 { --bs-gutter-x: 0; }
    html .g-md-0, html .gy-md-0 { --bs-gutter-y: 0; }
    html .g-md-3, html .gx-md-3 { --bs-gutter-x: 1rem; }
    html .g-md-3, html .gy-md-3 { --bs-gutter-y: 1rem; }
    html .g-md-4, html .gx-md-4 { --bs-gutter-x: 1.5rem; }
    html .g-md-4, html .gy-md-4 { --bs-gutter-y: 1.5rem; }
    html .g-md-5, html .gx-md-5 { --bs-gutter-x: 3rem; }
    html .g-md-5, html .gy-md-5 { --bs-gutter-y: 3rem; }
    html .g-lg-0, html .gx-lg-0 { --bs-gutter-x: 0; }
    html .g-lg-0, html .gy-lg-0 { --bs-gutter-y: 0; }
    html .g-lg-3, html .gx-lg-3 { --bs-gutter-x: 1rem; }
    html .g-lg-3, html .gy-lg-3 { --bs-gutter-y: 1rem; }
    html .g-lg-4, html .gx-lg-4 { --bs-gutter-x: 1.5rem; }
    html .g-lg-4, html .gy-lg-4 { --bs-gutter-y: 1.5rem; }
    html .g-lg-5, html .gx-lg-5 { --bs-gutter-x: 3rem; }
    html .g-lg-5, html .gy-lg-5 { --bs-gutter-y: 3rem; }

    /* ── Display utilities ────────────────────────────────────────────────────
       md first, then lg, so d-none d-md-flex d-lg-none resolves the way the desktop does. */
    html .d-md-none { display: none !important; }
    html .d-md-inline { display: inline !important; }
    html .d-md-inline-block { display: inline-block !important; }
    html .d-md-block { display: block !important; }
    html .d-md-grid { display: grid !important; }
    html .d-md-flex { display: flex !important; }
    html .d-md-inline-flex { display: inline-flex !important; }

    html .d-lg-none { display: none !important; }
    html .d-lg-inline { display: inline !important; }
    html .d-lg-inline-block { display: inline-block !important; }
    html .d-lg-block { display: block !important; }
    html .d-lg-grid { display: grid !important; }
    html .d-lg-flex { display: flex !important; }
    html .d-lg-inline-flex { display: inline-flex !important; }

    /* ── Spacing, flex and text utilities used by the header, detail pages and footer ── */
    html .py-md-5, html .py-lg-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    html .pt-md-5, html .pt-lg-5 { padding-top: 3rem !important; }
    html .pb-md-5, html .pb-lg-5 { padding-bottom: 3rem !important; }
    html .mb-md-0, html .mb-lg-0 { margin-bottom: 0 !important; }
    html .mt-md-0, html .mt-lg-0 { margin-top: 0 !important; }
    html .ms-lg-4 { margin-left: 1.5rem !important; }
    html .me-lg-3 { margin-right: 1rem !important; }
    html .gap-md-3 { gap: 1rem !important; }
    html .gap-md-4, html .gap-lg-4 { gap: 1.5rem !important; }
    html .flex-md-row, html .flex-lg-row { flex-direction: row !important; }
    html .flex-md-nowrap, html .flex-lg-nowrap { flex-wrap: nowrap !important; }
    html .align-items-md-center, html .align-items-lg-center { align-items: center !important; }
    html .justify-content-md-between, html .justify-content-lg-between { justify-content: space-between !important; }
    html .justify-content-md-end, html .justify-content-lg-end { justify-content: flex-end !important; }
    html .justify-content-md-start, html .justify-content-lg-start { justify-content: flex-start !important; }
    html .text-md-start, html .text-lg-start { text-align: left !important; }
    html .text-md-end, html .text-lg-end { text-align: right !important; }
    html .text-md-center, html .text-lg-center { text-align: center !important; }

    /* ── Header: the expanded (navbar-expand-lg) desktop bar, not the hamburger ── */
    html .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    html .navbar-expand-lg .navbar-nav {
        flex-direction: row;
    }

    html .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x);
    }

    html .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    html .navbar-expand-lg .navbar-toggler {
        display: none;
    }

    /* Dropdown menus stay closed on paper, as they are on a page at rest. */
    html .navbar-expand-lg .navbar-nav .dropdown-menu {
        display: none !important;
    }

    /* custom.css: the desktop order that puts the nav links between the logo and the utility links. */
    html .site-header .collapse.navbar-collapse { order: 2; }
    html .site-header .header-utility-outer { order: 3; }
    html .site-header .header-exit { order: 4; }

    /* custom.css pins the chevron to the right edge of a full-width row below 992px. Undo that
       back to the inline desktop chevron. */
    html .site-header .navbar-nav .nav-link.dropdown-toggle {
        position: static;
        padding-right: var(--bs-navbar-nav-link-padding-x);
    }

    html .site-header .navbar-nav .nav-link.dropdown-toggle::after {
        position: static;
        right: auto;
        top: auto;
        margin-left: .3em;
        vertical-align: -0.25em;
        transform: none;
    }

    /* ── Headings: Bootstrap's fixed sizes from 1200px up (below that they scale with vw) ── */
    html h1, html .h1 { font-size: 2.5rem; }
    html h2, html .h2 { font-size: 2rem; }
    html h3, html .h3 { font-size: 1.75rem; }
    html h4, html .h4 { font-size: 1.5rem; }

    /* ── Content zones: custom.css shrinks the h1 below 768px ───────────────── */
    html [data-zonecontainername*="Content"] h1,
    html [data-zonecontainername*="Content"] .two-button-banner h2 {
        font-size: 2.5rem;
    }

    /* ── Footer: custom.css's desktop divider on the right-hand column ──────── */
    html .site-footer .footer-right {
        border-left: 1px solid var(--clr-border);
        padding-left: 3.5rem;
    }

    /* The footer's own markup and <style> come from SiteSettings.Footer (the CMS), not this repo.
       Its desktop rules (min-width 640 / 768 / 1024px) restated: brand left, links right. */
    html .on211-footer { padding: 70px 100px; }
    html .on211-footer-legal { flex-direction: row; }
    html .on211-footer-inner { flex-direction: row; }
    html .on211-footer-right { border-left: 1px solid rgb(176, 178, 179); padding-left: 50px; }

    /* ── Page breaks ──────────────────────────────────────────────────────────
       Keep cards, the map and each section of a record from splitting across a page. */
    html .agency-detail .col-lg-8 > section,
    html .agency-detail .agency-sidebar,
    html .agency-detail .agency-service,
    html .agency-detail .agency-location,
    html .agency-detail .agency-detail-map,
    html .agency-detail .urgent-card,
    html .agency-detail-strip {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    html h1, html h2, html h3, html h4 {
        break-after: avoid;
        page-break-after: avoid;
    }
}