/*
 * LTC Connection theme: source 23 (ltcc) and the sources that share its chrome, 131 (coloradoltc,
 * via the themes/ltcc-doves wrappers) and 135 (ltcccltc). Brand assets live in design/ltcconnection.
 *
 * The family palette is shared with NetStudy and InsuranceStudy, but the roles are LTC Connection's
 * own: blue #275A9C is the brand, the hero and every ordinary action (Add to Cart included), mist
 * #BDD0E1 is the signature surface (the closing band), cream #F7F4EF is the
 * page, navy #012A5E brackets the page (utility bar, footer) and is the one dark band, green #597D4F
 * confirms (ticks, certified marks), and gold #DB9E33 points (nav hover rule, focus ring) and is the
 * ONE call-to-action colour: .btn-cta, the "browse my state" button only (Jason 2026-10-14). Type is the family stack, loaded in
 * _partials/head.php: Jost for headings (the Century Gothic of the guide), Merriweather for page
 * subtitles and the one pull-quote (.ns-subhead) and the testimonial quotes, Open Sans for everything else. Always set a
 * family through the --font-* tokens, never by name.
 *
 * Loaded by two layouts:
 *   layouts/site.php  (the homepage, and every page rebuilt on this system): stock Bootstrap 5.3.8
 *                     + this file. Root font size is the browser's 16px.
 *   layouts/main.php  (catalog, course details, cart, sign in, account, custom pages...): Bootstrap
 *                     5.3.8 + css/bootstrap-legacy.css (10px root) + css/newmain.css + this file +
 *                     legacy-pages.css.
 * The chrome (utility bar, header, state menu, mobile nav, footer) renders under BOTH stacks, so
 * everything here is written in px and the chrome markup uses no rem-based Bootstrap spacing
 * utility. Do not add rem values to this file.
 */

/* 1. Tokens ----------------------------------------------------------------------------- */
:root {
    --ltc-blue-800: #143458;
    --ltc-blue-700: #1C4478;
    --ltc-blue: #275A9C;
    --ltc-blue-300: #93B1CF;
    --ltc-blue-200: #BDD0E1;   /* mist */
    --ltc-blue-100: #DCE7F1;
    --ltc-blue-50: #EEF3F8;
    --ltc-green-700: #3F5B37;
    --ltc-green: #597D4F;
    --ltc-green-100: #E4EBE1;
    --ltc-green-50: #F1F5EF;
    --ltc-gold-800: #8C6319;
    --ltc-gold: #DB9E33;
    --ltc-gold-400: #E9BE75;
    --ltc-navy: #012A5E;
    --ltc-cream: #F7F4EF;
    --ltc-border: #E2E6E9;
    --ltc-ink-300: #CBD0D5;
    --ltc-subtle: #7C848C;
    --ltc-muted: #5D646B;
    --ltc-ink: #2B2F33;
    --ltc-heading: #16181A;
    --ltc-shadow-xs: 0 1px 2px rgba(1, 42, 94, .06);
    --ltc-shadow-sm: 0 1px 3px rgba(1, 42, 94, .08), 0 1px 2px rgba(1, 42, 94, .04);
    --ltc-shadow-md: 0 6px 16px rgba(1, 42, 94, .10);
    --ltc-shadow-lg: 0 1px 2px rgba(1, 42, 94, .05), 0 12px 32px rgba(1, 42, 94, .14);
    /* The focus ring, keyboard focus only (:focus-visible; form fields on focus): gold with a 1px navy
       ring outside it. Gold alone measures 2.1:1 on white and cream; the navy ring is what reaches
       3:1 (and more) against both, and the gold still reads on the navy bands. The inset variant
       is for the items whose ring must stay inside their box (the header nav, dropdown items). */
    --ltc-focus: 0 0 0 2px var(--ltc-gold), 0 0 0 3px var(--ltc-navy);
    --ltc-focus-inset: inset 0 0 0 2px var(--ltc-gold), inset 0 0 0 3px var(--ltc-navy);
    --ltc-ease: cubic-bezier(.2, 0, .2, 1);
    --ltc-spring: cubic-bezier(.2, .8, .2, 1);
    --font-display: "Jost", "Century Gothic", "Questrial", system-ui, sans-serif;
    --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
    --font-body: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --ltc-header-height: 72px;

    --bs-font-sans-serif: var(--font-body);
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: 16px;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--ltc-ink);
    --bs-body-color-rgb: 43, 47, 51;
    --bs-secondary-color: var(--ltc-muted);
    --bs-emphasis-color: var(--ltc-heading);
    --bs-heading-color: var(--ltc-heading);
    --bs-primary: #275A9C;
    --bs-primary-rgb: 39, 90, 156;
    --bs-success: #597D4F;
    --bs-success-rgb: 89, 125, 79;
    --bs-link-color: #1C4478;
    --bs-link-color-rgb: 28, 68, 120;
    --bs-link-hover-color: #275A9C;
    --bs-link-hover-color-rgb: 39, 90, 156;
    --bs-border-color: #E2E6E9;
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 8px;
    --bs-border-radius-xl: 12px;
    --bs-focus-ring-color: rgba(219, 158, 51, .45);

    /* the card catalog (css/catalog.css) reads these three */
    --theme-brand: var(--ltc-blue);
    --theme-brand-strong: var(--ltc-blue-700);
    --theme-font-display: var(--font-display);
    /* the sticky header's height, so the course page's sticky purchase card and its section
       anchors (css/course-details.css) clear it */
    --theme-header-offset: var(--ltc-header-height);
}

/* 2. Base ------------------------------------------------------------------------------- */
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ltc-ink);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
/* the design-system layout puts the page on cream; pages on the legacy layout stay white */
body.ltc-site {
    background-color: var(--ltc-cream);
}
/* the footer always reaches the bottom of the window: #main grows on a short page */
body > #main {
    flex: 1 0 auto;
}
body > .site-footer {
    flex-shrink: 0;
}
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ltc-heading);
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 8px;
}
h1, .h1 { font-size: 36px; line-height: 1.15; letter-spacing: -.02em; }
h2, .h2 { font-size: 32px; letter-spacing: -.02em; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; line-height: 1.3; }
h5, .h5 { font-size: 16px; }
@media (max-width: 767.98px) {
    h1, .h1 { font-size: 32px; }
    h2, .h2 { font-size: 26px; }
    h3, .h3 { font-size: 21px; }
}
p {
    margin: 0 0 16px;
}
a {
    color: var(--ltc-blue-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover {
    color: var(--ltc-blue);
}
/* the transparent outline is what Windows high-contrast mode shows in place of the ring */
a:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--ltc-focus);
    border-radius: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
}
strong, b {
    font-weight: 700;
}
small, .small {
    font-size: 14px;
}
.text-muted {
    color: var(--ltc-muted) !important;
}
/* a small label for a group of things (the mobile nav's groups): sentence case, no tracking */
.eyebrow {
    font: 600 13px/1.4 var(--font-body);
    color: var(--ltc-muted);
}
.lead {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ltc-muted);
}
/* page subtitles only (the line under a page's h1, a section's one-line subtitle, the pull-quote) */
.ns-subhead {
    font-family: var(--font-serif);
    font-weight: 400;
}
.price {
    font: 700 20px/1 var(--font-display);
    color: var(--ltc-blue-700);
}
/* the shared card catalog (css/catalog.css) sets weights and sizes only; the family type stack is applied here */
.req-big,
.req-subtitle,
.ltc-stage-title,
.course-hours {
    font-family: var(--font-display);
}
.filter-legend {
    font-family: var(--font-body);
}
.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 2000;
    padding: 10px 14px;
    background: #fff;
    color: var(--ltc-blue-700);
    border: 1px solid var(--ltc-blue);
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
}
.skip-link:focus {
    top: 12px;
}

/* 3. Buttons ---------------------------------------------------------------------------- */
.btn {
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 8px;
    --bs-btn-font-family: var(--font-body);
    --bs-btn-font-size: 15px;
    --bs-btn-line-height: 1.5;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 4px;
    --bs-btn-focus-box-shadow: var(--ltc-focus);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: transform 180ms var(--ltc-spring);
}
.btn:hover,
.btn:focus {
    text-decoration: none;
}
.btn:active {
    transform: translateY(1px);
}
.btn-lg {
    --bs-btn-padding-x: 22px;
    --bs-btn-padding-y: 12px;
    --bs-btn-font-size: 17px;
    --bs-btn-border-radius: 4px;
}
.btn-sm {
    --bs-btn-padding-x: 10px;
    --bs-btn-padding-y: 5px;
    --bs-btn-font-size: 14px;
    --bs-btn-border-radius: 4px;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #275A9C;
    --bs-btn-border-color: #275A9C;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1C4478;
    --bs-btn-hover-border-color: #1C4478;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #143458;
    --bs-btn-active-border-color: #143458;
    --bs-btn-disabled-color: #5D646B;
    --bs-btn-disabled-bg: #E2E6E9;
    --bs-btn-disabled-border-color: #E2E6E9;
    --bs-btn-disabled-opacity: .75;
}
.btn-outline-primary {
    --bs-btn-color: #1C4478;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #275A9C;
    --bs-btn-hover-color: #1C4478;
    --bs-btn-hover-bg: #EEF3F8;
    --bs-btn-hover-border-color: #1C4478;
    --bs-btn-active-color: #143458;
    --bs-btn-active-bg: #BDD0E1;
    --bs-btn-active-border-color: #143458;
}
.btn-plain {
    --bs-btn-color: var(--ltc-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ltc-blue-700);
    --bs-btn-hover-bg: var(--ltc-blue-50);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--ltc-blue-700);
    --bs-btn-active-bg: var(--ltc-blue-100);
    --bs-btn-active-border-color: transparent;
}
.btn-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--ltc-border);
    background: #fff;
    color: var(--ltc-ink);
    font-size: 18px;
}
.btn-icon:hover {
    color: var(--ltc-blue-700);
    border-color: var(--ltc-blue);
}
/* the one big call to action (hero, navy band, closing band) */
.btn-start {
    --bs-btn-padding-x: 28px;
    --bs-btn-padding-y: 14px;
    --bs-btn-font-size: 17px;
    box-shadow: 0 1px 2px rgba(1, 42, 94, .12), 0 6px 16px rgba(39, 90, 156, .22);
}
/* The "browse my state" action, and nothing else (hero, navy band, closing band, state modal, mobile
   nav): gold, the complement of the blue hero, so it is the first thing the eye lands on (Jason
   2026-10-14). Navy text (6:1 on gold; white on gold fails at 2.4:1), a navy focus ring (the usual
   gold ring would vanish against it), lighter gold on hover, darker when pressed. Add to Cart and
   every other button stay blue, so gold keeps meaning "start here". */
.btn-cta {
    --bs-btn-color: #012A5E;
    --bs-btn-bg: #DB9E33;
    --bs-btn-border-color: #DB9E33;
    --bs-btn-hover-color: #012A5E;
    --bs-btn-hover-bg: #E9BE75;
    --bs-btn-hover-border-color: #E9BE75;
    --bs-btn-active-color: #012A5E;
    --bs-btn-active-bg: #C98E28;
    --bs-btn-active-border-color: #C98E28;
    --bs-btn-disabled-color: #5D646B;
    --bs-btn-disabled-bg: #E2E6E9;
    --bs-btn-disabled-border-color: #E2E6E9;
    --bs-btn-disabled-opacity: .75;
    --bs-btn-font-weight: 700;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(1, 42, 94, .55);
}
.btn-cta.btn-start {
    box-shadow: 0 1px 2px rgba(1, 42, 94, .15), 0 8px 20px rgba(219, 158, 51, .32);
}
.btn-cta.btn-start:disabled {
    box-shadow: none;
}
/* the drop shadow above would otherwise replace Bootstrap's focus ring: keep both */
.btn-cta:focus-visible,
.btn-cta.btn-start:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #012A5E;
}

/* 4. Forms ------------------------------------------------------------------------------ */
.form-control,
.form-select {
    font-size: 16px;
    line-height: 1.5;
    padding: 9px 12px;
    color: var(--ltc-ink);
    border: 1px solid var(--ltc-ink-300);
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(22, 24, 26, .06);
    transition: none;
}
.form-select {
    padding-right: 40px;
    background-position: right 12px center;
    background-size: 16px 12px;
}
.form-select-lg {
    font-size: 18px;
    padding: 12px 44px 12px 16px;
}
.form-control:focus,
.form-select:focus {
    color: var(--ltc-ink);
    border-color: var(--ltc-gold);
    box-shadow: var(--ltc-focus);
}
.form-label {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
}
/* A state picker with no state chosen yet (state modal, mobile nav) wears the gold
   focus ring all the time, so the eye goes to it while the button below is still grey (Jason
   2026-10-14). It drops once a state is chosen, when the gold button takes over. CSS only: it
   holds before the script runs and when the script preselects a remembered state. */
[data-state-form] .form-select:has(> option[value=""]:checked) {
    border-color: var(--ltc-gold);
    box-shadow: var(--ltc-focus);
}

/* 5. Components ------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--ltc-border);
    --bs-card-border-radius: 8px;
    --bs-card-inner-border-radius: 7px;
    --bs-card-spacer-x: 24px;
    --bs-card-spacer-y: 24px;
    --bs-card-bg: #fff;
    box-shadow: var(--ltc-shadow-xs);
}
.badge {
    font-weight: 600;
    font-size: 12px;
    border-radius: 999px;
    padding: 5px 10px;
}
/* a staff notice on the catalog (catalog_cards.php, catalog_classroom.php): a tinted note with a
   hairline all round, no accent bar, as on InsuranceStudy */
.alert-tone {
    border: 1px solid var(--ltc-blue-200);
    background: var(--ltc-blue-50);
    color: var(--ltc-blue-800);
    border-radius: 8px;
    font-size: 15px;
    padding: 14px 16px;
}
.alert-tone a {
    color: inherit;
    font-weight: 600;
}
.modal {
    --bs-modal-width: 520px;
    --bs-modal-border-radius: 12px;
    --bs-modal-inner-border-radius: 11px;
    --bs-modal-border-color: var(--ltc-border);
    --bs-modal-box-shadow: var(--ltc-shadow-lg);
    --bs-modal-padding: 24px;
    --bs-modal-header-padding: 24px 24px 0;
    --bs-modal-margin: 8px;
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 520px;
        margin: 28px auto;
    }
}
.modal-title {
    font: 700 24px/1.2 var(--font-display);
    letter-spacing: -.01em;
    color: var(--ltc-heading);
}
.modal-backdrop {
    --bs-backdrop-bg: #012A5E;
    --bs-backdrop-opacity: .5;
}
.btn-close {
    font-size: 16px;
    --bs-btn-close-focus-shadow: var(--ltc-focus);
}
/* Bootstrap rings the close button on any focus: keyboard focus only here, like every other ring */
.btn-close:focus:not(:focus-visible) {
    box-shadow: none;
}
.offcanvas {
    --bs-offcanvas-width: 380px;
    --bs-offcanvas-padding-x: 20px;
    --bs-offcanvas-padding-y: 18px;
    --bs-offcanvas-bg: #fff;
    --bs-offcanvas-border-color: var(--ltc-border);
}
.offcanvas-header,
.offcanvas-body {
    padding: 18px 20px;
}
/* the Smallchat button (a fixed third-party iframe) steps aside while a panel is open */
body:has(.offcanvas.show, .offcanvas-lg.show) #Smallchat iframe {
    display: none !important;
}

/* 6. Utility bar + header --------------------------------------------------------------- */
.utilbar {
    background: var(--ltc-navy);   /* navy, like the footer (Jason 2026-10-14: the mist bar looked washed out above the blue hero) */
    color: #fff;
    font-size: 14px;   /* 14px on both sites, Jason 2026-10-14 (was 13px) */
    line-height: 1.4;
}
.utilbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 0;
}
.utilbar-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
}
@media (max-width: 575.98px) {
    .utilbar-email {
        display: none;   /* keeps the bar to one line on phones; the email is in the footer */
    }
}
@media (min-width: 576px) {
    .utilbar-links {
        gap: 22px;
    }
}
.utilbar a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.utilbar a:hover {
    color: var(--ltc-gold-400);
}
/* on navy the gold is the ring (6:1), lighter gold like the hover */
.utilbar a:focus-visible {
    box-shadow: 0 0 0 2px var(--ltc-gold-400);
}
.utilbar i {
    color: var(--ltc-gold-400);
    margin-right: 6px;
}
@media (min-width: 992px) {
    .utilbar-inner {
        justify-content: flex-end;
    }
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--ltc-border);
    box-shadow: var(--ltc-shadow-xs);
}
.site-header-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-height: var(--ltc-header-height);
    gap: 16px;
}
.site-brand {
    display: inline-flex;
    align-items: center;
    padding: 19px 0 21px;   /* the cap above the letters makes the image taller than they are: 1px up puts the wordmark on the header's centre line */
    margin-right: 20px;
    text-decoration: none;
}
.site-brand img {
    display: block;
    height: 30px;
    width: auto;
}
/* the main nav: two dropdowns (Course catalog, LTC certification), bold navy, a gold rule when
   hovered or open, never for the current page (Jason 2026-11-02); shows from 992px */
.site-nav {
    display: none;
    list-style: none;
    margin: 0 auto 0 0;
    padding: 0 0 0 24px;
    gap: 30px;
    border-left: 1px solid var(--ltc-border);
    align-self: stretch;
    align-items: center;
}
.site-nav > li {
    position: relative;
}
.site-nav .nav-link {
    display: inline-block;
    padding: 25px 0 20px;   /* with the 3px rule below, this centres the text on the header's centre line (measured with the logo and account links) */
    border-bottom: 3px solid transparent;
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    color: var(--ltc-navy);
    text-decoration: none;
    background: none;
    white-space: nowrap;
    transition: none;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link.show {
    color: var(--ltc-blue);
    border-bottom-color: var(--ltc-gold);
    background: none;
    text-decoration: none;
}
.site-nav .nav-link:focus-visible {
    outline: 2px solid transparent;
    outline-offset: -2px;
    box-shadow: var(--ltc-focus-inset);
}
.site-nav .dropdown-toggle::after {
    border-top-width: 5px;
    border-right-width: 5px;
    border-left-width: 5px;
    vertical-align: 3px;
    margin-left: 6px;
}
/* The account links (sign in or my courses, the account menu, the cart): the reader's own tools,
   smaller and lighter than the navigation. The one highlighted link is .btn-account-main (My
   courses once signed in, Sign in before: Jason 2026-10-14, the cart is never the primary link);
   the menu and the cart are plain. Below 992px only the cart and the menu button show. */
.site-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-top: 2px;   /* centred as a box, the 14px labels sit 1px high of the nav and logo text */
}
.site-header-actions .btn-plain,
.site-header-actions .btn-cart-link {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 7px;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 500;
    white-space: nowrap;
}
.site-header-actions .btn-plain {
    --bs-btn-color: var(--ltc-blue-800);
    --bs-btn-hover-bg: var(--ltc-blue-100);
    --bs-btn-active-bg: var(--ltc-blue-200);
}
.site-header-actions .btn-plain > i {
    color: var(--ltc-blue);
}
/* My courses / Sign in is an OUTLINE, white with a dark grey hairline, in the account links' blue
   (Jason 2026-10-30: the blue-50 fill read as a selected state); the fill arrives only on hover, as
   on the plain links beside it. InsuranceStudy's theme.css matches it in its greens. */
.site-header-actions .btn-account-main {
    --bs-btn-color: var(--ltc-blue-800);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--ltc-muted);
    --bs-btn-hover-color: var(--ltc-blue-800);
    --bs-btn-hover-bg: var(--ltc-blue-100);
    --bs-btn-hover-border-color: var(--ltc-blue);
    --bs-btn-active-color: var(--ltc-blue-800);
    --bs-btn-active-bg: var(--ltc-blue-200);
    --bs-btn-active-border-color: var(--ltc-blue-700);
    --bs-btn-font-weight: 600;
}
.site-header-actions .account-name {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.btn-cart-link {
    --bs-btn-color: var(--ltc-blue-800);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ltc-blue-800);
    --bs-btn-hover-bg: var(--ltc-blue-50);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--ltc-blue-800);
    --bs-btn-active-bg: var(--ltc-blue-100);
    --bs-btn-active-border-color: transparent;
}
.btn-cart-link > i {
    color: var(--ltc-blue);
}
.btn-cart-link .badge {
    background: var(--ltc-blue);
    color: #fff;
    font-size: 11px;
    padding: 3px 7px;
    min-width: 20px;
}
/* below 992px the cart stands alone beside the menu button, so it keeps a hairline like that button */
@media (max-width: 991.98px) {
    .btn-cart-link {
        --bs-btn-border-color: var(--ltc-border);
        --bs-btn-hover-border-color: var(--ltc-blue);
        --bs-btn-active-border-color: var(--ltc-blue);
    }
}
.site-header-actions .dropdown-menu {
    --bs-dropdown-font-size: 14px;
    --bs-dropdown-border-color: var(--ltc-border);
    --bs-dropdown-border-radius: 8px;
    --bs-dropdown-padding-y: 8px;
    --bs-dropdown-item-padding-x: 16px;
    --bs-dropdown-item-padding-y: 8px;
    --bs-dropdown-link-color: var(--ltc-ink);
    --bs-dropdown-link-hover-color: var(--ltc-blue-700);
    --bs-dropdown-link-hover-bg: var(--ltc-blue-50);
    --bs-dropdown-link-active-color: var(--ltc-blue-700);
    --bs-dropdown-link-active-bg: var(--ltc-blue-100);
    --bs-dropdown-min-width: 220px;
    box-shadow: var(--ltc-shadow-md);
    margin-top: 6px;
}
.site-header-actions .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    text-decoration: none;
}
.site-header-actions .dropdown-item i {
    width: 16px;
    text-align: center;
    color: var(--ltc-blue);
}
.site-header-actions .dropdown-toggle::after {
    margin-left: 6px;
    color: var(--ltc-subtle);
}
/* .d-lg-only-chrome / .d-lg-none-chrome are the UserMenu widget's class names (shared with the
   InsuranceStudy view): the switch sits at 992px, where the main nav appears */
@media (min-width: 992px) {
    .site-nav {
        display: flex;
    }
    .d-lg-none-chrome {
        display: none !important;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-brand {
        margin-right: 12px;
    }
    .site-brand img {
        height: 26px;
    }
    .site-nav {
        padding-left: 18px;
        gap: 22px;
    }
    .site-nav .nav-link {
        font-size: 16px;
    }
    /* the account cluster gives up its spare width: tighter buttons, a shorter name, an icon-only cart */
    .site-header-actions .btn-plain,
    .site-header-actions .btn-cart-link {
        --bs-btn-padding-x: 9px;
    }
    .site-header-actions .account-name {
        max-width: 80px;
    }
    .site-header-actions .btn-cart-link > span:not(.badge) {
        display: none !important;
    }
}
@media (max-width: 991.98px) {
    .d-lg-only-chrome {
        display: none !important;
    }
    .site-header-inner {
        min-height: 64px;
    }
    /* the logo gives way to the cart and menu buttons: full size where the row has room, scaled
       down where it does not (a 320px phone, a cart badge), so the header never runs off the
       screen. No margin after it: the nav it spaces from is hidden, and the row's gap keeps the
       buttons off it. InsuranceStudy's theme.css does the same with its logo. */
    .site-brand {
        min-width: 0;
        margin-right: 0;
        padding: 16px 0;
    }
    .site-brand img {
        width: 234px;   /* 26px tall */
        min-width: 0;
        max-width: 100%;
        height: auto;
    }
}
@media (max-width: 399.98px) {
    .site-brand img {
        width: 198px;   /* 22px tall */
    }
}

/* Course catalog dropdown: every state catalog in four columns, nothing else. The state links are
   .dropdown-item, so the arrow keys move through them; these keep Bootstrap's item fills off them
   (they read as a plain list) */
.state-menu {
    --bs-dropdown-link-color: var(--ltc-ink);
    --bs-dropdown-link-hover-color: var(--ltc-blue-700);
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-color: var(--ltc-blue-700);
    --bs-dropdown-link-active-bg: transparent;
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    padding: 20px 24px;
    border: 1px solid var(--ltc-border);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: var(--ltc-shadow-lg);
    background: #fff;
    font-size: 16px;
    transform: none !important;
    inset: 100% auto auto 0 !important;
}
.state-cols {
    columns: 4;
    column-gap: 28px;
}
.state-cols a {
    display: block;
    width: 150px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--ltc-ink);
    text-decoration: none;
    white-space: nowrap;
    break-inside: avoid;
}
.state-cols a:hover,
.state-cols a:focus {
    color: var(--ltc-blue-700);
    background: none;
    text-decoration: underline;
}
.state-cols a:active {
    color: var(--ltc-blue-800);
    background: none;
}

/* LTC certification dropdown: the three informational pages */
.info-menu {
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    padding: 8px 0;
    min-width: 260px;
    border: 1px solid var(--ltc-border);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: var(--ltc-shadow-lg);
    background: #fff;
    transform: none !important;
    inset: 100% auto auto 0 !important;
}
.info-menu .dropdown-item {
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ltc-ink);
    text-decoration: none;
    white-space: nowrap;
}
.info-menu .dropdown-item:hover,
.info-menu .dropdown-item:focus {
    color: var(--ltc-blue-700);
    background: var(--ltc-blue-50);
}
.info-menu .dropdown-item.active,
.info-menu .dropdown-item:active {
    color: var(--ltc-blue-700);
    background: var(--ltc-blue-100);
}
.info-menu .dropdown-item:focus-visible {
    outline: 2px solid transparent;
    outline-offset: -2px;
    box-shadow: var(--ltc-focus-inset);
}

/* Mobile nav (offcanvas below 992px) */
.mobile-nav .offcanvas-header {
    border-bottom: 1px solid var(--ltc-border);
}
.mobile-nav .offcanvas-header img {
    height: 24px;
    width: auto;
}
.mobile-nav .eyebrow {
    margin-bottom: 8px;
}
.mobile-nav .form-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--ltc-muted);
}
.mobile-nav .form-select {
    margin-bottom: 8px;
}
.mobile-nav .btn-cta {
    width: 100%;
    margin-bottom: 20px;
}
.mobile-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ltc-border);
    font-size: 17px;
    font-weight: 500;
    color: var(--ltc-ink);
    text-decoration: none;
}
.mobile-link:hover,
.mobile-link:focus {
    color: var(--ltc-blue-700);
    text-decoration: none;
}
.mobile-link i {
    color: var(--ltc-ink-300);
}
.mobile-link > span:first-child {
    flex: 1 1 auto;
}
.mobile-link .badge {
    background: var(--ltc-blue);
    color: #fff;
    margin-right: 10px;
}
.mobile-nav .offcanvas-body > .eyebrow + .eyebrow,
.mobile-nav .mobile-group {
    margin-top: 24px;
}

/* 7. Footer ----------------------------------------------------------------------------- */
.site-footer {
    background: var(--ltc-navy);
    color: rgba(255, 255, 255, .85);
    margin-top: 72px;
    font-size: 14px;
}
.site-footer-inner {
    padding: 44px 0 40px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 24px;
    align-items: start;
}
.footer-title {
    font: 700 16px/1.3 var(--font-display);
    color: #fff;
    margin: 0 0 14px;
}
.site-footer a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    font-size: 14px;
}
.site-footer a:hover,
.site-footer a:focus {
    color: var(--ltc-gold-400);
    text-decoration: none;
}
/* on navy the gold is the ring (6:1), lighter gold like the hover */
.site-footer a:focus-visible {
    box-shadow: 0 0 0 2px var(--ltc-gold-400);
}
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
}
.footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}
.footer-contact i {
    width: 16px;
    text-align: center;
    color: var(--ltc-gold-400);
    margin-top: 4px;
}
.footer-contact a i {
    margin-top: 0;
}
.social-links {
    display: flex;
    gap: 10px;
}
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 15px;
}
.social-links a:hover,
.social-links a:focus {
    color: var(--ltc-gold-400);
    border-color: var(--ltc-gold-400);
}
.footer-sister {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .7);
}
.footer-sister a {
    font-weight: 600;
    color: #fff;
}
.footer-powered a {
    display: inline-block;
    opacity: .9;
    transition: opacity 110ms var(--ltc-ease);
}
.footer-powered a:hover {
    opacity: 1;
}
.footer-powered img {
    display: block;
    width: 150px;
    height: auto;
}
.footer-base {
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}
.footer-base-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0;
}
.footer-base-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}
.footer-base a {
    font-size: 12px;
}
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer-base-inner {
        flex-direction: row;
        align-items: center;
    }
}
@media (min-width: 992px) {
    .footer-grid {
        grid-template-columns: 2fr 1.4fr auto;
    }
    .footer-powered {
        justify-self: end;
    }
}

/* 8. Home ------------------------------------------------------------------------------- */
.section {
    padding: 72px 0;
}
.section-white {
    background: #fff;
    border-top: 1px solid var(--ltc-border);
    border-bottom: 1px solid var(--ltc-border);
}
.section-head {
    max-width: 760px;
    margin-bottom: 40px;
}
.section-head h2 {
    margin: 0 0 10px;
}
.section-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ltc-muted);
    margin: 0;
}
@media (max-width: 767.98px) {
    .section {
        padding: 44px 0;
    }
    .section-head {
        margin-bottom: 28px;
    }
    .section-sub {
        font-size: 17px;
    }
}
.ticks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ticks li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ticks li > i {
    flex: 0 0 auto;
    color: var(--ltc-green);
    margin-top: 5px;
}

/* Hero: the brand-blue band (two soft radial lights over a blue-to-deeper-blue wash, so it has
   depth without a photograph): headline, subtitle and ONE gold button that opens the state modal,
   as on InsuranceStudy (Jason 2026-11-01: no state form and no ticks in the hero). The one strong
   field of colour on the page.
   From 992px a producer holding our certificate stands on the right (.hero-art, a cutout whose
   photo is cropped through her forehead and her waist). The picture always runs from the band's
   top edge to its bottom edge, so both crops land on the section breaks and read as the band
   framing her: the padding lives on .hero-copy, the container spans the band's full height and the
   picture is pinned to its top and bottom. Its width follows the band's height (1150 / 1200), so
   each breakpoint fixes the band's minimum height and keeps the copy narrow enough to clear her. */
.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background-color: var(--ltc-blue);
    background-image:
        radial-gradient(ellipse 60% 80% at 8% 0%, rgba(189, 208, 225, .34), transparent 70%),
        radial-gradient(ellipse 50% 70% at 100% 100%, rgba(1, 42, 94, .55), transparent 70%),
        linear-gradient(135deg, #2B63A8 0%, #275A9C 48%, #1F4D88 100%);
}
.hero > .container {
    position: relative;
}
.hero-copy {
    position: relative;
    z-index: 1;
    max-width: 760px;
    padding: 48px 0 64px;
}
.hero h1 {
    font-size: clamp(34px, 20px + 2.4vw, 54px);
    line-height: 1.08;
    letter-spacing: -.025em;
    color: #fff;
    margin: 0 0 18px;
}
.hero-sub {
    font-size: 19px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .86);
    margin: 0 0 32px;
    max-width: 34em;
}
.hero-art {
    display: none;
}
@media (min-width: 992px) {
    .hero > .container {
        display: flex;
        align-items: center;
        min-height: 440px;
    }
    .hero-copy {
        max-width: 480px;
        padding: 56px 0;
    }
    .hero h1 {
        font-size: 40px;
    }
    .hero-sub {
        font-size: 18px;
    }
    .hero-art {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 12px;   /* the container's gutter: her shoulder ends on the content edge */
    }
    /* a soft navy shadow down and to the left lifts her raised hand and sleeve off the band
       (2026-11-02); the paper's cool tone (#E4EAF1) is baked into the image */
    .hero-art img {
        display: block;
        height: 100%;
        width: auto;
        filter: drop-shadow(-3px 3px 6px rgba(1, 24, 56, .2)) drop-shadow(-14px 10px 28px rgba(1, 24, 56, .35));
    }
}
@media (min-width: 1200px) {
    .hero > .container {
        min-height: 520px;
    }
    .hero-copy {
        max-width: 600px;
    }
    .hero h1 {
        font-size: clamp(34px, 20px + 2.4vw, 54px);
    }
    .hero-sub {
        font-size: 19px;
    }
}
@media (max-width: 767.98px) {
    .hero-copy {
        padding: 36px 0 48px;
    }
    .hero-sub {
        font-size: 17px;
        margin-bottom: 28px;
    }
}

/* How LTC certification works: the two steps split by a hairline, then one button to the state modal */
/* the pink LTC seal, the one printed on the certificate in the hero photo (Jason 2026-11-02): above
   the heading on phones and tablets, a column on the right from 992px, centred on the section */
.steps-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}
.steps-seal {
    order: -1;
}
.steps-seal img {
    display: block;
    width: 96px;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(1, 42, 94, .1)) drop-shadow(0 10px 24px rgba(1, 42, 94, .12));
}
@media (min-width: 768px) {
    .steps-seal img {
        width: 120px;
    }
}
@media (min-width: 992px) {
    .steps-layout {
        grid-template-columns: minmax(0, 1fr) 200px;
        gap: 56px;
        align-items: center;
    }
    .steps-seal {
        order: 0;
        justify-self: end;
    }
    .steps-seal img {
        width: 180px;
    }
}
.steps-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.steps-col h3 {
    font-size: 22px;
    margin: 0 0 10px;
}
.steps-col p {
    color: var(--ltc-ink);
    margin: 0;
    max-width: 52ch;
}
.steps-action {
    margin-top: 32px;
}
@media (min-width: 768px) {
    .steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .steps-col {
        padding-right: 40px;
    }
    .steps-col + .steps-col {
        border-left: 1px solid var(--ltc-border);
        padding-left: 40px;
        padding-right: 0;
    }
}
@media (max-width: 767.98px) {
    .steps-col + .steps-col {
        border-top: 1px solid var(--ltc-border);
        padding-top: 28px;
        margin-top: 28px;
    }
}

/* Get certified and get back to selling: the one navy band */
.after {
    background: var(--ltc-navy);
    color: #fff;
    padding: 64px 0;
}
.after .section-head {
    margin-bottom: 36px;
}
.after h2 {
    color: #fff;
}
.after .section-sub {
    color: rgba(255, 255, 255, .78);
}
.after-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px 48px;
}
.after-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.after-item > i {
    font-size: 22px;
    line-height: 30px;
    color: var(--ltc-gold-400);
}
.after-item h3 {
    font-size: 19px;
    color: #fff;
    margin: 2px 0 6px;
}
.after-item p {
    color: rgba(255, 255, 255, .8);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 46ch;
}
.after a {
    color: #fff;
    font-weight: 600;
}
.after a:hover,
.after a:focus {
    color: var(--ltc-gold-400);
}
.after a:focus-visible {
    box-shadow: 0 0 0 2px var(--ltc-gold-400);
}
/* the gold "browse my state" button closes the band (Jason 2026-11-02): the sales message ends in
   the action. Its white-and-navy focus ring shows on navy as on the blue hero. */
.after-action {
    margin-top: 40px;
}
@media (min-width: 768px) {
    .after-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .after {
        padding: 44px 0;
    }
}

/* Proof strip, right under the hero: the number of producers trained, then three published quotes.
   Narrow and white so it reads as evidence for the hero, not as another section. Phones and tablets
   swipe through the quotes (scroll-snap, no script); three sit side by side from 992px. No star
   ratings: none were ever collected. */
.proof {
    background: #fff;
    border-bottom: 1px solid var(--ltc-border);
    padding: 28px 0 32px;
}
.proof-title {
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 22px;
}
.proof-quotes {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
    margin: 0 -12px;
    padding: 0 12px;
}
.proof-quotes::-webkit-scrollbar {
    display: none;
}
.proof-quote {
    flex: 0 0 84%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;   /* the caption sits at the bottom, so the three name rows line up */
    margin: 0;
    padding: 0 24px 0 0;
}
/* the customer's own words in the serif, so they read as a voice, not as our copy (Jason 2026-11-02);
   upright, not italic, and the serif's extra line-height */
.proof-quote blockquote {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ltc-ink);
    margin: 0 0 10px;
}
.proof-quote blockquote::before {
    content: "\201C";
}
.proof-quote blockquote::after {
    content: "\201D";
}
.proof-quote .quote-who {
    margin-top: auto;
}
.quote-who {
    font-size: 14px;
    color: var(--ltc-muted);
}
.quote-who strong {
    color: var(--ltc-ink);
    font-weight: 600;
}
@media (min-width: 576px) {
    .proof-quote {
        flex-basis: 46%;
    }
}
@media (min-width: 992px) {
    .proof-quotes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
        margin: 0;
        padding: 0;
    }
    .proof-quote {
        padding: 0 28px;
        border-left: 1px solid var(--ltc-border);
    }
    .proof-quote:first-child {
        padding-left: 0;
        border-left: 0;
    }
    .proof-quote:last-child {
        padding-right: 0;
    }
}
@media (max-width: 767.98px) {
    .proof-title {
        font-size: 18px;
    }
}

/* Training by state: an alphabetical index of every catalog, equal weight for every state */
.state-index {
    columns: 2;
    column-gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.state-index li {
    break-inside: avoid;
}
.state-index a {
    display: block;
    padding: 6px 0;
    font-size: 15px;
    color: var(--ltc-ink);
    text-decoration: none;
}
.state-index a:hover,
.state-index a:focus {
    color: var(--ltc-blue-700);
    text-decoration: underline;
}
.states-foot {
    margin: 28px 0 0;
    font-size: 14px;
    color: var(--ltc-muted);
    max-width: 80ch;
}
@media (min-width: 576px) {
    .state-index {
        columns: 3;
    }
}
@media (min-width: 768px) {
    .state-index {
        columns: 4;
    }
}
@media (min-width: 992px) {
    .state-index {
        columns: 5;
    }
}

/* Closing band: mist, the question and the one button */
.closing {
    background: var(--ltc-blue-200);
    padding: 48px 0;
}
/* the band ends the page, so the footer meets it with no cream stripe between (Jason 2026-11-02);
   every other page keeps the footer's 72px gap */
#main:has(.closing) + .site-footer {
    margin-top: 0;
}
.closing-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.closing h2 {
    font-size: 28px;
    color: var(--ltc-navy);
    margin: 0 0 6px;
}
.closing p {
    color: var(--ltc-blue-800);
    margin: 0;
    max-width: 52ch;
}
@media (min-width: 768px) {
    .closing-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
    }
}

/* the state modal (the closing band and the course columns open it) */
.state-modal .form-label {
    font-weight: 600;
}
.affiliate-banner {
    background: var(--ltc-navy);
    color: #fff;
    text-align: center;
    padding: 14px 0;
    font-size: 15px;
}
.affiliate-banner p:last-child {
    margin-bottom: 0;
}
/* the partner notice a source can set for its own homepage (source.homepageBannerText), kept in the
   source's own markup: a white band above the hero */
.source-banner {
    background: #fff;
    border-bottom: 1px solid var(--ltc-border);
    padding: 24px 0 8px;
}
.source-banner img {
    max-width: 100%;
    height: auto;
}
#steps,
#after,
#voices,
#states {
    scroll-margin-top: 88px;
}

/* 9. Motion preferences ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn, .footer-powered a {
        transition: none;
    }
    .btn:active {
        transform: none;
    }
}

/* 10. Print ------------------------------------------------------------------------------ */
/* the page's content only: no sticky header, menus, dialogs, chat button or footer chrome */
@media print {
    .skip-link,
    .utilbar,
    .site-header,
    .mobile-nav,
    .modal,
    .modal-backdrop,
    .offcanvas-backdrop,
    .site-footer,
    #Smallchat {
        display: none !important;
    }
    body,
    body.ltc-site {
        display: block;
        background: #fff;
    }
}