/* ================================================================
   Koala Grove — print.css
   Print and PDF styles. 8.5" × 11" letter-size output.
   Paired with main.css for combined screen+print styling.
   ================================================================ */

@page {
  size: 8.5in 11in;
  margin: 0.5in;
}

@media print {

  /* ── Reset body for print ────────────────────────────────────── */
  :root {
    --bg: #ffffff;
    --shadow: none;
  }

  html, body {
    background: #ffffff !important;
  }

  body {
    font-size: 10.5pt;
    line-height: 1.45;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color: var(--ink);
  }

  /* ── Preserve brand colors in print ─────────────────────────── */
  /* This ensures backgrounds print, not just screen rendering */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── Remove topnav in print ──────────────────────────────────── */
  .topnav { display: none; }

  /* ── Shell layout: single column for print ───────────────────── */
  .shell {
    width: 100%;
    margin: 0;
    display: block;
  }

  /* ── Sidebar in print ────────────────────────────────────────── */
  .sidebar {
    position: static;
    box-shadow: none;
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
    backdrop-filter: none;
    background: white;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ── Main content ────────────────────────────────────────────── */
  main {
    display: block;
  }

  .card {
    box-shadow: none;
    border: 1px solid var(--line);
    border-top: 2.5pt solid var(--accent);
    border-radius: var(--radius);
    margin-bottom: 18px;
  }

  /* ── Page break utilities ────────────────────────────────────── */
  .print-page {
    break-before: page;
    page-break-before: always;
  }

  .avoid-break {
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  /* ── Hero sizing for print ───────────────────────────────────── */
  .hero {
    grid-template-columns: 1.1fr 0.9fr;
    min-height: auto;
  }

  .hero-copy {
    padding: 28px;
  }

  .hero h1 {
    font-size: 26pt;
  }

  .hero-doc {
    min-height: auto;
  }

  /* ── Typography scaling for print ───────────────────────────── */
  .hero .sub,
  .lede,
  .meta,
  .footer-note,
  p,
  li,
  td,
  th {
    font-size: 10pt;
  }

  h2, h3 {
    font-size: 16pt;
    font-family: "Poppins", "Instrument Sans", Arial, sans-serif;
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  h4 {
    font-size: 11.5pt;
    font-family: "Poppins", "Instrument Sans", Arial, sans-serif;
  }

  h5 {
    font-size: 10pt;
  }

  section {
    padding: 20px 22px 22px;
  }

  /* ── TOC in print ────────────────────────────────────────────── */
  .toc a {
    padding: 6px 0;
    border: none;
    background: none;
    font-size: 9.5pt;
  }

  .toc a:hover,
  .toc a.active {
    background: none;
    border: none;
    transform: none;
  }

  /* ── Grid layouts in print ───────────────────────────────────── */
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
  }

  .grid-2,
  .layers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .adjust-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
  }

  /* ── Tables in print ─────────────────────────────────────────── */
  table {
    font-size: 9.4pt;
  }

  th, td {
    padding: 8px 10px;
  }

  /* ── Experience cards in print ───────────────────────────────── */
  .experience-card {
    margin-bottom: 14px;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .experience-head {
    padding: 14px 16px;
  }

  .experience-body {
    padding: 14px 16px;
    gap: 10px;
  }

  /* ── Callout in print ────────────────────────────────────────── */
  .callout {
    padding: 14px 16px;
    border-radius: var(--radius-md);
  }

  /* ── Checkbox grid in print ──────────────────────────────────── */
  .checkbox-grid div {
    padding: 10px 12px;
    font-size: 9.5pt;
  }

  /* ── Chip row ────────────────────────────────────────────────── */
  .chip-row {
    gap: 6px;
  }

  .chip {
    padding: 5px 9px;
    font-size: 8.5pt;
  }

  /* ── Page band ───────────────────────────────────────────────── */
  .page-band {
    display: flex;
    padding: 10px 14px;
    font-size: 9pt;
    background: rgba(102,217,126,0.08);
    border-top: 2px solid var(--accent);
    color: var(--ink);
    font-family: "Instrument Sans", Arial, sans-serif;
  }

  /* ── Footer and prev-next navigation: hide in print ─────────── */
  .doc-footer {
    display: none;
  }

  /* ── Subcard ─────────────────────────────────────────────────── */
  .subcard {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--bg);
    border-color: var(--line);
  }

  /* ── Mini note ───────────────────────────────────────────────── */
  .mini-note {
    font-size: 8.5pt;
    padding: 10px 12px;
  }

  /* ── Soft list ───────────────────────────────────────────────── */
  .soft-list li {
    padding: 8px 10px;
    font-size: 10pt;
  }

  /* ── Quote ───────────────────────────────────────────────────── */
  .quote {
    padding: 12px 14px;
    font-size: 10pt;
  }

  /* ── Doc group header (index page) ──────────────────────────── */
  .doc-grid {
    display: block;
  }

  .doc-card {
    display: inline-block;
    width: 48%;
    margin-bottom: 10px;
    margin-right: 2%;
    break-inside: avoid;
  }

  /* ── Eyebrow pill ────────────────────────────────────────────── */
  .eyebrow {
    font-size: 8pt;
    padding: 5px 9px;
  }

  /* ── Ensure a11y: links show clearly in print ────────────────── */
  a[href]:not(.topnav-brand):not(.toc a):not(.doc-card):not(.prev-next-link)::after {
    content: none;
  }

  /* ── Intentional page breaks for long documents ──────────────── */
  /* These classes can be applied in templates where a natural    */
  /* break is desired before a major section begins.             */
  .break-before-print {
    break-before: page;
    page-break-before: always;
  }

  .keep-together {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ── Art panel: maintain in print ─────────────────────────────── */
  .hero-art {
    background: rgba(102,217,126,0.12) !important;
  }

  .art-panel {
    width: 200px;
    aspect-ratio: 4 / 5;
  }
}