/* ==========================================================================
   Voyara — Typography style-guide page (article 213, menu 350, .voy-typography)
   Rendered via fullwidth layout (tsid 17). The canvas rule uncaps the
   container (max-width:none) → re-cap the prose to a centered reading column
   and style every element to the Voyara design system.
   Loaded by html/com_content/article/default.php (gated on .voy-typography).

   Pen source-of-truth: body col AK0df (mM4Ah light) + CujMS (yQEcj mobile)
   ========================================================================== */

/* ---- Re-cap: the canvas rule blew the container to max-width:none; cap the
   prose to a 760px reading column with comfortable side padding.
   Pen SJDiz: padding=[8,48,72,48] (top, right, bottom, left)
   --------------------------------------------------------------------------- */
.voy-article-body:has(.voy-typography),
.voy-article-prose:has(.voy-typography),
.com-content-article:has(.voy-typography) {
  background: var(--voy-bg) !important;
}
/* The Typography article's .voy-article-prose is the full-width Body wrapper (pen SJDiz,
   fill_container). single.css applies max-width:760/padding-inline:48/display:flex/gap:22
   to .voy-article-prose for normal articles — but here .voy-typography is the actual
   content column and handles its own layout. Reset the prose wrapper to full-width/no-pad. */
.voy-article-prose:has(.voy-typography) {
  max-width: none !important;
  padding-inline: 0 !important;
  display: block !important;
  gap: 0 !important;
  padding-block: 0 !important;
}
.voy-article-body:has(.voy-typography) {
  padding-block: 0 !important; /* .voy-typography handles all padding including top */
}
.voy-typography {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 48px 72px;
  font-family: var(--voy-font-body);
  color: var(--voy-text);
}

/* ---- Uniform prose gap: pen AK0df col gap=22; all direct children spaced 22px.
   First child reset to 0 below per-element.
   --------------------------------------------------------------------------- */
.voy-typography h1,
.voy-typography h2,
.voy-typography h3,
.voy-typography h4,
.voy-typography p,
.voy-typography ul,
.voy-typography ol,
.voy-typography blockquote,
.voy-typography pre,
.voy-typography table {
  margin-top: 22px;
  margin-bottom: 0;
}

/* ---- Headings (Playfair) ------------------------------------------------- */
/* h1 = article title in masthead; not in prose body — but keep in scope for
   the style-guide's own h1 heading.
   Pen masthead d58Q9: Playfair 46/700/lh1.12/#1A1512                         */
.voy-typography h1 {
  font-family: var(--voy-font-head);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--voy-heading);
  margin-top: 0;      /* first element in prose — no leading gap */
  margin-bottom: 8px; /* pen h1→lead gap */
}

/* h2 = pen body "H" node (GyLoO/XGPL2): Playfair 28/700/lh1.2/#1A1512      */
.voy-typography h2 {
  font-family: var(--voy-font-head);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--voy-heading);
}

/* h3: proportionally between h2 (28) and h4 (20); 22px fits the Voyara scale */
.voy-typography h3 {
  font-family: var(--voy-font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--voy-heading);
}

/* h4: smallest in-body heading */
.voy-typography h4 {
  font-family: var(--voy-font-head);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--voy-heading);
}

/* ---- Body copy: Inter 18/normal/lh1.7/#2B2420 (pen AK0df P nodes)         */
.voy-typography p {
  font-family: var(--voy-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--voy-text);
}

/* Lead paragraph: style-guide subtitle — Inter 20/lh1.6/muted, immediately
   after the h1 so gap overridden to 4px.
   T4 optimize bundle sets .lead { font-weight:300 } — override to normal.     */
.voy-typography p.lead {
  font-size: 20px;
  font-weight: normal !important; /* T4 bundle sets .lead{fw:300}; pen has no fw spec → normal */
  line-height: 1.6;
  color: var(--voy-muted);
  margin-top: 4px;
}

/* ---- Inline strong / em -------------------------------------------------- */
.voy-typography strong { font-weight: 700; color: var(--voy-heading); }
.voy-typography em { font-style: italic; }

/* ---- Links: terracotta with partial underline, solid on hover ------------ */
.voy-typography a {
  color: var(--voy-primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--voy-primary) 35%, transparent);
  transition: border-color .15s, color .15s;
}
.voy-typography a:hover {
  color: var(--voy-primary);
  border-bottom-color: var(--voy-primary);
}

/* ---- Lists: teal checkmark (pen uses lucide check icon; CSS-only via ::before)
   Pen S3GKf: items are flex rows [icon 20×20 #1F6F6B] + [text Inter 17/lh1.6]
   gap between icon and text = 11px; gap between list items = 11px
   ul/ol share the same visual style (check icon, not numbered)
   --------------------------------------------------------------------------- */
.voy-typography ul,
.voy-typography ol {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.voy-typography li {
  font-family: var(--voy-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--voy-text);
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

/* Teal check icon via ::before pseudo (✓ unicode, styled to match lucide check) */
.voy-typography li::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;  /* optical alignment with 17px/lh1.6 text */
  background-color: var(--voy-secondary, #1F6F6B);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ---- Blockquote: Playfair italic + terracotta bar (pen dARdy)
   Pen dARdy: bar 4×96 cornerRadius=8 fill=#C2562F; gap=18 between bar and text
   Q text: Playfair 24/italic/500/lh1.4/#1A1512
   We can't replicate cornerRadius on border-left — use the reported delta from
   Single Article (cosmetic note: bar end rounding; acceptable border-left approach)
   Spacing: bar is 4px wide, gap to text is 18px → padding-left:18px from bar
   --------------------------------------------------------------------------- */
.voy-typography blockquote {
  padding: 4px 0 4px 18px;
  border-left: 4px solid var(--voy-primary);
  border-radius: 0;
}

.voy-typography blockquote p {
  font-family: var(--voy-font-head);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--voy-heading);
  margin: 0;
}

/* ---- Inline code chip (theme-aware) -------------------------------------- */
.voy-typography :not(pre) > code {
  font-family: var(--voy-font-mono);
  font-size: .88em;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--voy-elevated);
  border: 1px solid var(--voy-border);
  color: var(--voy-primary);
}

/* ---- <pre> code block: ALWAYS-DARK surface (reads in BOTH themes, P60) ---- */
.voy-typography pre {
  padding: 18px 20px;
  background: #1C1712;        /* Voyara dark surface — stays dark in light too */
  border: 1px solid #352C24;
  border-radius: 10px;
  overflow-x: auto;
  line-height: 1.6;
}
.voy-typography pre code {
  font-family: var(--voy-font-mono);
  font-size: 14px;
  color: #E8DFD4;             /* dark-mode body text — legible on the dark surface */
  background: none;
  border: 0;
  padding: 0;
}

/* ---- Table --------------------------------------------------------------- */
.voy-typography table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--voy-font-body);
  font-size: 15px;
  border: 1px solid var(--voy-border);
  border-radius: 10px;
  overflow: hidden;
}
.voy-typography thead th {
  text-align: left;
  font-family: var(--voy-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--voy-muted);
  background: var(--voy-elevated);
  padding: 12px 16px;
  border-bottom: 1px solid var(--voy-border);
}
.voy-typography tbody td {
  padding: 12px 16px;
  color: var(--voy-text);
  border-bottom: 1px solid var(--voy-border);
}
.voy-typography tbody tr:last-child td { border-bottom: 0; }

/* ---- Responsive (pen CujMS + byQuH mobile frame) ------------------------- */
/* Pen CujMS: padding=[0,20,56,20]; gap=20; P 16/lh1.7; H 23/lh1.2; bq 20/lh1.4 pl18→gap16 */
@media (max-width: 640px) {
  .voy-typography {
    padding: 8px 20px 56px;
  }
  .voy-typography h1 { font-size: 32px; }
  .voy-typography h2 { font-size: 23px; } /* pen CujMS H nodes: 23px */
  .voy-typography h3 { font-size: 20px; }
  .voy-typography h4 { font-size: 18px; }
  .voy-typography p, .voy-typography li { font-size: 16px; }
  .voy-typography p.lead { font-size: 18px; font-weight: normal !important; }
  /* Mobile blockquote: byQuH Q text=20, gap=16 → padding-left:16px */
  .voy-typography blockquote { padding-left: 16px; }
  .voy-typography blockquote p { font-size: 20px; }
  /* Mobile list items: pen kaaFK text=15/lh1.5 */
  .voy-typography li { font-size: 15px; line-height: 1.5; }
  /* Mobile col gap = 20px (pen CujMS gap:20) */
  .voy-typography h2,
  .voy-typography h3,
  .voy-typography h4,
  .voy-typography p,
  .voy-typography ul,
  .voy-typography ol,
  .voy-typography blockquote,
  .voy-typography pre,
  .voy-typography table { margin-top: 20px; }
  .voy-typography p.lead { margin-top: 4px; }
}

/* ==========================================================================
   Dark mode (html.t4-dark) — surfaces/text flip; <pre> already dark.
   ========================================================================== */
html.t4-dark .voy-typography,
html.t4-dark .voy-typography p,
html.t4-dark .voy-typography li { color: var(--voy-text); }
html.t4-dark .voy-typography h1,
html.t4-dark .voy-typography h2,
html.t4-dark .voy-typography h3,
html.t4-dark .voy-typography h4,
html.t4-dark .voy-typography strong,
html.t4-dark .voy-typography blockquote p { color: var(--voy-heading); }
html.t4-dark .voy-typography p.lead { color: var(--voy-muted); }
html.t4-dark .voy-typography :not(pre) > code {
  background: var(--voy-elevated);
  border-color: var(--voy-border);
  color: var(--voy-primary);
}
html.t4-dark .voy-typography table { border-color: var(--voy-border); }
html.t4-dark .voy-typography thead th {
  background: var(--voy-elevated);
  border-bottom-color: var(--voy-border);
  color: var(--voy-muted);
}
html.t4-dark .voy-typography tbody td { color: var(--voy-text); border-bottom-color: var(--voy-border); }
/* <pre> stays the fixed dark surface (#1C1712) in dark too. The shared darkmode.css
   rule `html.t4-dark .article-prose pre{background:#0F0C0A}` (0,2,1) out-specifies the
   base `.voy-typography pre` (0,1,1) and repaints it darker → pin it back here with a
   matching-specificity dark-scoped selector so the code surface is identical in both themes. */
html.t4-dark .voy-typography.voy-typography pre {
  background: #1C1712;
  border-color: #352C24;
}
html.t4-dark .voy-typography.voy-typography pre code { color: #E8DFD4; }
/* Dark mode: li::before check icon — already using background-color token, inherits dark var */
html.t4-dark .voy-typography li::before {
  background-color: var(--voy-secondary, #46A39D); /* teal maps to the dark teal token */
}