/* The wide white border around every printed page isn't coming from
   mx-auto/max-w-[1600px] - at a real print page's width those never clamp,
   so they contribute 0 margin (confirmed by measuring at a simulated A4
   width). It's the browser's own default print margin, which Chrome
   reserves in addition to whatever padding the page's own content has.
   @page controls that reserved margin directly, so shrink it here rather
   than fighting it with more CSS on the content itself. This applies
   across every page that loads print.css, not just these three - a
   tighter default page margin is a page-agnostic setting, not something
   that needs to vary per template. */
@page {
    margin: .5cm;
}

@media print {

    /* Site chrome that adds no value on paper */
    footer,
    .notification-wrapper,
    .siteWideMessage,
    #menu-toggle,
    #mobile-menu,
    #btnPrintProfile,
    .general-contact-form,
    .breadcrumb {
        display: none !important;
    }

    #teamRightCol .bg-gray-50 {
        background-color: initial;
        margin-bottom:0em;
    }
    /* The header is normally fixed/overlaid, so it flows normally in
           print instead - see TeamIndividual.aspx for the same treatment */
    header#main-header {
        position: static !important;
        background: none !important;
        box-shadow: none !important;
        color: var(--azimut-navy) !important;
    }

        header#main-header nav,
        header#main-header .nav-icon {
            display: none !important;
        }

    #nav-logo {
        filter: invert(1) brightness(0.2) !important;
    }

    /* Scrolled header swaps in the brand-colour logo, which already prints fine */
    #nav-logo[src*="Primary_Logo_Colour"] {
        filter: none !important;
    }

    /* The hero photo background won't print, so its white text/overlay -
           designed to sit on that photo - needs to read dark-on-white
           instead, and the padding reserved to clear the fixed header can
           collapse down */
    .article-hero {
        padding-top: 0cm !important;
        padding-bottom: 0cm !important;
        background-image: none !important;
    }

    .article-hero-overlay {
        display: none !important;
    }

    .article-hero,
    .article-hero [class*="text-white"] {
        color: var(--azimut-navy) !important;
    }

        .article-hero [class*="border-white"] {
            border-color: #ddd !important;
        }

    /* Continue Reading and the sidebar panels aren't useful on paper */
    .related-articles-view,
    aside.article-aside {
        display: none !important;
    }

    #articleBody {
        width: 100% !important;
    }

    /* Comments (existing comments + the leave-a-comment form) and the
           clickable tag "buttons" aren't useful/interactive on paper -
           the plain-text "Topic tags:" line above them can stay */
    .comments-section,
    .clsCommentsForm,
    .article-tags {
        display: none !important;
    }


    h3 a[href="/monthly"] {
        display: none !important;
    }

    /* Monthly report buttons are white text on an inline navy
               background - the background won't print by default, so on
               its own the text would disappear. Force black text (and drop
               the background in favour of a light border) so they stay
               legible either way */
    .monthly-reports-wrapper a {
        color: #000 !important;
        background: none !important;
        border: 1px solid #ccc !important;
    }

    /* The year list on the portfolio page collapses older years behind a
       "show more" toggle - that's a screen-only affordance, so print
       everything and drop the button itself */
    .monthly-reports-wrapper .monthly-report-year-row {
        display: flex !important;
    }
    .monthly-reports-toggle {
        display: none !important;
    }


    /* ================= */

    div#teamRightCol .mb-12 {
        margin-bottom: 5px !important;
    }

    main.pt-32,
    main.py-16 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

        main.pt-32 > div.pt-16 {
            padding-top: 0 !important;
        }

    /* Sticky positioning can misbehave across printed page breaks */
    .sticky {
        position: static !important;
    }

    /* The portrait/bio layout only becomes two columns at the lg breakpoint
       (1024px), which a printed page's width usually doesn't reach - so it
       fell back to a single stacked column and the portrait rendered at
       the full page width instead of sitting beside the bio. Force the
       same two-column arrangement for print regardless of viewport width. */
    #teamGrid {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
    #teamLeftCol {
        grid-column: span 3 / span 3 !important;
    }
    #teamRightCol {
        grid-column: span 8 / span 8 !important;
    }

    /* Blank placeholder map, the "Get Directions" link, and the
               interactive enquiry form/captcha aren't usable on paper.
               pnlContact/aDirections are server controls rendered inside the
               MainContent placeholder, so their actual client IDs come out
               prefixed (e.g. "MainContent_pnlContact") - match on the suffix
               so this doesn't silently stop working if that naming shifts */
    #mapWrapper,
    [id$="_pnlContact"],
    #pnlContact,
    [id$="_aDirections"],
    #aDirections {
        display: none !important;
    }

    /* Keep the portrait and each contact block from splitting across
               a page break */
    #portraitWrapper,
    .contact-card {
        page-break-inside: avoid;
    }

    /* A long email address has no natural break points (no spaces/hyphens),
       so it doesn't wrap on its own - combined with the narrower 3-column
       width print now forces on this page (see #teamLeftCol above), that
       let it run off the edge of the page instead of wrapping like the
       shorter phone/mobile numbers next to it. Let it break wherever it
       needs to so it stays on the page. */
    .contact-card a {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    /* The portrait box is sized with aspect-[4/5] (the CSS aspect-ratio
       property), which can collapse to zero height in Chrome's real
       print/PDF pagination pass - see the .aspect-video note further down
       for the full explanation. Same fix: rebuild the 4:5 box with the
       older padding-bottom percentage technique instead. */
    #portraitWrapper {
        aspect-ratio: auto !important;
        height: 0 !important;
        padding-bottom: 125% !important;
        position: relative !important;
    }
    #portraitWrapper > img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Search/News results (Search.aspx, routed for both /search and /news):
       a CSS Grid's rows don't reflow across a print page break in Chromium -
       a row that doesn't fit in the remaining space on the page gets
       clipped rather than continuing onto the next page, which is why
       results were disappearing part-way down the printed page. Falling
       back to a plain stacked block list lets each card flow/break
       normally instead */
    .grid-container {
        display: block !important;
    }
    .grid-container .result-card {
        height: auto !important;
        margin-bottom: 1.5rem;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* The thumbnails inside those cards are sized with the CSS aspect-ratio
       property (Tailwind's aspect-video), which Chrome has a long-standing
       bug with: it can collapse to zero height specifically during the
       browser's real print/PDF pagination pass, even though it renders fine
       on-screen (and under DevTools' "Emulate CSS media: print", which only
       swaps stylesheets and still uses the normal on-screen layout engine,
       not the real print pass). Rebuild the same 16:9 box with the older
       padding-bottom percentage technique instead, which doesn't depend on
       aspect-ratio at all and isn't affected by that bug. */
    .aspect-video {
        aspect-ratio: auto !important;
        height: 0 !important;
        padding-bottom: 56.25% !important;
        position: relative !important;
    }
    .aspect-video > img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* The featured/secondary teaser blocks at the top of the search/news
       page carry the same risk - an absolutely-positioned image inside an
       overflow:hidden section will get clipped rather than reflow if a
       page break lands inside it. Fall back to a simple stacked layout. */
    .featured-section {
        display: block !important;
        overflow: visible !important;
        min-height: 0 !important;
        page-break-inside: avoid;
    }
    .featured-image-container {
        position: static !important;
        width: 100% !important;
        height: 300px !important;
    }
    .featured-content-container {
        width: 100% !important;
        padding: 1.5rem 0 !important;
    }

}