/* =============================================
   blog-typography.css
   Shared font sizing for all article pages
   Add to each blog page: <link rel="stylesheet" href="/blog-typography.css">
   ============================================= */

/* BASE ARTICLE TYPOGRAPHY */
.article-body p,
.article-body li,
.section-block p,
.issue-body p,
.fix-box li {
  font-size: 16px;
  line-height: 1.8;
}

.article-body h2,
.section-block h2 {
  font-size: 28px;
}

.article-body h3,
.section-block h3 {
  font-size: 22px;
}

.article-hero h1 {
  font-size: clamp(32px, 4.5vw, 52px);
}

.hero-sub,
.article-meta-bar {
  font-size: 16px;
}

.pull-quote p {
  font-size: 20px;
  line-height: 1.6;
}

.s-label {
  font-size: 12px;
}

.issue-title {
  font-size: 20px;
}

.issue-tag {
  font-size: 11px;
}

.fb-label,
.fix-box .fb-label {
  font-size: 14px;
}

.info-box p,
.info-box li {
  font-size: 15px;
  line-height: 1.75;
}

.ib-label {
  font-size: 15px;
}

/* BREADCRUMB & TAGS */
.breadcrumb,
.breadcrumb a {
  font-size: 13px;
}

.hero-tag {
  font-size: 12px;
}

/* RECONCILIATION MATRIX / TABLES */
.recon-table th {
  font-size: 13px;
}

.recon-table td {
  font-size: 14px;
  line-height: 1.6;
}

/* CHECKLIST ITEMS */
.checklist-item,
.checklist-label {
  font-size: 15px;
}

/* RETURN NODES */
.return-form {
  font-size: 18px;
}

.return-freq {
  font-size: 12px;
}

.return-desc {
  font-size: 13px;
}

.map-label {
  font-size: 13px;
}

/* FOOTER & NAV on blog pages */
footer p {
  font-size: 14px;
}

/* =============================================
   LARGE SCREENS (1440px+)
   ============================================= */
@media (min-width: 1440px) {
  .article-body p,
  .article-body li,
  .section-block p,
  .issue-body p,
  .fix-box li {
    font-size: 18px;
    line-height: 1.85;
  }

  .article-body h2,
  .section-block h2 {
    font-size: 32px;
  }

  .article-body h3,
  .section-block h3 {
    font-size: 25px;
  }

  .article-hero h1 {
    font-size: clamp(36px, 5vw, 58px);
  }

  .hero-sub,
  .article-meta-bar {
    font-size: 17px;
  }

  .pull-quote p {
    font-size: 22px;
  }

  .issue-title {
    font-size: 22px;
  }

  .info-box p,
  .info-box li {
    font-size: 17px;
  }

  .ib-label {
    font-size: 17px;
  }

  .fb-label {
    font-size: 15px;
  }

  .recon-table td {
    font-size: 15px;
  }

  .recon-table th {
    font-size: 14px;
  }

  .return-form {
    font-size: 20px;
  }

  .return-desc {
    font-size: 14px;
  }

  .checklist-item,
  .checklist-label {
    font-size: 16px;
  }

  .article-body {
    max-width: 860px;
  }

  footer p {
    font-size: 15px;
  }
}

/* =============================================
   EXTRA LARGE SCREENS (1800px+)
   ============================================= */
@media (min-width: 1800px) {
  .article-body p,
  .article-body li,
  .section-block p,
  .issue-body p,
  .fix-box li {
    font-size: 20px;
    line-height: 1.9;
  }

  .article-body h2,
  .section-block h2 {
    font-size: 36px;
  }

  .article-body h3,
  .section-block h3 {
    font-size: 28px;
  }

  .article-hero h1 {
    font-size: clamp(40px, 5vw, 64px);
  }

  .hero-sub,
  .article-meta-bar {
    font-size: 19px;
  }

  .pull-quote p {
    font-size: 24px;
  }

  .issue-title {
    font-size: 24px;
  }

  .info-box p,
  .info-box li {
    font-size: 18px;
  }

  .ib-label {
    font-size: 18px;
  }

  .fb-label {
    font-size: 16px;
  }

  .recon-table td {
    font-size: 16px;
  }

  .recon-table th {
    font-size: 15px;
  }

  .return-form {
    font-size: 22px;
  }

  .return-desc {
    font-size: 15px;
  }

  .checklist-item,
  .checklist-label {
    font-size: 18px;
  }

  .article-body {
    max-width: 920px;
  }

  .breadcrumb,
  .breadcrumb a {
    font-size: 14px;
  }

  .hero-tag {
    font-size: 13px;
  }

  .nav-links a {
    font-size: 14px;
  }

  footer p {
    font-size: 16px;
  }
}