/* ==========================================================================
   MrJGeometry — site stylesheet
   One file controls the look of every page. Sections:
     1. Page basics        4. Lesson list (hub)     7. Practice quiz
     2. Header + nav       5. Notes viewer          8. Small screens
     3. Panels + text      6. Video panel           9. Footer
   ========================================================================== */

/* ---------- 1. Page basics ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #d3d3d3;              /* light grey, as on the current site */
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}
/* The centered column every page lives in. Widens on big screens,
   shrinks fluidly on Chromebooks, tablets, and phones. */
.wrap { max-width: 1020px; margin: 0 auto; padding: 0 14px 28px; }
a { color: #1144cc; }
h1 { font-size: 30px; margin: 6px 0 10px; }
h2 { font-size: 23px; margin: 4px 0 10px; }
h3 { font-size: 19px; margin: 14px 0 6px; }
p  { margin: 8px 0; }

/* ---------- 2. Header + navigation ---------- */
/* A deep-blue band with the site name in white and a gold rule under it —
   still plain and clean, but with a clear identity. */
.site-header { background: #1f3a5f; border-bottom: 4px solid #ffd94d; }
.site-header .wrap { padding-top: 18px; padding-bottom: 14px; }
.site-title { font-size: 32px; font-weight: bold; letter-spacing: .3px; }
.site-title a { color: #ffffff; text-decoration: none; }
.site-subtitle { color: #cfdcf2; font-size: 15px; margin-top: 3px; }
/* The nav is a simple row of links. On narrow screens it wraps onto two
   lines — with only four links, no hamburger menu is needed. */
.main-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.main-nav a {
  display: inline-block; padding: 10px 16px; min-height: 44px;
  background: #ffffff; border: 1px solid #ffffff; border-radius: 7px;
  color: #1f3a5f; text-decoration: none; font-size: 16px; font-weight: bold;
}
.main-nav a:hover { background: #ffd94d; border-color: #ffd94d; }  /* gold = hover */
.main-nav a.current { background: #ffd94d; border-color: #ffd94d; }

/* Breadcrumb trail on lesson pages: Home > Lessons > Unit > Lesson */
.breadcrumb { font-size: 14px; color: #333; margin: 14px 2px 10px; }
.breadcrumb a { color: #1144cc; }

/* ---------- 3. Panels + text ---------- */
/* Every content section sits in a white panel — the site's basic building
   block, carried over from our interactive pages. */
.panel {
  background: #fff; border: 1px solid #9a9a9a; border-radius: 10px;
  padding: 18px 20px; margin: 0 0 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.panel > h2:first-child { margin-top: 0; }
/* Every panel title gets a gold underline so sections read as sections. */
.panel h2 { border-bottom: 3px solid #ffd94d; padding-bottom: 6px; }
.placeholder-note {
  background: #fff8e1; border: 1px solid #d8b93a; border-radius: 7px;
  padding: 8px 12px; font-size: 14px;
}
/* --- Overview subsections: Summary / Vocabulary / Main Ideas -----------
   The Overview panel used to read as one grey block of text. Each part
   now has its own look: a blue-bar subhead, roomier spacing, vocabulary
   terms on light-blue bars, and main ideas as separate pale cards. */
.ov-summary { font-size: 18px; line-height: 1.55; }
h3.sec-head {
  font-size: 19px; color: #1f3a5f; margin: 22px 0 10px;
  background: #eef4ff; border-left: 5px solid #2255cc; border-radius: 0 7px 7px 0;
  padding: 7px 12px;
}
dl.vocab { margin: 0; }
dl.vocab dt {
  font-weight: bold; font-size: 17px; color: #1f3a5f;
  background: #f4f9ff; border: 1px solid #c9d6e4; border-bottom: none;
  border-radius: 7px 7px 0 0; padding: 7px 12px; margin-top: 12px;
}
dl.vocab dd {
  margin: 0 0 4px; padding: 8px 12px 10px;
  border: 1px solid #c9d6e4; border-top: none; border-radius: 0 0 7px 7px;
}
ol.main-ideas, ul.main-ideas { margin: 8px 0; padding-left: 22px; }
ol.main-ideas li, ul.main-ideas li {
  background: #fbfbfb; border: 1px solid #e0e0e0; border-radius: 7px;
  padding: 8px 12px; margin: 7px 0;
}

/* ---------- 4. Lesson list (hub page) ---------- */
/* On wide screens the unit panels sit in TWO columns, which roughly
   halves the hub's height; on phones and narrow windows they stack in
   one column. (Executive decision, 2026-10-13: two columns for the hub
   only — a lesson page keeps one column for reading.) */
.units-grid { display: grid; grid-template-columns: 1fr; gap: 0 18px; align-items: start; }
@media (min-width: 900px) { .units-grid { grid-template-columns: 1fr 1fr; } }
.unit-block h2 { margin-bottom: 4px; }
.unit-block p.unit-note { color: #444; font-size: 15px; margin-top: 0; }
ul.lesson-list { list-style: none; margin: 10px 0 0; padding: 0; }
ul.lesson-list li { border-top: 1px solid #dddddd; }
ul.lesson-list li:first-child { border-top: none; }
/* Each lesson is one full-width row — a big, easy tap target. */
ul.lesson-list a {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 13px 8px; min-height: 48px;
  color: #111; text-decoration: none; font-size: 17px;
}
ul.lesson-list a:hover { background: #f4f9ff; }
ul.lesson-list .go { color: #1144cc; font-weight: bold; white-space: nowrap; }
.has-activity { font-size: 13px; background: #e8f3e8; border: 1px solid #7aa87a;
  border-radius: 20px; padding: 2px 10px; white-space: nowrap; }
.unit-cards { font-size: 14px; color: #333; margin: 2px 0 4px; }
.unit-cards a { font-weight: bold; }

/* ---------- 5. Notes viewer ---------- */
/* Students flip through the notes one page at a time. The notes are page
   IMAGES (converted from the PDF) so the PDF itself is never delivered. */
.notes-stage {
  background: #f4f9ff; border: 1px solid #c9d6e4; border-radius: 8px;
  padding: 10px; text-align: center;
}
.notes-stage img { max-width: 100%; height: auto; border: 1px solid #bbb; }
.notes-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px;
}
.notes-controls .page-count { font-weight: bold; }
button, .btn {
  font-family: Arial, sans-serif; font-size: 16px; min-height: 44px;
  padding: 9px 18px; background: #eeeeee; border: 1px solid #9a9a9a;
  border-radius: 7px; cursor: pointer; color: #111; text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { background: #ffd94d; }
button:disabled { opacity: .45; cursor: default; background: #eeeeee; }

/* ---------- 6. Video panel ---------- */
.video-stage {
  background: #000; border-radius: 8px; overflow: hidden;
}
.video-stage video { width: 100%; height: auto; display: block; }
/* Caption above each player when a lesson has more than one video part. */
.video-part { font-weight: bold; color: #1f3a5f; margin: 16px 0 6px; }
.video-part:first-of-type { margin-top: 6px; }

/* The interactive-activity link on a lesson page: a full-width
   highlighted row, styled like the lesson rows on the hub, so it stands
   out from the paragraph text around it. */
.activity-link {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #eef4ff; border: 1px solid #2255cc; border-radius: 8px;
  padding: 14px 16px; min-height: 52px;
  font-weight: bold; color: #1144cc; text-decoration: none; font-size: 17px;
}
.activity-link:hover { background: #ffd94d; border-color: #9a9a9a; color: #111; }
.activity-link .go { white-space: nowrap; }

/* Resource entries on the Extra Help page: link on one line, its
   description in smaller plain text under it. */
ul.practice-links li.res { flex-direction: column; align-items: flex-start; gap: 2px; }
.res-desc { font-weight: normal; color: #333; font-size: 15px; }

/* The two classroom posters on the home page, side by side when the
   screen is wide enough, stacked when it is not. */
.posters { display: flex; gap: 14px; }
/* Each poster is exactly half the panel (minus half the gap), so the two
   always sit side by side, at any screen size. */
.posters img { width: calc(50% - 7px); height: auto; align-self: flex-start; border: 1px solid #9a9a9a; border-radius: 8px; }

/* ---------- 6b. Want More Practice (worksheet links) ---------- */
ul.practice-links { list-style: none; margin: 10px 0 0; padding: 0; }
ul.practice-links li {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; border-top: 1px solid #dddddd; padding: 11px 8px; min-height: 48px;
}
ul.practice-links li:first-child { border-top: none; }
ul.practice-links a { font-weight: bold; }
ul.practice-links .sol { white-space: nowrap; }

/* ---------- 7. Practice quiz ---------- */
/* Same behavior as our other pages: one question at a time, hint + retry on
   the first miss, full explanation after the second miss, and the score
   counts first-try answers only. The engine lives in assets/site.js. */
.quiz-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.quiz-strip span {
  border: 1px solid #9a9a9a; border-radius: 20px; padding: 3px 12px;
  font-size: 14px; background: #eeeeee;
}
.quiz-strip span.now { background: #ffd94d; font-weight: bold; }
.quiz-strip span.right { background: #cdeccd; }
.quiz-strip span.locked { background: #f3d9d9; }
.quiz-question { font-size: 18px; font-weight: bold; margin: 12px 0; }
.quiz-choices { display: grid; gap: 8px; margin: 10px 0; }
.quiz-choices button { text-align: left; }
.quiz-choices button.picked-right { background: #cdeccd; border-color: #4a8f4a; }
.quiz-choices button.picked-wrong {
  background: #f3d9d9; border-color: #b05555; text-decoration: line-through;
}
.quiz-feedback { border-radius: 7px; padding: 10px 14px; margin: 12px 0; display: none; }
.quiz-feedback.info    { background: #eef4ff; border-left: 5px solid #2255cc; display: block; }
.quiz-feedback.success { background: #eaf7ea; border-left: 5px solid #3f9e2f; display: block; }
.quiz-feedback.warn    { background: #fff6da; border-left: 5px solid #d8b93a; display: block; }
.quiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
.quiz-score { font-weight: bold; }

/* Previous / Next lesson links at the bottom of every lesson page */
.prev-next { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------- 8. Small screens ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 25px; }
  .site-title { font-size: 24px; }
  .panel { padding: 14px; }
  .main-nav a { flex: 1 1 40%; text-align: center; }
  .notes-controls { flex-wrap: wrap; justify-content: center; }
}

/* ---------- 9. Footer ---------- */
.site-footer { color: #333; font-size: 14px; text-align: center; padding: 8px 0 22px; }