/* ============================================================
   RAR MEDICAL MICROBIOLOGY · "Bordetella pertussis" page styles
   Scoped to .rar-topic-content. Reuses the shared canonical blocks
   (.topic-section-card, .section-label, .solid-text-card, .atl-figure,
   .atl-find-list, .atl-flag, .hy-callout, .cav-term, .vasc-tbd). Mirrors
   the Streptococcus pyogenes page conventions. Prefix: bp-.
   ============================================================ */

.rar-topic-content #bp-stages h3,
.rar-topic-content #bp-virulence h3,
.rar-topic-content #bp-labid h3,
.rar-topic-content #bp-prevention h3 { color: #111111; margin: 2px 0 12px; }

.rar-topic-content .bp-lead { color: #111111; margin: 2px 0 12px; font-size: 15px; line-height: 1.55; }
.rar-topic-content .bp-body { color: #111111; margin: 4px 0 10px; font-size: 15px; line-height: 1.6; }

/* ---------- Section 1 quick-hit chips ---------- */
.rar-topic-content .bp-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 14px 0 2px;
}
.rar-topic-content .bp-chip {
    display: inline-flex; align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(10, 132, 255, 0.24);
    background: rgba(10, 132, 255, 0.07);
    color: #111111;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ---------- subheads inside virulence ---------- */
.rar-topic-content .bp-subhead {
    color: #111111; margin: 16px 0 6px; font-size: 16px; font-weight: 800;
}
.rar-topic-content .bp-subhead-note { font-weight: 600; color: #4a5a74; font-size: 14px; }

/* ---------- bullet lists (mirror sp-vf) ---------- */
.rar-topic-content .bp-vf { margin: 4px 0 0; }
.rar-topic-content .bp-vf li { color: #111111; }
.rar-topic-content .bp-vf--lg li { font-size: 15px; line-height: 1.6; margin-bottom: 6px; }
.rar-topic-content .bp-vf--lg .atl-find-emoji { font-size: 15px; }
.rar-topic-content #bp-virulence .bp-vf strong { font-size: 15px; }

/* ---------- lab-identification card (mirror sp-card) ---------- */
.rar-topic-content .bp-card {
    margin: 4px 0 0;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(10, 132, 255, 0.16);
    background: linear-gradient(180deg, rgba(238, 245, 255, 0.55), rgba(255, 255, 255, 0.96));
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

/* ---------- clinical pearl / cross-module pearl ---------- */
.rar-topic-content .bp-pearl { display: block; margin-top: 16px; font-size: 14.5px; }
.rar-topic-content .bp-xmodule { margin-top: 16px; }

/* ---------- interactive / figure placeholders ---------- */
.rar-topic-content .bp-mount { margin-top: 14px; }

/* Two figures stacked and CENTERED so their center-lines align (radial map
   above the toxin animation) — same max-width reads them as a matched pair. */
.rar-topic-content .bp-overlay-fig { max-width: 780px; margin: 16px auto 0; }
.rar-topic-content .bp-labfig .atl-figure__img { width: 100%; height: auto; object-fit: contain; border-radius: 12px; }
.rar-topic-content .bp-overlay-fig .atl-figure__img { width: 100%; height: auto; object-fit: contain; border-radius: 12px; }
.rar-topic-content .bp-overlay-fig figcaption,
.rar-topic-content #bp-virulence .bp-subhead { text-align: center; }
.rar-topic-content .bp-toxin-anim .bsp { max-width: 780px; }

/* ============================================================
   Virulence factors — card + dropdown layout
   ============================================================ */

/* boxed group (Adhesins / The other toxins) */
.rar-topic-content .bp-group {
    margin: 16px 0 0;
    padding: 14px 16px 16px;
    border-radius: 16px;
    border: 1px solid rgba(10, 132, 255, 0.16);
    background: rgba(238, 245, 255, 0.4);
}
.rar-topic-content .bp-group__title { font-size: 16px; font-weight: 800; color: #111111; margin-bottom: 10px; }
.rar-topic-content .bp-group__note { font-weight: 600; color: #4a5a74; font-size: 14px; }

/* side-by-side card grid */
.rar-topic-content .bp-factor-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.rar-topic-content .bp-factor-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rar-topic-content .bp-factor-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* individual factor card */
.rar-topic-content .bp-factor {
    display: flex; flex-direction: column;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.rar-topic-content .bp-factor__name {
    margin: 0; color: #111111; font-weight: 800; line-height: 1.25;
    font-size: 17px; letter-spacing: -0.01em;
}
.rar-topic-content .bp-factor__name--lg { font-size: 19px; }
.rar-topic-content .bp-factor__abbr {
    display: inline-block; margin-left: 4px;
    font-size: 12px; font-weight: 800; letter-spacing: 0.03em;
    color: #0a4fa8; background: rgba(10, 132, 255, 0.1);
    border-radius: 6px; padding: 1px 6px; vertical-align: 2px;
}
.rar-topic-content .bp-factor__flag {
    display: inline-block; margin-left: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #fff; background: #0a84ff; border-radius: 6px; padding: 2px 8px; vertical-align: 3px;
}
.rar-topic-content .bp-factor__role { margin: 5px 0 9px; font-size: 13px; color: #4a5a74; line-height: 1.4; }
.rar-topic-content .bp-factor__effects-label { margin: 14px 0 8px; font-size: 14px; font-weight: 700; color: #111111; }

/* hero (pertussis toxin) spans full width */
.rar-topic-content .bp-factor--hero {
    margin-top: 14px;
    border-color: rgba(10, 132, 255, 0.28);
    background: linear-gradient(180deg, rgba(238, 245, 255, 0.6), #fff);
}

/* mechanism / effect dropdowns (native <details>) */
.rar-topic-content .bp-drop { margin-top: auto; border-radius: 10px; }
.rar-topic-content .bp-factor--hero > .bp-drop { margin-top: 4px; }
.rar-topic-content .bp-drop > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid rgba(10, 132, 255, 0.28);
    background: rgba(10, 132, 255, 0.06);
    color: #0a4fa8; font-size: 13px; font-weight: 700;
    transition: background .15s, border-color .15s;
}
.rar-topic-content .bp-drop > summary::-webkit-details-marker { display: none; }
.rar-topic-content .bp-drop > summary::after { content: "▸"; font-size: 11px; transition: transform .15s; }
.rar-topic-content .bp-drop[open] > summary::after { transform: rotate(90deg); }
.rar-topic-content .bp-drop > summary:hover { background: rgba(10, 132, 255, 0.12); border-color: rgba(10, 132, 255, 0.45); }
.rar-topic-content .bp-drop__body {
    margin-top: 8px; padding: 10px 12px;
    border-radius: 10px; background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 14px; line-height: 1.55; color: #111111;
}
.rar-topic-content .bp-drop--effect > summary { font-weight: 800; }

/* ---- effect dropdowns: bigger, larger text, rectangular (not pill) ---- */
.rar-topic-content .bp-drop--effect { width: 100%; }
.rar-topic-content .bp-drop--effect > summary {
    width: 100%; justify-content: space-between;
    padding: 12px 16px; border-radius: 11px;
    font-size: 15.5px;
    border-color: rgba(10, 132, 255, 0.3);
    background: rgba(10, 132, 255, 0.08);
}
.rar-topic-content .bp-drop--effect > summary::after { margin-left: 8px; }
.rar-topic-content .bp-drop--effect .bp-drop__body { font-size: 14.5px; }
/* effect labels are titles → black + bold, keep the dotted hover underline */
.rar-topic-content .bp-drop--effect > summary { color: #111111; }
.rar-topic-content .bp-drop--effect > summary .cav-term { color: #111111; border-bottom-color: rgba(17, 17, 17, 0.5); }

/* ============================================================
   Factor title = black + bold + hover-underline, inside a fun
   colored pill (a different hue per factor).
   ============================================================ */
.rar-topic-content .bp-factor__name .cav-term {
    display: inline-block;
    padding: 3px 11px; border-radius: 9px;
    background: var(--bpf-bg, rgba(15, 23, 42, 0.05));
    border: 1px solid var(--bpf-bd, rgba(15, 23, 42, 0.16));
    color: #111111; font-weight: 800;
    text-decoration: underline dotted rgba(17, 17, 17, 0.45);
    text-underline-offset: 3px;
}
.rar-topic-content .bp-factor__name .cav-term:hover,
.rar-topic-content .bp-factor__name .cav-term:focus-visible {
    text-decoration-color: rgba(17, 17, 17, 0.85);
    filter: brightness(0.97);
}
/* neutralize the abbr chip so it reads against any hue */
.rar-topic-content .bp-factor__abbr {
    color: #1f2a3d; background: rgba(15, 23, 42, 0.07);
    border: 1px solid rgba(15, 23, 42, 0.14);
}

/* per-factor hues */
.rar-topic-content .bp-factor--teal   { --bpf-bg: #d7f5ef; --bpf-bd: #5fc9b6; }
.rar-topic-content .bp-factor--violet { --bpf-bg: #ece3ff; --bpf-bd: #a78bfa; }
.rar-topic-content .bp-factor--amber  { --bpf-bg: #fdeecb; --bpf-bd: #e6b24d; }
.rar-topic-content .bp-factor--blue   { --bpf-bg: #d9ecff; --bpf-bd: #6aaef0; }
.rar-topic-content .bp-factor--rose   { --bpf-bg: #ffe0ea; --bpf-bd: #f18cae; }
.rar-topic-content .bp-factor--green  { --bpf-bg: #ddf4d9; --bpf-bd: #7bc86a; }
.rar-topic-content .bp-factor--orange { --bpf-bg: #ffe6d1; --bpf-bd: #f2a565; }
.rar-topic-content .bp-factor--indigo { --bpf-bg: #e0e3ff; --bpf-bd: #8a92ee; }

/* ============================================================
   Two figures side by side in a swipeable slider
   ============================================================ */
.rar-topic-content .bp-figwrap { margin-top: 18px; }
.rar-topic-content .bp-figwrap .cardslider__track > * { flex: 0 0 min(90%, 760px); }
.rar-topic-content .bp-figslide__title {
    font-size: 15px; font-weight: 800; color: #111111; text-align: center; margin-bottom: 8px;
}
.rar-topic-content .bp-figslide__hint { font-weight: 600; color: #4a5a74; font-size: 13px; }
.rar-topic-content .bp-figslide .bp-overlay-fig { max-width: 100%; margin: 0 auto; }
.rar-topic-content .bp-figslide .bp-toxin-anim .bsp { max-width: 100%; }
.rar-topic-content .bp-figslide .bp-toxin-anim { margin-top: 0; }

/* enlarged lead titles in Lab-ID / Prevention lists */
.rar-topic-content .bp-vf--titled li > strong:first-of-type { font-size: 16.5px; font-weight: 800; }

/* ---------- Lab-ID two-column (text left · figure right) ---------- */
.rar-topic-content .bp-labid-row {
    display: flex; gap: 18px; align-items: flex-start; margin-top: 4px;
}
.rar-topic-content .bp-labid-row .bp-card { flex: 1 1 auto; margin: 0; }
.rar-topic-content .bp-labid-row .bp-labfig { flex: 0 0 320px; max-width: 320px; margin: 0; }
.rar-topic-content .bp-labid-row .bp-labfig figcaption {
    margin-top: 8px; font-size: 12.5px; color: #4a5a74; text-align: center; line-height: 1.45;
}

@media (max-width: 760px) {
    .rar-topic-content .bp-factor-grid--3,
    .rar-topic-content .bp-factor-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rar-topic-content .bp-labid-row { flex-direction: column; }
    .rar-topic-content .bp-labid-row .bp-labfig { flex-basis: auto; max-width: 100%; }
}
@media (max-width: 460px) {
    .rar-topic-content .bp-factor-grid--3,
    .rar-topic-content .bp-factor-grid--4 { grid-template-columns: minmax(0, 1fr); }
}