/* Course page layer: syllabus accordion, lists, chips. Load after affix.css and about.css. */
.cx-list{margin:0;padding:0;list-style:none}
.cx-list li{display:flex;gap:.7rem;margin-bottom:.7rem}
.cx-list i{margin-top:.3rem;color:var(--bs-danger,#dc3545)}
.cx-sticky{position:sticky;top:96px}
@media(max-width:991.98px){.cx-sticky{position:static}}
.cx-lead-dark{max-width:46rem;color:#b4bac0;font-size:1.05rem}
.cx-roles{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.cx-roles li{padding:.35rem .85rem;border-radius:50rem;border:1px solid #e9ecef;background:#f8f9fa;font-size:.88rem;color:#495057}

.cx-acc{--bs-accordion-border-width:0;--bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(var(--bs-danger-rgb,220,53,69),.18);
  --bs-accordion-active-color:var(--bs-danger,#dc3545);--bs-accordion-active-bg:#fff;
  --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E")}
.cx-acc .accordion-item{margin-bottom:.8rem;border:1px solid #e9ecef;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 .25rem .8rem rgba(0,0,0,.04)}
.cx-acc .accordion-button{padding:1.1rem 1.3rem;font:600 1rem "Poppins",system-ui,sans-serif;color:#212529;background:#fff}
.cx-acc .accordion-button:not(.collapsed){border-bottom:1px solid #f1f3f5;box-shadow:none}
.cx-acc .accordion-body{padding:1.2rem 1.3rem 1.4rem;color:#495057}
.cx-num{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;margin-right:.9rem;border-radius:10px;
  background:rgba(var(--bs-danger-rgb,220,53,69),.1);color:var(--bs-danger,#dc3545);font:700 .9rem "Poppins",system-ui,sans-serif}
.cx-topics{columns:2;column-gap:2rem;margin:0;padding-left:1.1rem}
.cx-topics li{break-inside:avoid;margin-bottom:.4rem}
@media(max-width:767.98px){.cx-topics{columns:1}.cx-acc .accordion-button{padding:1rem}}

.cta {
  padding: 3rem 0;
}

.cta-dark {
  background-color: #000;   /* solid black */
  color: #fff;              /* white text */
}

.cta-dark h2,
.cta-dark p {
  color: #fff;              /* ensure headings and text are visible */
}
