/*
 * The course and class detail pages (protected/views/courses/details.php, details_classroom.php,
 * the NABIP course fork, all rendered through protected/views/courses/_detailsPage.php; the
 * script is jscripts/course-details.js). Loaded through $this->headers after the layout's own
 * stylesheets, then, where the theme has one, css/custom/<theme>/course-details.css on top of it.
 * These pages render inside the legacy stack (css/bootstrap-legacy.css, 10px root), so every size
 * here is px on purpose (feedback_avoid_rem_font_sizes).
 *
 * The design continues the card catalog (css/catalog.css) the reader has just come from: the one
 * loud element is the purchase card, a white surface lifted off the page by its border and shadow
 * (no coloured accent bar: Jason reads those as a sign of AI-made design), the price in the
 * theme's display face, the button under it; under the title a cream strip of facts the
 * page already states (hours, exam length, proctor, PDF, dates, venue); then every section in the
 * open, each with a real heading, and a row of anchors above them. On a phone the purchase card
 * sits right under the facts, and a fixed bar at the foot of the screen repeats the price and the
 * button once the card has scrolled away.
 *
 * Section 0 declares the --cd-* tokens on #course-details-page.cd-page and every rule below reads
 * ONLY those tokens: a theme sets --theme-brand / --theme-brand-strong / --theme-font-display on
 * :root (the generated custom.css does it for the horizontal templates) and gets the default look
 * in its colour; a theme with its own look (InsuranceStudy) remaps the tokens in its override file.
 * --theme-header-offset is the height of a fixed or sticky site header, so the sticky purchase
 * card and the anchor scroll clear it.
 */

/* 0. Tokens ------------------------------------------------------------------------------- */
#course-details-page.cd-page {
    --cd-accent: var(--theme-brand, #275A9C);   /* the family's blue where a theme sets no brand, never Bootstrap's link blue */
    --cd-accent-strong: var(--theme-brand-strong, color-mix(in srgb, var(--cd-accent) 78%, #000));
    --cd-ink: #1F2428;        /* the title, section headings, the price */
    --cd-text: #2B2F33;       /* body copy */
    --cd-muted: #5D646B;      /* the credit line, labels, notes */
    --cd-subtle: #7C848C;     /* the ledger's labels */
    --cd-surface: #fff;       /* the purchase card, the phone bar */
    /* the facts strip and the notes: cream, the family palette's (LTCC page, InsuranceStudy), NOT a
       weaker brand tint: two tints of one hue a few points apart read as a mismatch, and the brand
       tint stays the section bands' alone. Warm against every active brand (all blue or navy); a
       theme with a warm brand (red, orange, gold) overrides it, or its peach bands near-miss it. */
    --cd-tint: #F7F4EF;
    --cd-band: color-mix(in srgb, var(--cd-accent) 10%, #fff);     /* a section's heading band */
    --cd-icon-bg: var(--cd-accent);           /* the tile behind a section heading's icon */
    --cd-icon-fg: #fff;
    --cd-line: color-mix(in srgb, var(--cd-accent) 16%, #DCE1E6);  /* the purchase card's border */
    --cd-rule: color-mix(in srgb, var(--cd-accent) 10%, #E6EAEE);  /* hairlines between sections */
    --cd-price: var(--cd-ink);                /* ink, not the brand: a red-brand site must not show a red price */
    --cd-figure: var(--cd-accent);            /* the back link's arrow */
    --cd-tint-figure: var(--cd-text);         /* every icon on the cream (the facts, a note's info icon): the text's colour, a helper, not an accent */
    --cd-link: var(--cd-accent);
    --cd-link-hover: var(--cd-accent-strong);
    --cd-nav-active: var(--cd-accent);        /* the anchor row's current section */
    --cd-focus: 0 0 0 3px color-mix(in srgb, var(--cd-accent) 40%, transparent);
    --cd-shadow-sm: 0 1px 3px rgba(31, 36, 40, .08), 0 1px 2px rgba(31, 36, 40, .04);
    --cd-shadow-card: 0 1px 2px rgba(31, 36, 40, .05), 0 4px 16px rgba(31, 36, 40, .07);   /* the purchase card */
    --cd-shadow-md: 0 8px 24px rgba(31, 36, 40, .10), 0 2px 6px rgba(31, 36, 40, .05);
    --cd-shadow-bar: 0 -6px 20px rgba(31, 36, 40, .12);
    --cd-radius: 8px;
    --cd-font-display: var(--theme-font-display, var(--font-display, inherit));
    --cd-header-offset: var(--theme-header-offset, 0px);
    --cd-sticky-top: calc(var(--cd-header-offset) + 20px);
    --cd-ease: cubic-bezier(.2, .8, .2, 1);
    color: var(--cd-text);
}
/* A browser without color-mix() (before 2023) gets neutral greys for the tinted tokens; a var()
   that fails at computed-value time unsets the property rather than falling back, so the tokens
   are redeclared where the function is unsupported. */
@supports not (color: color-mix(in srgb, #000 10%, #fff)) {
    #course-details-page.cd-page {
        --cd-accent-strong: var(--theme-brand-strong, #1C4478);
        --cd-band: #EDF0F4;
        --cd-line: #D3DAE2;
        --cd-rule: #E2E6E9;
        --cd-focus: 0 0 0 3px rgba(39, 90, 156, .4);
    }
}

/* 1. Page frame ---------------------------------------------------------------------------- */
/* a little air above the back link or the title on the themes whose content column starts flush
   under the header (the CLTC banner used to provide it); the InsuranceStudy and LTC Connection
   columns already pad the top, and NABIP sets its own in nabip/style.css */
#course-details-page.cd-page {
    padding-top: 12px;
    padding-bottom: 32px;
}
/* the way back to the catalog the course was found in */
.cd-page .cd-back {
    margin: 4px 0 18px;
    font-size: 14px;
    line-height: 20px;
}
.cd-page .cd-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cd-muted);
    text-decoration: none;
}
.cd-page .cd-back a > i {
    font-size: 11px;
    color: var(--cd-figure);
    transition: transform 200ms var(--cd-ease);
}
.cd-page .cd-back a:hover,
.cd-page .cd-back a:focus-visible {
    color: var(--cd-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cd-page .cd-back a:hover > i,
.cd-page .cd-back a:focus-visible > i {
    transform: translateX(-2px);
}
.cd-page .cd-back a:active {
    color: var(--cd-ink);
}
.cd-page .cd-back a:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus);
    border-radius: 3px;
}
/* a class's promotional banner, above the page or above the sections */
.cd-page .cd-banner {
    margin: 0 0 24px;
}
.cd-page .cd-banner img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--cd-radius);
}

/* The grid: title + facts, the purchase card, the sections. One column on a phone in that
   order; from 768px the purchase card takes the right column and spans both rows, so it can
   stick while the sections scroll past it (align-self: start gives it room to move). */
.cd-page .cd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "hero"
        "aside"
        "body";
    gap: 24px;
}
.cd-page .cd-hero {
    grid-area: hero;
    min-width: 0;
}
.cd-page .cd-aside {
    grid-area: aside;
    min-width: 0;
}
.cd-page .cd-body {
    grid-area: body;
    min-width: 0;
}
/* nothing to buy and nobody to call: no card, the content takes the whole width */
.cd-page .cd-grid--noaside {
    grid-template-areas:
        "hero"
        "body";
}
@media (min-width: 768px) {
    .cd-page .cd-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "hero aside"
            "body aside";
        gap: 24px 32px;
    }
    .cd-page .cd-aside {
        align-self: start;
        position: sticky;
        top: var(--cd-sticky-top);
    }
}
@media (min-width: 992px) {
    .cd-page .cd-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 28px 40px;
    }
}
@media (min-width: 1200px) {
    .cd-page .cd-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 28px 56px;
    }
}
@media (min-width: 768px) {
    .cd-page .cd-grid--noaside {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hero"
            "body";
    }
    .cd-page .cd-grid--noaside .cd-prose {
        max-width: 76ch;
    }
}

/* 2. Title, credit line, facts ------------------------------------------------------------- */
.cd-page .cd-hero h1.cd-page-title {
    margin: 0;
    font-family: var(--cd-font-display);
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--cd-ink);
    overflow-wrap: anywhere;
    /* a long course name breaks into lines of even length ("4-Hour Refresher Mandatory LTC /
       Training (Edition A)") instead of filling the first line and stranding "A)" on the second;
       browsers without it (Safari before 17.5) still get the last short word glued to the one
       before it by _detailsPage.php */
    text-wrap: balance;
}
@media (min-width: 768px) {
    .cd-page .cd-hero h1.cd-page-title {
        font-size: 32px;
    }
}
/* a hyphenated word in the title stays on one line (_detailsPage.php wraps it) */
.cd-page .cd-nobr {
    white-space: nowrap;
}
/* the lines under the title: the credit the course earns, an event's second name, the client a
   curated catalog belongs to (a course's hours are in the purchase card, beside the price) */
.cd-page .cd-sub {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--cd-muted);
}
.cd-page .cd-sub + .cd-sub {
    margin-top: 2px;
}
.cd-page .cd-sub--strong {
    color: var(--cd-ink);
    font-weight: 600;
}

/* the facts strip: cream, one column on a phone, TWO at most from 576px (one where two 230px columns
   do not fit). Never more: the course views order their facts for two columns filled row by row */
.cd-page ul.cd-facts {
    list-style: none;
    margin: 20px 0 0;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 28px;
    background: var(--cd-tint);
    border-radius: var(--cd-radius);
}
@media (min-width: 576px) {
    .cd-page ul.cd-facts {
        grid-template-columns: repeat(auto-fit, minmax(max(230px, calc((100% - 28px) / 2)), 1fr));
        padding: 16px 20px;
    }
}
.cd-page .cd-fact {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--cd-text);
}
/* a fact that is a list (a class's dates) or an address takes the whole strip */
.cd-page .cd-fact--wide {
    grid-column: 1 / -1;
}
/* the fact the strip leads with, a course's credit hours (Jason 2026-10-30): its own line, so the
   exam facts under it keep their pairs, and the strip's only bold fact */
.cd-page .cd-fact--lead {
    grid-column: 1 / -1;
    font-weight: 600;
}
.cd-page .cd-fact > i {
    flex: 0 0 18px;
    width: 18px;
    margin-top: 3px;
    font-size: 15px;
    text-align: center;
    color: var(--cd-tint-figure);
}
.cd-page .cd-fact > span {
    min-width: 0;
}
.cd-page .cd-fact-label {
    color: var(--cd-muted);
}
.cd-page .cd-fact-label::after {
    content: ": ";
}
.cd-page .cd-fact ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 2px under a visible label; a class's dates (label for screen readers only) start level with the icon */
.cd-page .cd-fact-label:not(.visually-hidden) + ul {
    margin-top: 2px;
}
.cd-page .cd-fact ul li {
    margin: 0 0 2px;
    padding: 0;
}
.cd-page .cd-fact ul li time {
    font-weight: 600;
}
.cd-page .cd-fact-note {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--cd-muted);
}
/* notes under the facts (a proctor is required, the class has taken place): Bootstrap alerts
   from the legacy layer, kept quiet */
.cd-page .cd-hero .alert {
    margin: 16px 0 0;
    font-size: 15px;
}
.cd-page .cd-hero .alert > p:last-child {
    margin-bottom: 0;
}

/* 3. The purchase card --------------------------------------------------------------------- */
.cd-page .cd-buy {
    background: var(--cd-surface);
    border: 1px solid var(--cd-line);
    border-radius: var(--cd-radius);
    box-shadow: var(--cd-shadow-card);
    padding: 20px 22px 22px;
}
.cd-page .cd-price {
    margin: 0 0 14px;
    font-family: var(--cd-font-display);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--cd-price);
    font-variant-numeric: tabular-nums;
}
/* the price and the course's credit hours on one line, the two figures a buyer weighs together:
   the price at the left, the hours at the right edge (level with the ledger's amounts), in the body
   face and the muted grey so the two never read as one figure (Jason 2026-10-27: in the price's
   face and colour they ran together). Where the card is too narrow for both the hours drop under
   the price, flush left (space-between starts a lone item). A student resuming the course gets
   the hours alone. Only where the credit type has no facts strip: where it has one, the hours lead
   the strip and the price stands alone here */
.cd-page .cd-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 14px;
    margin: 0 0 14px;
}
.cd-page .cd-price-row .cd-price {
    margin: 0;
}
.cd-page .cd-buy-hours {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--cd-muted);
    font-variant-numeric: tabular-nums;
}
/* the price's place when there is no price: Registered, Registration Closed, Members Only */
.cd-page .cd-price--status {
    font-size: 22px;
    color: var(--cd-ink);
}
.cd-page .cd-buy .btn {
    display: block;
    width: 100%;
    margin: 0;
    white-space: normal;
}
.cd-page .cd-buy .btn + .btn {
    margin-top: 10px;
}
/* "or": the pay-in-full / installments split */
.cd-page .cd-buy .cd-or {
    margin: 12px 0;
    text-align: center;
    font-size: 14px;
    color: var(--cd-muted);
}
/* a quiet line under the button: the completion deadline, how to retake, the access window */
.cd-page .cd-buy .cd-buy-note {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cd-muted);
}
.cd-page .cd-buy .cd-buy-note strong {
    color: var(--cd-text);
}
/* the "Price includes" ledger (views/courses/_priceBreakdown.php): under the button, flush left */
.cd-page .cd-buy .price-breakdown {
    max-width: none;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--cd-rule);
}
.cd-page .cd-buy .price-breakdown-heading,
.cd-page .cd-buy .price-breakdown-label {
    color: var(--cd-subtle);
}
/* notices inside the card (a member's saving, an agency credit, the retake question) */
.cd-page .cd-buy .alert {
    margin: 16px 0 0;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}
.cd-page .cd-buy .alert > p:last-child {
    margin-bottom: 0;
}
.cd-page .cd-buy .alert .btn {
    margin-top: 10px;
}
/* the retake question's answer to "No" (shown by course-details.js), under the two buttons */
.cd-page .cd-buy .retake-declined {
    margin-top: 12px;
}
/* an agency credit's second line: the balance left after this course */
.cd-page .cd-buy .cd-buy-balance {
    margin-top: 14px;
}
/* the sponsor block (newmain.css) under the register button: tighter inside the card */
.cd-page .cd-buy .cd-sponsor-block {
    margin-top: 20px;
    padding-top: 16px;
}
/* whatever comes first in the card sits at its top edge; only a divided block (ledger, sponsors, partner
   logo) also drops the rule above it. A button or alert keeps its own padding and border */
.cd-page .cd-buy > :first-child {
    margin-top: 0;
}
.cd-page .cd-buy > .price-breakdown:first-child,
.cd-page .cd-buy > .cd-sponsor-block:first-child,
.cd-page .cd-buy > .cd-buy-logo:first-child {
    padding-top: 0;
    border-top: 0;
}
/* a partner logo inside the card (a curated catalog's client) */
.cd-page .cd-buy .cd-buy-logo {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--cd-rule);
    font-size: 13px;
    color: var(--cd-muted);
    text-align: center;
}
.cd-page .cd-buy .cd-buy-logo img {
    display: block;
    margin: 8px auto 0;
    max-width: 100%;
    max-height: 64px;
    width: auto;
    height: auto;
}

/* 4. Notices between the card and the sections --------------------------------------------- */
.cd-page .cd-notices > .alert {
    margin: 0 0 16px;
    font-size: 15px;
}
.cd-page .cd-notices > .alert > p:last-child {
    margin-bottom: 0;
}
.cd-page .cd-notices > .cd-specialnote {
    margin: 0 0 16px;
}

/* 5. The anchor row ------------------------------------------------------------------------ */
/* the row stands in for the first section's heading (hidden: it would repeat the row's first
   item), so the first item scrolls to the row; it lands clear of a fixed header like a band does */
.cd-page .cd-nav-wrap {
    scroll-margin-top: calc(var(--cd-header-offset) + 16px);
}
.cd-page .cd-nav {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--cd-rule);
    overflow-x: auto;
    scrollbar-width: none;
}
.cd-page .cd-nav::-webkit-scrollbar {
    display: none;
}
.cd-page .cd-nav li {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}
.cd-page .cd-nav a {
    display: block;
    margin-bottom: -1px;
    padding: 10px 14px 11px;
    border-bottom: 3px solid transparent;
    font-size: 16px;    /* the body size (Jason 2026-10-20: 15px too small) */
    font-weight: 600;
    line-height: 20px;
    color: var(--cd-muted);
    text-decoration: none;
    white-space: nowrap;
}
.cd-page .cd-nav a:hover {
    color: var(--cd-ink);
}
.cd-page .cd-nav a:active {
    color: var(--cd-accent-strong);
}
.cd-page .cd-nav a:focus {
    outline: none;
}
.cd-page .cd-nav a:focus-visible {
    box-shadow: var(--cd-focus);
    border-radius: 3px;
}
.cd-page .cd-nav a.is-active {
    color: var(--cd-accent-strong);
    border-bottom-color: var(--cd-nav-active);
}

/* 6. Sections ------------------------------------------------------------------------------ */
/* Where a section begins has to be visible at scrolling speed, through course text full of bold
   headings of its own ("Learning Objectives:", "Course Overview:"). Bold type alone cannot do it, so
   every section heading is a block instead of a line of text: a tinted band (--cd-band) the width
   of the column, led by an icon on a solid tile in the brand colour (--cd-icon-bg). Nothing inside
   a section is ever filled like that, so the band reads as structure, not as more content. */
.cd-page .cd-section {
    margin-top: 38px;
    padding: 0;
    /* an anchor lands with the band clear of a fixed header */
    scroll-margin-top: calc(var(--cd-header-offset) + 16px);
}
/* the first section sits right under the anchor row */
.cd-page .cd-nav-wrap + .cd-section,
.cd-page .cd-body > .cd-section:first-child {
    margin-top: 24px;
}
.cd-page .cd-section h2.cd-section-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 18px;
    padding: 6px 14px 6px 6px;
    background: var(--cd-band);
    border-radius: var(--cd-radius);
    font-family: var(--cd-font-display);
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -.005em;
    color: var(--cd-ink);
    text-transform: none;
}
.cd-page .cd-section-icon {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: calc(var(--cd-radius) - 3px);
    background: var(--cd-icon-bg);
    color: var(--cd-icon-fg);
    font-size: 14px;
    line-height: 1;
}
.cd-page .cd-section-name {
    min-width: 0;
    text-wrap: balance;
}
@media (min-width: 768px) {
    .cd-page .cd-section h2.cd-section-title {
        font-size: 19px;
    }
}
/* a sub-block inside a section (Optional Credits, Rules for Florida, System Requirements): one
   step under the band's text, close to the block it labels and far from the one before it */
.cd-page .cd-section h3.cd-subtitle {
    margin: 30px 0 6px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--cd-ink);
    text-transform: none;
}
.cd-page .cd-section h2.cd-section-title + h3.cd-subtitle,
.cd-page .cd-section .cd-block:first-child > h3.cd-subtitle {
    margin-top: 0;
}
.cd-page .cd-block + .cd-block {
    margin-top: 30px;
}
/* staff and course-kit HTML (the abstract, notes, rules): one measure, one body size */
.cd-page .cd-prose {
    max-width: 76ch;
    font-size: 16px;
    line-height: 1.7;
    color: var(--cd-text);
}
.cd-page .cd-prose p,
.cd-page .cd-prose ul,
.cd-page .cd-prose ol {
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 14px;
}
.cd-page .cd-prose ul,
.cd-page .cd-prose ol {
    padding-left: 24px;
}
.cd-page .cd-prose li {
    margin: 0 0 6px;
    padding: 0;
    line-height: inherit;
}
.cd-page .cd-prose li > ul,
.cd-page .cd-prose li > ol {
    margin: 6px 0 0;
}
.cd-page .cd-prose > :last-child,
.cd-page .cd-prose > :last-child > :last-child {
    margin-bottom: 0;
}
.cd-page .cd-prose img {
    max-width: 100%;
    height: auto;
}
.cd-page .cd-prose a {
    color: var(--cd-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cd-page .cd-prose a:hover,
.cd-page .cd-prose a:focus-visible {
    color: var(--cd-link-hover);
}
.cd-page .cd-prose .alert {
    font-size: 15px;
}
/* label / value rows (exam details, approval info): a two-column grid from 576px, the full width
   of the section band above them, so the hairlines end where the band ends. The labels are plain
   grey, not bold: the columns and the rules already tell label from value, and a bold word on
   every row was the noise that hid the section headings. */
.cd-page dl.cd-kv {
    margin: 0;
    /* the body's size and leading (Jason 2026-10-20: 15px read as too small, worst in a condensed
       face, and differed from the Available Credit list one section above) */
    font-size: 16px;
    line-height: 1.7;
}
.cd-page dl.cd-kv > div {
    padding: 9px 0;
    border-top: 1px solid var(--cd-rule);
}
.cd-page dl.cd-kv > div:first-child {
    border-top: 0;
    padding-top: 0;
}
.cd-page dl.cd-kv dt {
    margin: 0;
    font-weight: 400;
    line-height: inherit;   /* bootstrap-legacy.css gives dt/dd their own 1.42857 */
    color: var(--cd-muted);
}
.cd-page dl.cd-kv dd {
    margin: 2px 0 0;
    line-height: inherit;
    color: var(--cd-text);
    overflow-wrap: anywhere;
}
.cd-page dl.cd-kv dd p:last-child {
    margin-bottom: 0;
}
.cd-page dl.cd-kv dd .smallcredit {
    margin: 0 0 2px;
}
.cd-page dl.cd-kv dd a {
    color: var(--cd-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (min-width: 576px) {
    .cd-page dl.cd-kv > div {
        display: grid;
        grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
        gap: 0 24px;
        align-items: start;
    }
    .cd-page dl.cd-kv dd {
        margin-top: 0;
    }
}
/* a footnote under the exam table (* a proctor may be required ...) */
.cd-page .cd-footnote {
    margin: 14px 0 0;
    max-width: 76ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cd-muted);
}
.cd-page .cd-footnote p {
    margin: 0 0 6px;
    font-size: inherit;
    line-height: inherit;
}
/* A note the reader must not miss (the state's proctor rule under the facts, an affidavit rule in
   Final Exam): a cream fill, the facts strip's, with an info icon, so it reads as information
   rather than as another section band. No coloured edge (Jason: accent bars and left-bordered
   callouts read as AI-made), and not Bootstrap's blue .alert-info, which was louder than the
   section band above it. */
.cd-page .cd-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 16px;
    background: var(--cd-tint);
    border: 0;
    border-radius: var(--cd-radius);
    font-size: 15px;
    line-height: 1.55;
    color: var(--cd-text);
}
.cd-page .cd-note > i {
    flex: 0 0 16px;
    margin-top: 3px;
    font-size: 15px;
    text-align: center;
    color: var(--cd-tint-figure);
}
.cd-page .cd-note-body {
    min-width: 0;
}
.cd-page .cd-note-body p {
    margin: 0 0 6px;
    font-size: inherit;
    line-height: inherit;
}
.cd-page .cd-note-body > :last-child {
    margin-bottom: 0;
}
.cd-page .cd-hero .cd-note {
    margin: 16px 0 0;
}
/* the certifying seals */
.cd-page .cd-seals {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    margin: 12px 0 0;
}
.cd-page .cd-seals img {
    display: block;
    max-height: 110px;
    width: auto;
    max-width: 180px;
}
/* a link out of a section (the state's FAQ page, the approval-status page) */
.cd-page .cd-section-link {
    margin: 18px 0 0;
    font-size: 15px;
}
.cd-page .cd-section-link a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
    color: var(--cd-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.cd-page .cd-section-link a:hover,
.cd-page .cd-section-link a:focus-visible,
.cd-page .cd-section-link a:active {
    color: var(--cd-link-hover);
    text-decoration-thickness: 2px;
}
.cd-page .cd-section-link a > i {
    font-size: 12px;
}

/* 7. People (instructors, speakers) ------------------------------------------------------ */
.cd-page .cd-person {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 76ch;
    margin: 0 0 24px;
}
.cd-page .cd-person:last-child {
    margin-bottom: 0;
}
/* headshots are 200x200 squares (the instructor croppers force 1:1), so a square shows the whole
   photo; the page's own radius ties it to the section bands. 96px keeps 2x density on retina */
.cd-page .cd-person img.cd-person-photo {
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    aspect-ratio: 1 / 1;
    max-width: none;
    max-height: none;
    border-radius: var(--cd-radius);
    border: 1px solid var(--cd-line);
    box-shadow: none;
    object-fit: cover;
}
@media (min-width: 768px) {
    .cd-page .cd-person img.cd-person-photo {
        flex-basis: 96px;
        width: 96px;
        height: 96px;
    }
}
.cd-page .cd-person-body {
    min-width: 0;
    flex: 1 1 auto;
}
.cd-page .cd-person h3.cd-person-name {
    margin: 4px 0 2px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--cd-ink);
    text-transform: none;
}
.cd-page .cd-person-title {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cd-muted);
}
.cd-page .cd-person .instructor-bio-container {
    margin: 0;
}
/* A bio of up to 200 words prints whole (.cd-person-bio, details_classroom.php); a longer one is
   clipped at eight lines, not newmain.css's three, so the opening credentials always show before
   Read More. Scoped to the course pages: other screens keep newmain.css's clamp. */
.cd-page .cd-person-bio,
.cd-page .cd-person .instructor-bio-text {
    /* the body text's size and leading (.cd-prose): a bio printed whole is reading text, and a
       1px step down read as an inconsistency, not as hierarchy (Jason 2026-10-20) */
    font-size: 16px;
    line-height: 1.7;
}
.cd-page .cd-person-bio p,
.cd-page .cd-person .instructor-bio-text p {
    margin: 0 0 14px;
    font-size: inherit;
    line-height: inherit;
}
.cd-page .cd-person-bio > :last-child {
    margin-bottom: 0;
}
.cd-page .cd-person .instructor-bio-text {
    -webkit-line-clamp: 8;
    line-clamp: 8;
}
.cd-page .cd-person .instructor-bio-text.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
}
/* Phones and tablets (where the content column is narrow beside the sticky purchase card): the
   photo beside the name and title, the bio the full width under them. Beside an 84px photo column
   the bio ran in a strip about 200px wide (a 200-word bio was 46 lines on a phone). */
@media (max-width: 991.98px) {
    .cd-page .cd-person {
        display: block;
    }
    .cd-page .cd-person::after {
        content: "";
        display: table;
        clear: both;
    }
    .cd-page .cd-person img.cd-person-photo {
        float: left;
        width: 64px;
        height: 64px;
        margin: 0 14px 12px 0;
    }
    .cd-page .cd-person-bio,
    .cd-page .cd-person .instructor-bio-container {
        clear: both;
    }
}
.cd-page .cd-person .readmore-toggle-btn {
    color: var(--cd-link);
    font-size: 14px;
}
.cd-page .cd-person .readmore-toggle-btn:hover,
.cd-page .cd-person .readmore-toggle-btn:focus-visible {
    color: var(--cd-link-hover);
    text-decoration: underline;
}
.cd-page .cd-person .readmore-toggle-btn:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus);
    border-radius: 3px;
}
/* the instructor video button, before the first group */
.cd-page .cd-section .instructor-promo-btn {
    margin: 0 0 20px;
}

/* 8. The phone bar ------------------------------------------------------------------------- */
/* Repeats the price and the primary button once the purchase card has scrolled off the top of
   the screen (course-details.js). Below 768px only: from there the sticky card does the job. */
.cd-page .cd-buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--cd-surface);
    border-top: 1px solid var(--cd-line);
    box-shadow: var(--cd-shadow-bar);
    transform: translateY(110%);
    /* hidden only once it has slid out (the visibility change waits for the slide); shown at once */
    transition: transform 240ms var(--cd-ease), visibility 0s linear 240ms;
    visibility: hidden;
}
.cd-page .cd-buybar.is-visible {
    transform: none;
    transition: transform 240ms var(--cd-ease), visibility 0s linear 0s;
    visibility: visible;
}
/* the price, with a course's credit hours under it */
.cd-page .cd-buybar-figures {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cd-page .cd-buybar-hours {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--cd-muted);
    font-variant-numeric: tabular-nums;
}
.cd-page .cd-buybar-price {
    flex: 0 0 auto;
    font-family: var(--cd-font-display);
    font-weight: 600;
    font-size: 21px;
    line-height: 1;
    color: var(--cd-price);
    font-variant-numeric: tabular-nums;
}
.cd-page .cd-buybar .btn {
    flex: 1 1 auto;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* the page and the chat launcher step up over the bar while it shows (--tracker-height is the
   bar's real height, set by the script; the chat rule matches only the closed launcher) */
body.has-buybar {
    padding-bottom: var(--tracker-height, 72px);
}
body.has-buybar #Smallchat iframe[style*="height: 80px"] {
    bottom: var(--tracker-height, 72px) !important;
}
@media (min-width: 768px) {
    .cd-page .cd-buybar {
        display: none;
    }
    body.has-buybar {
        padding-bottom: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cd-page .cd-buybar,
    .cd-page .cd-buybar.is-visible,
    .cd-page .cd-back a > i {
        transition: none;
    }
}

/* 9. The instructor video modal (markup in details_classroom.php; wrapper rules in newmain.css) */
.cd-page-modal .modal-title {
    font-size: 18px;
}

/* 10. Print -------------------------------------------------------------------------------- */
/* on paper the purchase card stops following the page, and the phone bar and the video modal are
   never printed */
@media print {
    .cd-page .cd-aside {
        position: static;
    }
    .cd-page .cd-buybar,
    .cd-page-modal {
        display: none !important;
    }
    body.has-buybar {
        padding-bottom: 0;
    }
}