/* =============================================================================
   handbook-content.css — styles for rendered PM Masterclass Handbook content.

   Applied wherever a module's handbook_html is shown: the admin Handbook
   editor (visual pane + preview) and, later, the participant reader. Wrap the
   rendered HTML in an element with class "hb-content" so these rules scope to
   it and don't leak into the surrounding admin/site chrome.

   Depends on the brand tokens (--ads-*) from customise.css, so any page using
   this file must also load customise.css.
   ============================================================================= */

.hb-content {
    font-family: var(--ads-font-body);
    color: var(--ads-text);
    font-size: 1.03rem;
    line-height: 1.72;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- Headings --------------------------------------------------------------- */
.hb-content h2,
.hb-content h3,
.hb-content h4,
.hb-content h5,
.hb-content h6 {
    font-family: var(--ads-font-heading);
    color: var(--ads-primary-dark);
    line-height: 1.3;
    margin: 1.7em 0 0.6em;
}
.hb-content h2 { font-size: 1.55rem; padding-bottom: 0.3em; border-bottom: 2px solid var(--ads-border); }
.hb-content h3 { font-size: 1.25rem; }
.hb-content h4 { font-size: 1.08rem; }
.hb-content h2:first-child,
.hb-content h3:first-child { margin-top: 0; }

/* --- Text ------------------------------------------------------------------- */
.hb-content p { margin: 0 0 1.1em; }
.hb-content strong,
.hb-content b { color: var(--ads-primary-dark); }
.hb-content a { color: var(--ads-primary); text-decoration: underline; }
.hb-content ul,
.hb-content ol { margin: 0 0 1.1em 1.5em; padding: 0; }
.hb-content li { margin-bottom: 0.45em; }
.hb-content img { max-width: 100%; height: auto; border-radius: var(--ads-radius-sm); margin: 1.2em 0; }
.hb-content hr { border: 0; border-top: 1px solid var(--ads-border); margin: 2em 0; }
.hb-content blockquote {
    margin: 1.5em 0; padding: 14px 22px;
    border-left: 4px solid var(--ads-accent);
    background: var(--ads-bg); color: var(--ads-primary-dark); font-style: italic;
}

/* --- Tables ----------------------------------------------------------------- */
/* Scroll wide tables horizontally instead of blowing out the layout. */
.hb-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1.3em 0;
    font-size: 0.95rem;
}
.hb-content th,
.hb-content td {
    border: 1px solid var(--ads-border);
    padding: 10px 13px;
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
}
.hb-content thead th,
.hb-content table th:first-child {
    background: var(--ads-bg);
    color: var(--ads-primary-dark);
    font-weight: 600;
}
.hb-content caption { caption-side: top; text-align: left; color: var(--ads-text-muted); font-size: 0.85rem; margin-bottom: 6px; }

/* --- Callout boxes ---------------------------------------------------------- */
/* Import converts single-column labelled tables into these. Base = navy; each
   variant re-tints the left border, background, and title colour. */
.hb-callout {
    margin: 1.5em 0;
    padding: 16px 20px 14px;
    border-left: 4px solid var(--ads-primary);
    background: rgba(16, 89, 151, 0.06);
    border-radius: 0 var(--ads-radius) var(--ads-radius) 0;
}
.hb-callout > *:last-child { margin-bottom: 0; }
.hb-callout p { margin: 0 0 0.7em; }
.hb-callout-title {
    font-family: var(--ads-font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ads-primary);
    margin-bottom: 0.5em !important;
}

/* KEY INSIGHT — primary blue (base already covers, kept explicit) */
.hb-callout-insight       { border-left-color: var(--ads-primary);       background: rgba(16, 89, 151, 0.06); }
.hb-callout-insight       .hb-callout-title { color: var(--ads-primary); }

/* AFRICAN CONTEXT — brand orange */
.hb-callout-context       { border-left-color: var(--ads-accent);        background: rgba(255, 125, 45, 0.08); }
.hb-callout-context       .hb-callout-title { color: var(--ads-accent-dark); }

/* COMMON PITFALL — danger red */
.hb-callout-pitfall       { border-left-color: var(--ads-danger);        background: rgba(231, 76, 60, 0.07); }
.hb-callout-pitfall       .hb-callout-title { color: #a93226; }

/* REFLECTION QUESTIONS — purple */
.hb-callout-reflection    { border-left-color: var(--ads-purple);        background: rgba(94, 60, 152, 0.07); }
.hb-callout-reflection    .hb-callout-title { color: var(--ads-purple); }

/* CASE STUDY — teal */
.hb-callout-case          { border-left-color: var(--ads-teal);          background: rgba(0, 128, 128, 0.07); }
.hb-callout-case          .hb-callout-title { color: var(--ads-teal); }

/* EXAMPLE APPLICATION — success green */
.hb-callout-example       { border-left-color: var(--ads-success);       background: rgba(46, 204, 113, 0.08); }
.hb-callout-example       .hb-callout-title { color: #1e8449; }

/* BEST PRACTICE — success green */
.hb-callout-best-practice { border-left-color: var(--ads-success);       background: rgba(46, 204, 113, 0.08); }
.hb-callout-best-practice .hb-callout-title { color: #1e8449; }

/* WARNING / REMEMBER — amber */
.hb-callout-warning,
.hb-callout-remember      { border-left-color: var(--ads-warning);       background: rgba(243, 156, 18, 0.09); }
.hb-callout-warning       .hb-callout-title,
.hb-callout-remember      .hb-callout-title { color: #935a00; }

/* TIP — light blue */
.hb-callout-tip           { border-left-color: var(--ads-primary-light); background: rgba(0, 174, 239, 0.08); }
.hb-callout-tip           .hb-callout-title { color: #0679a8; }

/* NOTE — muted grey */
.hb-callout-note          { border-left-color: var(--ads-text-muted);    background: rgba(110, 117, 120, 0.08); }
.hb-callout-note          .hb-callout-title { color: var(--ads-text-muted); }

/* PRACTITIONER — purple */
.hb-callout-practitioner  { border-left-color: var(--ads-purple);        background: rgba(94, 60, 152, 0.07); }
.hb-callout-practitioner  .hb-callout-title { color: var(--ads-purple); }