/* ==========================================================================
   site.css - shared styles for the whole site
   Last edited: 2026-09-22

   Pages found using it (checked 2026-09-22): home page, maths/kangaroo,
   tutors/ak, tutors/lg, tutors/on.  Changing this file changes all of them.

   WHAT CHANGED, AT A GLANCE (details are next to each rule below)
     1. The page sits in a centred column instead of running edge to edge.
     2. Headings have three clear levels: Grade > Section > Topic.
     3. Dated session lines sit UNDER their topic (they used to sit to the
        left of it), and the hw / answers links are small tags.
     4. Wide score tables scroll inside their own box, so the whole page no
        longer scrolls sideways.
     5. Tables use thin light lines instead of black dots.
     6. Links use the site accent colour instead of browser blue.

   NOT CHANGED, ON PURPOSE
     The quiz marking colours (red, green, yellow, orange, grey) are exactly
     as they were.  No HTML, p.py or quizscorer.py was edited.

   TAGS USED BELOW
     [UNCHANGED]  same as the previous live file
     [CHANGED]    an existing rule that was edited
     [ADDED]      a new rule

   TO UNDO: delete any rule tagged [ADDED], or put back the old value of a
   [CHANGED] rule (the old value is quoted in its comment).  Keep a copy of
   the previous site.css as a backup before replacing it.
   ========================================================================== */


/* [UNCHANGED] The site colour palette. */
:root {
  --color-bg: #f7f4ee;
  --color-text: #2a2622;
  --color-muted: #7a7267;
  --color-accent: #9c3b2e;
  --color-border: #e3ddd0;
}

/* [UNCHANGED] The two original indent helpers (values are the same as before;
   only this comment is new).
   The new rules further down are written as "div.indent-date" and
   "h3.indent-non-date" (element + class) on purpose. That makes them win over
   pages that redefine these two classes in their own <style> block, as the ak
   template does. */
.indent-date		{ margin-left: 2rem; }
.indent-non-date	{ margin-left: 5rem; }

/* [CHANGED] Page body.
   Was:  margin: 0;
   Now:  a centred column about 990px wide (max-width: 62rem) with a little
         padding all round, so long lines are easier to read.
   Colours, font and line height are the same as before. */
body {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  line-height: 1.6;
}

/* [ADDED] Links use the accent colour (they were the browser's default blue).
   Delete this line to get blue links back. */
a  { color: var(--color-accent); }

/* [ADDED] A thin light divider under the masthead (was the browser default). */
hr { border: 0; border-top: 1px solid var(--color-border); margin: 1rem 0 0; }

/* [ADDED] Masthead: the logo + "2026-27" row at the top of every page.
   Puts them on one line, vertically centred, and makes the logo slightly
   bigger (2rem; it was 24px).  Every page uses the same markup for this, so
   one rule tidies them all. */
div > h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.6rem; }
div > h2 > img { width: 2rem; height: 2rem; }


/* ---- HEADINGS: Grade > Section > Topic --------------------------------
   Why: "Grade 6", "Patterns/Sequences" and "1) Divisibility Rules" all
   looked the same, so the page had no visible structure.

   A quirk worth knowing: the ak page writes  <h1><h3>Grade 6</h3></h1>.
   Browsers do not allow a heading inside a heading, so they quietly turn
   that into an EMPTY <h1> followed by the <h3>.  That is why the rules below
   hide empty h1/h2 tags, and style "the h3 that comes right after an empty
   h1 / h2".  If the ak page is ever written with plain <h1>, <h2>, <h3>,
   those selectors will need updating. */

/* [ADDED] Hide the empty h1/h2 tags described above. */
h1:empty, h2:empty { display: none; }

/* [ADDED] Blank "spacer" headings.  The pages use <h3><br></h3> as blank
   lines, and several in a row made a huge gap.  Hiding the <br> lets them
   collapse; spacing now comes from the heading margins below. */
h3.indent-non-date > br { display: none; }

/* [ADDED] TOPIC heading, e.g. "1) Divisibility Rules".
   Regular weight and tighter spacing (it was bold with big gaps), so long
   lists such as Grade 7 are easy to read. */
h3.indent-non-date {
  margin: .55rem 0 .2rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

/* [ADDED] SECTION heading, e.g. "Patterns/Sequences" or "Geometry".
   Accent colour with a bar on the left.  Two selectors because the pages
   write it two ways: lg uses <h2 class="indent-non-date">; ak uses the
   nested form described above (an empty h2 followed by an h3). */
h2.indent-non-date,
h2:empty + h3.indent-non-date {
  margin: 2.5rem 0 .6rem;
  padding-left: .75rem;
  border-left: 4px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 1.3rem;
  line-height: 1.4;
}

/* [ADDED] GRADE heading, e.g. "Grade 6".  The biggest, with a line under it.
   (Only the ak page has these at the moment.) */
h1:empty + h3.indent-non-date {
  margin: 3rem 0 1rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--color-accent);
  font-size: 2rem;
  line-height: 1.2;
}


/* ---- SESSION ROWS -------------------------------------------------------
   The dated lines, e.g. "20260918.Fri  hw  answers", and the score table
   under them. */

/* [ADDED] Why: these lines used to be indented LESS than the topic above
   them, so they looked like they belonged to nothing.  Now they sit slightly
   inside their topic, joined to it by a thin vertical line. */
div.indent-date {
  margin: 0 0 0 .5rem;
  padding: .3rem 0 .3rem 1rem;
  border-left: 2px solid var(--color-border);
}

/* [ADDED] The "hw" and "answers" links inside a session row become small
   rounded tags; they fill in when you hover over them. */
.indent-date a {
  padding: 0 .55em;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  font-size: .82em;
  text-decoration: none;
}
.indent-date a:hover { background: var(--color-accent); color: #fff; }


/* [UNCHANGED] Quiz marking colours - exactly as they were, on purpose.
   (The block below is the original, word for word.) */
.four-pointer {
    background-color: lightgrey;
}
.q-wrong { /* question answered wrong */
    background-color: red;
}
.q-good { /* part of question that is correct */
    background-color: lightgreen;
}
.q-skipped { /* question not attempted */
    background-color: yellow;
}
.q-unans { /* question not answered */
    background-color: orange;
}

.past {	/* this is information which WAS valid but is not any longer */
	/* it is retained for historical purposes */
    color: lightgrey;
}


/* ---- TABLES ------------------------------------------------------------ */

/* [CHANGED] Lines around table cells.
   Was:  border: 1px dotted;   (black dots)
   Now:  a thin solid light-beige line.  Same collapsed-border behaviour.
   This applies to EVERY table on the site, including the home page and
   Kangaroo. */
table, th, td { border: 1px solid #d9d2c3; border-collapse: collapse; }

/* [ADDED] Header cells get a light beige background. */
th            { background: #eee8db; }

/* [ADDED] Tutor score tables (the wide quiz tables on ak and lg; they are
   marked class="indent-non-date").
   Why: some were about 1300px wide, which made the WHOLE PAGE scroll
   sideways.  Now the table scrolls inside its own box (overflow-x: auto) and
   the text is a little smaller.
   Only these tables get this.  Kangaroo and the home page tables are left as
   they were, because Kangaroo's dense grid overflowed the page when it got
   the extra padding. */
table.indent-non-date {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: .45rem 0 .25rem;
  border: 0;
  font-size: .78rem;
  line-height: 1.3;
}
table.indent-non-date th,
table.indent-non-date td { padding: .22rem .45rem; text-align: center; }

/* [UNCHANGED] Right-align numbers (used by the home page table). */
.text-right {
	text-align: right;
}