/* callouts.css — coloured callout boxes for sprinkling through long
 * pages to break up text and highlight interesting facts.
 *
 * Three variants:
 *   .fm-callout--fact   "Did you know?" — yellow, lightbulb
 *   .fm-callout--info   General context  — blue, info circle
 *   .fm-callout--tip    Try-this hooks  — green, target
 *
 * Markup contract:
 *   <aside class="fm-callout fm-callout--fact">
 *     <span class="fm-callout__icon" aria-hidden="true">💡</span>
 *     <div class="fm-callout__body">
 *       <h4 class="fm-callout__title">Did you know?</h4>
 *       <p>Your fact here.</p>
 *     </div>
 *   </aside>
 *
 * <aside> is the right semantic element for a tangential aside;
 * screen readers announce it as a complementary region.
 */

.fm-callout {
    --callout-bg:    #fffbea;
    --callout-bar:   #f4c430;
    --callout-text:  #5b4a13;

    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin: 1.5rem 0;
    padding: 1rem 1.1rem 1rem 1rem;
    background: var(--callout-bg);
    border-left: 4px solid var(--callout-bar);
    border-radius: 6px 10px 10px 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: var(--callout-text);
}

.fm-callout__icon {
    flex-shrink: 0;
    font-size: 1.8rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.fm-callout__body { flex: 1 1 auto; }

.fm-callout__title {
    margin: 0 0 0.25rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--callout-bar);
}

.fm-callout__body p {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.5;
}
.fm-callout__body p + p { margin-top: 0.5rem; }

/* Variants — coloured per topic. Same shape, different palette. */
.fm-callout--fact { --callout-bg: #fffbea; --callout-bar: #d99700; --callout-text: #4a3b00; }
.fm-callout--info { --callout-bg: #eff6ff; --callout-bar: #2563eb; --callout-text: #1e3a8a; }
.fm-callout--tip  { --callout-bg: #ecfdf5; --callout-bar: #10b981; --callout-text: #064e3b; }

[data-theme="dark"] .fm-callout--fact { --callout-bg: #2b240a; --callout-bar: #f0c14b; --callout-text: #fde68a; }
[data-theme="dark"] .fm-callout--info { --callout-bg: #0f172a; --callout-bar: #60a5fa; --callout-text: #bfdbfe; }
[data-theme="dark"] .fm-callout--tip  { --callout-bg: #0d2a1f; --callout-bar: #34d399; --callout-text: #a7f3d0; }