/* Course pages. Loaded alongside assets/site.css, which holds the brand
   tokens and the shared header, footer and card styles. */

.course-hero {
  background:
    radial-gradient(900px 420px at 80% -20%, rgba(46, 155, 255, .22), transparent 60%),
    var(--navy);
  color: #fff;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.course-hero .eyebrow { margin-bottom: 1rem; }
.course-hero h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin-bottom: .6rem; }
.course-hero .lead {
  font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255, 255, 255, .85);
  max-width: 52ch; margin-bottom: 1.8rem;
}
.course-icon { font-size: 2.6rem; display: block; margin-bottom: .4rem; }

/* Breadcrumbs.
   site.css styles the bare `nav` element as a flex row with space-between for
   the site header, which would fling these apart. Reset it here rather than
   narrowing the shared rule and risking the header. */
.crumbs {
  display: block; padding: 0;
  font-size: .88rem; font-weight: 700; margin-bottom: 1.2rem; color: rgba(255, 255, 255, .72);
}
.crumbs a { color: rgba(255, 255, 255, .9); text-decoration: underline; }
.crumbs a:hover { color: var(--gold); }
.crumbs span { margin: 0 .25rem; }

.course-accent-blue   { --c: var(--blue); }
.course-accent-green  { --c: var(--green); }
.course-accent-purple { --c: var(--purple); }
.course-accent-gold   { --c: var(--gold-deep); }
.course-accent-red    { --c: var(--red); }
.course-accent-teal   { --c: #12b981; }

.course-body { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.course-cols { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.course-body h2 { font-size: 1.5rem; color: var(--navy); margin-bottom: .9rem; }
.course-body h2:not(:first-child) { margin-top: 2rem; }

.ticks { list-style: none; display: grid; gap: .6rem; }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; color: #3B4763; }
.ticks li::before { content: "✓"; color: var(--green); font-weight: 900; flex-shrink: 0; }

/* How an unconfirmed fact looks: visibly different from a stated one, so a
   parent can see at a glance what we have and have not published. */
.unconfirmed-block {
  background: #FFF8E8; border: 1px solid #F0D399; border-radius: 12px;
  padding: 1rem; color: #6D4A00; font-weight: 600;
}

.intl { border-radius: 12px; padding: .9rem 1rem; font-weight: 600; }
.intl-ok      { background: #E4F6ED; color: #146B43; border: 1px solid #A9DCC3; }
.intl-local   { background: #EEF2FA; color: #3B4763; border: 1px solid #D4DDEE; }
.intl-unknown { background: #FFF8E8; color: #6D4A00; border: 1px solid #F0D399; }

.facts {
  background: #fff; border: 1px solid var(--line, #E3E9F5); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow); border-top: 5px solid var(--c, var(--blue));
}
.facts h2 { margin-top: 0 !important; font-size: 1.25rem; }
.facts dl { display: grid; gap: .1rem; }
.fact { padding: .7rem 0; border-bottom: 1px solid #EEF2FA; }
.fact:last-of-type { border-bottom: none; }
.fact dt {
  font-family: var(--font-display); font-weight: 600; color: var(--muted);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
}
.fact dd { font-weight: 700; color: var(--navy); margin-top: .15rem; }
.fact-unconfirmed dd { color: #6D4A00; font-weight: 600; font-style: italic; }
.fact-note { display: block; font-style: normal; font-weight: 600; font-size: .85rem;
  color: var(--muted); margin-top: .3rem; }
.facts-foot { font-size: .84rem; color: var(--muted); font-weight: 600; margin: 1rem 0; }
.facts-cta { width: 100%; justify-content: center; }

/* Course index cards are links, so they need the card styles plus affordance. */
.course-link { display: block; color: inherit; }
.course-link .course-summary { color: #4A5775; font-weight: 600; margin-top: .6rem; font-size: .96rem; }
.course-link .course-more {
  display: inline-block; margin-top: 1rem; font-family: var(--font-display);
  font-weight: 600; color: var(--c, var(--blue));
}
.course-link:hover .course-more { text-decoration: underline; }

@media (min-width: 900px) {
  .course-cols { grid-template-columns: 1.3fr .7fr; gap: 3rem; }
}