/* Shared course typography. Layout, accent colors, hero, header and footer stay local. */
.local-course.course-design {
  --course-font-family: techupSans, Arial, sans-serif;
  --course-title-size: 32px;
  --course-subtitle-size: 24px;
  --course-card-size: 18px;
  --course-body-size: 16px;
  --course-caption-size: 14px;
  --course-quote-size: 24px;
}

.local-course.course-design :is(
  [data-course-title], [data-course-subtitle], [data-course-lead],
  [data-course-card-title], [data-course-body], [data-course-caption], [data-course-quote]
) {
  font-family: var(--course-font-family) !important;
}

.local-course.course-design :is([data-course-body], [data-course-lead], [data-course-caption]) [data-root] {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-align: inherit !important;
}

.local-course.course-design [data-course-title] {
  color: #f5f4f7 !important;
  font-size: var(--course-title-size) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -.035em;
  text-align: center !important;
}
.local-course.course-design [data-course-title] :is(span,b,strong) { color: inherit !important; font-weight: inherit !important; }
.local-course.course-design [data-course-subtitle] {
  font-size: var(--course-subtitle-size) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}
.local-course.course-design [data-course-card-title] {
  font-size: var(--course-card-size) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}
.local-course.course-design :is([data-course-body], [data-course-lead]) {
  font-size: var(--course-body-size) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  text-align: left !important;
}
.local-course.course-design [data-course-lead] { text-align: center !important; }
.local-course.course-design [data-course-caption] {
  font-size: var(--course-caption-size) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
.local-course.course-design [data-course-quote] {
  font-size: var(--course-quote-size) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* Inline Notion spans otherwise multiply the role size by 80%, 90% or 110%. */
.local-course.course-design :is(
  [data-course-title], [data-course-subtitle], [data-course-lead],
  [data-course-card-title], [data-course-body], [data-course-caption], [data-course-quote]
) span:not([data-course-title], [data-course-subtitle], [data-course-lead],
  [data-course-card-title], [data-course-body], [data-course-caption], [data-course-quote]) {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Use the real Bold face for existing semibold emphasis; retain its accent color. */
.local-course.course-design :is(
  [data-course-title], [data-course-subtitle], [data-course-lead],
  [data-course-card-title], [data-course-body], [data-course-caption], [data-course-quote]
) :is(strong, b, [style*="font-weight:600"], [style*="font-weight: 600"]) {
  font-weight: 700 !important;
}

/* The illustration grid keeps its centered labels. */
.local-course.course-design :is(.course-benefit-title, .course-benefit-description) {
  text-align: center !important;
}

/* Accordion and learning controls use the same sizes as the surrounding content. */
.local-course.course-design :is(
  .course-faq .faq-item summary, .course-faq .faq-body-inner,
  .fs-curri-month-number, .fs-curri-month-title, .fs-curri-pill,
  .fs-curri-panel-title, .fs-curri-item-head, .fs-curri-item-desc
) {
  font-family: var(--course-font-family) !important;
}
.local-course.course-design :is(.course-faq .faq-item summary, .fs-curri-month-title) {
  font-size: var(--course-body-size) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}
.local-course.course-design :is(.course-faq .faq-body-inner, .fs-curri-item-desc) {
  font-size: var(--course-body-size) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  text-align: left !important;
}
.local-course.course-design .course-faq :is(.faq-strong, .hl-red, .hl-yellow) {
  font-weight: 700 !important;
}
.local-course.course-design :is(.fs-curri-month-number, .fs-curri-pill) {
  font-size: var(--course-caption-size) !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}
.local-course.course-design .fs-curri-month[aria-selected="true"] .fs-curri-month-number,
.local-course.course-design .fs-curri-pill { font-weight: 700 !important; }
.local-course.course-design .fs-curri-panel-title {
  font-size: var(--course-card-size) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}
.local-course.course-design .fs-curri-item-head {
  font-size: var(--course-body-size) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}
.local-course.course-design :is(
  .course-faq .faq-item summary, .course-faq .faq-body-inner,
  .fs-curri-month-title, .fs-curri-panel-title, .fs-curri-item-head, .fs-curri-item-desc
) span {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Custom instructor cards use the same readable text scale as Notion content. */
.local-course.course-design .profileBox .jobname {
  font-family: var(--course-font-family);
  font-size: var(--course-caption-size);
  line-height: 1.6;
}
.local-course.course-design .profileBox .lecturer_txt {
  font-family: var(--course-font-family);
  font-size: var(--course-body-size);
  line-height: 1.75;
}
.local-course.course-design .profileBox .lecturer_title {
  font-family: var(--course-font-family);
  font-size: var(--course-card-size);
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .local-course.course-design {
    --course-title-size: 26px;
    --course-subtitle-size: 22px;
    --course-card-size: 16px;
    --course-body-size: 15px;
    --course-caption-size: 13px;
    --course-quote-size: 22px;
  }
}