.bg-primary {
    background-color: #182b3c !important;
}

/* ================================
   ECSE Onboarding Timeline (Flat CSS)
   No variables. Drupal/theme-safe.
================================ */

.ecse-onboarding {
  background: #ffffff;
  color: #1b2430;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
}

.ecse-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

/* Header */
.ecse-header h1 { margin: 0 0 0.5rem; font-size: 2rem; }
.ecse-header p { margin: 0.25rem 0 0; color: #526275; max-width: 75ch; }

/* Sticky nav */
.ecse-month-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ffffff;
  border-bottom: 1px solid #d9e1ec;
  padding: 0.6rem 0;
}

.ecse-month-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ecse-onboarding .ecse-month-nav a {
  display: inline-block;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #d9e1ec;
  background: #ffffff;
  color: #1b2430;
  text-decoration: none;
  font-weight: 700;
}

/* Active pill (force over theme link colors) */
.ecse-onboarding .ecse-month-nav a[aria-current="true"] {
  background: #1f5faa !important;
  border-color: #1f5faa !important;
  color: #ffffff !important;
}
.ecse-onboarding .ecse-month-nav a[aria-current="true"]:visited {
  color: #ffffff !important;
}

/* Month sections */
.ecse-month { margin-top: 2rem; scroll-margin-top: 5.5rem; }

.ecse-month-header {
  background: #f6f8fb;
  border: 1px solid #d9e1ec;
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.ecse-month-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.ecse-month-label { color: #1f5faa; font-weight: 800; }

/* Grid */
.ecse-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Key fix: allow grid children to shrink instead of clipping */
.ecse-grid > * { min-width: 0; }

@media (min-width: 900px) {
  .ecse-grid { grid-template-columns: 2fr 1fr; }
}

/* Groups */
.ecse-group {
  background: #ffffff;
  border: 1px solid #d9e1ec;
  border-radius: 16px;
  overflow: hidden;
}

.ecse-group h3 {
  margin: 0;
  background: #f6f8fb;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #d9e1ec;
}

.ecse-group-body { padding: 0.85rem; }

/* Cards */
.ecse-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid #d9e1ec;
  border-radius: 14px;
  margin-bottom: 0.85rem;
  background: #ffffff;
  min-width: 0;
}
.ecse-card:last-child { margin-bottom: 0; }

/* Ensure inner content can wrap */
.ecse-card > div { min-width: 0; }

.ecse-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e9eff7;
  border: 1px solid #c8d6ea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.ecse-card h4 { margin: 0 0 0.25rem; font-size: 1rem; }
.ecse-card p { margin: 0; color: #526275; }

.ecse-meta { margin-top: 0.45rem; color: #526275; font-size: 0.95rem; }
.ecse-meta a, .ecse-card a {
  color: #1f5faa;
  text-decoration: underline;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Watch-for lists */
.ecse-watch ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: #526275;
}

/* Tabs */
.ecse-tabs { margin-top: 1rem; }

.ecse-tablist {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.ecse-tab {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #d9e1ec;
  background: #ffffff;
  color: #1b2430;
  font-weight: 800;
  cursor: pointer;
}

.ecse-tab[aria-selected="true"] {
  background: #1f5faa;
  border-color: #1f5faa;
  color: #ffffff;
}

.ecse-tabpanel[aria-hidden="true"] { display: none; }




accordion-container
{font-family: calibri;}

.page-node-type-home-page #content {max-width:100%;}


#maincontent1 a:visited, #maincontent2 a:visited, #maincontent2r a:visited, #maincontent3 a:visited {color: #2a53a6;}


@media only screen and (max-width: 500px) {
    .page-node-type-home-page a {
     color:#FFFFFF;;
    }
}


table {

    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

th {
    background-color: #182b3c;
    color: #ffffff;
    text-align: left;
}

th, td {
    padding: 12px 15px;
    border: 1px solid #dddddd;
  vertical-align: top;
}

tbody, tr {
    border: 1px solid #dddddd;
  vertical-align: top;

}

tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
  vertical-align: top;
}

tbody tr:last-of-type {
    border-bottom: 2px solid #182b3c;
  vertical-align: top;
}

.lesson-tabs input[type="radio"] {
  display: none;
}

.lesson-tabs .tab-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 1em;
  border-bottom: 0px;
  box-sizing: content-box;
}

.lesson-tabs .tab-labels label {
  background: #182b3c;
  color: #42c3f7;
  padding: 0.5em 1.2em;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
}

.lesson-tabs .tab-labels label:hover {
  background: #2b4054;
}

.lesson-tabs .tab-content {
  display: none;
  padding: 1em;
  border: 1px solid #ccc;
  background: #fafafa;
  border-radius: 6px;
}

/* Show the correct tab's content */
#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3,
#tab4:checked ~ .content #content4,
#tab5:checked ~ .content #content5,
#tab6:checked ~ .content #content6,
#tab7:checked ~ .content #content7,
#tab8:checked ~ .content #content8,
#tab21:checked ~ .content #content21,
#tab22:checked ~ .content #content22,
#tab23:checked ~ .content #content23,
#tab24:checked ~ .content #content24,
#tab25:checked ~ .content #content25,
#tab26:checked ~ .content #content26,
#tab27:checked ~ .content #content27 {
  display: block;
}

/* Highlight selected tab button */
#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"],
#tab3:checked ~ .tab-labels label[for="tab3"],
#tab4:checked ~ .tab-labels label[for="tab4"],
#tab5:checked ~ .tab-labels label[for="tab5"],
#tab6:checked ~ .tab-labels label[for="tab6"],
#tab7:checked ~ .tab-labels label[for="tab7"],
#tab8:checked ~ .tab-labels label[for="tab8"],
#tab21:checked ~ .tab-labels label[for="tab21"],
#tab22:checked ~ .tab-labels label[for="tab22"],
#tab23:checked ~ .tab-labels label[for="tab23"],
#tab24:checked ~ .tab-labels label[for="tab24"],
#tab25:checked ~ .tab-labels label[for="tab25"],
#tab26:checked ~ .tab-labels label[for="tab26"],
#tab27:checked ~ .tab-labels label[for="tab27"] {
  background: #0f1e2b;
  font-weight: bold;
}

.lesson-tabs .tab-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 1em;
  box-sizing: content-box !important;
  border-bottom: none;
}

.lesson-tabs .tab-button {
  background: #182b3c;
  color: #42c3f7;
  padding: 0.5em 1.2em;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
  font-family: inherit;
  font-size: 1em;
  display: inline-block;
}

/* Hover style */
.lesson-tabs .tab-button:hover {
  background: #2b4054;
}

.lesson-tabs .tab-labels label.tab-button.active {
  background-color: #42c3f7 !important; /* Inverted background */
  color: #182b3c !important;           /* Inverted text */
  font-weight: bold !important;
  border: none !important;
  box-shadow: none !important;
  appearance: none !important;
  display: inline-block !important;
}

/* Content block style */
.lesson-tabs .tab-content {
  display: none;
  padding: 1em;
  border: 1px solid #ccc;
  background: #fafafa;
  border-radius: 6px;
}

div.lesson-tabs.js-tabs div.tab-labels label.tab-button.active {
  background-color: #42c3f7 !important;
  color: #182b3c !important;
  font-weight: bold !important;
}

  /* grid layout */
  #engine-cards .grid{
    display:grid;
    gap:24px;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  @media (max-width:1200px){
    #engine-cards .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @media (max-width:760px){
    #engine-cards .grid{ grid-template-columns:1fr; }
  }

  /* card shell + image */
  #engine-cards .card{ background:#fff; border:1px solid #E6E8EE; border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(2,6,23,.08); }
  #engine-cards .hero{ display:block; position:relative; overflow:hidden; }
  #engine-cards .hero::before{ content:""; display:block; aspect-ratio:16/9; } /* keeps thumbnails consistent */
  #engine-cards .hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  /* body panel + text */
  #engine-cards .body{ background:#F3F6F9; padding:14px 16px 16px; }
  #engine-cards .title{ margin:0 0 8px; font-size:17px; line-height:1.35; }
  #engine-cards .title a{ color:#2EA3F2; text-decoration:none; }
  #engine-cards .title a:hover{ text-decoration:underline; }
  #engine-cards .desc{ margin:0 0 12px; color:#0F172A; opacity:.9; }
  #engine-cards .learn-more{ color:#2EA3F2; font-weight:500; text-decoration:none; }
  #engine-cards .learn-more:hover{ text-decoration:underline; }
  #engine-cards .meta{ display:flex; align-items:center; gap:8px; color:#6B7280; font-size:13px; }
  #engine-cards .meta .icon{ display:inline-flex; line-height:0; }
  #engine-cards .meta .icon svg{ width:14px; height:14px; }

/* Make the PRIMARY "Main Menu" toggle readable on mobile */
@media (max-width: 992px){
  /* common ids/classes for mobile menu toggles – keep them all */
  #mobilemenu,
  #mobilemenu a,
  .main-menu-toggle,
  .menu-toggle,
  .mobile-nav-toggle,
  .mmenu-toggle,
  a[href="#mainmenu"],
  a[href="#mmenu"]{
    background: #0c3c60 !important;
    color: #fff !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    display: block;                /* ensures full-width bar */
    padding: .6rem .9rem;
  }

  /* visited/hover/focus states (Firefox cares) */
  #mobilemenu a:link,
  #mobilemenu a:visited,
  .main-menu-toggle:link,
  .main-menu-toggle:visited,
  .menu-toggle:link,
  .menu-toggle:visited,
  .mobile-nav-toggle:link,
  .mobile-nav-toggle:visited,
  .mmenu-toggle:link,
  .mmenu-toggle:visited,
  a[href="#mainmenu"]:link,
  a[href="#mainmenu"]:visited,
  a[href="#mmenu"]:link,
  a[href="#mmenu"]:visited{
    color:#fff !important;
  }

  #mobilemenu a:hover,
  .main-menu-toggle:hover,
  .menu-toggle:hover,
  .mobile-nav-toggle:hover,
  .mmenu-toggle:hover,
  a[href="#mainmenu"]:hover,
  a[href="#mmenu"]:hover{
    background: rgba(255,255,255,.12) !important;
    color:#fff !important;
  }

  /* clear, accessible focus outline */
  #mobilemenu a:focus,
  .main-menu-toggle:focus,
  .menu-toggle:focus,
  .mobile-nav-toggle:focus,
  .mmenu-toggle:focus,
  a[href="#mainmenu"]:focus,
  a[href="#mmenu"]:focus{
    outline: 2px solid #fff !important;
    outline-offset: 2px;
  }
}

/* Force the Main Menu toggle to stay white on mobile, even on hover */
@media only screen and (max-width: 651px){
  #superfish-2023-main-navigation-menu-toggle,
  #superfish-2023-main-navigation-menu-toggle:link,
  #superfish-2023-main-navigation-menu-toggle:visited,
  #superfish-2023-main-navigation-menu-toggle span{
    color:#fff !important;
    text-decoration:none !important;
  }

  #superfish-2023-main-navigation-menu-toggle:hover,
  #superfish-2023-main-navigation-menu-toggle:focus,
  #superfish-2023-main-navigation-menu-toggle:active{
    color:#fff !important;
    background: rgba(255,255,255,.12) !important; /* optional highlight */
    text-decoration:none !important;
    outline: 2px solid #fff; outline-offset: 2px; /* accessible focus */
  }
}

table {
  table-layout: fixed;
  width: 100%;
}

td, th {
  word-wrap: break-word;
  white-space: normal;
  vertical-align: top;
}

table td, table td * {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}