/* ============================================================
   CPFM / LearnIPSAS lesson content styling  (site-wide, safe)
   - Palette lives on :root (prefixed --cpfm-*), so it never
     collides with theme variables.
   - The full branded look (blue headings, readable column,
     CPFM font) applies inside an explicit <div class="cpfm">
     wrapper AND on every LMS lesson body (.lesson-body), so
     lessons need no wrapper at all.
   - On ordinary posts/pages (.post-content) only the components
     (coloured boxes, journal/formula blocks, key-line lists,
     collapsible solutions, styled tables) apply, so the blog
     keeps the theme's own headings and layout.
   - Components never leak into the theme's header, cards or sidebar.
   - Theme copy: yussuf-theme/assets/css/cpfm.css
     Plugin copy: ylms/assets/css/cpfm.css   (same handle: cpfm-lesson)
   ============================================================ */

:root{
  --cpfm-blue:#1d4ed8; --cpfm-blue-bg:#dbeafe;
  --cpfm-amber:#b45309; --cpfm-amber-bg:#fef3c7;
  --cpfm-green:#166534; --cpfm-green-bg:#dcfce7;
  --cpfm-red:#b91c1c; --cpfm-red-bg:#fee2e2;
  --cpfm-purple:#6d28d9; --cpfm-purple-bg:#ede9fe;
  --cpfm-teal:#115e59; --cpfm-teal-bg:#ccfbf1;
  --cpfm-ink:#1f2937; --cpfm-gray:#4b5563; --cpfm-line:#e2e8f0; --cpfm-soft:#f5f7fb;
}

/* ---- base look: full CPFM inside a .cpfm wrapper AND on every lesson body ---- */
.cpfm,
.lesson-body{
  max-width:880px; margin:0 auto; padding:4px 2px 28px;
  color:var(--cpfm-ink);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.55; -webkit-text-size-adjust:100%;
}
.cpfm *{box-sizing:border-box;}
.cpfm p,
.lesson-body p{margin:.5em 0;}
.cpfm h2,
.lesson-body h2{
  color:var(--cpfm-blue); font-size:1.45rem; line-height:1.2;
  margin:1.5em 0 .35em; padding-bottom:.18em;
  border-bottom:2px solid var(--cpfm-blue-bg); font-weight:700;
}
.cpfm h2:first-child,
.lesson-body h2:first-child{margin-top:.2em;}
.cpfm h3,
.lesson-body h3{color:var(--cpfm-teal); font-size:1.12rem; margin:1.1em 0 .25em; font-weight:700;}
.cpfm h1,
.lesson-body h1{color:var(--cpfm-blue); font-size:1.7rem; line-height:1.2; margin:.6em 0 .35em; font-weight:700;}

/* ---- neutralise the theme's auto-heading boxes inside CPFM content ----
   The theme's app.js tags content h1/h2/h3 with .yussuf-auto-heading--* and
   wraps them in coloured boxes. CPFM content styles its own headings, so undo
   that box and restore the clean look. (The JS already skips .cpfm, this is a
   safety net for cached scripts and already-processed pages.) */
.cpfm h1.yussuf-auto-heading--h1, .lesson-body h1.yussuf-auto-heading--h1,
.cpfm h2.yussuf-auto-heading--h2, .lesson-body h2.yussuf-auto-heading--h2,
.cpfm h3.yussuf-auto-heading--h3, .lesson-body h3.yussuf-auto-heading--h3,
.cpfm .yussuf-auto-section-title, .lesson-body .yussuf-auto-section-title{
  padding:0; border:0; background:none; border-radius:0; box-shadow:none;
}
.cpfm h1.yussuf-auto-heading--h1, .lesson-body h1.yussuf-auto-heading--h1{
  color:var(--cpfm-blue); font-size:1.7rem; font-weight:700; margin:.6em 0 .35em;
}
.cpfm h2.yussuf-auto-heading--h2, .lesson-body h2.yussuf-auto-heading--h2{
  color:var(--cpfm-blue); font-size:1.45rem; line-height:1.2; font-weight:700;
  margin:1.5em 0 .35em; padding-bottom:.18em; border-bottom:2px solid var(--cpfm-blue-bg);
}
.cpfm h3.yussuf-auto-heading--h3, .lesson-body h3.yussuf-auto-heading--h3{
  color:var(--cpfm-teal); font-size:1.12rem; font-weight:700; margin:1.1em 0 .25em;
}
/* ---- components: work in .cpfm, any post/page, or any lesson ---- */
.cpfm .box,
.post-content .box,
.lesson-body .box{border-left:5px solid var(--cpfm-blue); background:var(--cpfm-soft); border-radius:8px; padding:.7em .9em; margin:.8em 0;}
.cpfm .box .kicker,
.post-content .box .kicker,
.lesson-body .box .kicker{font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--cpfm-blue); display:block; margin-bottom:.25em;}
.cpfm .box p,
.post-content .box p,
.lesson-body .box p{margin:.2em 0;}
.cpfm .box.blue,
.post-content .box.blue,
.lesson-body .box.blue{border-color:var(--cpfm-blue); background:var(--cpfm-blue-bg);}
.cpfm .box.blue .kicker,
.post-content .box.blue .kicker,
.lesson-body .box.blue .kicker{color:var(--cpfm-blue);}
.cpfm .box.amber,
.post-content .box.amber,
.lesson-body .box.amber{border-color:var(--cpfm-amber); background:var(--cpfm-amber-bg);}
.cpfm .box.amber .kicker,
.post-content .box.amber .kicker,
.lesson-body .box.amber .kicker{color:var(--cpfm-amber);}
.cpfm .box.green,
.post-content .box.green,
.lesson-body .box.green{border-color:var(--cpfm-green); background:var(--cpfm-green-bg);}
.cpfm .box.green .kicker,
.post-content .box.green .kicker,
.lesson-body .box.green .kicker{color:var(--cpfm-green);}
.cpfm .box.red,
.post-content .box.red,
.lesson-body .box.red{border-color:var(--cpfm-red); background:var(--cpfm-red-bg);}
.cpfm .box.red .kicker,
.post-content .box.red .kicker,
.lesson-body .box.red .kicker{color:var(--cpfm-red);}
.cpfm .box.purple,
.post-content .box.purple,
.lesson-body .box.purple{border-color:var(--cpfm-purple); background:var(--cpfm-purple-bg);}
.cpfm .box.purple .kicker,
.post-content .box.purple .kicker,
.lesson-body .box.purple .kicker{color:var(--cpfm-purple);}
.cpfm .box.teal,
.post-content .box.teal,
.lesson-body .box.teal{border-color:var(--cpfm-teal); background:var(--cpfm-teal-bg);}
.cpfm .box.teal .kicker,
.post-content .box.teal .kicker,
.lesson-body .box.teal .kicker{color:var(--cpfm-teal);}
.cpfm .ex,
.post-content .ex,
.lesson-body .ex{border:1px solid var(--cpfm-line); border-radius:10px; padding:.2em .9em .8em; margin:.9em 0; background:#fff;}
.cpfm .ex h3,
.post-content .ex h3,
.lesson-body .ex h3{color:var(--cpfm-teal); font-size:1.12rem; font-weight:700; margin:.7em 0 .25em;}
.cpfm p .qlabel,
.post-content p .qlabel,
.lesson-body p .qlabel{color:var(--cpfm-blue); font-weight:700;}
.cpfm .jrn,
.post-content .jrn,
.lesson-body .jrn,
.cpfm .calc,
.post-content .calc,
.lesson-body .calc{background:var(--cpfm-soft); border:1px solid var(--cpfm-line); border-radius:8px; padding:.6em .8em; margin:.6em 0; overflow-x:auto; font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:.92rem; line-height:1.5; white-space:pre;}
.cpfm .jrn .dr,
.post-content .jrn .dr,
.lesson-body .jrn .dr{color:var(--cpfm-red);}
.cpfm .jrn .cr,
.post-content .jrn .cr,
.lesson-body .jrn .cr{color:var(--cpfm-green);}
.cpfm .jrn span,
.post-content .jrn span,
.lesson-body .jrn span{display:block;}
.cpfm .calc,
.post-content .calc,
.lesson-body .calc{color:var(--cpfm-gray); font-weight:600;}
.cpfm .table-wrap,
.post-content .table-wrap,
.lesson-body .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.7em 0;}
.cpfm  table,
.post-content .table-wrap  table,
.lesson-body .table-wrap  table{border-collapse:collapse; width:100%; min-width:440px; font-size:.95rem;}
.cpfm  thead th,
.post-content .table-wrap  thead th,
.lesson-body .table-wrap  thead th{background:var(--cpfm-blue); color:#fff; text-align:left; padding:.5em .65em; font-weight:700; white-space:nowrap;}
.cpfm  tbody td,
.post-content .table-wrap  tbody td,
.lesson-body .table-wrap  tbody td{border:1px solid var(--cpfm-line); padding:.45em .65em; vertical-align:top;}
.cpfm  tbody tr:nth-child(even),
.post-content .table-wrap  tbody tr:nth-child(even),
.lesson-body .table-wrap  tbody tr:nth-child(even){background:#fafbfe;}
.cpfm  tbody td:first-child,
.post-content .table-wrap  tbody td:first-child,
.lesson-body .table-wrap  tbody td:first-child{font-weight:600;}
.cpfm  table.red thead th,
.post-content .table-wrap  table.red thead th,
.lesson-body .table-wrap  table.red thead th{background:var(--cpfm-red);}
.cpfm  table.teal thead th,
.post-content .table-wrap  table.teal thead th,
.lesson-body .table-wrap  table.teal thead th{background:var(--cpfm-teal);}
.cpfm  tr.total td,
.post-content .table-wrap  tr.total td,
.lesson-body .table-wrap  tr.total td{font-weight:700; background:#eef2ff;}
.cpfm .keylines,
.post-content .keylines,
.lesson-body .keylines{list-style:none; margin:.4em 0; padding:.6em .9em; background:var(--cpfm-teal-bg); border-left:5px solid var(--cpfm-teal); border-radius:8px;}
.cpfm .keylines li,
.post-content .keylines li,
.lesson-body .keylines li{padding:.18em 0 .18em 1.4em; position:relative;}
.cpfm .keylines li::before,
.post-content .keylines li::before,
.lesson-body .keylines li::before{content:"\2713"; position:absolute; left:0; color:var(--cpfm-teal); font-weight:700;}
.cpfm .qa,
.post-content .qa,
.lesson-body .qa{border:1px solid var(--cpfm-line); border-radius:10px; padding:.3em .9em .8em; margin:.9em 0; background:#fff;}
.cpfm .qa h3,
.post-content .qa h3,
.lesson-body .qa h3{color:var(--cpfm-blue); font-size:1.12rem; font-weight:700; margin:.7em 0 .25em;}
.cpfm .qa .scenario,
.post-content .qa .scenario,
.lesson-body .qa .scenario{background:var(--cpfm-soft); border-radius:6px; padding:.5em .7em; margin:.5em 0;}
.cpfm details.soln,
.post-content details.soln,
.lesson-body details.soln{margin:.6em 0 .2em; border:1px solid var(--cpfm-green); border-radius:8px; background:var(--cpfm-green-bg); padding:.1em .8em;}
.cpfm details.soln summary,
.post-content details.soln summary,
.lesson-body details.soln summary{cursor:pointer; font-weight:700; color:var(--cpfm-green); padding:.5em 0; list-style:none;}
.cpfm details.soln summary::-webkit-details-marker,
.post-content details.soln summary::-webkit-details-marker,
.lesson-body details.soln summary::-webkit-details-marker{display:none;}
.cpfm details.soln summary::before,
.post-content details.soln summary::before,
.lesson-body details.soln summary::before{content:"\25B8\00a0\00a0";}
.cpfm details.soln[open] summary::before,
.post-content details.soln[open] summary::before,
.lesson-body details.soln[open] summary::before{content:"\25BE\00a0\00a0";}
.cpfm details.soln[open],
.post-content details.soln[open],
.lesson-body details.soln[open]{background:#fff;}
.cpfm details.soln p,
.post-content details.soln p,
.lesson-body details.soln p{margin:.35em 0;}

@media (max-width:600px){
.cpfm,
.lesson-body{font-size:16px; padding:2px 0 22px;}
.cpfm h2,
.lesson-body h2{font-size:1.25rem;}
.cpfm h3,
.lesson-body h3{font-size:1.05rem;}
.cpfm .jrn,
.post-content .jrn,
.lesson-body .jrn,
.cpfm .calc,
.post-content .calc,
.lesson-body .calc{font-size:.82rem;}
.cpfm  table,
.post-content .table-wrap  table,
.lesson-body .table-wrap  table{font-size:.9rem;}
}