/* =============================================
   PRINT STYLESHEET — myblog.xyz essay posts
   Linked with media="print" so no @media wrapper needed.
   ============================================= */

/* --- Hide screen-only chrome --- */
.pattern-layer,
.content-nav,
.margin-line-bg,
.margin-progress,
.print-btn,
.page-footer,
.post-title {
  display: none !important;
}

/* --- Page setup --- */
@page {
  margin: 2cm 2.5cm;
  size: A4;
}

body {
  background: #fff;
  color: #1a1a1a;
  font-family: 'Outfit', Georgia, serif;
}

/* JS sets .content-layer to display:none initially; ensure it's visible for print */
.content-layer {
  display: block !important;
}

.page {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* --- Print header (hidden on screen, shown here) --- */
.print-header {
  display: block;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ccc;
}

.print-header-site {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 6px;
}

.print-header-title {
  font-size: 22px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.35;
}

/* --- Post title and meta --- */
.post-title {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 6px;
  color: #1a1a1a;
}

.post-meta {
  font-size: 10px;
  color: #999;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.post-readtime {
  font-size: 12px;
  color: #aaa;
  text-transform: none;
  letter-spacing: 0;
}

.post-divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 16px 0 28px;
}

/* --- Body text --- */
.post-body p {
  font-size: 11.5pt;
  line-height: 1.75;
  color: #1a1a1a;
  font-weight: 300;
  margin-bottom: 1em;
  orphans: 3;
  widows: 3;
}

.post-body em { font-style: italic; }
.post-body strong { font-weight: 500; }

/* --- Section headings --- */
.section-heading {
  page-break-inside: avoid;
  page-break-after: avoid;
  margin-top: 32pt;
  margin-bottom: 12pt;
}

.section-label {
  font-size: 11px;
  color: #aaa;
  display: block;
  margin-bottom: 4px;
  letter-spacing: 0;
}

.section-title {
  font-size: 18px;
  font-weight: 300;
  color: #1a1a1a;
}

.post-body h3 {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  margin-top: 24pt;
  margin-bottom: 8pt;
  page-break-after: avoid;
}

.post-body h4 {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
  margin-top: 20pt;
  margin-bottom: 8pt;
  padding-top: 12pt;
  border-top: 1px solid #ddd;
  page-break-after: avoid;
}

/* --- Pull quotes --- */
.pull-quote {
  page-break-inside: avoid;
  font-size: 13pt;
  font-weight: 300;
  color: #555;
  border-left: 2px solid #bbb;
  padding-left: 16px;
  margin: 20pt 0;
  font-style: italic;
  line-height: 1.5;
}

/* --- Callout --- */
.callout {
  page-break-inside: avoid;
  padding: 12px 18px;
  background: #f5f5f5;
  border-left: 2px solid #bbb;
  font-size: 10.5pt;
  color: #555;
  margin: 16pt 0;
}

/* --- Comparison table --- */
.cmp-wrapper { page-break-inside: avoid; }
.cmp-toggle { display: none; }
.cmp-table { display: block !important; }
.cmp-category { display: block !important; }
.cmp-cat-body { display: grid !important; }

/* --- Tier list --- */
.tier-list { page-break-inside: avoid; }
.tier-item {
  padding: 10px 14px;
  margin-bottom: 6px;
  border-left: 2px solid #ccc;
}
.tier-item h5 { font-size: 12px; font-weight: 500; color: #1a1a1a; }
.tier-item p  { font-size: 10pt; color: #555; }

/* --- HR --- */
.post-body hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 20pt 0;
}