/* ==========================================================
   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 !important;
  line-height: 1.5 !important;
}

/* NOTE: The TD rule lifts 12px base text to 14px for legibility (WCAG 1.4.4).
   Platform table column widths are fixed by the template — if specific tables
   break, target those tables with a scoped font-size reset rather than
   removing TD from this rule entirely. */

/* Flexible schedule table (class record edit page) — columns are fixed-width
   and sized for 12px text. Reset TD and select to 12px to restore layout.
   This table is an admin/staff editing tool, not public-facing content. */
table#flexibleScheduleTable td,
table#flexibleScheduleTable select,
table#flexibleScheduleTable input {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* FormLabelLeft – labels like "A/R Account Balance:" should be normal weight
   to reduce visual heaviness; values remain bold via ListTextLT.TextBold */
td.FormLabelLeft {
  font-weight: normal !important;
}

/* Prevent "Current Electronic Voucher Balance:" (td.TextBold) from wrapping
   in the account summary table – scoped to avoid affecting other tables.
   Note: both label and value use td.TextBold in this table, so font-weight
   cannot be selectively changed without a template-level class change. */
table.borderless.bordercollapse td.TextBold {
  white-space: nowrap !important;
}

/* Form inputs: font lifted from 11px causes overflow in narrow fields.
   Set to 14px minimum and ensure fields use full available width.
   Width/box-sizing scoped to input only — applying width:100% to select
   elements causes text to overlap the native dropdown arrow. */
.FormInput,
.FormInputDate,
input.FormInput,
input.FormInputDate {
  font-size: 0.875rem !important;  /* 14px – WCAG minimum */
  line-height: 1.4 !important;
}

input.FormInput,
input.FormInputDate {
  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.
   Font-family overrides cabinsemibold set in main.css h1-h6 font shorthand. */
h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, sans-serif !important;
}
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;
}

/* Nav-account dropdown (LOGOUT / SWITCH TO MY PROFILE menu)
   Bootstrap default min-width:160px clips longer items like "SWITCH TO MY
   PROFILE" — white text becomes invisible once it extends past the maroon bg.
   min-content ensures the dropdown is always wide enough for its longest item. */
.nav-account-item .dropdown-menu {
  min-width: max-content !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-family: Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-transform: capitalize !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 14px !important;
}

/* Pipe separator between nav-account items (VIEW CART, HELP, etc.)
   Items are all-caps with no underline — the separator both separates them
   visually and reinforces that they are distinct interactive elements.
   Uses ::before on every li except the first to avoid affecting dropdowns.
   Both :first-child and :last-child variants handle float:right DOM reversal
   where the platform may render items in reverse visual order. */
.nav-account ul > li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.5) !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 – NIC link style: black text, maroon underline,
   maroon on hover. Body-scoped to beat "color: inherit" from parent elements. */
body a.ActionLink,
body a.ActionLink:link {
  color: #000000 !important;
  text-decoration: underline !important;
  text-decoration-color: #98002e !important;
  text-underline-offset: 0.25em !important;
  text-decoration-thickness: 1px !important;
  font-size: 0.875rem !important;  /* 14px – WCAG minimum */
}

body a.ActionLink:visited {
  color: #000000 !important;
  text-decoration-color: #7a0e2e !important;
}

body a.ActionLink:hover,
body a.ActionLink:focus,
body a.ActionLink:focus-visible {
  color: #98002e !important;
  text-decoration: underline !important;
  text-decoration-color: #98002e !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: #000000 !important;
  text-decoration: underline !important;
  text-decoration-color: #98002e !important;
  text-underline-offset: 0.25em !important;
  text-decoration-thickness: 1px !important;
}

body a.classLink:visited,
.classinfo-container a.classLink:visited {
  color: #000000 !important;
  text-decoration-color: #7a0e2e !important;
}

body a.classLink:hover,
body a.classLink:focus,
.classinfo-container a.classLink:hover,
.classinfo-container a.classLink:focus {
  color: #98002e !important;
  text-decoration: underline !important;
  text-decoration-color: #98002e !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: #000000 !important;
  text-decoration: underline !important;
  text-decoration-color: #98002e !important;
  text-underline-offset: 0.25em !important;
  text-decoration-thickness: 1px !important;
  font-size: 0.875rem !important;  /* 14px – WCAG minimum */
}

.classinfo-container a.ActionLink:visited,
.certificateinfo-container a.ActionLink:visited {
  color: #000000 !important;
  text-decoration-color: #7a0e2e !important;
}

.classinfo-container a.ActionLink:hover,
.classinfo-container a.ActionLink:focus,
.certificateinfo-container a.ActionLink:hover,
.certificateinfo-container a.ActionLink:focus {
  color: #98002e !important;
  text-decoration: underline !important;
  text-decoration-color: #98002e !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 {
  color: #98002e !important;
  text-decoration: underline !important;
}

/* Pagination arrows — dark gray background with white text at rest.
   main_class.css hardcodes these colors; Site Configuration cannot change them.
   Hover overrides the #517281 slate to maroon, matching the NIC button
   hover convention. White text maintained on both states (8.84:1 on maroon,
   7.01:1 on #58595b). The .pagination-template.page-arrows ul li a rule
   above was incorrectly setting these to maroon, making them unreadable
   on the dark background — corrected here with higher specificity. */
.arrow-left,
.arrow-right {
  background: #58595b !important;
}

.arrow-left a,
.arrow-right a,
.arrow-left a:visited,
.arrow-right a:visited,
ul.pagination-template li.arrow-left a,
ul.pagination-template li.arrow-right a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.arrow-left:hover,
.arrow-right:hover {
  background: #7a0e2e !important;
}

.arrow-left a:hover,
.arrow-left a:focus,
.arrow-right a:hover,
.arrow-right a:focus {
  color: #ffffff !important;
  text-decoration: none !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;
}
*/


/* ---------------------------------------------------------------
   ADDITIONS FROM 2026-03-18 UPDATE
   --------------------------------------------------------------- */

/* ===============================================================
   PART 2 – WCAG / BRAND CUSTOMIZATIONS
   (These rules follow base styles to ensure correct cascade)
   =============================================================== */

/* -----------------------------------------------
   CLASS LISTING cart action links
   These are plain <a> tags inside .class-container .cart-action
   e.g. a#class_121181 — no .button class
   NIC button style: white bg, maroon border, black text, maroon on hover
   ----------------------------------------------- */
.class-container .cart-action a:not(a#inCartText) {
  color: #000000 !important;
  background: #ffffff !important;
  text-decoration: none !important;
  padding: 4px 10px !important;
  border: 1px solid #98002e !important;
  display: inline-block;
  font-size: 0.875rem !important;
}

.class-container .cart-action a:not(a#inCartText):hover,
.class-container .cart-action a:not(a#inCartText):focus {
  color: #ffffff !important;
  background: #98002e !important;
  border-color: #98002e !important;
  text-decoration: none !important;
}

/* span.fr holds the » arrow glyph and has its own color:#000000 that blocks
   inheritance from the parent anchor on hover — target it explicitly. */
.class-container .cart-action a:not(a#inCartText):hover span.fr,
.class-container .cart-action a:not(a#inCartText):focus span.fr {
  color: #ffffff !important;
}

/* -----------------------------------------------
   CLASS INFO PAGE cart action buttons
   These are a.button.add-to-cart, a.button.checkout-cart etc.
   Platform controls font-size (30px) and layout — we only fix
   color and text-decoration, leaving size/padding to platform.
   ----------------------------------------------- */
.classinfo-container a.button.add-to-cart,
.classinfo-container a.button.add-to-cart:link,
.classinfo-container a.button.add-to-cart:visited,
.classinfo-container a.button.checkout-cart,
.classinfo-container a.button.checkout-cart:link,
.classinfo-container a.button.checkout-cart:visited,
.classinfo-container a.button.other-cart-links,
.classinfo-container a.button.other-cart-links:link,
.classinfo-container a.button.other-cart-links:visited {
  color: #000000 !important;
  text-decoration: none !important;
  background: transparent !important;
}

.classinfo-container a.button.add-to-cart:hover,
.classinfo-container a.button.add-to-cart:focus,
.classinfo-container a.button.checkout-cart:hover,
.classinfo-container a.button.checkout-cart:focus,
.classinfo-container a.button.other-cart-links:hover,
.classinfo-container a.button.other-cart-links:focus {
  color: #7a0e2e !important;
  text-decoration: underline !important;
}

/* Unscoped "a { color: inherit }" in template resets all link colors.
   Re-assert NIC link style: black text, maroon underline, maroon on hover. */
.classinfo-container a,
.certificateinfo-container a {
  color: #000000;
  text-decoration: underline;
  text-decoration-color: #98002e;
  text-underline-offset: 0.25em;
}

.classinfo-container a:hover,
.classinfo-container a:focus,
.certificateinfo-container a:hover,
.certificateinfo-container a:focus {
  color: #98002e;
  text-decoration-color: #98002e;
}

.classinfo-container a:visited,
.certificateinfo-container a:visited {
  color: #000000;
  text-decoration-color: #7a0e2e;
}

/* 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 – white text on hover
   since these links sit on the dark blue-gray schedule/details background */
.class-details a:hover,
.class-details a:focus,
.sch-info a:hover,
.sch-info a:focus {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Class name links in listing – maroon text, maroon underline.
   Underline satisfies WCAG 1.4.1 link affordance requirement.
   Maroon color maintained for visual prominence as class titles. */
.class-container .class h2 a,
.class-container .class h3 a,
.class-container .class h3 a:link,
.class-container .class h3 a:visited,
.class-container .section.group h2 a,
.class-container .class-group h2 a {
  color: #98002e !important;
  text-decoration: underline !important;
  text-decoration-color: #98002e !important;
  text-underline-offset: 0.25em !important;
  text-decoration-thickness: 1px !important;
}

/* Hover — slightly darker maroon */
.class-container .class h2 a:hover,
.class-container .class h3 a:hover,
.class-container .section.group h2 a:hover,
.class-container .class h3 a:focus {
  color: #7a0e2e !important;
  text-decoration: underline !important;
  text-decoration-color: #7a0e2e !important;
}

/* Focus — standard yellow outline consistent with site-wide focus style */
.class-container .class h2 a:focus-visible,
.class-container .class h3 a:focus-visible,
.class-container .section.group h2 a:focus-visible {
  outline: 3px solid #ffbf00 !important;
  outline-offset: 3px !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;
  }
}

/* -------------------------------
   Session timeout popup fix
   div#openPopUpDiv has a fixed height that clips content.
   Allow it to size to its content instead.
   ------------------------------- */
div#openPopUpDiv.regular {
  height: auto !important;
  min-height: 316px;
  overflow: visible !important;
}

div#openPopUpDiv.regular div.container {
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 20px !important;
}

/* -------------------------------
   Accordion header padding fix
   section-head-expanded/collapsed have uneven padding (5px top, 2px bottom)
   causing text to sit at the bottom edge. Balance to center vertically.
   ------------------------------- */
div.section-head-expanded,
div.section-head-collapsed {
  padding: 4px 5px !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
}

/* -------------------------------
   Tab styles – corrected based on actual markup inspection
   Active tab uses class="active" on the li (Bootstrap convention)
   Inactive tabs have no class on the li
   Strip: ul.nav.nav-tabs.width-100.ui-tabs-nav.ui-corner-all
   Container: div#tabs.ui-tabs.ui-corner-all.ui-widget
   ------------------------------- */

/* Tab strip — white background, remove gray, remove rounded corners,
   maroon bottom border ties the strip to the content */
ul.nav-tabs,
ul.ui-tabs-nav {
  background: #ffffff !important;
  background-image: none !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 2px solid #98002e !important;
  padding-left: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Tab outer container — remove rounded corners, add maroon border */
div.ui-tabs,
div#tabs {
  border-radius: 0 !important;
  border: 1px solid #98002e !important;
}

/* Inactive tab li — white background, maroon border on top/sides,
   no bottom border so it sits flush on the strip border */
ul.nav-tabs > li,
ul.ui-tabs-nav > li {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #98002e !important;
  border-bottom: 1px solid #ffffff !important;
  border-radius: 0 !important;
  margin-bottom: -1px !important;
}

/* Active tab li — maroon fill, white bottom to merge with content */
ul.nav-tabs > li.active,
ul.ui-tabs-nav > li.active {
  background: #98002e !important;
  background-image: none !important;
  border: 1px solid #98002e !important;
  border-bottom: 1px solid #98002e !important;
  border-radius: 0 !important;
  margin-bottom: -1px !important;
}

/* Inactive tab link — black text, no underline, lighter weight */
ul.nav-tabs > li > a,
ul.ui-tabs-nav > li > a,
a.nav_padding {
  color: #000000 !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: normal !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  border: none !important;
}

/* Active tab link — white text */
ul.nav-tabs > li.active > a,
ul.nav-tabs > li.active > a:hover,
ul.nav-tabs > li.active > a:focus,
ul.ui-tabs-nav > li.active > a,
ul.ui-tabs-nav > li.active > a:hover,
ul.ui-tabs-nav > li.active > a:focus,
li.active a.nav_padding {
  color: #ffffff !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* Hover on inactive tab — same as active: maroon fill, white text */
ul.nav-tabs > li:not(.active):hover,
ul.ui-tabs-nav > li:not(.active):hover {
  background: #98002e !important;
  background-image: none !important;
  border-color: #98002e !important;
}

ul.nav-tabs > li:not(.active) > a:hover,
ul.nav-tabs > li:not(.active) > a:focus,
ul.ui-tabs-nav > li:not(.active) > a:hover,
ul.ui-tabs-nav > li:not(.active) > a:focus {
  color: #ffffff !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* Remove underline from all tab links in all states */
ul.nav-tabs a,
ul.ui-tabs-nav a,
a.nav_padding,
a.nav_padding:hover,
a.nav_padding:focus,
a.nav_padding:visited,
a.nav_padding:active {
  text-decoration: none !important;
}

/* -------------------------------
   jQuery UI tabs – student profile editor
   Different markup from account tabs: uses ul.ui-tabs-nav.ui-widget-header
   Active li has classes: ui-tabs-active ui-state-active
   Inactive li has: ui-state-default
   ------------------------------- */

/* Strip */
ul.ui-tabs-nav.ui-widget-header {
  background: #ffffff !important;
  background-image: none !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 2px solid #98002e !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Inactive tab */
ul.ui-tabs-nav li.ui-state-default {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #98002e !important;
  border-bottom: 1px solid #ffffff !important;
  border-radius: 0 !important;
  margin-bottom: -1px !important;
}

/* Active tab */
ul.ui-tabs-nav li.ui-tabs-active,
ul.ui-tabs-nav li.ui-state-active {
  background: #98002e !important;
  background-image: none !important;
  border: 1px solid #98002e !important;
  border-bottom: 1px solid #98002e !important;
  border-radius: 0 !important;
  margin-bottom: -1px !important;
}

/* Inactive tab link */
ul.ui-tabs-nav li.ui-state-default a,
ul.ui-tabs-nav li.ui-state-default a:visited {
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: normal !important;
  text-decoration: none !important;
}

/* Active tab link */
ul.ui-tabs-nav li.ui-tabs-active a,
ul.ui-tabs-nav li.ui-state-active a,
ul.ui-tabs-nav li.ui-tabs-active a:visited,
ul.ui-tabs-nav li.ui-state-active a:visited {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: normal !important;
  text-decoration: none !important;
}

/* Hover on inactive — maroon fill, white text */
ul.ui-tabs-nav li.ui-state-default:hover {
  background: #98002e !important;
  background-image: none !important;
  border-color: #98002e !important;
}

ul.ui-tabs-nav li.ui-state-default a:hover,
ul.ui-tabs-nav li.ui-state-default a:focus {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* -------------------------------
   Bootstrap nav-pills (Site Configuration admin tabs)
   ul#myTab.nav.nav-pills.nav-justified
   Active li has class="active", inactive has no class
   Links use a.nav_padding
   ------------------------------- */

/* Pill strip */
ul.nav-pills {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 2px solid #98002e !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Inactive pill */
ul.nav-pills > li {
  background: #ffffff !important;
  background-image: none !important;
  vertical-align: bottom !important;
}

ul.nav-pills > li > a,
ul.nav-pills > li > a.nav_padding {
  color: #000000 !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #98002e !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: normal !important;
  text-decoration: none !important;
  display: block !important;
  text-align: center !important;
}

/* Active pill */
ul.nav-pills > li.active > a,
ul.nav-pills > li.active > a.nav_padding,
ul.nav-pills > li.active > a:hover,
ul.nav-pills > li.active > a:focus {
  color: #ffffff !important;
  background: #98002e !important;
  background-image: none !important;
  border-color: #98002e !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}

/* Hover on inactive pill */
ul.nav-pills > li:not(.active) > a:hover,
ul.nav-pills > li:not(.active) > a:focus,
ul.nav-pills > li:not(.active) > a.nav_padding:hover,
ul.nav-pills > li:not(.active) > a.nav_padding:focus {
  color: #ffffff !important;
  background: #98002e !important;
  background-image: none !important;
  border-color: #98002e !important;
  text-decoration: none !important;
}

/* -------------------------------
   SubCatMenuLink override
   course-body ul li a rule was winning over SubCatMenuLink styles.
   Re-assert NIC link style with higher specificity.
   ------------------------------- */
a.SubCatMenuLink,
a.SubCatMenuLink:link {
  color: #000000 !important;
  text-decoration: underline !important;
  text-decoration-color: #98002e !important;
  text-underline-offset: 0.25em !important;
  text-decoration-thickness: 1px !important;
}

a.SubCatMenuLink:visited {
  color: #000000 !important;
  text-decoration-color: #7a0e2e !important;
}

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

/* -------------------------------
   classinfo H2 color fix
   Only H2s inside section-head divs (maroon bg) get white text.
   Other classinfo H2s (Schedule Info, Other Offerings) get standard
   dark heading color since they sit on white/light backgrounds.
   ------------------------------- */
div.section-head-expanded h2,
div.section-head-collapsed h2,
div.ColumnHead h2,
.classinfo-container .table .ColumnHead h2,
.classinfo-container h2.section-head {
  color: #ffffff !important;
}

/* Standard classinfo H2s on light backgrounds */
.classinfo-container h2 {
  color: #000000;
}

/* -------------------------------
   In Cart h5 label fix
   Platform uses h5 as the "In Cart" status label inside cart-action.
   Override heading styles so it matches the button context.
   ------------------------------- */
.cart-action h5,
.classinfo-container .cart-action h5,
h5.notification,
a#inCartText h5,
a.button.add-to-cart h5 {
  font-size: 1.125rem !important;   /* 18px – slightly smaller than 20px neighbors */
  font-weight: normal !important;
  font-family: Arial, Helvetica, sans-serif !important;
  color: #000000 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* -------------------------------
   In Cart anchor behavior fix
   The platform keeps the <a> tag active even when showing "In Cart"
   state, causing cursor:pointer, underline, and focus ring to appear
   on what should read as a static status indicator.
   ------------------------------- */
a#inCartText,
a#inCartText:link,
a#inCartText:visited,
a#inCartText:hover,
a#inCartText:focus,
a#inCartText:focus-visible {
  cursor: default !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* -------------------------------
   Forced colors / high contrast mode (Windows)
   Ensures focus outlines remain visible when OS overrides colors.
   ------------------------------- */
@media (forced-colors: active) {
  :focus {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px;
  }
  a {
    text-decoration-thickness: auto;
  }
}

/* -------------------------------
   Reduced motion safety net
   Scoped to non-essential transitions only — preserves focus
   ring transitions which are part of keyboard accessibility.
   ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *:not(:focus):not(:focus-visible) {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}

/* Cart action buttons on class LISTING page only.
   Targeted via div.cart-action.section container to avoid
   affecting class info page buttons (30px platform style, leave alone).
   NIC button style: white bg, maroon border, black text, maroon on hover. */
.class-container div.cart-action.section a,
.class-container div.cart-action.section a:link,
.class-container div.cart-action.section a:visited,
.course-body div.cart-action.section a,
.course-body div.cart-action.section a:link,
.course-body div.cart-action.section a:visited {
  color: #000000 !important;
  background: #ffffff !important;
  text-decoration: none !important;
  padding: 6px 12px !important;
  border: 1px solid #98002e !important;
  display: inline-block;
  font-size: 0.875rem !important;
}

/* Hover — maroon fill, white text */
.class-container div.cart-action.section a:hover,
.class-container div.cart-action.section a:focus,
.course-body div.cart-action.section a:hover,
.course-body div.cart-action.section a:focus {
  color: #ffffff !important;
  background: #98002e !important;
  border-color: #98002e !important;
  text-decoration: none !important;
}

/* span.fr holds the » arrow glyph and has its own color:#000000 that blocks
   inheritance from the parent anchor on hover — target it explicitly. */
.class-container div.cart-action.section a:hover span.fr,
.class-container div.cart-action.section a:focus span.fr,
.course-body div.cart-action.section a:hover span.fr,
.course-body div.cart-action.section a:focus span.fr {
  color: #ffffff !important;
}

/* Hover on course card links – darken to maroon to match NIC link style */
.course-body .course ul li a:hover,
.course-body .course ul li a:focus {
  color: #98002e !important;
  text-decoration: underline !important;
}

/* -------------------------------
   Shopping cart — "clear your cart ×" link
   Sits in div.cart-heading inside div.nav-account. The nav-account rules
   set white text and no-underline on all .nav-account a elements, which
   overrides the link style. Higher specificity needed to beat those rules.
   The cart dropdown renders on a white background despite being in nav-account.
   ------------------------------- */
.nav-account .cart-heading a,
.nav-account .cart-heading a:link,
.nav-account .cart-heading a:visited {
  font-size: 0.875rem !important;
  font-family: Arial, Helvetica, sans-serif !important;
  color: #000000 !important;
  text-decoration: underline !important;
  text-decoration-color: #98002e !important;
  text-underline-offset: 0.25em !important;
}

.nav-account .cart-heading a:hover,
.nav-account .cart-heading a:focus {
  color: #98002e !important;
  text-decoration: underline !important;
}

/* -------------------------------
   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.show,
#PopUpModal.modal.fade.in {
  display: block !important;
}

/* Filter button – NIC button style on course listing page */
.course-body .filter-button {
  color: #000000;
  background-color: #ffffff;
  border: 1px solid #98002e;
}

.course-body .filter-button:hover {
  background-color: #98002e !important;
  color: #ffffff !important;
  border-color: #98002e !important;
}

.course-body .filter-button.active {
  background-color: #98002e !important;
  color: #ffffff !important;
  border-color: #98002e !important;
}

/* -------------------------------
   Plain link underline in table/popover contexts
   Plain <a> elements in data tables get our content area underline
   styles which feel heavy against plain table text. Use browser-default
   thickness so they match the visual weight of surrounding content.
   ------------------------------- */
td a:not(.ActionLink):not(.classLink):not(.nav_padding),
th a:not(.ActionLink):not(.classLink),
.popover-content a:not(.ActionLink),
.popover a:not(.ActionLink),
table a:not(.ActionLink):not(.classLink) {
  text-decoration-thickness: auto !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 0.25em !important;
}

/* -------------------------------
   NIC brand link style
   Black text with maroon underline, maroon on hover.
   Reduces maroon overload while keeping brand identity in the underline.
   ------------------------------- */
a { color: #000000; }
a:hover,
a:focus-visible { color: #98002e; }

/* Underlines – global maroon underline on all links (WCAG 1.4.1 affordance).
   Buttons, nav links, and tab links are exempt since shape/border/background
   already provides the interactive affordance without needing an underline.
   Scoped containers below reinforce with !important where needed. */
a {
  text-decoration: underline;
  text-decoration-color: #98002e;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

/* Links inside headings need explicit underline since heading context
   can suppress inherited decoration styles */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link {
  text-decoration: underline !important;
  text-decoration-color: #98002e !important;
  text-underline-offset: 0.25em !important;
  text-decoration-thickness: 1px !important;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: #98002e !important;
  text-decoration-color: #98002e !important;
}

h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
  text-decoration-color: #7a0e2e !important;
}

/* No underline on button-styled links, nav links, or tabs */
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:visited,
a.button,
a.button:hover,
a.button:focus,
a.button:visited,
.nav a,
.nav > li > a,
.nav-main a,
.nav-secondary a,
.nav-account a,
.nav-prefooter a,
.nav-last-viewed a,
ul.nav-tabs a,
ul.nav-pills a,
ul.ui-tabs-nav a,
a.nav_padding,
a.nav-submenu-link,
ul.submenu a,
ul.submenu-secondary a,
a.ActionLink.focus,
a.NextPrevActionLink {
  text-decoration: none !important;
}

/* Subcategory nav links — underline on hover as interim WCAG 1.4.1 mitigation.
   At rest, subcategory links have no non-color indicator distinguishing them
   as links. Underline on hover provides partial affordance for mouse users.
   Full remediation (non-color indicator at rest) is planned for the CSS rebuild.
   Underline color matches the white text so it's visible on the black nav bg. */
a.nav-submenu-link:hover,
a.nav-submenu-link:focus,
ul.submenu li a:hover,
ul.submenu li a:focus,
ul.submenu-secondary li a:hover,
ul.submenu-secondary li a:focus {
  text-decoration: underline !important;
  text-decoration-color: #ffffff !important;
  text-underline-offset: 0.25em !important;
}

/* Reinforce in specific content containers */
.template-area a,
.content a,
.custom-landing a,
.container-cont a {
  text-decoration: underline;
  text-decoration-color: #98002e !important;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

/* Visited color – darkened maroon underline, black text */
a:visited { color: #000000; }
.template-area a:visited,
.content a:visited,
.custom-landing a:visited,
.container-cont a:visited {
  text-decoration-color: #7a0e2e !important;
}

/* -------------------------------
   ColumnHead font size fix
   div.ColumnHead misses the TD font-size rule (not a td).
   th.ColumnHead (DataTables schedule headers) also misses it (not a td),
   and its child span.dt-column-title inherits 12px from .ColumnHead base.
   ------------------------------- */
div.ColumnHead,
th.ColumnHead,
th.ColumnHead span.dt-column-title,
div.section-head-collapsed,
div.section-head-expanded {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* -------------------------------
   Input field border color – #949494 passes WCAG 1.4.11 3:1 UI contrast
   ------------------------------- */
input[class~="FormInput"][type="text"]:not([disabled]):not([readonly]),
input[class~="FormInput"][type="number"]:not([disabled]):not([readonly]),
input.form-control[type="text"]:not([disabled]):not([readonly]),
input.form-control[type="number"]:not([disabled]):not([readonly]) {
  border-color: #949494;
}

select.form-control,
select.FormInput {
  border-color: #949494;
  /* style.css sets padding:6px on selects, but 6px right padding doesn't
     clear the native dropdown arrow (~18-20px wide). Text overlaps the arrow.
     1.25em (20px) clears the arrow with minimal wasted space. */
  padding-right: 1.25em !important;
}

/* Broad safety net: any select on the site gets enough right padding to
   keep text clear of the native dropdown arrow. Applies to dashboard selects,
   schedule selects, and any others not covered by .FormInput or .form-control.
   Does not affect select height or layout — right padding only. */
select {
  padding-right: 1.25em !important;
}

textarea[class="form-control"],
textarea[class~="FormInput"] {
  border: 1px solid #949494;
}

/* Flexible input selectors */
input.form-control[type="text"]:not([disabled]):not([readonly]),
input.form-control[type="number"]:not([disabled]):not([readonly]),
input.FormInput[type="text"]:not([disabled]):not([readonly]),
input.FormInput[type="number"]:not([disabled]):not([readonly]) {
  background-color: #ffffff;
  color: #555555;
  border-color: #949494;
  padding: 6px;
}

/* Header search field (input#keywords.input-text)
   main.css sets border:0 on .input-text. The banner background is now white
   so a borderless white input is invisible — fails WCAG 1.4.11 (3:1 UI contrast).
   #767676 on white = 4.54:1, safely exceeds the 3:1 requirement.
   Font size locked to 1rem to override the base 13.33px shorthand. */
.banner input.input-text,
.banner input#keywords {
  border: 1px solid #767676 !important;
  border-radius: 3px !important;
  font-size: 1rem !important;
  font-family: Arial, Helvetica, sans-serif !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  padding: 5px !important;
  box-sizing: border-box !important;
}

/* -------------------------------
   Nav ellipsis truncation on small screens
   ------------------------------- */
@media (max-width: 790px) {
  ul.submenu li,
  ul.submenu-secondary li,
  .nav-main ul li,
  .nav-secondary ul li {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  ul.submenu li a,
  ul.submenu-secondary li a,
  a.nav-submenu-link,
  .nav-main ul li a,
  .nav-secondary ul li a {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* -------------------------------
   Missing global fixes
   ------------------------------- */

/* .Underline class color — original #999999 fails WCAG AA on white.
   Updated to #767676 which passes at 4.54:1 */
.Underline {
  color: #767676 !important;
}

/* NegativeAmount — already a strong red, no change needed for contrast
   but flagged here for documentation */
/* .NegativeAmount { color: #B22222; } — already in style.css, passes AA */

/* Default selected option – black background, white text.
   Matches Site Configuration setting. Browser support is inconsistent
   but included for browsers that support it. */
option:default:not([value='']):not([value='0']):not([value='-1']) {
  background: #000000 !important;
  color: #ffffff !important;
}

select option:checked {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Option hover – dark gray */
select option:hover,
select option:focus {
  background: #444444 !important;
  color: #ffffff !important;
}

/* -------------------------------
   Guest-view nav search link font size fix
   In the logged-out (guest) template the platform renders:
     <a class="nav-main-link">
       <font size="2">SEARCH</font>">"
     </a>
   The <font size="2"> attribute overrides the inherited 1rem from the
   a.nav-main-link rule, shrinking "SEARCH" to ~13px while the ">" glyph
   after </font> stays at 16px. The logged-in view omits the <font> tag.
   Scoped tightly to .nav-main so it cannot affect content-area <font> tags.
   ------------------------------- */
.nav-main font,
.nav-main ul li font,
.nav-secondary font,
.nav-secondary ul li font {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;   /* 16px – matches a.nav-main-link */
  line-height: 1.4 !important;
  font-weight: normal !important;
  color: #ffffff !important;
}

/* -------------------------------
   Bootstrap alert contrast fixes
   All four Bootstrap 3 alert variants pass AA at 4.53–4.57:1 but only
   barely, and all use same-hue-family color pairs with low perceived contrast.
   Darkened text colors bring each variant to ~7:1 or above.

   success: #3C763D on #DFF0D8 = 4.57:1 → #1e5c1f = 6.75:1
   info:    #31708F on #D9EDF7 = 4.53:1 → #1a5276 = 6.93:1
   warning: #8A6D3B on #FCF8E3 = 4.54:1 → #6b4f1a = 7.13:1 (AAA)
   danger:  #A94442 on #F2DEDE = 4.53:1 → #7b1c1a = 8.05:1 (AAA)
   ------------------------------- */
.alert-success {
  color: #1e5c1f !important;
  border-color: #4cae4c !important;
}

.alert-info {
  color: #1a5276 !important;
  border-color: #6baed6 !important;
}

.alert-warning {
  color: #6b4f1a !important;
  border-color: #e0a030 !important;
}

.alert-danger {
  color: #7b1c1a !important;
  border-color: #d9534f !important;
}