/*
  notes.css: notes pages in the same style as the homepage, S1, S2 and Higher pages.
  Used by the S1 and S2 topic pages (the N4/N5/Higher/AH pages carry the same rules inline).
  Load it AFTER Test.css (which gives the background photo, the dark top bar and the font).
  Fold-out topics are dark cards like the topic tiles; the notes inside are on light
  panels so long text, diagrams and coloured key words stay easy to read.
*/

body { background-color: #1d2b33; }
.nav-links li a { text-decoration: none; }
.nav-links li a[aria-current="page"] { background: #00bcd4; color: black; }

.notes-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 110px 20px 60px;
}

/* ---------- Contents box at the top (dark glass, like the homepage) ---------- */
.notes-page > .contents {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  color: white;
  padding: 28px 30px;
  margin: 0 0 24px;
}
.notes-page > .contents h2 {
  font-size: 2.2rem;
  line-height: 1.2;
  text-align: center;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  margin-bottom: 16px;
  color: white;
}
.notes-page > .contents p,
.notes-page > .contents li { color: #f3f3f3; }
.notes-page > .contents a { color: #00bcd4; }
.notes-page > .contents a:hover { color: white; }

/* ---------- Fold-out topics (dark cards with blue titles, like the topic tiles) ---------- */
details.lesson {
  margin-bottom: 18px;
  padding: 0;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  scroll-margin-top: 90px;
  overflow: hidden;
}
details.lesson > summary {
  cursor: pointer;
  padding: 20px 24px;
  color: #00bcd4;
  transition: background 0.25s ease, color 0.25s ease;
}
details.lesson > summary h2 { display: inline; font-size: 1.5rem; color: inherit; }
details.lesson > summary:hover,
details.lesson > summary:focus-visible { background: #00bcd4; color: black; outline: none; }
details.lesson[open] { padding-bottom: 12px; }
details.lesson[open] > summary { margin-bottom: 4px; }

/* ---------- A single topic on its own page (Advanced Higher) ---------- */
.topic-card {
  margin-bottom: 18px;
  padding-bottom: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.topic-card > .topic-title { padding: 20px 24px 16px; font-size: 1.5rem; color: #00bcd4; }
.notes-page > .contents li.current > b { color: white; }
.notes-page > .contents li ul { margin: 6px 0 4px 1.4em; }
h2[id] { scroll-margin-top: 90px; }

/* ---------- Light reading panels for the notes themselves ---------- */
.container {
  background: #fdfdfd;
  color: #1d2b33;
  border-radius: 12px;
  padding: 24px 28px;
  margin: 0 12px 12px;
  overflow-x: auto;
  line-height: 1.6;
}
.container::after { content: ""; display: block; clear: both; }
.container h2 { font-size: 1.5rem; margin: 0 0 12px; color: #0b6b78; }
.container h3 { font-size: 1.2rem; margin: 16px 0 8px; }
.container p { margin: 0 0 12px; font-size: 1.05rem; }
.container ul, .container ol { margin: 0 0 14px 1.6em; }
.container li { margin-bottom: 4px; font-size: 1.05rem; }
.container hr { border: 0; border-top: 1px solid #ddd; margin: 4px 0; }
.container a { color: #0b6b78; }

/* key words */
b { color: #c62828; }
.notes-page > .contents b { color: #ff8a80; }

/* pictures and videos */
img { max-width: 100%; }
img:not([height]) { height: auto; }
.centre, .centre20, .centre30 { display: block; margin: 12px auto; }
.centre { width: 60%; }
.centre30 { width: 30%; }
.centre20 { width: 20%; }
iframe[src*="youtube"] {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 12px auto;
  border: 0;
  border-radius: 10px;
}
iframe { max-width: 100%; }
.box1, .box2 { width: 45%; display: inline-block; vertical-align: top; }

/* tables */
table { border-collapse: collapse; margin: 8px 0 14px; }
th, td { border: 1px solid #9aa9b0; padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: #e0f7fa; }

/* buttons */
button {
  font: inherit;
  font-size: 0.95rem;
  padding: 8px 18px;
  margin: 4px 4px 4px 0;
  border: 0;
  border-radius: 20px;
  background: #00bcd4;
  color: black;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
button:hover { background: #1d2b33; color: white; }
.notes-page > .contents button { background: rgba(255, 255, 255, 0.15); color: white; }
.notes-page > .contents button:hover { background: #00bcd4; color: black; }

/* multiple-choice quizzes */
.quiz label { font-size: 1.1rem !important; cursor: pointer; }
.quiz > div { border-radius: 8px; }

/* structural formulae drawn with text */
pre.formula {
  font-family: Consolas, "Courier New", monospace;
  font-size: 1rem;
  line-height: 1.35;
  background: #f1f6f7;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 8px 0 14px;
  overflow-x: auto;
  white-space: pre;
}

/* drawn diagrams */
svg.diagram { display: block; width: 100%; max-width: 520px; height: auto; margin: 12px auto 16px; font-family: inherit; }

/* worked answers */
details.answer {
  margin: 12px 0;
  padding: 10px 14px;
  background: #e0f7fa;
  border-radius: 8px;
}
details.answer summary { cursor: pointer; font-weight: 600; color: #0b6b78; }
details.answer[open] summary { margin-bottom: 8px; }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  .notes-page { padding: 95px 10px 40px; }
  .notes-page > .contents { padding: 20px 18px; }
  .notes-page > .contents h2 { font-size: 1.6rem; }
  details.lesson > summary { padding: 16px 16px; }
  details.lesson > summary h2 { font-size: 1.25rem; }
  .container { padding: 16px 16px; margin: 0 6px 10px; }
  .centre, .centre30, .centre20, .box1, .box2 { width: 100%; }
  img[style*="float"] {
    float: none !important;
    display: block;
    margin: 10px auto;
    padding: 0 !important;
  }
}

/* ---------- S1/S2 lessons: notes inside a lesson sit on a light panel ---------- */
details.lesson > .content {
  background: #fdfdfd;
  color: #1d2b33;
  border-radius: 12px;
  padding: 24px 28px;
  margin: 0 12px 12px;
  overflow-x: auto;
  line-height: 1.6;
}
details.lesson > .content::after { content: ""; display: block; clear: both; }
details.lesson > .content h2 { font-size: 1.5rem; margin: 0 0 12px; color: #0b6b78; }
details.lesson > .content h3 { font-size: 1.2rem; margin: 16px 0 8px; }
details.lesson > .content p { margin: 0 0 12px; font-size: 1.05rem; }
details.lesson > .content ul, details.lesson > .content ol { margin: 0 0 14px 1.6em; }
details.lesson > .content li { margin-bottom: 4px; font-size: 1.05rem; }
details.lesson > .content a { color: #0b6b78; }
details.lesson > .content .container { padding: 0; margin: 0 0 12px; background: none; }
/* drag-and-drop label activities must not be clipped */
.container:has(.diagrambox), .content:has(.diagrambox) { overflow: visible; }

/* ---------- Lesson tiles (topic pages show tiles; tapping one opens that lesson) ---------- */
.lesson-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 8px 0 0 !important;
  padding: 0;
}
.lesson-tiles li { margin: 0 !important; }
.lesson-tiles a, .lesson-tiles .soon {
  display: block;
  height: 100%;
  padding: 18px 18px 20px;
  color: white;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.lesson-tiles .num {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #00bcd4;
  margin-bottom: 6px;
}
.lesson-tiles .name { display: block; font-size: 1.15rem; line-height: 1.35; color: #f3f3f3; }
.notes-page > .contents .lesson-tiles a:hover,
.notes-page > .contents .lesson-tiles a:focus-visible { background: #00bcd4; transform: translateY(-4px); outline: none; }
.lesson-tiles a:hover .num, .lesson-tiles a:hover .name,
.lesson-tiles a:focus-visible .num, .lesson-tiles a:focus-visible .name { color: black; }
.lesson-tiles .soon { opacity: 0.55; box-shadow: none; }

/* With JavaScript: show the tiles, or one lesson at a time */
.js-lessons details.lesson { display: none; }
.js-lessons.showing-lesson details.lesson.active { display: block; }
.js-lessons.showing-lesson .notes-page > .contents { display: none; }
.js-lessons details.lesson.active > summary { cursor: default; list-style: none; }
.js-lessons details.lesson.active > summary::-webkit-details-marker { display: none; }
.js-lessons details.lesson.active > summary:hover { background: none; color: #00bcd4; }
.lesson-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 0 24px 12px;
}
.lesson-nav a {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-weight: 600;
  text-decoration: none;
}
.lesson-nav a:hover { background: #00bcd4; color: black; }
.lesson-nav.top { padding-top: 16px; padding-bottom: 0; }
@media (max-width: 600px) {
  .lesson-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lesson-tiles a, .lesson-tiles .soon { padding: 14px 12px; }
  .lesson-tiles .name { font-size: 1rem; }
  details.lesson > .content { padding: 16px 16px; margin: 0 6px 10px; }
  .lesson-nav { padding: 0 12px 10px; }
}