/* ==========================================================================
   JobSeekerFoundry print stylesheet.

   Loaded with media="print" after site.css, lab.css and lab-theme.css, so
   it wins on equal specificity. Goal: any page prints (or saves to PDF) as
   a clean paper version.
     - Directory pages become a readable resource list with the web
       address printed after each name.
     - The Job Seeker Playbook becomes a paper checklist with boxes to tick.
     - Prose pages (FAQ, Privacy, and so on) become plain articles.

   Rules of the road: black text on white, no backgrounds, no shadows, no
   transforms, no sticky or fixed positioning. It relies only on class
   names that already exist in the HTML.
   ========================================================================== */

@page {
  margin: 1.6cm;
}


/* ---- 1. Base: white paper, black ink, readable size --------------------- */

/* Resetting the color variables here means that anything in site.css or the
   lab files that reads a variable (including a dark theme set through the
   data-theme attribute) prints as plain black on white. The extra selectors
   beat any theme block on specificity. */
:root,
:root[data-theme],
:root[data-theme="dark"],
:root[data-theme="light"] {
  --paper:       #FFFFFF;
  --paper-card:  #FFFFFF;
  --ink:         #000000;
  --ink-muted:   #222222;
  --steel:       #000000;
  --steel-deep:  #FFFFFF;
  --steel-light: #000000;
  --steel-mist:  #666666;
  --ember:       #000000;
  --ember-link:  #000000;
  --ember-hover: #000000;
  --amber:       #FFFFFF;
  --gold:        #000000;
  --white-hot:   #000000;
  --rule:        #999999;
  --steel-tint:  #FFFFFF;
}

/* site.css sizes everything in rem, so setting the root size to 11pt scales
   the whole page to a comfortable paper size in one move. */
html {
  font-size: 11pt;
  background: #FFFFFF !important;
}

body {
  background: #FFFFFF !important;
  color: #000000 !important;
  font-size: 1rem;
  line-height: 1.4;
}

/* Belt and braces: strip decoration from everything. Backgrounds, shadows,
   transforms, and animation have no place on paper. Text color is forced to
   black below, link by link, rather than here, so the badge and checkbox
   rules stay simple. */
*,
*::before,
*::after {
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

main,
.page,
article,
section,
p,
li,
div,
span,
h1, h2, h3, h4, h5, h6 {
  color: #000000;
}

/* Wide containers should just fill the sheet. */
main {
  padding: 0.8rem 0 0;
}
.page,
.band,
.check-layout,
.check-body {
  max-width: none !important;
  width: auto !important;
}
.page {
  margin: 0;
}

/* Headings: the display font if the browser has it (the web font may not
   be loaded in every print path, and the fallback is fine), weight only. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  letter-spacing: 0;
  /* Never leave a heading stranded at the bottom of a sheet. */
  break-after: avoid;
  page-break-after: avoid;
}
h1, h2, h3 { text-transform: none; }
h1 { font-size: 1.9rem; font-weight: 800; margin: 0.4rem 0 0.4rem; }
h2 { font-size: 1.35rem; font-weight: 800; margin: 1.4rem 0 0.4rem; }
h3 { font-size: 1.1rem;  font-weight: 700; margin: 1rem 0 0.3rem; }

p, li {
  orphans: 3;
  widows: 3;
}
p { margin: 0 0 0.6rem; }

.page-eyebrow {
  color: #000000;
  letter-spacing: 0.04em;
  margin: 0 0 0.2rem;
}


/* ---- 2. Links ----------------------------------------------------------- */

a,
a:visited {
  color: #000000 !important;
  text-decoration: underline;
}

/* Print the web address after every outside link in the page content, so a
   reader holding the paper can still find the site. Scoped to main so the
   logo link and the footer are left alone, and to http(s) so internal links
   (which are relative, like /faq/) and mailto links print as plain text.
   The address wraps if it is long. */
main a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-weight: 400;
  font-size: 0.85em;
  overflow-wrap: anywhere;
  word-break: break-all;
}



/* ---- 3. Chrome that means nothing on paper ------------------------------ */

/* Navigation, search, skip link, back to top, filters, jump control, report
   links, the Ko-fi notes, footer preference buttons, the Saved link,
   dialogs, the analytics noscript iframe, and the lab chrome, named one
   by one. A prefix match on "lab-" would also catch the layout wrappers
   and state classes (lab-toc-main, lab-is-saved, and the body classes),
   and print a blank page. */
.skip-link,
.site-nav,
.nav-bar,
.nav-menu,
.nav-groups,
.nav-search,
.nav-saved,
.back-to-top,
.filters,
.filters-toggle,
.filter-controls,
.jump-nav,
.jump-links,
.report-issue,
.report-dialog,
.support-note,
.footer-prefs,
.reading-toolbar,
.tracker,
.router-go,
.button,
.cta-secondary,
dialog,
iframe,
noscript,
script,
.lab-save,
.lab-chips,
.lab-results-bar,
.lab-toc,
.lab-sheet,
.lab-sheet-button,
.lab-density,
.lab-anchor,
.lab-empty,
.lab-saved-tools,
.lab-saved-note,
.lab-opened,
.lab-situations,
.lab-related,
[data-saved-count] {
  display: none !important;
}
/* The sidebar layout wrappers print as plain blocks. */
.lab-toc-layout, .lab-toc-main { display: block !important; }


/* ---- 4. Header: keep the logo, it identifies the printout --------------- */

.site-header {
  position: static !important;
  background: transparent !important;
  color: #000000;
  padding: 0 0 0.5rem;
  border-bottom: 1.5pt solid #000000;
  margin: 0 0 0.6rem;
}
.brand-logo {
  max-height: 1.9cm;
  width: auto;
}
.tagline {
  display: block !important;
  color: #000000;
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
}

/* The breadcrumb trail is useful on paper (it says where the page sits). */
.breadcrumbs,
.breadcrumbs a {
  color: #000000 !important;
  font-size: 0.85rem;
}


/* ---- 5. Directory listings ---------------------------------------------- */

.resource-group {
  margin: 1.2rem 0;
}

/* Group headings: plain, with a thin rule. break-after keeps the heading
   with its first card instead of orphaning it at the foot of a sheet. */
.group-heading {
  font-size: 1.2rem;
  text-transform: none;
  border-bottom: 1pt solid #000000;
  padding-bottom: 0.2rem;
  margin: 1.2rem 0 0.5rem;
  break-after: avoid;
  page-break-after: avoid;
}
.group-note,
.resource-note {
  color: #000000;
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
  break-after: avoid;
  page-break-after: avoid;
}

/* Keep the first card with the heading above it. The heading's own
   break-after covers most browsers; this nudges the first card to also
   resist a break right after the group note. */
.group-heading + .resource-list,
.group-note + .resource-list {
  break-before: avoid;
  page-break-before: avoid;
}

.resource-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each listing is a compact block with a thin rule between listings. It is
   never split across two sheets. The screen version is a grid when a logo is
   present; on paper it is a simple block. */
.resource,
.resource.has-logo {
  display: block !important;
  border: 0;
  border-left: 0;
  border-bottom: 0.5pt solid #999999;
  padding: 0.45rem 0 0.5rem;
  margin: 0;
  break-inside: avoid;
  page-break-inside: avoid;
  overflow-wrap: break-word;
}

/* Logos: hidden on purpose. They are small, but 2,700 of them cost ink and
   the printed web address already identifies each site. Hiding them also
   frees the left column so the text can use the full line. */
.resource-logo,
.resource.has-logo > .resource-logo,
.ac-logo {
  display: none !important;
}

.resource-name,
.resource.has-logo > .resource-name {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.15rem;
  break-after: avoid;
  page-break-after: avoid;
}
.resource-name a {
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.resource-blurb {
  margin: 0 0 0.25rem;
}

/* Badges: plain bordered text, black on white. The three cost-badge and
   seven type-badge variants all collapse to the same look. */
.resource-meta {
  display: block;
  margin: 0 0 0.2rem;
}
.badge,
.badge[class*="badge-"] {
  display: inline-block;
  color: #000000 !important;
  border: 0.5pt solid #000000 !important;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.35rem;
  margin: 0 0.3rem 0 0;
  white-space: nowrap;
}

/* The checked date stays; it is useful on paper. The Report Issue link next
   to it is hidden above. */
.resource-side,
.resource.has-logo > .resource-side {
  display: block;
  margin: 0;
  font-size: 0.78rem;
}
.verified {
  color: #333333;
  font-size: 0.78rem;
}


/* ---- 6. Job Seeker Playbook as a paper checklist ------------------------ */

/* The screen layout is a two-column grid with a sticky sidebar. On paper the
   stage index sits above the steps as a plain list, and the steps use the
   full width. */
.check-layout {
  display: block !important;
  margin-top: 0.8rem;
}
.check-index {
  position: static !important;
  border-top: 1pt solid #000000;
  padding-top: 0.5rem;
  margin: 0 0 1rem;
  break-inside: avoid;
}
.check-index h2 {
  font-size: 1.05rem;
  margin: 0 0 0.3rem;
}
.index-links {
  display: block !important;
}
.index-links a {
  display: block;
  border-left: 0;
  padding: 0.1rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
.index-links a span {
  display: inline;
  font-size: 0.85rem;
  font-weight: 400;
  margin: 0 0 0 0.5rem;
}

/* The "Start with these three things" panel and the author note. */
.three-start {
  border: 0.75pt solid #000000;
  padding: 0.6rem 0.8rem;
  margin: 0.8rem 0;
  break-inside: avoid;
}
.three-start h2,
.three-grid p,
.three-grid a,
.three-grid .start-num {
  color: #000000 !important;
}
.three-grid {
  display: block !important;
}
.three-grid > div {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 0.5rem;
}
.byline-row {
  display: block;
  font-size: 0.85rem;
  color: #000000;
}
.byline-row span {
  display: inline-block;
  margin-right: 1rem;
}

/* Stages and steps. Each step is an unbroken block with its checkbox. */
.phase-title {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  break-after: avoid;
  page-break-after: avoid;
}
.phase-number {
  color: #000000 !important;
  border: 0.75pt solid #000000;
  min-width: 0;
  height: auto;
  padding: 0 0.4rem;
  font-size: 0.8rem;
}
.page-job-seeker-playbook .check-section {
  margin-bottom: 1.2rem;
}
.page-job-seeker-playbook .check-section h2 {
  font-size: 1.3rem;
  margin: 0;
}
.phase-intro {
  color: #000000;
  font-size: 0.95rem;
  margin: 0.2rem 0 0.6rem;
  break-after: avoid;
  page-break-after: avoid;
}

.check-step,
.check-step.checked {
  border: 0;
  border-top: 0.5pt solid #999999;
  border-radius: 0;
  padding: 0.6rem 0 0.7rem;
  margin: 0;
  break-inside: avoid;
  page-break-inside: avoid;
}
.step-head {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

/* Keep the checkboxes: this is what turns the page into a paper checklist.
   The browser draws a native box (ticked if the reader ticked it on screen).
   The wrapper's large touch target is shrunk, since nobody taps paper. */
.check-control {
  display: block !important;
  min-width: 0;
  min-height: 0;
  margin: 0.15rem 0 0;
}
.check-control input,
.step-checkbox {
  display: inline-block !important;
  width: 14pt;
  height: 14pt;
  margin: 0;
  accent-color: #000000;
}
.step-kicker {
  color: #000000;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}
.step-kicker .timing {
  color: #000000;
  border: 0.5pt solid #000000;
  padding: 0 0.3rem;
}
.done-label {
  color: #000000;
}
.page-job-seeker-playbook .check-step h3 {
  font-size: 1.1rem;
  margin: 0 0 0.3rem;
}
.step-action {
  font-size: 1rem;
  line-height: 1.4;
}
.step-action .do-this {
  margin: 0 0 0.3rem;
}

/* Step guidance is a details element. A CLOSED details element cannot be
   opened from CSS, so only guidance the reader has expanded on screen (use
   "Expand all guidance" first, then print) appears on paper. The step
   action and checkbox always print. Open guidance is styled plainly: the
   summary line is dropped and the copy is set as ordinary indented text.
   Because guidance can be long, it is allowed to break across sheets even
   though the step block above it tries not to. */
.step-guidance {
  margin: 0.3rem 0 0 2rem;
  font-size: 1rem;
  break-inside: auto;
  page-break-inside: auto;
}
.step-guidance summary {
  display: none;
}
.step-guidance[open] summary {
  display: none;
  border: 0;
}
.guidance-copy {
  color: #000000;
  font-size: 0.95rem;
  line-height: 1.4;
  max-width: none;
}
.guidance-copy p { margin: 0 0 0.5rem; }
.guidance-copy ul,
.guidance-copy ol {
  padding-left: 1.2rem;
  margin: 0.4rem 0 0.7rem;
}
.guidance-copy li { margin-bottom: 0.3rem; }

/* The "A note from Michael" disclosure is a details element too: it prints
   only if it was open on screen. */
.author-intro summary {
  font-weight: 700;
  color: #000000;
}


/* ---- 7. Homepage cards and other layout blocks -------------------------- */

/* Cards print as simple bordered blocks, one per row. */
.router-cards {
  display: block !important;
}
.router-card {
  display: block !important;
  border: 0.75pt solid #000000;
  padding: 0.4rem 0.6rem;
  margin: 0 0 0.5rem;
  text-decoration: none;
  break-inside: avoid;
  page-break-inside: avoid;
}
.router-card .card-icon {
  display: none !important;
}
.router-card h3,
.router-card p,
.router-card .card-count {
  color: #000000 !important;
  margin: 0 0 0.15rem;
}
.founder,
.home .founder {
  margin-top: 1.2rem;
}
.founder {
  break-inside: avoid;
}

/* Tables, if a page ever has one, should not run off the sheet. */
table {
  border-collapse: collapse;
  max-width: 100%;
}
th, td {
  border: 0.5pt solid #000000;
  padding: 0.2rem 0.4rem;
  color: #000000;
}

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


/* ---- 8. Footer: one line with the site name and address ----------------- */

/* Everything inside the footer is hidden (tip line, email, appearance
   buttons, link groups) and the ::after supplies a single line instead. */
.site-footer {
  position: static !important;
  background: transparent !important;
  color: #000000;
  border-top: 0.75pt solid #000000;
  margin-top: 1.5rem;
  padding: 0.4rem 0 0;
  font-size: 0.85rem;
  text-align: center;
}
.site-footer > * {
  display: none !important;
}
.site-footer::after {
  content: "JobSeekerFoundry \2022  jobseekerfoundry.com";
  display: block;
  color: #000000;
}