/* ===========================
   Scampedia Course / /learn/ pages
   Loaded only by course templates, after styles.css.
   Primary audience skews 65+ — err toward larger, higher-contrast,
   more spacious than the marketing/database pages.
   =========================== */

.course-page {
  --text-body: 1.125rem; /* ~18px against a 16px root — see css/styles.css for why this is a variable, not a hardcoded value */
}

/* ---- Real nav fix, scoped to course pages ----
   The shared stylesheet's @media (max-width: 600px) hides every non-button
   nav link outright (`.nav-links a:not(.btn) { display: none; }`), with no
   hamburger or any other way to reach them — confirmed by searching the
   whole repo, there isn't one. It's not an incomplete hamburger pattern,
   it's a dead end: at 200% zoom on a standard window (the exact case this
   course is built for), every course page loses primary navigation,
   including the crisis page, where a reader who just lost money needs to
   be able to get to Report It or back to Learn.

   The underlying reason the hide-rule exists at all: .nav-links has no
   flex-wrap, so without it, links would squish/overlap at narrow widths
   instead of dropping to a new line. The real fix is flex-wrap, not
   deleting the links. Scoped to .course-page rather than site-wide so
   this doesn't risk the legacy marketing/database pages, which haven't
   been checked against this change — see REVIEW-QUEUE.md. */
.course-page .nav-links {
  flex-wrap: wrap;
  row-gap: 8px;
}
.course-page .nav-links a:not(.btn) {
  display: inline-block !important;
}
/* .nav-inner has a fixed height: 64px + align-items: center in the shared
   stylesheet — fine for one row, but once .nav-links wraps to two rows
   under it, a fixed height doesn't grow to fit, so the centered content
   overflows both above and below the visible nav bar instead of the nav
   bar growing. Letting height grow with content fixes the clipping. */
.course-page .nav-inner {
  height: auto;
  min-height: 64px;
  padding: 10px 0;
  flex-wrap: wrap;
  row-gap: 8px;
}

.course-page body,
body.course-page {
  line-height: 1.7;
}

/* ---- Real focus states — keyboard nav must be visible, not just present ---- */
.course-page a:focus-visible,
.course-page button:focus-visible,
.course-page input:focus-visible,
.course-page [tabindex]:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Layout ---- */
.course-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.course-breadcrumb {
  font-size: 0.9rem;
  color: var(--text-2);
  margin-bottom: 24px;
}
.course-breadcrumb a { color: var(--accent-bright); }
.course-breadcrumb a:hover { text-decoration: underline; }

.course-article-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.25;
  font-weight: 800;
  margin-bottom: 16px;
}

.course-byline {
  font-size: 0.9rem;
  color: var(--text-2);
  margin-bottom: 32px;
}

/* Answer-first opening — visually distinct so it reads as "the answer",
   not just the first paragraph of a wall of text. */
.course-lead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text-1);
  padding: 20px 24px;
  background: var(--surface);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  margin-bottom: 40px;
}

.course-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 40px;
}
.course-toc-title {
  font-weight: 700;
  margin-bottom: 12px;
}
.course-toc ol {
  list-style: decimal;
  padding-left: 1.4em;
}
.course-toc li { margin-bottom: 6px; }
.course-toc a { color: var(--accent-bright); }
.course-toc a:hover { text-decoration: underline; }

.course-section {
  margin-bottom: 40px;
}
.course-section h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 16px;
  scroll-margin-top: 24px; /* so anchor-jumped headings aren't flush against the viewport edge */
}
.course-section p {
  margin-bottom: 16px;
}
.course-section ul,
.course-section ol {
  padding-left: 1.6em;
  margin-bottom: 16px;
}
.course-section li { margin-bottom: 10px; }

.course-callout {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin: 24px 0;
}
.course-callout-title {
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--accent-bright);
}

.course-nav-links {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
}
.course-nav-links a {
  color: var(--accent-bright);
  font-weight: 600;
}
.course-nav-links a:hover { text-decoration: underline; }
.course-nav-links .disabled {
  color: var(--text-3);
}

.course-back-link {
  display: inline-block;
  margin-top: 24px;
  color: var(--accent-bright);
  font-weight: 600;
}
.course-back-link:hover { text-decoration: underline; }

/* ---- Index page (/learn/index.html) ---- */
.course-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.course-list-item {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.course-list-item:hover { border-color: var(--accent); }
.course-list-item h3 { font-size: 1.25rem; margin-bottom: 6px; }
.course-list-item p { color: var(--text-2); }
.course-list-item .course-access-pill {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.course-access-pill.free { background: rgba(52,211,153,.15); color: var(--success); }
.course-access-pill.paid { background: rgba(251,191,36,.15); color: var(--warning); }

/* ---- Close the two px leaks from the shared stylesheet ----
   .btn-sm and .footer-copy/.footer-links render on every course page (nav
   + footer are shared markup) but were never overridden here, so they sat
   at the legacy site's hardcoded px sizes even after --text-body switched
   to rem. Scoped to .course-page so the legacy pages using the same
   classes are untouched. */
.course-page .btn-sm { font-size: 0.9rem; }
.course-page .footer-copy  { font-size: 0.85rem; }
.course-page .footer-links { font-size: 0.9rem; }

/* ---- Print — libraries and senior centers will print these ---- */
@media print {
  .course-page nav,
  .course-page footer,
  .course-page .course-toc,
  .course-page .course-nav-links,
  .course-page .course-back-link,
  .course-page .course-callout a {
    display: none;
  }
  .course-page body {
    background: #fff;
    color: #000;
  }
  .course-page .course-lead {
    background: #fff;
    border-left: 3px solid #000;
    color: #000;
  }
  .course-page a {
    color: #000;
    text-decoration: underline;
  }
  .course-shell {
    max-width: 100%;
    padding: 0;
  }
}