/* Landing page of the course hub. Same look as the courses: green accent, cool greys,
   Roboto, square corners. Every colour is a variable; dark comes from the system setting
   or from the toggle (assets/hub.js sets data-theme on <html>). Print always uses light. */

:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #404547;
  --muted: #666a6c;
  --rule: #cdd3d6;
  --panel: #f4f8fa;
  --brand: #00893d;
  --on-brand: #ffffff;
  --accent: #00893d;
  --accent-hover: #00702b;
  --sans: Roboto, Arial, Helvetica, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1c1f20; --ink: #e8ecee; --muted: #a9b1b6; --rule: #4a5053; --panel: #26292b;
  --accent: #4cc383; --accent-hover: #7bd6a4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1c1f20; --ink: #e8ecee; --muted: #a9b1b6; --rule: #4a5053; --panel: #26292b;
    --accent: #4cc383; --accent-hover: #7bd6a4;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
}

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: var(--brand); color: var(--on-brand);
}
.topbar .brand { color: inherit; text-decoration: none; font-weight: 700; }
.theme-toggle {
  font: inherit; font-size: 14px;
  background: transparent; color: inherit;
  border: 1px solid currentColor; padding: 3px 10px; cursor: pointer;
}

main { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { margin: 0.2em 0 0.3em; font-size: 2rem; line-height: 1.2; }
h2 { margin: 2em 0 0.6em; font-size: 1.25rem; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.lede { color: var(--muted); font-size: 1.1rem; margin: 0 0 1em; }
.small { color: var(--muted); font-size: 0.9rem; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card { border: 1px solid var(--rule); background: var(--panel); }
.card a { display: block; height: 100%; padding: 14px 16px; color: inherit; text-decoration: none; }
.card a:hover, .card a:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
.card .title { display: block; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.card a:hover .title { color: var(--accent-hover); }
.card .desc { display: block; font-size: 0.95rem; }
.badge {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid var(--muted); color: var(--muted); vertical-align: 2px;
}

@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --paper: #ffffff; --ink: #000000; --muted: #444444; --rule: #999999; --panel: #ffffff; --accent: #000000;
  }
  .theme-toggle { display: none; }
}