/* ═══════════════════════════════════════════════════════════════════════════
   PRINT — blog-view.php and view-species.php, linked with media="print"

   Applies only when an article is printed or saved as a PDF from the browser's
   print dialog. Nothing here reaches the screen, so the on-screen article
   styles in styles-x-news.css are untouched.

   Kept: the title, summary, date, author and category, and the article body
   with its components — tips, key facts, pull quotes, the ID box, figures,
   lists and the reference — in the light palette, on white.
   Dropped: navigation, hero photograph, sidebar, share bar, author box,
   comments, related articles, Instagram block, footer and floating controls.

   No borders: callouts and panels keep a background fill, which
   print-color-adjust asks the browser to print.
   ═══════════════════════════════════════════════════════════════════════════ */

@page { size: A4; margin: 16mm 16mm 18mm; }

/* ── Palette: the light theme's tokens, whichever theme is on screen ─────── */
html, html[data-theme="dark"], html[data-theme="light"] {
    --bg: #ffffff; --bg-2: #f3efe6; --bg-3: #ebe5d8; --bg-card: #f7f2e8;
    --ink: #1f221b; --ink-2: #3f4438; --ink-3: #5c6052; --ink-4: #6f7063;
    --rule: rgba(55,62,43,.22);
    --emerald: #31591e; --emerald-lt: #31591e; --emerald-drk: #253e19; --emerald-xdrk: #253e19;
    --emerald-dim: rgba(77,132,47,.12);
    --teal-dim: rgba(40,95,104,.10);
    --parchment-dim: rgba(109,96,66,.1);
}
html, body {
    background: #ffffff !important;
    background-image: none !important;
    color: var(--ink);
}
body { font-size: 10.5pt; }
* { box-shadow: none !important; text-shadow: none !important; }

/* ── What does not belong on paper ───────────────────────────────────────── */
#read-progress, .ot-nav, .site-mode-banner, .msg-toast,
.ot-hero__bg, .ot-hero__veil, .art-breadcrumb, .art-hero__author,
.art-body .col-lg-4, .art-sidebar,
.art-byline__footer, .art-byline, .art-tags,
#breadcrumbs, #comments, .art-related, .insta-section, .ot-footer, #btt,
.art-zoom::after, .art-cta__btn, .vid-card__play {
    display: none !important;
}

/* ── Content that only appears on scroll must be visible ─────────────────── */
.reveal, .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ── Layout: one column, full width ──────────────────────────────────────── */
.container { max-width: 100% !important; width: 100% !important; padding: 0 !important; }
.art-body .row { display: block !important; margin: 0 !important; }
.art-body .col-lg-8 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; }
.art-body, main, section { padding: 0 !important; margin: 0 !important; }

/* ── The heading block: title, summary and a small meta line ─────────────── */
.ot-hero {
    position: static !important; min-height: 0 !important; height: auto !important;
    padding: 0 0 5mm !important; margin: 0 0 6mm !important; background: none !important;
    overflow: visible !important;
}
.ot-hero__content { position: static !important; padding: 0 !important; transform: none !important; }
.art-hero__title {
    font-size: 22pt !important; line-height: 1.15 !important; margin: 0 0 3mm !important;
    color: var(--ink) !important;
}
.art-hero__title em, .art-hero__title span { color: var(--emerald) !important; }
.art-hero__excerpt { font-size: 11pt !important; line-height: 1.5 !important; color: var(--ink-2) !important; margin: 0 0 3mm !important; max-width: none !important; }
.art-hero__meta { display: flex !important; flex-wrap: wrap; gap: 2mm 5mm; margin: 0 !important; }
.art-hero__meta, .art-hero__meta * { color: var(--ink-3) !important; font-size: 8.5pt !important; }
.art-hero__cat { background: var(--emerald-dim) !important; color: var(--emerald) !important; padding: .6mm 2.5mm !important; }
/* A view count means nothing on paper. */
.art-hero__read:has(.fa-eye) { display: none !important; }

/* ── Body text ───────────────────────────────────────────────────────────── */
.art-content p, .art-content li { font-size: 10.5pt !important; line-height: 1.6 !important; color: var(--ink-2) !important; orphans: 3; widows: 3; }
.art-content p { margin: 0 0 3.2mm !important; }
.art-content .art-lead { font-size: 12pt !important; color: var(--ink) !important; }
.art-content strong { color: var(--ink) !important; }
.art-content em { color: var(--emerald) !important; }
.art-content a { color: var(--emerald) !important; text-decoration: underline; }
.art-content h2 {
    font-size: 14pt !important; color: var(--ink) !important;
    margin: 7mm 0 3mm !important; padding: 0 !important;
    break-after: avoid; page-break-after: avoid;
}
.art-content h3 { font-size: 11.5pt !important; color: var(--ink) !important; margin: 5mm 0 2mm !important; break-after: avoid; }
.art-divider { margin: 6mm 0 !important; }

/* ── Components: fills print, and none of them split across a page ──────── */
.art-tip, .art-warn, .art-keyfact, .art-pullquote, .art-cta, .art-reference, .id-box, .art-figure, .art-figures {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    break-inside: avoid; page-break-inside: avoid;
}
.art-tip, .art-keyfact, .art-cta, .art-reference { background: var(--bg-card) !important; }
.art-tip { background: var(--emerald-dim) !important; }
.art-pullquote { background: var(--bg-2) !important; }
.art-pullquote p { color: var(--ink) !important; }
.art-keyfact__text, .art-cta__title { color: var(--ink) !important; }
.art-keyfact__label, .art-keyfact__text strong { color: var(--emerald) !important; }
.art-keyfact::before, .art-cta::before { background: linear-gradient(90deg, transparent, var(--emerald), transparent) !important; }
.id-box { background: var(--bg-card) !important; }
.id-box__header { background: var(--bg-2) !important; }
.id-box__latin { color: var(--emerald) !important; }
.id-box__field-label { color: var(--ink-3) !important; }
.id-box__field-val, .id-box__name { color: var(--ink) !important; }

/* The CTA's button cannot be clicked on paper, so its address is written out. */
.art-cta::after {
    content: attr(data-print-url);
    display: block; margin-top: 2mm;
    font-family: var(--font-mono); font-size: 8.5pt; color: var(--emerald);
    word-break: break-all;
}

img { max-width: 100% !important; break-inside: avoid; }

/* ── Where it came from: printed at the end of the article ───────────────── */
p.art-print-source[hidden] {
    display: block !important;
    margin: 9mm 0 0 !important; padding: 0 !important;
    font-family: var(--font-mono); font-size: 8pt !important; color: var(--ink-3) !important;
    word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPECIES PAGE — view-species.php

   Kept: category, common and scientific name, badges; the overview; the
   Distribution / Habitat / Size cards; Identification with its text and ID
   images; then the facts — names, origin and status, classification, synonyms,
   references and dates — two to a row; the disclaimer and the source line.
   Dropped: hero photograph, share card, tags, articles list, map, videos, audio,
   similar species, gallery, files, external links, donate, breadcrumbs, modals.
   ═══════════════════════════════════════════════════════════════════════════ */

.sp-hero__bg, .sp-hero__veil, .sp-hero__eyebrow::before, #flash-messages, .sp-mobile-summary,
.id-tabs, #id-pane-video,
#intro-bit .sp-infobox:has(.sp-tags), #intro-bit .sp-infobox:has(.share-btns),
.sp-disclosure--articles, .sp-disclosure--distribution, .leaflet-container,
#intro-bit .text-center:has(.btn-support),
#intro-bit .sp-section:has(.fa-volume-high),
#intro-bit #showcase-bit:has(.ot-swiper),
#videos, #gallery, #files, #links, .modal, .sp-disclosure > summary {
    display: none !important;
}

/* The heading block */
.sp-hero {
    position: static !important; min-height: 0 !important; height: auto !important;
    padding: 0 0 5mm !important; margin: 0 0 5mm !important; background: none !important; overflow: visible !important;
}
.sp-hero__content { position: static !important; padding: 0 !important; transform: none !important; }
.sp-hero__eyebrow { color: var(--ink-3) !important; font-size: 8.5pt !important; margin: 0 0 1.5mm !important; }
.sp-hero__title { font-size: 24pt !important; line-height: 1.1 !important; color: var(--ink) !important; margin: 0 0 1mm !important; }
.sp-hero__title em, .sp-hero__title span { color: var(--emerald) !important; }
.sp-hero__latin { display: block; font-size: 12pt !important; color: var(--emerald) !important; margin: 0 0 3mm !important; }
.sp-hero__badges { gap: 2mm !important; }
.sp-hero__badges * { font-size: 8pt !important; }

/* One column for the story, then the facts two to a row */
#intro-bit > .container > .row { display: block !important; margin: 0 !important; }
#intro-bit > .container > .row > .col-md-8,
#intro-bit > .container > .row > .col-md-4 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; }
#intro-bit > .container > .row > .col-md-4 {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 4mm; align-items: start; margin-top: 6mm !important;
}
#intro-bit > .container > .row > .col-md-4 > * { margin: 0 !important; break-inside: avoid; page-break-inside: avoid; }
#intro-bit > .container > .row > .col-md-4 > .sp-disclosure--references { grid-column: 1 / -1; }

.sp-body-text, .sp-body-text p, .sp-body-text li { font-size: 10.5pt !important; line-height: 1.6 !important; color: var(--ink-2) !important; }
.ruled { margin: 5mm 0 3mm !important; color: var(--ink-3) !important; }

/* The three description cards side by side. Paper width falls under the
   phone rules, which hide these in favour of the (hidden) mobile summary. */
.sp-description-cards { display: block !important; }
.sp-description-cards .row { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 3mm; margin: 0 !important; }
.sp-description-cards .row > [class*="col-"] { width: auto !important; max-width: none !important; padding: 0 !important; }

/* Panels: a fill, no edge, not split across a page */
.detail-card, .sp-section, .sp-infobox, .classif-block, .ref-infobox, .ot-disclaimer {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    background: var(--bg-card) !important; border: 0 !important;
    break-inside: avoid; page-break-inside: avoid;
}
.sp-section { margin: 5mm 0 0 !important; }
/* The phone rules hide these headings in favour of the (hidden) summary. */
.sp-disclosure__body > h2 { display: block !important; }
.sp-section__head { background: var(--bg-2) !important; border: 0 !important; }
.sp-section__head-title, .classif-block h2, .detail-card__label { color: var(--ink) !important; }
.detail-card__body, .sp-section__body, .sp-section__body p, .sp-meta-value, .classif-val, .ref-row__val { color: var(--ink-2) !important; font-size: 9.5pt !important; }
.sp-meta-label, .classif-rank, .ref-row__label { color: var(--ink-3) !important; }
.classif-val--leaf, .classif-val a { color: var(--emerald) !important; }

/* No edges on paper: the badges, the section icon box and the gallery items all
   carry an outline on screen. A fill carries the badge instead. */
.sp-status-badge, .sp-section__head-icon, .id-gallery__item, [class*="origin--"] { border: 0 !important; }
.sp-status-badge, .sp-section__head-icon, [class*="origin--"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* The page's top margin on the content would leave a gap under the heading. */
#intro-bit > .container { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ID images: the images pane regardless of which tab was open */
#id-pane-images { display: block !important; padding-top: 3mm !important; }
.id-gallery { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.id-gallery__item { display: block !important; max-width: none !important; aspect-ratio: auto !important; overflow: visible !important; break-inside: avoid; }
.id-gallery img { width: 100% !important; height: auto !important; border-radius: var(--radius) !important; transform: none !important; }
/* On screen the caption overlays the photo on a dark gradient; on paper it is a line of text under it. */
.id-gallery__caption { position: static !important; background: none !important; padding: 1.5mm 0 0 !important; color: var(--ink-2) !important; font-size: 7.5pt !important; }
.id-gallery__zoom { display: none !important; }

.ot-disclaimer { margin-top: 6mm !important; }
.ot-disclaimer p { font-size: 8.5pt !important; line-height: 1.5 !important; color: var(--ink-3) !important; }