/* ── fpa-blog.css — FPA Edutech Blog Stylesheet ──
   Brand: Navy #033248 · Red #B8222F
   Paste ONCE into WordPress → Appearance → Customise → Additional CSS
   (or your theme's Custom CSS field). Reused by every FPA blog post. */

/* ── Brand tokens ── */
.fpa-post {
  --fpa-navy: #033248;
  --fpa-navy-deep: #02202F;
  --fpa-navy-soft: #EEF4F7;
  --fpa-red: #B8222F;
  --fpa-red-dark: #961926;
  --fpa-red-soft: #FDF2F3;
  --fpa-red-border: #F0C7CB;
  --fpa-ink: #1F2A33;
  --fpa-body: #3D4B55;
  --fpa-muted: #6B7A85;
  --fpa-line: #E2E8EC;
  --fpa-surface: #F7FAFB;
  font-family: inherit;
}

/* ── Base ── */
.fpa-post p { font-size: 15.8px; color: var(--fpa-body); line-height: 1.78; }
.fpa-post h2 { font-size: 1.55rem; font-weight: 700; color: var(--fpa-navy);
               scroll-margin-top: 100px; margin-top: 38px; }
.fpa-post h3 { font-size: 1.12rem; font-weight: 700; color: var(--fpa-ink);
               scroll-margin-top: 100px; margin-top: 26px; }
.fpa-post ul, .fpa-post ol { color: var(--fpa-body); line-height: 1.75; }
.fpa-post a { color: var(--fpa-navy); font-weight: 600; text-decoration: none;
              border-bottom: 1px solid rgba(184,34,47,.28); }
.fpa-post a:hover { color: var(--fpa-red); border-bottom-color: var(--fpa-red); }

/* ── Label ── */
.fpa-label { font-size: 11px; font-weight: 700; letter-spacing: .09em;
             text-transform: uppercase; color: var(--fpa-red);
             display: block; margin-bottom: 12px; }

/* ── Boxes ── */
.fpa-highlights, .fpa-toc, .fpa-also-read, .fpa-link-grid {
  background: var(--fpa-surface); border: 1px solid var(--fpa-line);
  border-radius: 12px; padding: 22px 28px; margin: 26px 0; }
.fpa-highlights { border-top: 4px solid var(--fpa-navy); }
.fpa-toc { border-top: 4px solid var(--fpa-red); }
.fpa-toc ol { margin: 0; padding-left: 20px; }
.fpa-toc li { margin-bottom: 6px; }
.fpa-also-read { border-left: 4px solid var(--fpa-red); background: var(--fpa-red-soft);
                 border-color: var(--fpa-red-border); border-radius: 0 12px 12px 0; }
.fpa-also-read p { margin: 0; }

/* ── Callout (navy tip box) ── */
.fpa-callout { border-left: 4px solid var(--fpa-navy); background: var(--fpa-navy-soft);
               border-radius: 0 10px 10px 0; padding: 16px 22px;
               display: flex; gap: 12px; margin: 22px 0; }
.fpa-callout-icon { flex-shrink: 0; font-size: 18px; line-height: 1.6; }
.fpa-callout p { margin: 0; color: var(--fpa-ink); }

/* ── Highlight (red fact/stat box) ── */
.fpa-highlight { background: var(--fpa-red-soft); border: 1px solid var(--fpa-red-border);
                 border-radius: 10px; padding: 16px 22px; margin: 22px 0; }
.fpa-highlight p { margin: 0; color: var(--fpa-ink); }

/* ── Table ── */
.fpa-table-wrap { border: 1px solid var(--fpa-line); border-radius: 12px;
                  overflow: hidden; overflow-x: auto; margin: 26px 0; }
.fpa-table { width: 100%; border-collapse: collapse; }
.fpa-table thead { background: var(--fpa-navy); color: #fff; font-size: 12px;
                   letter-spacing: .04em; text-transform: uppercase; }
.fpa-table thead th { padding: 13px 16px; text-align: left; font-weight: 700; }
.fpa-table tbody tr { border-top: 1px solid var(--fpa-line); }
.fpa-table tbody tr:nth-child(even) { background: var(--fpa-surface); }
.fpa-table td { padding: 12px 16px; color: var(--fpa-body); font-size: 14.6px;
                vertical-align: top; }
.fpa-table td strong { color: var(--fpa-navy); }

/* ── CTA Card (mid-article) ── */
.fpa-cta-card { background: linear-gradient(135deg, #033248 0%, #02202F 100%);
                border-radius: 16px; text-align: center; padding: 38px 32px;
                margin: 36px 0; border-bottom: 4px solid var(--fpa-red); }
.fpa-post .fpa-cta-card h3 { color: #fff !important; margin: 0 0 14px; font-size: 1.35rem; }
.fpa-post .fpa-cta-card p { color: rgba(255,255,255,.82) !important; margin: 0 auto;
                            max-width: 560px; line-height: 1.7; }
.fpa-post .fpa-cta-card a,
.fpa-post .fpa-cta-card a:link,
.fpa-post .fpa-cta-card a:visited { display: inline-block; background: var(--fpa-red);
                  color: #fff !important; font-weight: 700; padding: 14px 32px;
                  border-radius: 8px; margin-top: 22px; border-bottom: none;
                  text-decoration: none; line-height: 1.4;
                  transition: background .18s ease, transform .18s ease; }
.fpa-post .fpa-cta-card a:hover,
.fpa-post .fpa-cta-card a:focus { background: var(--fpa-red-dark); color: #fff !important;
                  border-bottom: none; transform: translateY(-1px); }

/* ── Link Grid ── */
.fpa-link-grid h3 { margin-top: 0; color: var(--fpa-navy); font-size: 1rem; }
.fpa-link-grid ul { list-style: none; padding: 0; margin: 0;
                    display: flex; flex-direction: column; gap: 9px; }
.fpa-link-grid ul li { font-size: 15px; }
.fpa-link-grid ul li::before { content: '\2192'; color: var(--fpa-red);
                               margin-right: 8px; font-weight: 700; }

/* ── CTA Banner (pre-FAQ) ── */
.fpa-cta-banner { background: linear-gradient(135deg, #033248 0%, #02202F 100%);
                  border-radius: 16px; text-align: center; padding: 50px 40px;
                  margin: 42px 0; border-bottom: 4px solid var(--fpa-red); }
.fpa-post .fpa-cta-banner h3 { color: #fff !important; font-size: 1.6rem; margin: 0 0 14px; }
.fpa-post .fpa-cta-banner p { color: rgba(255,255,255,.82) !important; margin: 0 auto;
                              max-width: 620px; line-height: 1.7; }
.fpa-post .fpa-cta-banner__btn,
.fpa-post .fpa-cta-banner__btn:link,
.fpa-post .fpa-cta-banner__btn:visited { display: inline-block; background: var(--fpa-red);
                       color: #fff !important; font-weight: 700; padding: 15px 34px;
                       border-radius: 9px; margin-top: 22px; border-bottom: none;
                       text-decoration: none; line-height: 1.4;
                       transition: background .18s ease, transform .18s ease; }
.fpa-post .fpa-cta-banner__btn:hover,
.fpa-post .fpa-cta-banner__btn:focus { background: var(--fpa-red-dark); color: #fff !important;
                       border-bottom: none; transform: translateY(-1px); }
.fpa-post .fpa-cta-banner__sub { font-size: 12.5px; color: rgba(255,255,255,.55) !important;
                                 margin-top: 16px; }

/* ── FAQ ── */
.fpa-faq { border-top: 1px solid var(--fpa-line); margin-top: 20px; }
.fpa-faq details { border-bottom: 1px solid var(--fpa-line); }
.fpa-faq summary { font-size: 16px; font-weight: 700; color: var(--fpa-navy);
                   cursor: pointer; padding: 18px 0; list-style: none;
                   display: flex; justify-content: space-between;
                   align-items: center; gap: 16px; }
.fpa-faq summary:hover { color: var(--fpa-red); }
.fpa-faq summary::-webkit-details-marker { display: none; }
.fpa-faq summary::after { content: '+'; color: var(--fpa-red); font-size: 22px;
                          font-weight: 400; flex-shrink: 0; }
.fpa-faq details[open] summary::after { content: '\2212'; }
.fpa-faq details p { font-size: 15px; color: var(--fpa-body); line-height: 1.72;
                     padding-bottom: 18px; margin: 0; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .fpa-cta-card, .fpa-cta-banner { padding: 30px 22px; }
  .fpa-post h2 { font-size: 1.32rem; }
  .fpa-post h3 { font-size: 1.02rem; }
  .fpa-cta-banner h3 { font-size: 1.3rem; }
  .fpa-highlights, .fpa-toc, .fpa-also-read, .fpa-link-grid { padding: 18px 20px; }
  .fpa-table { font-size: 13px; }
  .fpa-table td, .fpa-table thead th { padding: 10px 12px; }
}