@charset "utf-8";
/* CSS Document for Lumens */
/* Updated 2026-06-30 for Lumens July 2026 accessibility HTML structure changes (staging test) */
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Prodisplay=swap');
 body {
    font-family: 'Source Sans Pro', sans-serif;
}
/* UPDATED: removed .class-container h4 (element converted to .ls per vendor change);
   added .class-container .class .col-info .ls to explicitly match the new markup */
 .class-container h1, .class-container h2, .class-container h3, .class-container .ls, .class-container .class .col-info .ls {
     font-family: 'Source Sans Pro', sans-serif;
     color: #444;
     text-shadow: none;
}
 h1, h2, h3, h {
    font-family: 'Source Sans Pro', sans-serif;
}
 .page-title h1 {
    text-shadow: none;
}
/* UPDATED 2026-07-01: added !important. This bare .list-info selector is the one rule
   suppressing vendor text-shadow (main_class.min.css / main_class_info.min.css:
   ".class-container h3, .list-info" and ".classinfo-container h3, .list-info" both
   carry text-shadow:0 1px 2px rgba(0,0,0,.2)) for every h4-and-up element the July
   2026 accessibility update converts to a non-heading tag with class "list-info"
   (.ls, .list-info.listing-text-sm, .list-info.list-info-block.listing-text-md, etc).
   Without !important this only won by being a same-specificity, later-loaded rule --
   fragile against any more specific rule Modern Campus ships alongside the actual
   markup change. */
 .list-info {
    text-shadow: none !important;
}

/* ADDED 2026-07-01: .class-container h1/h2/h3/.ls already get text-shadow:none above,
   but .classinfo-container (main_class_info.min.css) never got the equivalent fix.
   Confirmed live on Course Series Search results (.classinfo-container .class-details
   .course-series-details h3, e.g. the bare "Series : <name>" heading) -- vendor rule
   ".classinfo-container h1/h2/h3" each carry text-shadow:0 1px 2px rgba(0,0,0,.2) with
   nothing overriding it, same for h4. Per the July 2026 accessibility email h4 is being
   converted to .classinfo-container .list-info.list-info-block.listing-text-md (already
   covered by the .list-info rule above); h1-h3 stay real heading tags (old selectors),
   so they need the direct override here instead. */
 .classinfo-container h1, .classinfo-container h2, .classinfo-container h3, .classinfo-container h4 {
    text-shadow: none !important;
}

 p, P {
    font-size: 16px;
     color:#444;
    font-family: 'Source Sans Pro', sans-serif;
    line-height:1.3;
}
 .course-body .client-input p {
    color:#444;
    font-family: 'Source Sans Pro', sans-serif;
}
 .template-area .course-body a, .template-area .course-body li, .template-area .course-body p {
    color:#444;
    font-family: 'Source Sans Pro', sans-serif;
}
 .template-area {
    font-size: 16px;
     font-family: 'Source Sans Pro', sans-serif;
}
 .branding-footer-cont {
    min-height: 200px;
}
 .filter-title {
    font-size: 15px;
}
 .course-body .filters li a {
    font-size: 15px;
}
 .course-body .filters li a.active {
    font-weight:700;
    background-color: #fecc64;
}
 .button-backtotop {
    background: #4b3190;
}
 .button-backtotop:hover {
    background:#fdbb30;
    border: 2px solid #fdbb30;
     color: #4b3190;
}
 a.button.button-backtotop.button-color:hover {
    background: #fdbb30;
     color: #4b3190;
}
 .nav-main-item {
    font-size: 16px;
}
 a.nav-main-link.nav-twist {
    font-size: 16px;
}
 .nav-main ul {
    font-family: 'Source Sans Pro', Helvetica, sans-serif;
    font-size: 16px;
}
 .nav-main ul li {
    font-size: 15px;
}
 .nav-main ul li ul {
    font-family: 'Source Sans Pro', Helvetica, sans-serif;
    font-size: 14px;
}
 .class-description-cont, .class-description-cont p {
    line-height: 1.5;
}
 .nav-view-cart ul li a {
    color: #4b3190;
}
 TABLE, TR, TD {
    font-size: 15px;
    font-family: 'Source Sans Pro', Helvetica, sans-serif;
}
 .ColumnHead {
    text-align:left;
    font-size:15px;
}
/* UPDATED 2026-06-30: removed .classinfo-container .list-info.list-info-block.listing-text-md
   from this rule. After the Lumens July 2026 accessibility markup change, that class combination
   is now also used on legitimate content rows (e.g. Fee, Registration Closes On in .col-fee) that
   were previously h3 elements -- not just the table/schedule header cells this rule was meant for.
   Confirmed via staging inspection: the purple background was bleeding onto the fee/date rows.
   If a narrower fix is later identified (e.g. an additional class unique to the table header
   instance), this can be re-scoped instead of fully removed. */
 sch-title .sch-cell, .certificateinfo-container .table .ColumnHead {
    background-color:#D2CBE3;
}
 #faq h2 {
    color:#008394;
    font-weight: 600;
     font-size: 26px;
}
 .cart-action .btn-link, .cart-action a, .cart-action span {
    font: 22px/26px 'Source Sans Pro', sans-serif;
     text-transform: none;
}
 .signupbox .form-group {
    margin-top: 0;
     margin-bottom:30px;
}
/* Increase specificity to override the vendor stylesheet */
 .class-container .ls, .class-container .class .col-info .ls {
     color: #444 !important;
}

/* UPDATED 2026-06-30: Fix for Lumens July 2026 accessibility update. The vendor's .fl rule
   (width: 20%; float: left !important) was sized for the old h3-based "Fee" / "Registration
   Closes On" markup. The new <p class="fl ..."> elements in .col-fee inherit that same narrow
   20% width, causing one-word-per-line wrapping (confirmed via staging + devtools computed styles).
   This override keeps the side-by-side float layout (.fl stays floated left) but widens the
   column so the text wraps normally. Scoped to .col-fee only, so .fl usage elsewhere on the
   site (which may rely on the vendor's 20% width) is unaffected.
   If Modern Campus later patches their vendor stylesheet for this regression, this override
   can likely be removed. */
.col-fee .fl {
    width: auto !important;
    max-width: 100% !important;
}

/* ADDED 2026-06-30: Schedule table column headers (.ColumnHead) have a dark lavender
   background (#D2CBE3, see rule above) but the header text inside (rendered by the
   DataTables plugin as <span class="dt-column-title">) inherits color: #000000 (black)
   from elsewhere, making it hard to read against the purple. Scoped specifically to
   dt-column-title spans inside .ColumnHead so this doesn't affect black text used
   elsewhere on the site. */
.ColumnHead .dt-column-title {
    color: #ffffff !important;
}

/* ADDED 2026-07-01: Same dark-purple-on-black contrast issue as .dt-column-title
   above, but for the sort arrows (<span class="dt-column-order">). DataTables
   (plugins.min.css) renders these purely via ::before "▲" / ::after "▼" content
   with no color of their own, so they inherit color:#000000 from the customer
   stylesheet's .classinfo-container/.certificateinfo-container .table .ColumnHead
   rule -- black arrows on the #4b3190 purple ColumnHead background. Scoped to
   .ColumnHead .dt-column-order so it doesn't affect DataTables sort arrows used
   elsewhere on the site against a light background. */
.ColumnHead .dt-column-order {
    color: #ffffff !important;
}

/* ADDED 2026-07-01: color:#fff alone isn't enough -- DataTables (plugins.min.css)
   also dims these arrows with opacity, calibrated for a light background: the
   "not the current sort direction" arrow sits at opacity .125, and even the
   "current direction" arrow is only opacity .6. Against #4b3190 that leaves the
   .125 state at well under 3:1 contrast, and the .6 state at only ~4.6:1. Raise
   both (!important beats the vendor rules' higher selector specificity) so every
   arrow state -- sorted and not-yet-sorted -- clears WCAG 1.4.11's 3:1 minimum,
   while keeping the active direction visibly more solid than the inactive one.
   Selectors mirror the vendor's th.ColumnHead.dt-ordering-asc/.dt-ordering-desc
   structure (both classes land on the same <th> as .ColumnHead). */
.ColumnHead .dt-column-order:before,
.ColumnHead .dt-column-order:after {
    opacity: 0.5 !important;
}
.ColumnHead.dt-ordering-asc .dt-column-order:before,
.ColumnHead.dt-ordering-desc .dt-column-order:after {
    opacity: 1 !important;
}

/* ADDED 2026-06-30: Fix for Course Series Search page squished off to the right.
   Vendor rule .class-details .col-info:last-child {width:25%; float:right} (in
   main_classinfo.min.css) was written for the unrelated "other courses" box on the Class
   Information page, where .col-info is the last element child of .class-details. On this
   page, .col-info.col-info2 wraps the Fee/Description/Add-to-Cart rows AND the schedule
   table, making it the last child of .class-details too, so it unintentionally inherits the
   same 25%-wide right-floated layout (confirmed via staging + devtools computed styles).
   This restores the full-width, non-floated layout the vendor's own mobile
   (max-width:800px) media query already uses, applied at all widths. Scoped to
   .course-series-details so the Class Information "other courses" box is unaffected. */
.course-series-details .col-info:last-child {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
}

/* ADDED 2026-07-01: Fix for Course Series Search results Description column being
   crammed into a narrow, wrapping strip. The Fee/Description/Edit+Add-to-Cart rows are
   three identically-classed <div class="list-info listing-text-sm"> siblings inside
   .col-info.col-info2. main_template3.min.css's base (desktop) rule floats .list-info
   at width:20% -- sized for the unrelated ".nav-last-viewed .list-info" sidebar widget
   elsewhere on the site -- and only widens it to 100% inside its own
   @media (max-width:600px) block. On desktop the Description text gets squeezed into
   that 20% column. This applies the vendor's own mobile fix (float:none; width:100%)
   at all widths, same technique as the .course-series-details .col-info:last-child
   rule above. Scoped to .course-series-details so the unrelated .nav-last-viewed
   sidebar widget keeps its intentional 20%-wide columns. */
.course-series-details .col-info .list-info {
    width: 100% !important;
    float: none !important;
}

/* ADDED 2026-07-01: WCAG 2.1 AA fix for the vendor .TextBoldAndRed class (rendered via
   <font class="TextBoldAndRed"> in markup we don't control, e.g. Leadership Search
   Results "Total/Filled:" seat counts and "Please read:" notices). Two problems:
   1) Contrast -- the vendor's red fails 1.4.3 (Contrast Minimum) against the white/
      light card background these elements sit on: pure red (#f00) is only ~4:1, below
      the 4.5:1 required for normal-size text. #c00 reuses the same dark red already
      used for the error-icon background elsewhere on this site and measures ~5.9:1 on
      white, clearing 4.5:1 with margin regardless of the element's final font-size.
   2) Size -- these elements were inheriting a smaller size than surrounding copy.
      Explicitly matching body/table text size (16px) instead of the vendor default.
   Bold weight and the leading label text ("Please read:", "Total/Filled:") are kept
   as-is, so meaning still isn't conveyed by color alone (1.4.1 Use of Color).
   TODO: verify against live computed styles/background on staging (actual current
   color, font-size, and card background) before treating this as final -- values
   above are calculated against an assumed white background, not confirmed via
   devtools like the other overrides in this file. */
.TextBoldAndRed {
    color: #c00 !important;
    font-size: 16px !important;
}

/* ADDED 2026-07-01: URGENT/TEMPORARY -- payment processor glitch is causing the
   Submit/payment button to register multiple clicks, resulting in customers being
   charged more than once for a course. This is a CSS-only injection (no template/HTML
   changes available), so it uses a `body::before` pseudo-element to render a fixed
   notice bar at the very top of the viewport, above all page content (max z-index),
   which makes it appear on every page site-wide -- including the home page and the
   View Cart page. Because pseudo-element `content` only supports plain text (no real
   links/buttons), the phone number is included as plain text rather than a tel: link.
   `body` gets padding-top added so existing page content is pushed down and not hidden
   underneath the bar; this assumes the site's own header/nav is not itself
   position:fixed -- if it is, the header will not move, but the notice bar will still
   render on top of it. The mobile media query increases the padding-top and shrinks
   the banner font size to account for the message text wrapping onto more lines on
   narrow screens. REMOVE this entire block once the payment processor issue is
   resolved. */
body {
    padding-top: 60px !important;
}
body::before {
    content: "We are aware of an issue causing the payment button to allow multiple submissions without showing a confirmation. Please click Submit only once. If you were charged more than once, contact us for assistance at (815) 455-8593.";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    background-color: #c00;
    color: #fff;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    z-index: 2147483647;
}
@media (max-width: 600px) {
    body {
        padding-top: 130px !important;
    }
    body::before {
        font-size: 13px;
    }
}