/* White paper article shell for docs.pgicover.com.
   Ported from sites/pgicover.com/white-papers/wp.css. The marketing version
   was built on the marketing design system (assets/ds/ds.css) tokens; the
   docs site does not load that file, so the block below aliases the tokens
   this stylesheet needs onto the docs site's own variables (style.css)
   and literal values. Everything after the alias block is the original
   wp-* component styling, unchanged apart from those token references. */

:root {
  --wp-surface-page: var(--bg);
  --wp-surface-card: var(--bg);
  --wp-surface-sunken: var(--bg-secondary);
  --wp-border-subtle: var(--border);
  --wp-border-default: var(--border);
  --wp-border-strong: var(--border);
  --wp-ink-900: var(--text-primary);
  --wp-text-link: var(--link);
  --wp-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wp-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wp-fw-semibold: 600;
  --wp-fs-eyebrow: 0.75rem;
  --wp-ls-eyebrow: 0.16em;
  --wp-space-8: 32px;
  --wp-gutter: clamp(20px, 4vw, 48px);
  --wp-section-y: clamp(64px, 4rem + 4vw, 128px);
  --wp-radius-lg: 18px;
  --wp-dur-base: 240ms;
  --wp-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wp-focus-ring: #118AB2;
}

.wp-shell { background: var(--wp-surface-page); }

.wp-top {
  padding: 0 var(--wp-gutter) 0;
  background: var(--wp-surface-card);
}
.wp-col-wide { max-width: 52rem; margin: 0 auto; }
.wp-col-narrow { max-width: 44rem; margin: 0 auto; }

.wp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wp-font-heading);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--wp-text-link);
  text-decoration: none;
  margin-bottom: 24px;
}
.wp-back-link:hover { text-decoration: underline; }
.wp-back-link svg { flex-shrink: 0; }

.wp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wp-font-heading);
  font-weight: var(--wp-fw-semibold);
  font-size: var(--wp-fs-eyebrow);
  letter-spacing: var(--wp-ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.wp-eyebrow-tick { width: 18px; height: 2px; background: #06D6A0; display: inline-block; flex-shrink: 0; }

.wp-title {
  font-family: var(--wp-font-heading);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
  color: var(--wp-ink-900);
}

.wp-illustrative {
  margin: 18px 0 0;
  font-family: var(--wp-font-display);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 60ch;
}

.wp-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--wp-border-subtle);
  font-size: 14px;
  color: var(--text-muted);
}
.wp-meta-row strong { color: var(--text-primary); font-weight: 600; }
.wp-meta-sep { opacity: 0.6; }

.wp-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0 0;
  font-family: var(--wp-font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--wp-text-link);
  text-decoration: none;
}
.wp-download:hover { text-decoration: underline; }
.wp-download svg { flex-shrink: 0; }

.wp-body-section {
  padding: var(--wp-space-8) var(--wp-gutter) var(--wp-section-y);
  background: var(--wp-surface-card);
}

/* Summary box */
.wp-summary {
  margin: 0 0 36px;
  padding: 26px 28px;
  background: var(--wp-surface-sunken);
  border: 1px solid var(--wp-border-default);
  border-radius: var(--wp-radius-lg);
  break-inside: avoid;
  page-break-inside: avoid;
}
.wp-summary__label {
  font-family: var(--wp-font-heading);
  font-weight: var(--wp-fw-semibold);
  font-size: var(--wp-fs-eyebrow);
  letter-spacing: var(--wp-ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 14px;
}
.wp-summary ul { margin: 0; padding-left: 1.3em; }
.wp-summary li { margin-bottom: 10px; font-size: 16px; line-height: 1.65; color: var(--text-primary); }
.wp-summary li:last-child { margin-bottom: 0; }

/* Prose */
.wp-prose p { margin: 0 0 20px; font-size: 17px; line-height: 1.8; color: var(--text-secondary); }
.wp-prose h2 { margin: 42px 0 16px; font-family: var(--wp-font-heading); font-weight: 600; font-size: 26px; color: var(--text-primary); letter-spacing: -0.01em; }
.wp-prose h2:first-child { margin-top: 0; }
.wp-prose em { font-style: italic; }
.wp-prose strong { color: var(--text-primary); font-weight: 700; }
.wp-prose a { color: var(--wp-text-link); }

/* Pull quotes */
.wp-pullquote {
  margin: 28px 0;
  padding: 4px 0 4px 24px;
  border-left: 4px solid #06D6A0;
  max-width: 40rem;
  break-inside: avoid;
  page-break-inside: avoid;
}
.wp-pullquote p {
  margin: 0;
  font-family: var(--wp-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  color: var(--wp-ink-900);
}

/* Stat strip */
.wp-stat-strip {
  margin: 40px 0;
  padding: 30px 28px;
  background: var(--wp-surface-sunken);
  border: 1px solid var(--wp-border-default);
  border-radius: var(--wp-radius-lg);
  break-inside: avoid;
  page-break-inside: avoid;
}
.wp-stat-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.wp-stat-strip__grid > div { text-align: center; }
.wp-stat-strip__value {
  font-family: var(--wp-font-display);
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.wp-stat-strip__caption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.wp-stat-strip__source {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--wp-border-default);
  font-size: 12.5px;
  color: var(--text-muted);
  grid-column: 1 / -1;
}

/* Does / does not box */
.wp-dd-box {
  margin: 24px 0 0;
  border: 1px solid var(--wp-border-default);
  border-radius: var(--wp-radius-lg);
  overflow: hidden;
  break-inside: avoid;
  page-break-inside: avoid;
}
.wp-dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.wp-dd-col { padding: 22px 26px; }
.wp-dd-col--does { background: var(--wp-surface-card); border-right: 1px solid var(--wp-border-default); }
.wp-dd-col--not { background: var(--wp-surface-sunken); }
.wp-dd-col__label {
  font-family: var(--wp-font-heading);
  font-weight: var(--wp-fw-semibold);
  font-size: var(--wp-fs-eyebrow);
  letter-spacing: var(--wp-ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 14px;
}
.wp-dd-col ul { margin: 0; padding-left: 1.2em; }
.wp-dd-col li { margin-bottom: 10px; font-size: 15px; line-height: 1.6; color: var(--text-primary); }
.wp-dd-col li:last-child { margin-bottom: 0; }

/* Takeaway cards */
.wp-takeaway-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}
.wp-takeaway-card {
  padding: 24px 26px;
  background: var(--wp-surface-page);
  border: 1px solid var(--wp-border-default);
  border-radius: var(--wp-radius-lg);
}
.wp-takeaway-card__title {
  font-family: var(--wp-font-heading);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.wp-takeaway-card ul { margin: 0; padding-left: 1.2em; }
.wp-takeaway-card li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
.wp-takeaway-card li:last-child { margin-bottom: 0; }

/* Where to start */
.wp-start {
  margin-top: 40px;
  padding: 28px;
  background: var(--wp-surface-sunken);
  border: 1px solid var(--wp-border-default);
  border-radius: var(--wp-radius-lg);
}
.wp-start__title { font-family: var(--wp-font-heading); font-weight: 600; font-size: 18px; color: var(--text-primary); margin: 0 0 16px; }
.wp-start__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-start__checklist { margin: 16px 0 0; font-size: 14.5px; color: var(--text-secondary); }
.wp-start__checklist a { color: var(--wp-text-link); }

/* Where-to-start buttons: border-only, per sites/STYLE_GUIDE.md (no colored fill) */
.wp-start__buttons .pgi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--wp-font-heading);
  font-weight: var(--wp-fw-semibold);
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  background: var(--wp-surface-card);
  color: var(--text-primary);
  border: 2px solid var(--text-primary);
  transition: background var(--wp-dur-base) var(--wp-ease-standard),
              color var(--wp-dur-base) var(--wp-ease-standard);
}
.wp-start__buttons .pgi-btn:hover {
  background: var(--text-primary);
  color: var(--wp-surface-card);
  text-decoration: none;
}

/* Footer block */
.wp-footer-block {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--wp-border-default);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-muted);
}
.wp-footer-block p { margin: 0 0 8px; }
.wp-footer-block p:last-child { margin-bottom: 0; }

.wp-pager-center { text-align: center; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--wp-border-default); }
.wp-back-link-bottom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp-font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--wp-text-link);
  text-decoration: none;
}
.wp-back-link-bottom:hover { text-decoration: underline; }

/* Index listing */
.wp-index-list { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.wp-index-card {
  display: block;
  padding: 26px 28px;
  background: var(--wp-surface-card);
  border: 1px solid var(--wp-border-default);
  border-radius: var(--wp-radius-lg);
  text-decoration: none;
  transition: border-color var(--wp-dur-base) var(--wp-ease-standard), transform var(--wp-dur-base) var(--wp-ease-standard);
}
.wp-index-card:hover { border-color: var(--wp-border-strong); transform: translateY(-2px); }
.wp-index-card__title { font-family: var(--wp-font-heading); font-weight: 600; font-size: 19px; color: var(--text-primary); margin: 0 0 8px; }
.wp-index-card__desc { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* Print-only elements (hidden on screen) */
.wp-print-logo { display: none; }
.wp-print-footer { display: none; }

/* Responsive */
@media (max-width: 768px) {
  .wp-title { font-size: 1.8rem; }
  .wp-dd-grid { grid-template-columns: 1fr; }
  .wp-dd-col--does { border-right: none; border-bottom: 1px solid var(--wp-border-default); }
  .wp-takeaway-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wp-stat-strip__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Focus states */
.wp-back-link:focus-visible,
.wp-download:focus-visible,
.wp-back-link-bottom:focus-visible,
.wp-index-card:focus-visible { outline: 3px solid var(--wp-focus-ring); outline-offset: 3px; }

/* ---- Print ---- */
@media print {
  /* Uniform page margin. The running footer is generated CSS Paged Media
     margin-box content (@bottom-left/@bottom-right below), which Chrome
     renders INSIDE this reserved margin band on every page, never inside
     the content box, so it can never collide with flowing text no matter
     how a page happens to break. */
  @page {
    size: letter;
    margin: 18mm;
    @bottom-left  { content: "PGicover, docs.pgicover.com"; font-family: Inter, Arial, sans-serif; font-size: 9pt; color: #79838C; }
    @bottom-right { content: "Illustrative scenario"; font-family: Inter, Arial, sans-serif; font-size: 9pt; color: #79838C; }
  }

  #pgi-navbar, .header, #pgi-sidebar, .sidebar, .sidebar-toggle, .sidebar-overlay,
  #pgi-footer, .docs-footer,
  .wp-back-link, .wp-back-link-bottom,
  .wp-pager-center, .wp-download, .wp-start__buttons,
  .wp-print-footer,
  script { display: none !important; }

  body { background: #fff; }
  .wp-shell, .wp-top, .wp-body-section { background: #fff !important; }
  body.sidebar-expanded .main-content { margin-left: 0 !important; padding-top: 0 !important; }

  a { color: inherit; text-decoration: none; }

  /* Orphan/widow control: never break inside these blocks, and never leave
     a heading stranded alone at the bottom of a page. */
  body { orphans: 3; widows: 3; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
  .wp-summary, .wp-stat-strip, .wp-dd-box, .wp-pullquote,
  .wp-takeaway-card { break-inside: avoid; page-break-inside: avoid; }

  .wp-title { font-size: 26px; }
  .wp-prose h2 { font-size: 19px; margin: 26px 0 12px; }
  .wp-prose p { font-size: 12.5px; line-height: 1.55; }

  /* Pull quotes: 22pt in print, never split across a page break. */
  .wp-pullquote p { font-size: 22pt; line-height: 1.3; }

  /* Stat strip always three columns in print, never stacked. */
  .wp-stat-strip__grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Print-only wordmark above the eyebrow on the title block. */
  .wp-print-logo {
    display: block;
    height: 28px;
    width: auto;
    margin: 0 0 18px;
  }

}