/* ============================================================
   print.css
   Badger Fund of Funds

   Loaded only when a page is printed. DOA staff print these
   pages and the client hands them out on paper, so this file
   is part of the build, not an afterthought.

   Contains NO color values. Every color is a var() pointing
   at tokens.css.

   What it guarantees on letter paper:
     - no clipped text, including inside the table
     - no wasted first page
     - navigation suppressed
     - the footer printed as a plain block, so the DOA reporting
       address appears on every handout
     - the URL of every external link printed after its text
   ============================================================ */

@page {
  size: var(--print-page-size);
  margin: var(--print-page-margin);
}


/* --- Type on paper ------------------------------------------
   One override retunes the whole page. Every type role in
   tokens.css points at --font-size-base, so repointing that
   single value here scales every size for paper without touching
   a single element. The table and footer keep their 0.88 ratio.
   When the identity introduces a screen scale, the roles carry it
   into print automatically and this line still holds the base.
   ----------------------------------------------------------- */

:root {
  --font-size-base: var(--print-font-size);
}

html,
body {
  background-color: var(--color-print-canvas);
  color: var(--color-print-ink);
  font-size: var(--font-size-body);
  line-height: var(--print-line-height);
}


/* --- Suppressed on paper ------------------------------------
   Navigation does not print. A printed page cannot be clicked.
   ----------------------------------------------------------- */

.skip-link,
.site-nav {
  display: none;
}


/* --- Footer on paper ----------------------------------------
   The footer prints, because it carries the fund's legal name
   and the pointer to DOA reporting, and the client hands these
   pages out on paper. Its on-screen layout is dropped: no row
   layout, no rule, no muted color. It prints as plain text at
   the end of the content, and the link rule further down adds
   the DOA address after "DOA reporting".
   ----------------------------------------------------------- */

.site-footer {
  display: block;
  border-top: 0;
  margin-top: var(--space-md);
  padding: 0;
  color: var(--color-print-ink);
  break-inside: avoid;
  page-break-inside: avoid;
}

.site-footer p + p {
  margin-top: var(--space-3xs);
}


/* --- No wasted first page -----------------------------------
   The header keeps the fund name and nothing else, so the
   content starts near the top of sheet one.
   ----------------------------------------------------------- */

.site-header {
  border-bottom: var(--border-width-hairline) solid var(--color-print-rule);
  padding-top: 0;
  padding-bottom: var(--space-2xs);
}

.wrapper {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.main {
  padding-top: var(--space-sm);
  padding-bottom: 0;
}

/* Prose measure is a screen concern. On paper the page margin
   already sets the line length. */
.main h1,
.main h2,
.main p,
.main dl {
  max-width: none;
}


/* --- Labels come back on paper -------------------------------
   The page title and section labels are hidden on screen so the
   page fits one 1440x900 screen. That is a screen constraint. A
   printed handout still needs its title and its section labels,
   so they are restored here.

   To print the page exactly as it appears on screen instead,
   delete this rule.
   ----------------------------------------------------------- */

.label-hidden {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}


/* --- Page breaks -------------------------------------------- */

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

h1 {
  border-bottom-color: var(--color-print-ink);
  margin-top: 0;
}

.section {
  break-inside: auto;
  margin-top: var(--space-md);
}

.definitions dt {
  break-after: avoid;
  page-break-after: avoid;
}

.definitions dt,
.definitions dd {
  break-inside: avoid;
  page-break-inside: avoid;
}

p {
  orphans: 3;
  widows: 3;
}


/* --- Table on paper -----------------------------------------
   The scroll container is a screen device. On paper the table
   is laid out to the printable width and every cell wraps, so
   nothing is cut off. Column widths are set explicitly because
   the two allocation columns hold percentages and need very
   little room.
   ----------------------------------------------------------- */

.table-scroll {
  overflow: visible;
  border: 0;
}

table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
  break-inside: auto;
  page-break-inside: auto;
}

/* The header row repeats at the top of each printed page. */
thead {
  display: table-header-group;
}

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

th,
td {
  border: 0;
  border-bottom: var(--border-width-hairline) solid var(--color-print-rule);
  padding: 0.06in 0.10in;
  /* Long words wrap instead of being cut off. Automatic
     hyphenation is deliberately NOT used: in columns this narrow
     it produced breaks like "al-location" and "com-mittee". */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

thead th {
  background-color: var(--color-print-canvas);
  border-bottom: var(--border-width-heavy) solid var(--color-print-ink);
}

.col-segment     { width: 20%; }
.col-description { width: 33%; }
.col-governance  { width: 21%; }
.col-inception   { width: 13%; }
.col-current     { width: 13%; }


/* --- Artwork on paper ---------------------------------------
   Unused today. In place so artwork behaves on letter paper the
   day it is added.
   ----------------------------------------------------------- */

img,
svg {
  max-width: 100%;
  height: auto;
}

figure,
img {
  break-inside: avoid;
  page-break-inside: avoid;
}

figure {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  max-width: 100%;
}

/* The identity mark reproduces on paper. It is what identifies
   a printed leave-behind, so it is deliberately not suppressed. */
.site-logo {
  max-width: var(--logo-print-width);
}

/* People rows keep each photo and its name together on one page.
   Photo placeholders print as an outline, not a grey fill. */
.person {
  break-inside: avoid;
  page-break-inside: avoid;
}

.person-photo--placeholder {
  background-color: var(--color-print-canvas);
  border-color: var(--color-print-rule);
}

/* TONER SWITCH
   Photographs inside a page print by default, so nothing is
   silently lost from a printed handout. If DOA printer cost
   becomes a problem, remove the slashes on the line below and
   photographs stop printing. The identity mark is unaffected. */
/* .main figure { display: none; } */


/* --- Link URLs ----------------------------------------------
   A printed link is useless without its address. Only real
   addresses print. Same-page fragments are skipped, because
   printing "(#objectives)" helps nobody.
   ----------------------------------------------------------- */

a[href^="http"]::after,
a[href^="mailto:"]::after {
  content: " (" attr(href) ")";
  overflow-wrap: break-word;
  word-wrap: break-word;
}

a {
  text-decoration: underline;
  color: var(--color-print-ink);
}


/* --- Portfolio ----------------------------------------------
   This page is a wide composition and it is the one page the
   client hands out. It prints on its own terms.

   LANDSCAPE. The arrangement is 1104 wide on screen. Letter
   portrait gives 7 inches of paper, about 672px, and neither the
   six-fund row nor the Fund Focus line fits in it. Letter
   landscape gives 9.5 inches, about 912px, and both do.
   ----------------------------------------------------------- */

@page portfolio {
  size: letter landscape;
  margin: var(--print-page-margin);
}

/* On the document, not on .portfolio. Putting it on the
   composition alone turns that part landscape and leaves the
   header and the footer portrait, which prints one handout on
   four sheets in two orientations. */
.portfolio-page {
  page: portfolio;
}


/* --- Portfolio: two sheets, by choice ------------------------
   The composition is 677px tall when printed and a landscape
   sheet holds 564 after the header and the footer. Fitting it on
   one sheet means taking about 20 percent off every asset and
   every margin, which puts Fund Focus at 6pt. That is not a
   handout anyone can read.

   So it prints on two, and the break is placed rather than left
   to chance: the funds and the state on the first sheet, the
   periods and Fund Focus on the second.

   The break goes on the section, not on the list inside it. On
   the list, the section's heading stays behind and prints alone
   at the foot of the first sheet.
   ----------------------------------------------------------- */

.portfolio .portfolio-sheet-two {
  break-before: page;
  page-break-before: always;
}

.portfolio .periods {
  margin-top: var(--space-sm);
}

/* A fund's managers and its mark stay together on one sheet. */
.portfolio .fund,
.portfolio .fund-row {
  break-inside: avoid;
  page-break-inside: avoid;
}


/* --- Portfolio: the state flows, it does not sit beside -------
   On screen the two lower segments and the state share a grid.
   On paper they do not. Chrome fragments a grid row item by item
   and ignores break-inside on the items, so the state printed on
   the second sheet while its own heading stayed on the first.
   Rules were added to stop that and were ignored.

   So the block flows on paper: the two segments, then the state
   beneath them. The sheet has the room, and a handout that cannot
   come apart is worth more than one that matches the screen
   exactly. Everything else on the page keeps its arrangement.
   ----------------------------------------------------------- */

.portfolio .portfolio-lower {
  display: block;
}

.portfolio .fund-row--followon,
.portfolio .fund-row--existing {
  width: auto;
}

/* No break-inside rule here, deliberately. The state ends 97px
   above the foot of the first sheet and needs no protection, and
   adding the rule is what pushed it onto the second sheet away
   from its own heading. If it is ever orphaned again, move it in
   the markup rather than adding the rule back. */
.portfolio .map-panel {
  margin-top: var(--space-sm);
}

/* The state and its heading move as one piece. break-inside was
   tried first and Chrome ignored it on this element three ways:
   on the panel, on the section, and on the image. An inline-block
   is atomic to the fragmenter, so it cannot be split at all. */
.portfolio .map {
  display: inline-block;
}

.portfolio .map .segment-title {
  width: auto;
  position: static;
  left: auto;
  text-align: left;
}


/* --- Portfolio: links and wrapping ---------------------------
   THE MARKS AND THE HEADSHOTS ARE LINKS, AND THEIR ADDRESSES ARE
   NOT PRINTED. The rule further up prints the address after every
   external link, which is right for a sentence and wrong here:
   this page carries 29 image links, and 29 addresses set inside
   48px circles and 35px logo boxes would bury the composition.
   The DOA reporting link in the footer still prints its address,
   because it is a link in a sentence.

   The consequence is that a printed handout shows each fund's
   mark and name without its web address. Putting those addresses
   on paper means new copy, which is the client's to approve.
   ----------------------------------------------------------- */

.portfolio .fund-mark::after,
.portfolio .person-link::after {
  content: none;
}

/* Fund Focus is held to one line on screen at the client's
   request. On paper it may wrap, because clipped text on a
   handout is worse than a second line. */
.portfolio .focus-row dd {
  white-space: normal;
}

/* The footer carries the DOA address in full, which runs to two
   lines on paper. It needs no space beneath it as well. */
.portfolio-page .site-footer {
  padding-bottom: 0;
}


/* --- Portfolio: the rules come back on paper -----------------
   On screen the nine hairlines on this page are drawn at 1.45:1
   and 1.19:1, to match the board the client approved. Those are
   fine on a backlit screen and all but invisible out of a printer,
   and this is the page the client hands out. On paper they print
   at full strength like every other rule on the site.
   ----------------------------------------------------------- */

.portfolio .segment-title {
  border-bottom-color: var(--color-print-rule);
}

.portfolio .focus-row > div {
  border-top-color: var(--color-print-rule);
}