/* ============================================================
   SJR Betting Basics — COURSES design system
   Self-contained: site tokens + a long-form reading layout.
   Display: Bricolage Grotesque | Body: Newsreader | Data: Space Mono
   ============================================================ */

:root {
  --paper:      #F7F5F0;
  --paper-2:    #EEEAE0;
  --ink:        #0E2A22;
  --ink-soft:   #27433A;
  --muted:      #5C6B63;
  --line:       #E2DDD2;
  --line-dark:  #294A40;
  --accent:     #12A06B;
  --accent-deep:#0B7A50;
  --white:      #FFFFFF;
  --warn:       #B4541F;

  --maxw: 1140px;
  --readw: 720px;
  --radius: 14px;
  --radius-sm: 8px;

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body: "Newsreader", Georgia, serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --shadow: 0 1px 2px rgba(14,42,34,.06), 0 12px 32px -16px rgba(14,42,34,.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--accent-deep); text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
p { margin: 0 0 1.1rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--accent);
  display: inline-block;
}

.lead { font-size: 1.22rem; color: var(--ink-soft); max-width: 62ch; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #042016; }
.btn--primary:hover { background: var(--accent-deep); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-dark); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn--sm { padding: 9px 16px; font-size: .9rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 24px; max-width: var(--maxw); margin: 0 auto;
}
.brand {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .55rem;
}
.brand .mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--ink); color: var(--accent);
  display: grid; place-items: center;
  font-size: .85rem; font-family: var(--mono); font-weight: 700;
}
.nav-links { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--display); font-size: .96rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent-deep); }

/* ============================================================
   PREVIEW INDEX (courses/index.html)
   ============================================================ */
.page-hero { padding: 64px 0 28px; }
.page-hero h1 { max-width: 20ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6rem; }
.hero-note { margin-top: 1.1rem; font-family: var(--mono); font-size: .78rem; color: var(--muted); letter-spacing: .03em; }

/* price line inside the preview modal */
.price-line {
  font-family: var(--mono); font-size: .82rem; color: var(--ink-soft);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; margin: 0 0 18px;
}
.price-line b { color: var(--accent-deep); }

.section { padding: 56px 0; }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--paper); }
.section--ink .lead { color: #C8D6CE; }
.section--ink .eyebrow { color: #6FE3AE; }

.track-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 8px; }
.track-head .lvl { font-family: var(--mono); font-size: .8rem; color: var(--accent-deep); letter-spacing: .1em; text-transform: uppercase; }

.track {
  border-left: 2px solid var(--line);
  padding-left: 28px;
  margin: 18px 0 44px;
}
.track--beginner { border-color: #9AD9BE; }
.track--intermediate { border-color: var(--accent); }
.track--expert { border-color: var(--ink); }

/* clickable course row that opens a preview */
.course-btn {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 20px;
  align-items: center;
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 20px 8px; border-bottom: 1px solid var(--line);
  font-family: inherit; color: inherit;
  transition: background .15s ease;
  border-radius: 10px;
}
.course-btn:last-child { border-bottom: 0; }
.course-btn:hover { background: var(--white); }
.course-btn:hover .num { transform: translateY(-2px); }
.course-btn .num {
  font-family: var(--mono); font-weight: 700; font-size: 1.05rem;
  color: var(--accent); background: var(--ink);
  width: 52px; height: 52px; border-radius: 12px;
  display: grid; place-items: center;
  transition: transform .18s ease;
}
.course-btn h3 { font-size: 1.18rem; margin: 0 0 .2rem; }
.course-btn p { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.course-btn .peek {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-deep);
  white-space: nowrap; opacity: .7;
}
@media (max-width: 640px) {
  .course-btn { grid-template-columns: 48px 1fr; }
  .course-btn .peek { display: none; }
  .course-btn .num { width: 44px; height: 44px; font-size: .95rem; }
}

/* ---------- preview modal ---------- */
.modal {
  border: 0; padding: 0; max-width: 560px; width: calc(100% - 32px);
  border-radius: var(--radius); background: var(--paper);
  color: var(--ink); box-shadow: 0 24px 60px -20px rgba(14,42,34,.5);
}
.modal::backdrop { background: rgba(14,42,34,.55); backdrop-filter: blur(3px); }
.modal[open] { animation: pop .18s ease; }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__head {
  background: var(--ink); color: var(--paper);
  padding: 24px 26px; border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
}
.modal__head .lvl { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #6FE3AE; }
.modal__head h3 { color: var(--paper); margin: .35rem 0 .2rem; font-size: 1.6rem; }
.modal__head .meta { font-family: var(--mono); font-size: .76rem; color: #9FB6AC; }
.modal__close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,.1); border: 0; color: var(--paper);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 1.1rem;
}
.modal__close:hover { background: rgba(255,255,255,.22); }
.modal__body { padding: 24px 26px 26px; }
.modal__body p { color: var(--ink-soft); font-size: 1.02rem; }
.modal__body .learn-h { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); margin: 4px 0 10px; }
.modal__body ul { margin: 0 0 22px; padding: 0; list-style: none; }
.modal__body li { position: relative; padding-left: 26px; margin: 8px 0; color: var(--ink-soft); }
.modal__body li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.modal__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   COURSE DOCUMENT (course-NN.html)
   ============================================================ */
.course-top {
  background: var(--ink); color: var(--paper);
  padding: 52px 0 44px;
}
.course-top .wrap { max-width: var(--readw); }
.course-top .crumb { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; }
.course-top .crumb a { color: #9FB6AC; text-decoration: none; }
.course-top .crumb a:hover { color: #6FE3AE; }
.course-top .lvl { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #6FE3AE; display: block; margin: 18px 0 8px; }
.course-top h1 { color: var(--paper); font-size: clamp(2rem, 4.5vw, 3rem); }
.course-top .dek { color: #C8D6CE; font-size: 1.18rem; max-width: 56ch; margin: 10px 0 0; }
.course-top .facts {
  display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px;
  font-family: var(--mono); font-size: .78rem; color: #9FB6AC; letter-spacing: .04em;
}
.course-top .facts b { color: #6FE3AE; font-weight: 700; }
.course-top .numbadge {
  font-family: var(--mono); font-weight: 700; font-size: 1.1rem;
  color: var(--accent); background: rgba(255,255,255,.06);
  border: 1px solid var(--line-dark);
  width: 54px; height: 54px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 4px;
}

.doc { max-width: var(--readw); margin: 0 auto; padding: 48px 24px 24px; }
.doc > section { margin-bottom: 40px; }
.doc h2 {
  margin-top: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.doc h3 { margin-top: 28px; }
.doc p, .doc li { font-size: 1.08rem; }
.doc ul, .doc ol { padding-left: 1.3em; margin: 0 0 1.1rem; }
.doc li { margin: .5rem 0; }
.doc strong { color: var(--ink); }

/* lede paragraph under H1 area */
.doc .intro p:first-child { font-size: 1.2rem; color: var(--ink-soft); }

/* numbers / odds inline */
.doc .od { font-family: var(--mono); font-weight: 700; color: var(--accent-deep); }

/* callout boxes */
.box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin: 22px 0; background: var(--white);
}
.box .box-h {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-deep); margin: 0 0 10px;
  display: flex; align-items: center; gap: .5rem;
}
.box p:last-child, .box ul:last-child, .box li:last-child { margin-bottom: 0; }

.box--example { background: #F0FAF5; border-color: #BFE6D3; }
.box--example .box-h { color: var(--accent-deep); }
.box--formula { background: var(--ink); color: var(--paper); border-color: var(--line-dark); }
.box--formula .box-h { color: #6FE3AE; }
.box--formula p, .box--formula li { color: #DCEAE3; }
.box--formula .eq { font-family: var(--mono); font-size: 1.05rem; color: var(--paper); display: block; margin: 6px 0; }
.box--mistake { background: #FBF1EA; border-color: #E6C3A8; }
.box--mistake .box-h { color: var(--warn); }
.box--key { background: var(--paper-2); border-color: #D8D2C6; }
.box--key .box-h { color: var(--ink); }
.box--key ul { list-style: none; padding: 0; margin: 0; }
.box--key li { position: relative; padding-left: 26px; margin: 10px 0; }
.box--key li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* simple data table */
.doc table {
  width: 100%; border-collapse: collapse; margin: 18px 0;
  font-family: var(--mono); font-size: .92rem;
}
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.doc th { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--line-dark); }
.doc td .pos { color: var(--accent-deep); }
.doc td .neg { color: var(--warn); }

/* self-check / quiz */
.quiz { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.quiz details { border-bottom: 1px solid var(--line); }
.quiz details:last-child { border-bottom: 0; }
.quiz summary {
  cursor: pointer; padding: 16px 20px; font-family: var(--display);
  font-weight: 600; color: var(--ink); list-style: none; background: var(--white);
}
.quiz summary::-webkit-details-marker { display: none; }
.quiz summary::before { content: "?  "; color: var(--accent); font-family: var(--mono); }
.quiz details[open] summary { background: var(--paper-2); }
.quiz .ans { padding: 4px 20px 18px; color: var(--ink-soft); font-size: 1rem; }

/* prev / next nav */
.coursenav {
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--line); padding: 28px 0 8px; margin-top: 8px;
}
.coursenav a {
  text-decoration: none; color: var(--ink-soft);
  font-family: var(--display); font-weight: 600;
  display: inline-flex; flex-direction: column; gap: 2px; max-width: 45%;
}
.coursenav a:hover { color: var(--accent-deep); }
.coursenav .dir { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.coursenav .next { text-align: right; align-items: flex-end; margin-left: auto; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #B9C8C0; padding: 44px 0 24px; }
.site-footer a { color: #DCEAE3; text-decoration: none; }
.site-footer a:hover { color: #6FE3AE; }
.gamble-note {
  font-family: var(--mono); font-size: .78rem; color: #8FA59B;
  border-top: 1px solid var(--line-dark); padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.gamble-note .warn { color: #E8A06A; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }