/*
 * InsuranceStudy: rules for the pages that have NOT yet been rebuilt on the design system
 * (course details, cart, checkout, sign in, register, account, the custom pages).
 * Loaded by layouts/main.php only, after theme.css, on top of the Bootstrap 3 compatibility stack
 * (css/bootstrap-legacy.css + css/newmain.css). Delete each block as its page is rebuilt on
 * layouts/site.php, and delete the file when none are left.
 */
main.legacy-main {
    background: #fff;
}
.maincontent {
    padding-top: 24px;
    padding-bottom: 24px;
    min-height: 420px;
}
.maincontent h1,
.maincontent h2,
.maincontent h3,
.maincontent h4 {
    margin: 24px 0 12px;
}
.maincontent h1:first-child,
.maincontent h2:first-child {
    margin-top: 8px;
}
/* the custom pages (page/view, and site/about + site/contact when a source points them at one; the
   layout adds .custom-page): staff-written content, so the headings step well below the h1 with the
   sizes of the rebuilt text pages (page.css .is-prose), as on LTC Connection (Jason 2026-11-02) */
.custom-page .maincontent h2 {
    font-size: 24px;
}
.custom-page .maincontent h3 {
    font-size: 20px;
}
.maincontent a.btn,
.maincontent .catalog a,
.maincontent #tabsmenu a,
.maincontent table.tableclassroom a {
    text-decoration: none;
}
.maincontent .btn-default {
    --bs-btn-color: var(--is-green-700);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--is-green);
    --bs-btn-hover-color: var(--is-green-700);
    --bs-btn-hover-bg: var(--is-green-50);
    --bs-btn-hover-border-color: var(--is-green-700);
    --bs-btn-active-color: var(--is-green-700);
    --bs-btn-active-bg: var(--is-green-200);
    --bs-btn-active-border-color: var(--is-green-700);
}
.maincontent .panel,
.maincontent .card {
    border-radius: 6px;
}
.maincontent .form-control {
    height: auto;
    font-size: 16px;
    color: var(--is-ink);
}
.maincontent .form-control:focus {
    border-color: var(--is-gold);
    box-shadow: var(--is-focus);
}
#cartText {
    margin-left: -6px;
}
img.adImage {
    max-height: 150px;
    margin: 0 auto;
}
.adLanding {
    margin-bottom: 32px;
    padding: 16px;
    font-style: italic;
    border: 1px dashed var(--is-ink-300);
    border-radius: 6px;
}
#course-details-page .cd-subs {
    margin-bottom: 48px;
}
/* Course details type scale (Jason 2026-10-13), matched to the catalog: the course name at the
   catalog h1 size less one step (course names run long), the credit hours in the catalog card's
   green display face, the price one step under the name, and the grey section bars as section
   labels rather than page headings. */
#course-details-page h1.kitName {
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--is-heading);
    margin: 0;
}
/* not the class / webinar page's event subtitle (h3.subKitName--event, styled in newmain.css) */
#course-details-page h3.subKitName:not(.subKitName--event) {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--is-muted);
    margin: 10px 0 0;
}
#course-details-page h3.subKitName:not(.subKitName--event) > div + div {
    margin-top: 4px;
    font: 600 17px/1.4 var(--font-display);
    color: var(--is-green-700);
}
#course-details-page .cta-section h2 {
    font-size: 28px;
    line-height: 1.2;
}
#course-details-page .cd-title {
    padding: 10px 14px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
}
@media (min-width: 768px) {
    #course-details-page h1.kitName {
        font-size: 32px;
    }
}
@media (min-width: 768px) {
    #course-details-page h2.subKitName,
    h2.catalog-heading-state,
    h2.addcourseHeader {
        font-weight: 500;
        font-size: 26px;
    }
    #store-card-form label {
        font-weight: normal;
    }
}
/* payment forms (checkout and My Credit Cards > Add / Update a Credit Card): every field is the theme's
   44px .form-control box with 16px text, as on LTC Connection (Jason 2026-10-22); the Stripe boxes carry
   .form-control and copy the zip field's text, so they match. Beside its field (992px up) a label gets
   7px above its 20px line from store.css, which centres it on a 34px field; these fields are 44px.
   ID selectors: store.css loads after this file. */
@media (min-width: 992px) {
    .maincontent #store-card-form .row > div > label,
    .maincontent #payment-bank .row > div > label {
        padding-top: 12px;
    }
}
/* every card-form field ends where the card number and security code end: each field column keeps a
   44px gutter on its right, and those two fields' icons (36px + 8px) hang into it */
.maincontent #store-card-form .pay-field-col {
    padding-right: calc(var(--bs-gutter-x) * .5 + 44px);
}
.maincontent #store-card-form .stripe-cardnumber-wrapper,
.maincontent #store-card-form .stripe-cardcvc-wrapper {
    margin-right: -44px;
}
.maincontent #store-card-form #card-brand-icon,
.maincontent #store-card-form #store-cvv-icon {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    margin-left: 8px;
}
/* checkout's card form fills its payment box (Jason 2026-10-22: the fields felt squished): below 992px
   labels and fields run the box's full width instead of an inset 10/12 column; from 992px the labels
   take a 130px column (the longest, "Name on Card:", is 98px) and the fields the rest, with 16px more
   room right of the icons, so the group sits about 30px in from both sides of the box */
.maincontent .stripe-card-box .pay-label-col,
.maincontent .stripe-card-box .pay-field-col {
    width: 100%;
    margin-left: 0;
}
@media (min-width: 992px) {
    .maincontent .stripe-card-box .pay-label-col {
        flex: 0 0 auto;
        width: 130px;
    }
    .maincontent .stripe-card-box .pay-label-col + .pay-field-col {
        flex: 1 1 0;
        width: auto;
        padding-right: calc(var(--bs-gutter-x) * .5 + 60px);
    }
}