/*
 * font.css — Expert Tutorials Global Font & Size Settings
 * ─────────────────────────────────────────────────────────
 * This file controls fonts AND body text size across ALL pages.
 * Just change the values below — every page updates automatically.
 *
 * ── HOW TO CHANGE FONT ──────────────────────────────────────
 * 1. Pick a font pair from the suggestions below
 * 2. Replace the @import URL with the new Google Fonts URL
 * 3. Update the --font-heading and --font-body variables
 *
 * ── HOW TO CHANGE BODY TEXT SIZE ────────────────────────────
 * Change --font-size-body below (current: 1.0625rem = 17px)
 * Recommended range: 1rem (16px) to 1.125rem (18px)
 *
 * ── FONT SUGGESTIONS ────────────────────────────────────────
 *
 * OPTION A — Current (Elegant Academic):
 *   Heading : Playfair Display  → formal, editorial serif
 *   Body    : Inter             → clean, modern sans-serif
 *
 * OPTION B — Modern Premium:
 *   Heading : Fraunces          → expressive, high-contrast serif
 *   Body    : DM Sans           → geometric, friendly sans
 *   @import: https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,500;0,600;1,400&family=DM+Sans:wght@300;400;500&display=swap
 *   --font-heading: "Fraunces", Georgia, serif;
 *   --font-body   : "DM Sans", system-ui, sans-serif;
 *
 * OPTION C — Classic Trustworthy:
 *   Heading : Lora              → warm, literary serif
 *   Body    : Nunito            → rounded, readable sans
 *   @import: https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,400&family=Nunito:wght@300;400;500&display=swap
 *   --font-heading: "Lora", Georgia, serif;
 *   --font-body   : "Nunito", system-ui, sans-serif;
 *
 * OPTION D — Contemporary Clean:
 *   Heading : DM Serif Display  → bold, architectural
 *   Body    : Plus Jakarta Sans → professional, highly legible
 *   @import: https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500&display=swap
 *   --font-heading: "DM Serif Display", Georgia, serif;
 *   --font-body   : "Plus Jakarta Sans", system-ui, sans-serif;
 *
 * OPTION E — Sophisticated Minimal:
 *   Heading : Cormorant Garamond → luxurious, high-fashion
 *   Body    : Outfit              → geometric, confident
 *   @import: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,400&family=Outfit:wght@300;400;500&display=swap
 *   --font-heading: "Cormorant Garamond", Georgia, serif;
 *   --font-body   : "Outfit", system-ui, sans-serif;
 *
 * OPTION F — Warm Educational:
 *   Heading : EB Garamond       → scholarly, refined
 *   Body    : Poppins           → clean, widely trusted
 *   @import: https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,500;0,600;1,400&family=Poppins:wght@300;400;500&display=swap
 *   --font-heading: "EB Garamond", Georgia, serif;
 *   --font-body   : "Poppins", system-ui, sans-serif;
 * ─────────────────────────────────────────────────────────────
 */

/* ── ACTIVE FONT IMPORTS (change these when switching fonts) ── */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");

:root {
  /* ── Change these two values to switch fonts globally ── */
  --font-heading   : "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body      : "Inter", system-ui, -apple-system, sans-serif;

  /* ── Change this to resize body text globally ── */
  --font-size-body : 1.0625rem;   /* 17px — increase to 1.125rem for 18px */
  --font-size-sm   : 0.9375rem;   /* 15px — small text / captions */
  --font-size-xs   : 0.875rem;    /* 14px — very small labels */
  --line-height    : 1.8;
}

/* ── Apply fonts globally ── */
body {
  font-family  : var(--font-body);
  font-size    : var(--font-size-body);
  line-height  : var(--line-height);
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6,
.font-serif,
.etf2-name,
.etf2-headline,
[class*="font-serif"] {
  font-family: var(--font-heading);
}

/* ── Body text elements ── */
p, li, td, th, label, span, div, blockquote {
  font-size: inherit;
}

/* ── Small / caption text ── */
.text-sm, small {
  font-size: var(--font-size-sm) !important;
}
.text-xs {
  font-size: var(--font-size-xs) !important;
}

/* ── Override Tailwind's text-sm for paragraphs specifically ── */
section p,
article p,
.leading-relaxed {
  font-size: var(--font-size-body);
  line-height: var(--line-height);
}

/* ── Details / FAQ body text ── */
details div p,
details div {
  font-size: var(--font-size-body);
  line-height: var(--line-height);
}