@import url("design-system.css");
/* Design system imported above (uniformity package 2026-10-29): every blog article
   inherits the canonical WAEC Exam tokens/components via this one line. */
/* ============================================================
   BLOG ARTICLE STANDARD (2026-10-26)
   One shared polish layer for every article in /blog/. Loaded
   after style.css (and share.css) on all 45 articles so the
   reading experience is identical everywhere: same measure,
   same rhythm, same components, on every screen size.
   ============================================================ */

html { scroll-behavior: smooth; }
::selection { background: #1e40af; color: #fff; }

/* Reading progress (element created by blog-article.js) */
.wx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; background: transparent; pointer-events: none; }
.wx-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1e40af, #f59e0b); transition: width .08s linear; }

/* Article frame */
.blog-article { max-width: 780px; margin: 0 auto; padding: 8px 20px 8px; }
.breadcrumb { max-width: 780px; margin: 18px auto 0; padding: 0 20px; font-size: .88rem; color: #64748b; }
.breadcrumb a { color: #1e40af; text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }

/* Header */
.article-header { text-align: left; margin: 18px 0 8px; }
.article-header h1 { font-size: clamp(1.75rem, 4.5vw, 2.55rem); line-height: 1.16; letter-spacing: -.015em; color: #0f172a; margin: 10px 0 14px; text-wrap: balance; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: #64748b; font-size: .92rem; padding-bottom: 18px; border-bottom: 1px solid #e2e8f0; }
.badge-category, .article-category, .category-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: #eff6ff; color: #1e40af; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }

/* Body typography */
.article-content { font-size: 1.065rem; line-height: 1.82; color: #26303e; }
.article-content > p:first-of-type { font-size: 1.13rem; color: #1e293b; }
.article-content p { margin: 0 0 1.15em; }
.article-content h2 { font-size: 1.52rem; line-height: 1.3; letter-spacing: -.01em; color: #0f172a; margin: 2em 0 .65em; padding-top: .35em; scroll-margin-top: 96px; }
.article-content h2::before { content: ""; display: block; width: 42px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #1e40af, #f59e0b); margin-bottom: 14px; }
.article-content h3 { font-size: 1.22rem; line-height: 1.35; color: #16283f; margin: 1.7em 0 .5em; scroll-margin-top: 96px; }
.article-content h4 { font-size: 1.05rem; color: #16283f; margin: 1.4em 0 .4em; }
.article-content a { color: #1d4ed8; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(29, 78, 216, .35); text-underline-offset: 3px; }
.article-content a:hover { text-decoration-color: #1d4ed8; }
.article-content strong { color: #0f172a; }
.article-content ul, .article-content ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.article-content li { margin-bottom: .45em; }
.article-content li::marker { color: #1e40af; font-weight: 700; }
.article-content img { max-width: 100%; height: auto; border-radius: 14px; margin: 1.2em auto; box-shadow: 0 10px 30px rgba(15, 23, 42, .10); }
.article-content blockquote { margin: 1.4em 0; padding: 16px 20px; border-left: 4px solid #f59e0b; background: #fffbeb; border-radius: 0 12px 12px 0; color: #713f12; font-size: 1.02rem; }
.article-content blockquote p { margin: 0; }
.article-content hr { border: none; border-top: 1px solid #e2e8f0; margin: 2.2em 0; }
.article-content code { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; padding: .1em .38em; font-size: .92em; }
.article-content table { width: 100%; border-collapse: collapse; margin: 1.3em 0; font-size: .96rem; display: block; overflow-x: auto; border-radius: 12px; }
.article-content th { background: #1e40af; color: #fff; text-align: left; padding: 11px 14px; font-weight: 700; white-space: nowrap; }
.article-content td { padding: 10px 14px; border-bottom: 1px solid #e2e8f0; }
.article-content tr:nth-child(even) td { background: #f8fafc; }

/* Shared components found across the corpus */
.article-content .checklist { list-style: none; padding-left: 0; }
.article-content .checklist li { padding-left: .2em; }
.study-tip, .tip-box, .info-box, .callout { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 14px; padding: 16px 18px; margin: 1.3em 0; }
.faq-item { border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px 18px; margin: 0 0 12px; background: #fff; }
.faq-item h3, .faq-item h4 { margin-top: 0; }

/* Related articles + end-of-article rhythm */
.related-articles { max-width: 780px; margin: 34px auto 0; padding: 0 20px; }
.related-articles h3 { font-size: 1.3rem; color: #0f172a; margin: 0 0 14px; }

/* Legacy-template articles (no .blog-article wrapper): same reading feel */
.container .article-content, main .article-content { max-width: 780px; margin-left: auto; margin-right: auto; }

/* Focus + motion */
.blog-article a:focus-visible, .related-articles a:focus-visible { outline: 3px solid rgba(30, 64, 175, .45); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wx-progress > span { transition: none; }
}

/* Small screens */
@media (max-width: 640px) {
  .blog-article { padding: 4px 16px; }
  .article-content { font-size: 1.02rem; line-height: 1.78; }
  .article-content h2 { font-size: 1.34rem; }
  .breadcrumb, .related-articles { padding: 0 16px; }
}

/* Archive notice (past-cycle articles) */
.archive-tag { background: #fffbeb; border: 1px solid #f59e0b; color: #92400e; padding: 12px 16px; border-radius: 12px; font-size: .94rem; line-height: 1.55; margin: 16px 0; }
.archive-tag a { color: #92400e; font-weight: 700; }

/* ============================================================
   LEGACY TEMPLATE PARITY (2026-10-26): seven older articles use
   different wrappers (.content, .post-content, .content-wrapper)
   instead of .article-content. They get the identical reading
   treatment here so all 45 articles feel like one publication.
   ============================================================ */
.content, .post-content { font-size: 1.065rem; line-height: 1.82; color: #26303e; }
.content p, .post-content p { margin: 0 0 1.15em; }
.content h2, .post-content h2, .content-wrapper h2 { font-size: 1.52rem; line-height: 1.3; letter-spacing: -.01em; color: #0f172a; margin: 2em 0 .65em; padding-top: .35em; scroll-margin-top: 96px; }
.content h2::before, .post-content h2::before, .content-wrapper h2::before { content: ""; display: block; width: 42px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #1e40af, #f59e0b); margin-bottom: 14px; }
.content h3, .post-content h3, .content-wrapper h3 { font-size: 1.22rem; line-height: 1.35; color: #16283f; margin: 1.7em 0 .5em; scroll-margin-top: 96px; }
.content a, .post-content a, .content-wrapper a { color: #1d4ed8; font-weight: 600; }
.content strong, .post-content strong { color: #0f172a; }
.content ul, .content ol, .post-content ul, .post-content ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.content li, .post-content li { margin-bottom: .45em; }
.content li::marker, .post-content li::marker { color: #1e40af; font-weight: 700; }
.content img, .post-content img { max-width: 100%; height: auto; border-radius: 14px; }
.content blockquote, .post-content blockquote { margin: 1.4em 0; padding: 16px 20px; border-left: 4px solid #f59e0b; background: #fffbeb; border-radius: 0 12px 12px 0; color: #713f12; }
.content table, .post-content table { width: 100%; border-collapse: collapse; margin: 1.3em 0; font-size: .96rem; }
.content th, .post-content th { background: #1e40af; color: #fff; text-align: left; padding: 11px 14px; font-weight: 700; }
.content td, .post-content td { padding: 10px 14px; border-bottom: 1px solid #e2e8f0; }
.content tr:nth-child(even) td, .post-content tr:nth-child(even) td { background: #f8fafc; }
.main-title { font-size: clamp(1.75rem, 4.5vw, 2.55rem); line-height: 1.16; letter-spacing: -.015em; color: #0f172a; text-wrap: balance; }
.container .toc { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; }
.blog-post-container { max-width: 780px; margin: 0 auto; padding: 8px 20px; }

/* Share strip: never let the platform labels squeeze or overlap */
.social-share { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e2e8f0; }
.social-share .share-buttons { flex-wrap: wrap; }
.social-share .share-buttons a, .social-share .share-buttons .share-btn { flex: 1 1 150px; justify-content: center; text-align: center; white-space: nowrap; }

/* ============================================================
   IMAGE STANDARD (2026-10-26): 17 of the 18 article images live
   in the article header (hero panel / featured image), outside
   the body scopes above — several photos overflowed the column
   because nothing constrained them. Every image on an article
   page now fits the column, centred, with the same radius and
   spacing. No forced cropping, so illustration text and photo
   framing are never cut.
   ============================================================ */
img { max-width: 100%; }
.article-header img, .hero-panel img, .featured-image img, img.article-image {
  display: block; width: 100%; height: auto; border-radius: 14px; margin: 14px auto 8px;
}