/* =============================================
   Web Graphic Design – wg-fonts.css
   Typography & Font Loading
   ============================================= */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,900;1,500;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── Font Assignments ── */
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.wg-navbar-logo,
.wg-footer-logo,
.wg-hero-stat-num,
.wg-counter-num,
.wg-estimator-price,
.wg-quiz-result-title,
.wg-article-pullquote {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

code, pre, .wg-mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* ── Fluid Scale ── */
.wg-display-xl { font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1.05; font-weight: 900; }
.wg-display-lg { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.1; font-weight: 700; }
.wg-display-md { font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.2; font-weight: 700; }
.wg-display-sm { font-size: clamp(1.4rem, 2.5vw, 1.8rem); line-height: 1.3; font-weight: 600; }
.wg-body-lg { font-size: 1.125rem; line-height: 1.8; }
.wg-body-md { font-size: 1rem; line-height: 1.7; }
.wg-body-sm { font-size: 0.875rem; line-height: 1.65; }
.wg-caption  { font-size: 0.78rem; letter-spacing: 0.04em; }

/* ── Decoration ── */
.wg-font-italic { font-style: italic; }
.wg-font-bold   { font-weight: 700; }
.wg-font-light  { font-weight: 300; }
.wg-uppercase   { text-transform: uppercase; letter-spacing: 0.1em; }
.wg-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wg-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Drop cap ── */
.wg-drop-cap::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 4.2rem;
  font-weight: 900;
  float: left;
  line-height: 0.8;
  padding-right: 10px;
  padding-top: 6px;
  color: var(--wg-color-accent);
}