/* print.css — school detail page only, loaded via <link media="print">.
   Goal: a clean, ink-friendly handout a parent or student can print (or
   "Save as PDF") straight from the browser — no nav, no sidebar, no
   interactive chrome, nothing that depends on a mouse — packed as
   efficiently as the page allows (keeps the on-screen 2-column section
   layout rather than stacking everything into one tall column). */

@page {
  /* Portrait regardless of the browser/printer's last-used setting — a
     reading handout, not a wide table export. Size left unspecified (not
     "letter portrait") so it still honors A4 for non-US printers; only
     the orientation is opinionated. */
  size: portrait;
  margin: 0.5in;
}

/* Nearly every size in base.css/school-template.css is in em, cascading
   from this root value (normally a fluid clamp() that bottoms out at
   16px) — dropping it here shrinks headings, tables, score bars, etc. all
   at once instead of overriding dozens of individual font-size rules. */
html {
  font-size: 12px;
}

body {
  background: #fff;
  color: #000;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.container {
  min-height: auto;
}

/* ── Chrome that only makes sense on screen ── */
.site-header,
.floating-back,
.fav-btn,
.admissions-cta-strip,
.year-switcher-btn .sort-chevron,
.year-switcher-menu,
.adsbygoogle {
  display: none !important;
}

/* ── Hero: drop the photo banner (pure decoration, wastes ink/space) and
   let the title card itself be the page's header instead. ── */
.school-hero {
  display: none;
}

.stats-strip {
  margin: 0;
  padding: 0;
  max-width: none;
}

.hero-pill {
  box-shadow: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 16px;
  gap: 12px;
  /* Lets .quick-facts-strip (moved in here as a 3rd flex child just
     before printing — see the beforeprint listener in js/school.js)
     wrap onto its own row below the logo+name row instead of squeezing
     in beside them. */
  flex-wrap: wrap;
}

/* Only matches once .quick-facts-strip has actually been moved inside
   .hero-pill (see js/school.js's beforeprint listener) — drops its
   standalone-card styling (own border/background/top-margin) now that
   it's sharing the hero pill's card instead of being one of its own,
   and flex-basis: 100% is what forces it onto a new line: wider than
   any space left after the logo+name row above it, so it can't help
   but wrap. */
.hero-pill > .quick-facts-strip {
  flex: 1 1 100%;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid #eee;
  border-bottom: none;
  background: none;
}

/* Title card: a 76px logo and 1.6em name read fine as a floating card over
   a photo, but here it's just the page's masthead — shrink it so it isn't
   competing with the data below for space. */
.hero-logo {
  width: 42px;
  height: 42px;
}

.hero-name {
  font-size: 1.15em;
}

.hero-meta {
  font-size: 0.8em;
}

/* "Official Site →" is a link affordance — meaningless on paper where
   nothing's clickable. font-size: 0 hides the original text node
   without removing it (so the href-reading tool/assistive copy-paste
   still has real link text if the page is ever read digitally from a
   saved PDF); ::after showing attr(href) is the actual visible content
   in print, sized back up on its own since it doesn't inherit the
   zeroed font-size. */
.hero-site-link {
  font-size: 0;
}
.hero-site-link::after {
  content: attr(href);
  /* rem, not em — em here would resolve against .hero-site-link's own
     (zeroed) font-size and collapse to 0 right along with it. rem is
     relative to the document root (12px in this stylesheet), not the
     parent, so it's unaffected. */
  font-size: 0.75rem;
}

/* ⓘ/≈ tooltip-trigger buttons (hover/tap-to-reveal source notes) — the
   tooltip itself never shows on paper anyway since nothing can hover
   or tap, so the bare icon would just be inert clutter. */
.stat-info {
  display: none !important;
}

/* ── Year bar: keep the text (useful context for later reference), lose
   the interactive dropdown look. ── */
.year-bar-strip {
  max-width: none;
  margin: 8px 0 0;
  padding: 0;
}

.year-switcher-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: default;
}

/* ── Layout: full width now that the sidebar's gone, but otherwise as
   close to the on-screen layout as possible — the 2-column section body
   (.cols-2) and side-by-side Admissions/Cost (.school-section-row) are
   left alone (not collapsed to one column) so the page width is actually
   used and the handout doesn't run any longer than it has to. ── */
.quick-facts-strip {
  max-width: none;
  margin-top: 10px;
}

.stat-chip {
  padding: 8px 14px;
}

.stat-chip-val {
  font-size: 1.2em;
}

.stat-chip-label {
  font-size: 0.72em;
}

.school-page-layout {
  display: block;
  max-width: none;
  padding: 0;
}

#school-sections {
  max-width: none;
  padding: 0;
}

.school-section-row .school-section {
  min-width: 0;
}

/* school-template.css collapses .cols-2 to one column below a 720px
   viewport (@media max-width:720px) — a screen breakpoint, but a Letter
   page at the 0.5in margins above lands right at ~720px of print content
   width (A4 narrower still), so that rule would otherwise silently
   collapse it here too. Same specificity, later in the cascade (this
   file loads after school-template.css), so re-asserting it here wins
   regardless of how narrow the physical page turns out to be. */
.cols-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

/* ── Flatten decorative shadows/radii that don't print well. ── */
.tbl,
.funnel-step {
  box-shadow: none;
}

/* ── Tighter vertical rhythm than the screen version — printed paper has
   a hard page boundary, so the spacious screen margins (meant for a
   scrolling viewport) just cost extra pages here for no readability
   gain. ── */
.school-section { margin-top: 16px; }
.school-section-row { margin-top: 16px; gap: 22px; }
/* Same solid brand-color bar as on screen, just shallower — the 1.45em/
   10px-18px padding that reads fine as a card header on a scrolling
   page is oversized for a paper handout squeezing 7 of these in, and
   costs real page count across the whole document. font-size first
   (it's what padding's 10px top/bottom was sized against) then padding
   itself, both cut by roughly half. */
.section-title { font-size: 1.05em; padding: 6px 14px; margin: 0 0 6px; }
.subsection-title { margin: 10px 0 6px; }
.cols-2 { gap: 10px 22px; }
/* 220px was already overlap-free, but tight — 260px gives the rotated x-axis
   labels real breathing room above the table instead of just clearing it.
   Paid for by trimming section/header margins above (22px→16px, 14px→10px,
   etc.) rather than letting it grow the page count further. */
.gpa-chart-wrap { height: 260px; }

/* ── Keep small, atomic pieces of content together across a page break —
   a table row or chart splitting mid-way looks broken. Deliberately NOT
   applied to the section as a whole (.school-section): with the 2-column
   layout preserved, forcing every section to stay intact would often
   push a whole column to the next page over a couple of stray lines,
   which costs far more paper than the section break itself would. ── */
.tbl,
tr,
.score-row,
.demo-bar-row,
.factor-row,
.funnel-step,
.gpa-chart-wrap {
  break-inside: avoid;
}

/* One step further up from individual rows/boxes: keep each *column* of
   a two-column section (e.g. Selectivity's "By Round + Waitlist" vs "By
   Gender + Transfer Admissions") together as one unit, and keep the
   three-box applicant funnel from splitting between its boxes. Still
   short of forcing the whole .school-section to avoid a break — a column
   is usually well under a page tall on its own, so this stops the
   mid-column splits that read as "cut off" without risking the bigger
   section-level cost (a short section stranding a near-empty tail page
   because the browser couldn't fit the whole thing above a break).

   Explicitly NOT .factor-list (What Matters in the Decision): confirmed
   via an actual print-to-PDF render that forcing its ~10-row column whole
   stranded the section's title + legend alone at the bottom of one page
   while shoving the entire list to the next, wasting most of a page.
   Each .factor-row already has its own break-inside: avoid above, which
   is all a long flat list of same-weight rows needs — same reasoning as
   not forcing whole tables/sections to avoid a break. */
.cols-2 > div:not(.factor-list),
.funnel {
  break-inside: avoid;
}

/* The Admissions/Cost pair (see .school-section-row above) is short
   enough in practice to always keep together — unlike the taller
   sections above, there's no real paper cost to being strict here. */
.school-section-row {
  break-inside: avoid;
}

.section-title,
.subsection-title {
  break-after: avoid;
}