/* Print layout for the site, and the layout of the generated guide PDFs.
 *
 * This file is the single source of truth for how a guide looks on paper.
 * BaseLayout loads it with media="print" normally, and with media="all" when
 * a page is opened with ?print=1 in dev. That is what /admin/pdf-preview uses,
 * so the preview and the real PDF can never drift apart.
 *
 * Because it is loaded conditionally rather than wrapped in @media print, the
 * rules below are NOT inside a media query. Do not add one.
 *
 * scripts/build-guide-pdfs.mjs drives headless Chrome against the real guide
 * pages, so what you see in the preview is what gets rendered into the PDF.
 */

@page {
  /* Paper margins. The letterhead sits inside these, so widening them
     narrows the letterhead too. */
  margin: 0.5in 0.6in 0.55in;
}

/* Site chrome that has no place on paper. */
.no-print,
.nav,
.footer,
.site-footer {
  display: none !important;
}

body {
  background: #fff;
  color: #000;
}

a {
  text-decoration: none;
  color: #000;
}

.section--cream,
.section--stone,
.section--dark {
  background: #fff !important;
}

/* global.css also styles .section at the same specificity, and stylesheet
   order is not guaranteed, so this has to be marked. Without it the on-screen
   section padding survives and pushes guides onto an extra page. */
.section {
  padding: 0 !important;
}

/* ---------------------------------------------------------------- guides */

/* Astro scopes component styles with a [data-astro-cid-*] attribute, which
   makes those selectors more specific than anything in this plain stylesheet.
   Paper layout therefore has to be marked !important to win. This is the
   normal reason print stylesheets use it: the screen rules are not wrong,
   they just do not apply to paper. */

/* Letterhead, using the print logo variant (gold tooth, lettering in the
   heading colour). Hidden on screen by the guide component. */
.guide-letterhead {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 1.1rem !important;
  padding: 0 0 0.6rem !important;
  border-bottom: 1.5pt solid #443b36;
  break-inside: avoid;
  break-after: avoid;
}
.guide-letterhead img {
  height: 0.46in;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.guide-letterhead__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-size: 8pt;
  line-height: 1.5;
  color: #443b36;
  white-space: nowrap;
}

/* Full measure on paper: the on-screen 820px column would waste the page. */
.guide-header {
  padding: 0 0 1rem !important;
  background: transparent !important;
}
.guide-header__inner,
.guide-body {
  max-width: none !important;
  padding: 0 !important;
}
.guide-header h1 {
  font-size: 20pt !important;
  margin-bottom: 0.3rem !important;
}
.guide-header .lead {
  font-size: 10.5pt !important;
}

.prose {
  font-size: 11pt !important;
  line-height: 1.5 !important;
}
.prose h2 {
  font-size: 13pt !important;
  margin-top: 1.2rem !important;
  break-after: avoid;
}
.prose p,
.prose li {
  break-inside: avoid;
}

/* Clinic details that close the document. Hidden on screen. */
.guide-contact {
  display: block !important;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #999;
  font-size: 9.5pt;
  line-height: 1.4;
}
.guide-contact p {
  margin: 0;
}