/*
 * LK Blog Designer — Typography System
 * ─────────────────────────────────────────────────────────────────
 * Version  : 2.0.0
 * Scope    : .lkbd-single only  (never bleeds into the theme)
 * Fonts    : Inter (body/UI) · Poppins (headings) · Playfair Display (title)
 * Strategy : CSS custom properties → modular classes → clamp() fluid scale
 * ─────────────────────────────────────────────────────────────────
 *
 * TOKEN NAMING
 * --lkbd-t-*   typography tokens   (size, weight, leading, tracking)
 * --lkbd-s-*   spacing tokens      (used for margin/padding rhythm)
 *
 * WHY SCOPED TO .lkbd-single?
 * Astra loads Inter / Poppins globally with its own font-size
 * declarations on body, h1–h6, p.  By scoping every rule inside
 * .lkbd-single we guarantee higher specificity without !important
 * on every line — cleaner, more maintainable, truly portable.
 * ───────────────────────────────────────────────────────────────── */

/* =============================================================
   § 0  TYPOGRAPHY TOKENS  (scoped, not global)
   ============================================================= */
.lkbd-single {

  /* ── Font stacks ── */
  --lkbd-t-family-body    : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lkbd-t-family-heading : 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lkbd-t-family-title   : 'Playfair Display', Georgia, 'Times New Roman', serif;
  --lkbd-t-family-serif   : 'Playfair Display', Georgia, 'Times New Roman', serif;
  --lkbd-t-family-mono    : 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  /* Bridge alias so single.css var(--lkbd-font-serif) resolves correctly */
  --lkbd-font-body        : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lkbd-font-serif       : 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* ── Type scale  (fluid via clamp)  ── */
  /* Step -1 */ --lkbd-t-xs   : clamp(11px, 1.1vw, 12px);
  /* Step  0 */ --lkbd-t-sm   : clamp(13px, 1.3vw, 14px);
  /* Step  1 */ --lkbd-t-base : clamp(16px, 1.6vw, 18px);
  /* Step  2 */ --lkbd-t-md   : clamp(18px, 1.9vw, 20px);
  /* Step  3 */ --lkbd-t-lg   : clamp(20px, 2.2vw, 22px);
  /* Step  4 */ --lkbd-t-xl   : clamp(22px, 2.6vw, 26px);
  /* Step  5 */ --lkbd-t-2xl  : clamp(26px, 3.2vw, 32px);
  /* Step  6 */ --lkbd-t-3xl  : clamp(30px, 4vw,   40px);
  /* Step  7 */ --lkbd-t-4xl  : clamp(34px, 4.8vw, 48px);

  /* ── Weight scale ── */
  --lkbd-t-regular  : 400;
  --lkbd-t-medium   : 500;
  --lkbd-t-semibold : 600;
  --lkbd-t-bold     : 700;
  --lkbd-t-extrabold: 800;
  --lkbd-t-black    : 900;

  /* ── Line-height scale ── */
  --lkbd-t-tight    : 1.15;
  --lkbd-t-snug     : 1.30;
  --lkbd-t-normal   : 1.55;
  --lkbd-t-relaxed  : 1.75;
  --lkbd-t-loose    : 1.90;

  /* ── Letter-spacing scale ── */
  --lkbd-t-track-tight  : -0.03em;
  --lkbd-t-track-normal :  0;
  --lkbd-t-track-wide   :  0.04em;
  --lkbd-t-track-wider  :  0.08em;
  --lkbd-t-track-caps   :  0.12em;

  /* ── Prose spacing (vertical rhythm) ── */
  --lkbd-s-1  :  4px;
  --lkbd-s-2  :  8px;
  --lkbd-s-3  : 12px;
  --lkbd-s-4  : 16px;
  --lkbd-s-5  : 20px;
  --lkbd-s-6  : 24px;
  --lkbd-s-7  : 32px;
  --lkbd-s-8  : 40px;
  --lkbd-s-9  : 48px;
  --lkbd-s-10 : 64px;
}

/* =============================================================
   § 1  BASE TYPOGRAPHY — applied to the single post wrapper
   Overrides Astra/any theme with clean specificity.
   No !important needed because .lkbd-single scoping wins.
   ============================================================= */

.lkbd-single {
  font-family    : var(--lkbd-t-family-body);
  font-size      : var(--lkbd-t-base);
  font-weight    : var(--lkbd-t-regular);
  line-height    : var(--lkbd-t-relaxed);
  color          : #1c1c1e;
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
  text-rendering : optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

/* =============================================================
   § 2  POST TITLE  (H1)  — Playfair Display, editorial
   ============================================================= */

.lkbd-single .lkbd-header__title {
  font-family    : var(--lkbd-t-family-title) !important;
  font-size      : var(--lkbd-t-4xl) !important;
  font-weight    : var(--lkbd-t-bold) !important;
  line-height    : var(--lkbd-t-tight) !important;
  letter-spacing : var(--lkbd-t-track-tight) !important;
  color          : #0a0a0a !important;
  margin         : 0 0 var(--lkbd-s-6) !important;
  word-break     : break-word !important;
  /* Optical font feature — ligatures look better in display sizes */
  font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1 !important;
}

/* =============================================================
   § 3  CONTENT PROSE — H2 → H6  (Poppins)
   ============================================================= */

/* Override Astra's h2-h6 inside our container */
.lkbd-single .lkbd-prose h1,
.lkbd-single .lkbd-prose h2,
.lkbd-single .lkbd-prose h3,
.lkbd-single .lkbd-prose h4,
.lkbd-single .lkbd-prose h5,
.lkbd-single .lkbd-prose h6 {
  font-family    : var(--lkbd-t-family-heading);
  font-weight    : var(--lkbd-t-bold);
  line-height    : var(--lkbd-t-snug);
  letter-spacing : var(--lkbd-t-track-tight);
  color          : #0a0a0a;
  margin-top     : 0;
}

.lkbd-single .lkbd-prose h2 {
  font-size      : var(--lkbd-t-2xl);
  font-weight    : var(--lkbd-t-bold);
  margin         : var(--lkbd-s-10) 0 var(--lkbd-s-5);
  padding-bottom : var(--lkbd-s-3);
  border-bottom  : 2px solid #f2f2f7;
  letter-spacing : -0.025em;
}

.lkbd-single .lkbd-prose h3 {
  font-size      : var(--lkbd-t-xl);
  font-weight    : var(--lkbd-t-semibold);
  margin         : var(--lkbd-s-8) 0 var(--lkbd-s-4);
}

.lkbd-single .lkbd-prose h4 {
  font-size      : var(--lkbd-t-md);
  font-weight    : var(--lkbd-t-semibold);
  margin         : var(--lkbd-s-7) 0 var(--lkbd-s-3);
}

.lkbd-single .lkbd-prose h5 {
  font-size      : var(--lkbd-t-base);
  font-weight    : var(--lkbd-t-semibold);
  text-transform : uppercase;
  letter-spacing : var(--lkbd-t-track-wide);
  margin         : var(--lkbd-s-6) 0 var(--lkbd-s-2);
}

.lkbd-single .lkbd-prose h6 {
  font-size      : var(--lkbd-t-sm);
  font-weight    : var(--lkbd-t-bold);
  text-transform : uppercase;
  letter-spacing : var(--lkbd-t-track-caps);
  color          : #636366;
  margin         : var(--lkbd-s-5) 0 var(--lkbd-s-2);
}

/* =============================================================
   § 4  BODY PROSE — paragraphs, lists, blockquotes
   ============================================================= */

.lkbd-single .lkbd-prose > p {
  font-family     : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size       : 17px !important;
  font-weight     : 400 !important;
  line-height     : 1.78 !important;
  color           : #3a3a3c !important;
  margin          : 0 0 24px !important;
  hyphens         : none !important;
  -webkit-hyphens : none !important;
  -ms-hyphens     : none !important;
  overflow-wrap   : normal !important;
  word-wrap       : normal !important;
  word-break      : normal !important;
}

/* First paragraph after a heading — same size as body, no jump in size */
.lkbd-single .lkbd-prose h2 + p,
.lkbd-single .lkbd-prose h3 + p {
  font-family : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size   : 17px !important;
  color       : #3a3a3c !important;
  line-height : 1.78 !important;
}

/* Direct prose lists */
.lkbd-single .lkbd-prose > ul,
.lkbd-single .lkbd-prose > ol {
  font-family  : var(--lkbd-t-family-body);
  font-size    : var(--lkbd-t-base);
  line-height  : var(--lkbd-t-relaxed);
  color        : #3a3a3c;
  padding-left : 1.6em;
  margin       : 0 0 var(--lkbd-s-6);
}

.lkbd-single .lkbd-prose > ul  { list-style-type: disc; }
.lkbd-single .lkbd-prose > ol  { list-style-type: decimal; }

.lkbd-single .lkbd-prose > ul > li,
.lkbd-single .lkbd-prose > ol > li {
  margin-bottom : var(--lkbd-s-2);
  padding-left  : var(--lkbd-s-1);
}

/* Blockquote */
.lkbd-single .lkbd-prose blockquote {
  font-family    : 'Playfair Display', Georgia, serif;
  font-style     : italic;
  font-size      : var(--lkbd-t-md);
  line-height    : var(--lkbd-t-relaxed);
  color          : #3a3a3c;
  border-left    : 4px solid #16a34a;
  padding        : var(--lkbd-s-5) var(--lkbd-s-6) var(--lkbd-s-5) 40px;
  margin         : var(--lkbd-s-8) 0;
  background     : #f0fdf4;
  border-radius  : 0 8px 8px 0;
  position       : relative;
}

.lkbd-single .lkbd-prose blockquote::before {
  content        : '\201C';
  font-size      : 52px;
  color          : #bbf7d0;
  position       : absolute;
  top            : -4px;
  left           : 10px;
  font-family    : 'Playfair Display', Georgia, serif;
  line-height    : 1;
  font-style     : normal;
}

.lkbd-single .lkbd-prose blockquote p {
  margin         : 0;
  font-size      : var(--lkbd-t-md);
  color          : #3a3a3c;
}

/* Links */
.lkbd-single .lkbd-prose a {
  color              : #0057ff;
  text-decoration    : underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition         : color 0.18s ease, text-decoration-color 0.18s ease;
}
.lkbd-single .lkbd-prose a:hover {
  color                    : #003db3;
  text-decoration-thickness: 2px;
}

/* Strong / emphasis */
.lkbd-single .lkbd-prose strong {
  font-weight : var(--lkbd-t-bold);
  color       : #0a0a0a;
}
.lkbd-single .lkbd-prose em {
  font-style : italic;
  color      : #3a3a3c;
}

/* =============================================================
   § 5  CODE TYPOGRAPHY
   ============================================================= */

.lkbd-single .lkbd-prose code {
  font-family    : var(--lkbd-t-family-mono);
  font-size      : 0.85em;
  background     : #f2f2f7;
  color          : #c7254e;
  padding        : 2px 6px;
  border-radius  : 4px;
  border         : 1px solid #e5e5ea;
  font-weight    : var(--lkbd-t-medium);
  white-space    : nowrap;
}

.lkbd-single .lkbd-prose pre {
  font-family    : var(--lkbd-t-family-mono);
  font-size      : 14px;
  line-height    : 1.65;
  background     : #16181d;
  color          : #e2e8f0;
  padding        : var(--lkbd-s-6) var(--lkbd-s-6);
  border-radius  : 8px;
  overflow-x     : auto;
  margin         : 0 0 var(--lkbd-s-7);
  tab-size       : 2;
  -webkit-overflow-scrolling: touch;
}

.lkbd-single .lkbd-prose pre code {
  background     : none;
  padding        : 0;
  color          : inherit;
  font-size      : inherit;
  border         : none;
  white-space    : pre;
}

/* =============================================================
   § 6  UI TYPOGRAPHY  — byline, badges, labels, meta
   ============================================================= */

/* Category badge */
.lkbd-single .lkbd-header__cat-badge {
  font-family    : var(--lkbd-t-family-body) !important;
  font-size      : var(--lkbd-t-xs) !important;
  font-weight    : var(--lkbd-t-bold) !important;
  letter-spacing : var(--lkbd-t-track-caps) !important;
  text-transform : uppercase !important;
}

/* Author name in byline */
.lkbd-single .lkbd-byline__name {
  font-family    : var(--lkbd-t-family-body) !important;
  font-size      : var(--lkbd-t-sm) !important;
  font-weight    : var(--lkbd-t-bold) !important;
  letter-spacing : var(--lkbd-t-track-normal) !important;
}

/* Date / read time */
.lkbd-single .lkbd-byline__dateline {
  font-family    : var(--lkbd-t-family-body) !important;
  font-size      : var(--lkbd-t-xs) !important;
  font-weight    : var(--lkbd-t-semibold) !important;
}

/* READS stat number */
.lkbd-single .lkbd-byline__stat-num {
  font-family    : var(--lkbd-t-family-body) !important;
  font-size      : var(--lkbd-t-3xl) !important;
  font-weight    : var(--lkbd-t-extrabold) !important;
  letter-spacing : var(--lkbd-t-track-tight) !important;
}

/* READS label */
.lkbd-single .lkbd-byline__stat-label {
  font-family    : var(--lkbd-t-family-body) !important;
  font-size      : var(--lkbd-t-xs) !important;
  font-weight    : var(--lkbd-t-bold) !important;
  letter-spacing : var(--lkbd-t-track-caps) !important;
}

/* Section titles  (Share, Related Articles, Comments) */
.lkbd-single .lkbd-share__title,
.lkbd-single .lkbd-related__title,
.lkbd-single .lkbd-takeaways__title {
  font-family    : var(--lkbd-t-family-heading);
  font-size      : var(--lkbd-t-xl);
  font-weight    : var(--lkbd-t-bold);
  letter-spacing : var(--lkbd-t-track-tight);
  color          : #0a0a0a;
}

/* Key takeaways items */
.lkbd-single .lkbd-takeaways__list li {
  font-family  : var(--lkbd-t-family-body) !important;
  font-size    : var(--lkbd-t-sm) !important;
  line-height  : var(--lkbd-t-relaxed) !important;
}

/* TOC items */
.lkbd-single .lkbd-toc__item {
  font-family : var(--lkbd-t-family-body) !important;
  font-size   : var(--lkbd-t-sm) !important;
}

/* Author box */
.lkbd-single .lkbd-author-box__name {
  font-family    : var(--lkbd-t-family-heading);
  font-size      : var(--lkbd-t-xl);
  font-weight    : var(--lkbd-t-bold);
  letter-spacing : var(--lkbd-t-track-tight);
}
.lkbd-single .lkbd-author-box__bio {
  font-family : var(--lkbd-t-family-body);
  font-size   : var(--lkbd-t-sm);
  line-height : var(--lkbd-t-relaxed);
}

/* =============================================================
   § 7  TABLE TYPOGRAPHY
   ============================================================= */

.lkbd-single .lkbd-prose table {
  font-family : var(--lkbd-t-family-body);
  font-size   : var(--lkbd-t-sm);
  width       : 100%;
  border-collapse: collapse;
  margin      : 0 0 var(--lkbd-s-7);
}
.lkbd-single .lkbd-prose th {
  font-family    : var(--lkbd-t-family-heading);
  font-size      : var(--lkbd-t-xs);
  font-weight    : var(--lkbd-t-bold);
  text-transform : uppercase;
  letter-spacing : var(--lkbd-t-track-wide);
  color          : #0a0a0a;
  background     : #f9f9fb;
  padding        : 10px 14px;
  border         : 1px solid #e5e5ea;
  text-align     : left;
}
.lkbd-single .lkbd-prose td {
  font-size   : var(--lkbd-t-sm);
  line-height : var(--lkbd-t-normal);
  padding     : 10px 14px;
  border      : 1px solid #e5e5ea;
  vertical-align: top;
  color       : #3a3a3c;
}
.lkbd-single .lkbd-prose tr:nth-child(even) td { background: #f9f9fb; }

/* =============================================================
   § 8  ASTRA / THEME NEUTRALISATION
   These rules ensure Astra's body, h1-h6, p overrides cannot
   reach elements inside .lkbd-single .lkbd-prose.
   !important is required because Astra targets .entry-content p
   directly, which matches our prose children and wins on
   specificity alone — we need !important to override it.
   ============================================================= */

/* Astra targets .entry-content p { font-family: Merriweather } directly.
   Hard-coded values — no variables — so this always wins. */
.lkbd-single .lkbd-prose > p,
.lkbd-single .lkbd-prose > ul,
.lkbd-single .lkbd-prose > ol {
  font-family : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size   : 17px !important;
}

/* All prose text nodes inherit Inter, not Merriweather */
.lkbd-single .lkbd-prose,
.lkbd-single .lkbd-prose * {
  font-family : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Re-apply intended exceptions for serif/mono elements */
.lkbd-single .lkbd-prose blockquote,
.lkbd-single .lkbd-prose blockquote p,
.lkbd-single .lkbd-prose blockquote::before {
  font-family : var(--lkbd-t-family-title, 'Playfair Display', Georgia, serif) !important;
}
.lkbd-single .lkbd-prose code,
.lkbd-single .lkbd-prose pre,
.lkbd-single .lkbd-prose pre code {
  font-family : var(--lkbd-t-family-mono, 'JetBrains Mono', 'Fira Code', 'Courier New', monospace) !important;
}

.lkbd-single .lkbd-prose h2 { font-size: var(--lkbd-t-2xl) !important; }
.lkbd-single .lkbd-prose h3 { font-size: var(--lkbd-t-xl)  !important; }
.lkbd-single .lkbd-prose h4 { font-size: var(--lkbd-t-md)  !important; }
.lkbd-single .lkbd-prose h5 { font-size: var(--lkbd-t-base)!important; }
.lkbd-single .lkbd-prose h6 { font-size: var(--lkbd-t-sm)  !important; }

/* Prevent Astra's link color from leaking in */
.lkbd-single .lkbd-prose a,
.lkbd-single .lkbd-prose a:visited {
  color : #0057ff !important;
}

/* =============================================================
   § 9  RESPONSIVE TYPOGRAPHY OVERRIDES
   ============================================================= */

@media (max-width: 767px) {

  .lkbd-single {
    --lkbd-t-base : 18px;  
    --lkbd-t-md   : 17px;
    --lkbd-t-lg   : 18px;
    --lkbd-t-xl   : 20px;
    --lkbd-t-2xl  : 22px;
    --lkbd-t-3xl  : 26px;
    --lkbd-t-4xl  : 26px;
    --lkbd-s-6    : 20px;
    --lkbd-s-7    : 26px;
    --lkbd-s-8    : 32px;
    --lkbd-s-10   : 40px;
  }

  /* Mobile body text size override */
  .lkbd-single .lkbd-prose > p,
  .lkbd-single .lkbd-prose > ul,
  .lkbd-single .lkbd-prose > ol {
    font-size : 18px !important;
    font-weight : 400 !important;
    color    : #3a3a3c !important;
  }
  
  

  /* Headings — explicit for clarity */
  .lkbd-single .lkbd-prose h2 {
    border-bottom : none;
    padding-bottom: 0;
  }

  /* Blockquote — reduce padding */
  .lkbd-single .lkbd-prose blockquote {
    padding     : 14px 16px 14px 34px;
    font-size   : var(--lkbd-t-base);
  }
  .lkbd-single .lkbd-prose blockquote p {
    font-size : var(--lkbd-t-base);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .lkbd-single {
    --lkbd-t-base : 17px;
    --lkbd-t-4xl  : 36px;
  }
}

/* =============================================================
   § 10  ANTI-HYPHENATION GLOBAL SAFETY
   Ensures no element inside the single post prose ever breaks
   words with hyphens — regardless of theme or block CSS.
   ============================================================= */

.lkbd-single .lkbd-prose,
.lkbd-single .lkbd-prose p,
.lkbd-single .lkbd-prose li,
.lkbd-single .lkbd-prose h1,
.lkbd-single .lkbd-prose h2,
.lkbd-single .lkbd-prose h3,
.lkbd-single .lkbd-prose h4,
.lkbd-single .lkbd-prose h5,
.lkbd-single .lkbd-prose h6,
.lkbd-single .lkbd-prose span,
.lkbd-single .lkbd-prose blockquote,
.lkbd-single .lkbd-prose td,
.lkbd-single .lkbd-prose th {
  hyphens         : none !important;
  -webkit-hyphens : none !important;
  -ms-hyphens     : none !important;
}