/* ==========================================================================
   Wealth Building Financial — Knowledge centre — article page
   Loaded only by layouts/knowledge/single.html.
   ========================================================================== */

/* Article page ------------------------------------------------------------- */

.knowledge-article-summary {
    margin: 0 0 32px;
    padding: 18px 22px;
    border-left: 3px solid var(--color-secondary);
    background: var(--color-surface-muted);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--color-muted-3);
}

.knowledge-article-body {
    font-size: 17px;
    line-height: 1.9;
    color: var(--color-text);
}

.knowledge-article-body h2 {
    margin: 44px 0 18px;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
}

.knowledge-article-body h3 {
    margin: 32px 0 14px;
    font-size: 19px;
    font-weight: 700;
    color: var(--color-primary);
}

.knowledge-article-body p {
    margin: 0 0 20px;
}

.knowledge-article-body ul,
.knowledge-article-body ol {
    margin: 0 0 22px;
    padding-left: 24px;
}

.knowledge-article-body li {
    margin-bottom: 10px;
}

/* A plain blockquote is now the quiet case — the arithmetic blocks in the
   claiming-age articles. The highlighted boxes carried over from the source
   documents are callouts instead; see below. */
.knowledge-article-body blockquote {
    margin: 26px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, white);
    font-size: 16px;
}

.knowledge-article-body blockquote p:last-child {
    margin-bottom: 0;
}

/* Labelled callouts, built by layouts/_markup/render-blockquote.html. A kind
   sets only two custom properties: --callout-accent drives the rule and the
   tint, --callout-badge fills the tab. The tab is white text on a solid pill,
   so every badge colour comes from the dark end of the ramp — the mid tones
   fail at this size (white on #d97706 is 3.2:1, well under the 4.5:1 that
   12px text needs). */
.knowledge-article-body .callout {
    position: relative;   /* anchor for the tab riding the top border */
    margin: 38px 0 26px;  /* top margin has to clear the tab's 12px overhang */
    padding: 26px 22px 18px;
    border: 1px solid color-mix(in srgb, var(--callout-accent) 25%, white);
    border-left: 3px solid var(--callout-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: color-mix(in srgb, var(--callout-accent) 8%, white);
    font-size: 16px;
}

.knowledge-article-body .callout-label {
    position: absolute;
    top: -12px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin: 0;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--callout-badge);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    /* "WBF Perspective" must not wrap out of the pill on a phone. */
    white-space: nowrap;
}

.knowledge-article-body .callout-title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-primary);
}

.knowledge-article-body .callout-body > :last-child {
    margin-bottom: 0;
}

.knowledge-article-body .callout-perspective {
    --callout-accent: var(--color-secondary);       /* #1a9c8c */
    --callout-badge: var(--color-secondary-dark);   /* #12796b — 5.3:1 on white */
}

.knowledge-article-body .callout-reminder {
    --callout-accent: var(--color-cta);             /* #d97706 */
    --callout-badge: #b45309;                       /* 5.0:1 on white */
}

.knowledge-article-body .callout-note {
    --callout-accent: var(--color-info);            /* #0284c7 */
    --callout-badge: #0369a1;                       /* 5.9:1; same value as .form-feedback.pending */
}

/* Tables carry real comparison data here, so they must stay readable rather
   than shrink; let them scroll inside their own box on narrow screens. The box
   comes from layouts/_markup/render-table.html, which wraps every markdown
   table in `.table-scroll`; `min-width` is what makes a four-column table
   scroll rather than squeeze itself into a phone screen. */
.knowledge-article-body .table-scroll {
    margin: 8px 0 26px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.knowledge-article-body table {
    width: 100%;
    min-width: 520px;
    margin: 0;
    border-collapse: collapse;
    font-size: 15px;
}

.knowledge-article-body table th,
.knowledge-article-body table td {
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.knowledge-article-body table th {
    background: var(--color-bg-light);
    font-weight: 700;
    color: var(--color-primary);
}

.knowledge-sources {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--color-border);
}

.knowledge-sources h2 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
}

.knowledge-sources ul {
    margin: 0;
    padding-left: 20px;
}

.knowledge-sources li {
    margin-bottom: 8px;
    font-size: 15px;
}

/* Each source is a standalone link on its own row rather than one inside a
   sentence, so it gets a target of its own rather than the inline exception. */
.knowledge-sources a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--color-secondary-dark);
}

.knowledge-sources i {
    font-size: 11px;
    margin-left: 3px;
}

.knowledge-article-footer {
    margin-top: 36px;
    padding: 22px 24px;
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
}

.knowledge-author-name {
    font-weight: 700;
    color: var(--color-primary);
}

.knowledge-author-credentials {
    margin-left: 8px;
    font-size: 14px;
    color: var(--color-muted-2);
}

.knowledge-disclaimer {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-muted-2);
}

.knowledge-related {
    margin-top: 52px;
}

.knowledge-related h2 {
    margin: 0 0 22px;
    font-size: 22px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .knowledge-article-body {
        font-size: 16px;
    }

    .knowledge-article-body h2 {
        font-size: 21px;
    }

    .knowledge-article-body .callout {
        padding: 24px 16px 16px;
    }

    .knowledge-article-body .callout-label {
        left: 14px;
    }
}