/* CHN Education Series — page CSS (node 7140). CPN-safe: no url(). */

:root {
  --primary-deep-blue: #012169;
  --primary-medium-purple: #984392;
  --secondary-royal-blue: #1779b9;
  --secondary-light-purple: #a975b2;

  --heading-font: oswald, Arial, sans-serif;
  --heading-font-size: 20px;
  --heading-font-weight: 500;

  --body-font: Muli, Arial, sans-serif;
  --body-font-size: 14px;   /* was var(--body-font-size) — self-referential/invalid; set a real value */
  --body-font-weight: 400;
  --body-font-color: #333;  /* was var(--body-font-color) — self-referential/invalid; set a real value */

  --subtitle-font: var(--heading-font);
  --subtitle-font-weight: 700;
  --subtitle-font-size: 18px;

  --event-calendar-bg: #f4f4f5;
  --event-calendar-month: #3f3f46;
  --event-calendar-date: #18181b;
  --event-calendar-year: #3f3f46;

  --white: #fff;
  --black: #000;
  --neutral: #555;

  --border-color: #e2e3e6;
}

/* Cards - applies to custom content blocks */

.chn-card {
  margin-bottom: 0;
  border: none;
  border-radius: 5px;
  overflow: hidden;
}

div.course-flow-body-title,
#course-outline h3.main-header,
.panel-pane .pane-title,
#block-course-navigation .block-title,
.ui-dialog .ui-dialog-titlebar,
.chn-card .pane-title {
  background: var(--primary-medium-purple);
  color: var(--white);
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  font-size: var(--heading-font-size);
  line-height: 1.2;
  padding: 12px 20px;
  border-radius: 4px 4px 0 0;
  border-bottom: 8px solid var(--secondary-light-purple);
  margin: 0;
}

.pane-custom .pane-content,
.chn-card__body {
  background: var(--white);
}

.pane-custom .pane-content {
  border: 1px solid var(--border-color);
  box-shadow: none !important;
  padding: 18px 20px;
  margin: 0 0 20px 0;
}

.pane-custom .pane-content img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: 5px;
}

.chn-subtitle {
  font-family: var(--subtitle-font);
  font-weight: var(--subtitle-font-weight);
  font-size: var(--subtitle-font-size);
  color: var(--primary-deep-blue);
  margin: 2px 0 10px;
}

.chn-text {
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  line-height: 1.5;
  color: var(--body-font-color);
}

.pane-custom .pane-content p,
.chn-card__body p {
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  line-height: 1.5;
  color: var(--body-font-color);
}

.pane-custom .pane-content ul li,
.chn-card__body ul li {
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  line-height: 1.45;
  color: var(--body-font-color);
  padding-left: 16px;
}

.pane-custom .pane-content ul li::marker {
  color: transparent;
}

.chn-search {
  display: flex;
  margin: 0 0 16px;
}

.chn-search input[type=text] {
  flex: 1 1 auto;
  border: 1px solid var(--border-color);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  padding: 9px 12px;
  font-family: var(--body-font);
  font-size: var(--body-font-size);
}

.chn-search button {
  flex: 0 0 auto;
  background: var(--primary-deep-blue);
  color: var(--white);
  border: 0;
  border-radius: 0 4px 4px 0;
  padding: 0 16px;
  font-size: 15px;
  cursor: pointer;
}

.chn-unstyled-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 !important;
}

.chn-unstyled-list li {
  margin: 0 0 12px;
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  line-height: 1.4;
  color: var(--body-font-color);
}

.chn-unstyled-list a {
  color: var(--secondary-royal-blue);
  text-decoration: underline;
}

.chn-pill {
  display: inline-block;
  background: #e6e6eb;
  color: var(--neutral);
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 9px;
  margin-left: 6px;
  vertical-align: middle;
}

.chn-btn {
  display: inline-block;
  background: var(--primary-medium-purple);
  color: var(--white) !important;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none !important;
  padding: 9px 24px;
  border-radius: 3px;
  margin-top: 6px;
}

.chn-btn:hover {
  opacity: .9;
}

.pane-content p,
.chn-series p {
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  line-height: 1.55;
  color: var(--body-font-color);
  margin: 0 0 12px;
}

.pane-content ul,
.chn-series ul {
  list-style: none;
  margin: 0;
  padding: 0 !important;
}

.pane-content ul li,
.chn-series li {
  position: relative;  
  margin: 0 0 10px;
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  line-height: 1.4;
}

.pane-content ul li::before,
.chn-series li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  background: var(--primary-medium-purple);
  transform: rotate(45deg);
}

.pane-content a,
.chn-series a {
  color: var(--primary-deep-blue);
  text-decoration: underline;
}

/* Calendar Widget */

.chn-event {
  position: relative;
  display: flex;
  align-items: start;
  gap: 12px;
  background: var(--event-calendar-bg);
  border: 0;
  border-radius: 2px;
  padding: 14px 14px;
  margin-bottom: 14px !important;
  overflow: hidden;
}

.chn-event:hover, 
.chn-event:active,
.chn-event:focus {
  background: color-mix(in srgb, var(--event-calendar-bg) 100%, #000 8%);
}

.chn-events .chn-event:last-child {
  margin-bottom: 0 !important;
}

.chn-events li::before { display: none; }

.chn-event::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 26px solid transparent;
  border-left: 26px solid transparent;
}

.chn-event.chn-event--member::after {
  border-top-color: var(--primary-medium-purple);
}

.chn-event__date {  
  width: 64px;
  flex: none;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  padding: 8px 4px;
  line-height: 1.05;
}

.chn-event__date .m {
  display: block;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--event-calendar-month);
}

.chn-event__date .d {
  display: block;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 28px;
  color: var(--event-calendar-date);
  margin: 1px 0;
}

.chn-event__date .y {
  display: block;
  font-family: var(--body-font);
  font-size: 12px;
  color: var(--event-calendar-year);
}

.chn-event__body {
  padding-right: 14px;
}

.chn-event__body a {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: var(--body-font-size);
  color: var(--secondary-royal-blue);
  text-decoration: underline;
  line-height: 1.25;
}

.chn-event__body a:hover {
  color: var(--primary-deep-blue);
}

.chn-event__time {
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  color: var(--body-font-color);
  margin-top: 4px;
}

.chn-event__reg {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: var(--body-font-size);
  color: var(--secondary-royal-blue);
  text-decoration: underline;
}

.chn-event__reg:hover {
  color: var(--primary-deep-blue);
}

.chn-events {
  list-style: none;
  margin: 0;
  padding: 0 !important;
}

.chn-events li,
.chn-links li,
.chn-series li {
  list-style: none !important;
}

/* --- FIX: paragraphs placed directly in a pane (Per-section layout) --- */
.pane-custom .pane-content > p { margin: 0 0 12px; line-height: 1.5; }
.pane-custom .pane-content > p:has(img) { margin: 0; line-height: 0; }  /* banner stays flush */