/* ==========================================================
   NIC Workforce & Community – Consolidated Custom CSS
   Goals:
   • Full-bleed WHITE header/banner (black text + maroon accents)
   • Full-bleed black nav bars, footer, pre-footer (white text)
   • Readable nav to match account/login bar (16px, normal weight)
   • Logo sizing fix (strong specificity; fixed heights per breakpoint)
   • WCAG 2.4 focus-visible parity + link affordance
   • Bootstrap focus suppression fix
   • Readable typography (16px body, 14px UI/table text minimum)
   • Minimum 44px touch targets on mobile (WCAG 2.5.5)
   • Accessible error/warning text contrast (WCAG 1.4.3)
   • Accessible gray link contrast (WCAG 1.4.3)
   • Brand colors: #000000, #ffffff, #98002e, #999999, #ffbf00
   Last updated: 2026-03-16
   ============================================================== */

/* -------------------------------
   0) Root baseline (keep rem consistent)
   ------------------------------- */
html { font-size: 100%; } /* keep 1rem ≈ 16px */

/* -------------------------------
   0b) Bootstrap modal reset (#PopUpModal)
   Instructor biography popup and any other Bootstrap modals must
   render with white background and dark text on all page templates.
   ------------------------------- */
#PopUpModal,
#PopUpModal.modal,
#PopUpModal .modal-dialog,
#PopUpModal .modal-content {
  background-color: #ffffff !important;
  color: #333333 !important;
}

#PopUpModal .modal-body {
  background-color: #ffffff !important;
  color: #333333 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

#PopUpModal .modal-header,
#PopUpModal .modal-footer {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.15) !important;
}

#PopUpModal .modal-title,
#PopUpModal h1,
#PopUpModal h2,
#PopUpModal h3,
#PopUpModal h4 {
  color: #000000 !important;
}

#PopUpModal a {
  color: #98002e !important;
  text-decoration: underline !important;
}

#PopUpModal.modal.fade.in {
  display: block !important;
}

/* -------------------------------
   1) Readable typography
   ------------------------------- */
.template-area,
.content,
.custom-landing,
.container-cont {
  font-size: 1rem;
  line-height: 1.6;
}

/* Lift legacy tiny text to 14px minimum for UI & tables */
.Text, .ListText, .ListTextRT, .ListTextNum, .ListTextNumLT,
.MessageText, .MessageTextCTR, .MessageTextBold,
.InfoMessage, .InfoMessageL, .InfoMessageBlue, .InfoMessageBlueLT,
.FormLabel, .FormLabelLeft, .FormLabelReq, .FormLabelReqLT,
.ColumnHeadSmall,
P, TABLE, TR, TD {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Form inputs: font lifted from 11px causes overflow in narrow fields.
   Set to 14px minimum and ensure fields use full available width. */
.FormInput,
.FormInputDate,
input.FormInput,
input.FormInputDate {
  font-size: 0.875rem !important;  /* 14px – WCAG minimum */
  line-height: 1.4 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Form hint/helper text: platform renders in Verdana at ~17.6px which
   is larger than the field labels. Normalize to Arial 14px to match. */
.column1-2.last,
div.column1-2.last {
  font-size: 0.875rem !important;  /* 14px – matches label size */
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1.5 !important;
  color: #222222;
}

/* Paragraphs render at 16px even if overridden elsewhere */
body p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* Global heading scale – proportional to 16px (1rem) body text */
h1 { font-size: 1.5rem !important;    /* 24px */ line-height: 1.2 !important; }
h2 { font-size: 1.25rem !important;   /* 20px */ line-height: 1.3 !important; }
h3 { font-size: 1.125rem !important;  /* 18px */ line-height: 1.3 !important; }
h4 { font-size: 1rem !important;      /* 16px */ line-height: 1.4 !important; }

/* Fix legacy MenuLink brand color mismatch (#781126 → #98002e) */
a.MenuLink:link,
a.CatMenuLink,
.ColumnHeadAlt,
.ColumnHeadAlt1 {
  color: #98002e !important;
}

/* -------------------------------
   2) Link styles + affordance
   ------------------------------- */
a { color: #98002e; }
a:hover,
a:focus-visible { color: #444444; }

/* Underlines in content areas (WCAG 1.4.1 affordance) */
.template-area a,
.content a,
.custom-landing a,
.container-cont a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 0.12em;
}

/* Visited color – darkened maroon, passes AA on white */
a:visited { color: #7a0e2e; }

a.SubCatMenuLink:visited {
  color: #7a0e2e !important;
}

/* -------------------------------
   3) Visible keyboard focus (WCAG 2.4.7)
   ------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 3px;
}

/* Fallback for older browsers */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid #ffbf00;
  outline-offset: 3px;
}

/* Bootstrap resets outline:0 on these elements – restore it */
.btn:focus,
.btn:focus-visible,
.nav > li > a:focus,
.nav > li > a:focus-visible,
.form-control:focus {
  outline: 3px solid #ffbf00 !important;
  outline-offset: 3px;
  box-shadow: none !important;
}

/* -------------------------------
   4) NAV BARS + FOOTER – full-bleed black
   Banner and header handled separately in Section 10.
   ------------------------------- */
.navigation,
.nav-main,
.nav-secondary,
.nav-last-viewed,
.prefooter,
.footer,
.branding-footer {
  background-color: #000000 !important;
  background-image: none !important;
  border-top-color: #000000 !important;
  border-bottom-color: #000000 !important;
}

/* Inner wrappers stay transparent */
.navigation-cont,
.prefooter-cont,
.footer-cont,
.branding-footer-cont {
  background: transparent !important;
}

/* Nav link colors on black */
.nav-user ul li a,
.nav-social-media ul li a,
.nav-main ul li a,
.nav-secondary ul li a {
  color: #ffffff !important;
  text-decoration: none;
}

.nav-user ul li a:hover,
.nav-main ul li a:hover,
.nav-secondary ul li a:hover {
  color: #dddddd !important;
}

/* Keyboard focus inside nav/footer */
.navigation a:focus-visible,
.nav-main a:focus-visible,
.nav-secondary a:focus-visible,
.prefooter a:focus-visible,
.footer a:focus-visible,
.branding-footer a:focus-visible {
  outline: 3px solid #ffbf00 !important;
  outline-offset: 3px;
  text-decoration: underline;
}

/* Nav-footer links: template #4c5359 on black = ~2.5:1, fails AA */
.nav-footer ul li a,
.nav-footer ul li a:visited {
  color: #ffffff !important;
  text-decoration: none;
}

.nav-footer ul li a:hover {
  color: #dddddd !important;
}

/* Prefooter links: template orange #fe7722 on black = ~3.1:1, fails AA */
.prefooter a,
.prefooter a:visited {
  color: #ffffff !important;
}

.prefooter a:hover {
  color: #dddddd !important;
}

/* Last Viewed strip */
.nav-last-viewed .list-info { color: #ffffff !important; }
.nav-last-viewed ul li a {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #222222 !important;
}

/* Back-to-Top button – white on charcoal, both mobile and desktop */
#back-top a.button-backtotop,
#back-top-mobile a.button-backtotop,
#back-top a.button-backtotop:link,
#back-top-mobile a.button-backtotop:link,
#back-top a.button-backtotop:visited,
#back-top-mobile a.button-backtotop:visited {
  background-color: #454545 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  text-decoration: none !important;
}

#back-top a.button-backtotop:hover,
#back-top-mobile a.button-backtotop:hover,
#back-top a.button-backtotop:focus,
#back-top-mobile a.button-backtotop:focus,
#back-top a.button-backtotop:focus-visible,
#back-top-mobile a.button-backtotop:focus-visible {
  background-color: #333333 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  text-decoration: none !important;
  outline: 3px solid #ffbf00 !important;
  outline-offset: 3px;
}

/* -------------------------------
   5) Header utility text sizing
   ------------------------------- */
.nav-account ul {
  font-size: 1rem !important;
  line-height: 1.4 !important;
}
.nav-account ul li,
.nav-account ul li a {
  font-size: inherit !important;
}

@media (max-width: 480px) {
  a.adv-search-link,
  .nav-account ul {
    font-size: 0.9375rem !important;
    line-height: 1.35 !important;
  }
}

/* -------------------------------
   6) Navigation font – Arial 16px normal weight
   ------------------------------- */
.nav-main ul,
.nav-main ul li,
.nav-main ul li a,
.nav-secondary ul,
.nav-secondary ul li,
.nav-secondary ul li a {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  text-rendering: optimizeLegibility !important;
}

ul.submenu li a,
ul.submenu-secondary li a {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: normal !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

/* -------------------------------
   7) Accordion – expand at desktop widths
   !important overrides display:none injected by platform JS
   ------------------------------- */
@media (min-width: 790px) {
  ul#main_accordion,
  ul#secondary_accordion {
    display: block !important;
  }
}

/* -------------------------------
   8) Class description images – prevent overflow
   ------------------------------- */
.class-description-cont img {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
  padding-right: 10px;
}

/* -------------------------------
   9) Logo – fixed heights per breakpoint
   ------------------------------- */
body .banner .client-logo img.banner-logo-image,
body .banner img.banner-logo-image,
body .banner .client-logo .banner-logo-image,
body img.banner-logo-image {
  max-height: none !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

body .banner .client-logo {
  width: auto !important;
  min-width: 220px;
  height: auto !important;
  line-height: normal !important;
  padding: 8px 12px !important;
}

@media (min-width: 1025px) {
  body .banner .client-logo img.banner-logo-image,
  body .banner img.banner-logo-image,
  body .banner .client-logo .banner-logo-image,
  body img.banner-logo-image {
    height: 92px !important;
    max-height: 92px !important;
  }
}

@media (max-width: 1024px) and (min-width: 601px) {
  body .banner .client-logo img.banner-logo-image,
  body .banner img.banner-logo-image,
  body .banner .client-logo .banner-logo-image,
  body img.banner-logo-image {
    height: 74px !important;
    max-height: 74px !important;
  }
}

@media (max-width: 600px) {
  body .banner .client-logo img.banner-logo-image,
  body .banner img.banner-logo-image,
  body .banner .client-logo .banner-logo-image,
  body img.banner-logo-image {
    height: 60px !important;
    max-height: 60px !important;
  }
}

@media (min-width: 601px) {
  .banner .block-search,
  .banner .nav-banner,
  .banner .nav-account {
    min-width: 0;
  }
}

/* Neutralize account bar border */
.nav-account,
.nav-account ul,
.nav-account-item .dropdown-menu {
  border-color: transparent !important;
}

/* Lists in content containers */
.template-area ul,
.template-area ol,
.content ul,
.content ol,
.container-cont ul,
.container-cont ol,
.custom-landing ul,
.custom-landing ol {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #000000;
  text-transform: none;
}

.template-area li,
.content li,
.container-cont li,
.custom-landing li {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 0 0.4em 0;
}

.template-area ul,
.content ul,
.container-cont ul,
.custom-landing ul {
  list-style-position: outside;
  padding-left: 1.25em;
}

.template-area ol,
.content ol,
.container-cont ol,
.custom-landing ol {
  list-style-position: outside;
  padding-left: 1.5em;
}

/* Navigation menu capitalization and wrapping */
.nav-main li a,
.nav-secondary li a,
ul.submenu li a,
ul.submenu-secondary li a {
  text-transform: capitalize;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  line-height: 1.3;
}

/* ---------------------------------------------------------------
   10) WHITE full-bleed header / banner
   Account bar (.nav-account) stays maroon.
   Banner row (logo + search) goes white.
   --------------------------------------------------------------- */
.banner,
.header,
.header-repeat {
  background-color: #ffffff !important;
  background-image: none !important;
  border-top-color: #e5e5e5 !important;
  border-bottom-color: #e5e5e5 !important;
}

.banner-cont,
.header-cont,
.container-cont {
  background: transparent !important;
}

/* Nav-banner links: dark on white, no gray pill background */
.banner .nav-banner ul li a {
  color: #000000 !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 3px 6px !important;
}

.banner .nav-banner ul li a:hover {
  color: #98002e !important;
}

/* Advanced Search link */
a.adv-search-link,
a.adv-search-link:link,
a.adv-search-link:visited {
  color: #000000 !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

a.adv-search-link:hover,
a.adv-search-link:focus,
a.adv-search-link:focus-visible {
  color: #98002e !important;
  text-decoration: underline !important;
}

/* Account/login bar: maroon strip */
.nav-account {
  background-color: #98002e !important;
  background-image: none !important;
  border-top-color: #98002e !important;
  border-bottom-color: #98002e !important;
}

/* Replace Cabin font with Arial and improve link spacing */
.nav-account ul {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  padding: 4px 6px 4px 0 !important;
}

.nav-account ul li {
  padding: 2px 6px !important;
}

.nav-account ul li a,
.nav-account ul li a:visited,
a.nav-account-link,
a.nav-account-link:link,
a.nav-account-link:visited {
  color: #ffffff !important;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
}

.nav-account ul li a:hover,
a.nav-account-link:hover {
  color: #f0c0c0 !important;
}

/* Focus in banner: maroon outline on white */
.banner a:focus-visible,
.header a:focus-visible {
  outline: 3px solid #98002e !important;
  outline-offset: 3px;
}

/* Focus in account bar: gold on maroon */
.nav-account a:focus-visible {
  outline: 3px solid #ffbf00 !important;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   11) Minimum 44px touch targets on mobile (WCAG 2.5.5)
   Padding approach avoids disrupting nav font rendering and
   accordion JS behavior.
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  .nav-main ul li a,
  .nav-secondary ul li a,
  ul.submenu li a,
  ul.submenu-secondary li a {
    min-height: 44px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-sizing: border-box;
  }

  .btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-sizing: border-box;
  }
}

/* ---------------------------------------------------------------
   12) Error/warning text contrast (WCAG 1.4.3)
   Pure red #ff0000 on white = ~4:1, fails AA at normal text sizes.
   Darkened red #c0000c = ~5.9:1, passes AA at all sizes.
   --------------------------------------------------------------- */
.TextBoldAndRed,
.errorText,
.draftstyle,
span.reqstar {
  color: #c0000c !important;
}

/* ---------------------------------------------------------------
   13) ActionLink contrast fixes (WCAG 1.4.3)
   --------------------------------------------------------------- */

/* #999999 on white = ~2.85:1, fails AA. #767676 = ~4.54:1, passes. */
.Underline {
  color: #767676 !important;
}

/* Base a.ActionLink – platform uses this for Edit, Multiple, and other
   inline links. White (#ffffff) at 1.02:1 is invisible on white/light bg.
   Body-scoped to beat "color: inherit" from parent elements. */
body a.ActionLink,
body a.ActionLink:link {
  color: #98002e !important;
  text-decoration: underline !important;
}

body a.ActionLink:visited {
  color: #767676 !important;
}

body a.ActionLink:hover,
body a.ActionLink:focus,
body a.ActionLink:focus-visible {
  color: #000000 !important;
  text-decoration: underline !important;
}

/* a.classLink – used for class name links in schedule info tables.
   White (#ffffff) at 1.02:1 is invisible on light backgrounds. */
body a.classLink,
body a.classLink:link,
.classinfo-container a.classLink,
.certificateinfo-container a.classLink {
  color: #98002e !important;
  text-decoration: underline !important;
}

body a.classLink:visited,
.classinfo-container a.classLink:visited {
  color: #767676 !important;
}

body a.classLink:hover,
body a.classLink:focus,
.classinfo-container a.classLink:hover,
.classinfo-container a.classLink:focus {
  color: #000000 !important;
  text-decoration: underline !important;
}

/* a.ActionLink.focus – platform uses .focus as a CSS class on active
   registration buttons (not a pseudo-state) */
a.ActionLink.focus,
a.ActionLink.focus:link,
a.ActionLink.focus:visited {
  color: #000000 !important;
  text-decoration: underline !important;
}

a.ActionLink.focus:hover,
a.ActionLink.focus:focus,
a.ActionLink.focus:focus-visible {
  color: #98002e !important;
  text-decoration: underline !important;
}

/* ActionLink inside classinfo/certificateinfo containers – the template's
   unscoped "a { color: inherit }" pulls white from parent elements and
   beats the body-scoped rule above. Extra specificity needed here. */
.classinfo-container a.ActionLink,
.classinfo-container a.ActionLink:link,
.certificateinfo-container a.ActionLink,
.certificateinfo-container a.ActionLink:link {
  color: #98002e !important;
  text-decoration: underline !important;
}

.classinfo-container a.ActionLink:visited,
.certificateinfo-container a.ActionLink:visited {
  color: #767676 !important;
}

.classinfo-container a.ActionLink:hover,
.classinfo-container a.ActionLink:focus,
.certificateinfo-container a.ActionLink:hover,
.certificateinfo-container a.ActionLink:focus {
  color: #000000 !important;
  text-decoration: underline !important;
}

/* Bootstrap popover – prevent off-screen positioning on small viewports.
   Z-index set within Bootstrap's normal range, above the modal (1050)
   so instructor list popover appears correctly. */
.popover {
  max-width: 276px !important;
  overflow-wrap: break-word !important;
  z-index: 1060 !important;
}

.popover.bottom {
  left: auto !important;
  right: auto !important;
}

@media (max-width: 600px) {
  .popover {
    max-width: 200px !important;
    font-size: 0.875rem !important;
  }
}

/* ---------------------------------------------------------------
   14) Course page (main_course.css) fixes
   --------------------------------------------------------------- */

/* Hover going lighter on course card links – wrong contrast direction */
.course-body .course ul li a:hover,
.course-body .course ul li a:focus {
  color: #ffe8d6 !important;
  text-decoration: underline !important;
}

/* Filter button focus: outline:none removed keyboard indicator */
.course-body .filter-button:focus,
.course-body .filter-button:focus-visible {
  outline: 3px solid #ffbf00 !important;
  outline-offset: 3px;
  background-color: #f5f5f5;
}

/* Line-height 18px on 16px text = 1.125, below WCAG 1.4.12 minimum */
.template-area .course-body a,
.template-area .course-body p,
.template-area .course-body li {
  line-height: 1.5 !important;
}

/* Replace deprecated word-break: break-word */
.course-body .course {
  word-break: normal;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------
   15) Class info page (main_class_info.css) fixes
   NOTE: Background color override for .classinfo-container was removed
   because it interfered with #PopUpModal positioning JS. The blue-gray
   #AFC1CC background is retained to preserve the working instructor
   biography modal.
   --------------------------------------------------------------- */

/* .header-style bar: semi-transparent pink on blue-gray = purple/mauve.
   Replace with neutral light gray. */
.header-style {
  background-color: #e8e8e8 !important;
  color: #000000 !important;
  padding: 10px;
}

/* Action links (Add to Cart, Send to Friend, Checkout) were white (#ffffff)
   at 1:1 contrast. Black passes ~7.5:1 on the blue-gray background. */
a.button.add-to-cart,
a.button.add-to-cart:link,
a.button.add-to-cart:visited,
a.button.other-cart-links,
a.button.other-cart-links:link,
a.button.other-cart-links:visited,
a.button.checkout-cart,
a.button.checkout-cart:link,
a.button.checkout-cart:visited,
.add-to-cart a,
.checkout-cart a,
.other-cart-links a,
.class-actions a.button,
.class-actions a.button:link,
.class-actions a.button:visited {
  color: #000000 !important;
  text-decoration: underline !important;
  background: transparent !important;
}

a.button.add-to-cart:hover,
a.button.add-to-cart:focus,
a.button.other-cart-links:hover,
a.button.other-cart-links:focus,
a.button.checkout-cart:hover,
a.button.checkout-cart:focus,
.class-actions a.button:hover,
.class-actions a.button:focus {
  color: #333333 !important;
  text-decoration: underline !important;
}

/* Unscoped "a { color: inherit }" in template resets all link colors.
   Re-assert maroon for general content links in classinfo containers. */
.classinfo-container a,
.certificateinfo-container a {
  color: #98002e;
}

/* Elements on dark/semi-transparent backgrounds keep white text */
.class-details a,
.class-details a:visited,
.sch-info a,
.classinfo-container .interested-in ul li a,
.classinfo-container h1 a,
.classinfo-container h2 a,
.classinfo-container h3 a,
.classinfo-container h4 a,
.color-white a {
  color: #ffffff !important;
}

/* Hover on dark background elements – lighter is wrong direction */
.class a:hover,
.class a:focus,
.class-details a:hover,
.class-details a:focus,
.sch-info a:hover,
.sch-info a:focus {
  color: #ffe8d6 !important;
  text-decoration: underline !important;
}

/* .container a:hover #ddd is too broad – scope and improve contrast */
.classinfo-container .container a:hover,
.certificateinfo-container .container a:hover {
  color: #444444 !important;
  text-decoration: underline !important;
}

/* Featured classes link #205C70 is marginal (~4.6:1). Darken to ~5.8:1. */
.classinfo-container .featured-classes ul li a {
  color: #174a5c !important;
}

/* Media query typo fix: "min-wdith" in template means class-options never
   shows on desktop. Correct spelling here overrides the broken rule. */
@media screen and (min-width: 601px) {
  .class-hide ~ .class-options {
    display: block !important;
  }
}

/* ---------------------------------------------------------------
   16) Class listing page (main_class.css) fixes
   --------------------------------------------------------------- */

/* Remove blue-gray #AFC1CC background – white lets global maroon
   link colors work correctly throughout. */
.class-container,
body .class-container,
.container-cont .class-container,
.content .class-container {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Strengthen card shadow so cards are visible on white background */
div.col.col-1-of-3.class,
div.col.col-1-of-2.class,
div.col.col-1-of-1.class,
.class-container .class {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
}

/* Heading contrast: h2 #bf750a / h3 #e8a635 / h4 #3d88a5 all fail on
   blue-gray bg. Scoped to container level only, not card content. */
.class-container > h2,
.class-container > .element-shell > h2,
.class-container > .extended-shell > h2 {
  color: #5a3700 !important;
}

.class-container > h3,
.class-container > .element-shell > h3,
.class-container > .extended-shell > h3 {
  color: #5a3a00 !important;
}

.class-container > h4,
.class-container > .element-shell > h4,
.class-container > .extended-shell > h4 {
  color: #1a4a5c !important;
}

/* Class card h4 elements should be black */
.class-container .class h4,
.class-container .class .col-info h4,
.class-container .class .col-date h4,
.class-container .class .col-fee h4,
h4.ls,
h4.ls-capacity {
  color: #000000 !important;
}

/* Featured classes link #205C70 marginal (~4.6:1). Darken to ~5.8:1. */
.class-container .featured-classes ul li a {
  color: #174a5c !important;
}

/* col-action hover #ccc on white = 1.6:1, fails AA */
.col-action a:hover,
.col-action a:focus {
  color: #444444 !important;
  text-decoration: underline !important;
}

/* content-nav, interested-in, featured-classes, pagination links were
   white for blue-gray bg. Container now white – set to maroon. */
.content-nav ul li a,
.content-nav ul li a:visited,
.interested-in ul li a,
.interested-in ul li a:visited,
.featured-classes ul li a,
.featured-classes ul li a:visited,
.pagination-template.page-arrows ul li a {
  color: #98002e !important;
  text-decoration: underline !important;
}

.content-nav ul li a:hover,
.content-nav ul li a:focus,
.interested-in ul li a:hover,
.interested-in ul li a:focus,
.featured-classes ul li a:hover,
.featured-classes ul li a:focus {
  color: #444444 !important;
}

/* Line-height 1.125 on course template text – below WCAG 1.4.12 */
.class-container .template-area a,
.class-container .template-area p,
.class-container .template-area li {
  line-height: 1.5 !important;
}

/* Replace deprecated word-wrap: break-word */
.class-container .class {
  word-wrap: normal;
  overflow-wrap: break-word;
}

/* cart-action font-size is 12px – lift to 14px minimum.
   Primary CTAs: Add to Cart, Waiting List, Call to Register. */
.cart-action a,
.cart-action span,
.cart-action .btn-link,
.cart-action input {
  font-size: 0.875rem !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1.5 !important;
}

/* If a page-level wrapper constrains the banner to less than full width,
   uncomment and adjust the class name to match your template's wrapper: */
/*
.page-wrapper,
.site-wrapper {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
*/