/* ============================================================
   Hope Springs — HAPPY READERS stylesheet  (young kids, ~6 yrs)
   A separate look from the grammar lessons: big, colourful, playful.
   Link this from a reader lesson:  <link rel="stylesheet" href="happyreader.css">
   It is fully self-contained — it does NOT touch hopesprings.css, so
   editing it can never change the grammar/JHS lessons.
   Print-ready A4, same as the other lessons (embedded fonts + exact colours).
   ============================================================ */

/* ---- Kid reading font: Andika (SIL literacy font). Embedded so it prints
        anywhere. Swap to Print Clearly by changing --font-kid below. ---- */
@font-face {
  font-family: "Andika";
  src: url("fonts/Andika-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Andika";
  src: url("fonts/Andika-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Andika";
  src: url("fonts/Andika-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PrintClearly";
  src: url("fonts/PrintClearly-GGP.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* The kid font. Change "Andika" to "PrintClearly" to switch the whole look. */
  --font-kid: "Andika", "Comic Sans MS", "Segoe Print", sans-serif;
  --font-jp:
    "HGMaruGothicMPRO", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", sans-serif;

  /* Bright, print-safe palette */
  --sky:    #35a7e0;   /* title / section 4 */
  --coral:  #ff6b57;   /* section 1 */
  --grass:  #46c06a;   /* section 2 */
  --grape:  #9b5de5;   /* section 3 */
  --sun:    #ffd23f;   /* accents / badges */
  --paper:  #fffdf6;   /* warm page */
  --ink:    #22303a;   /* body text */
  --line:   #2b4a5a;   /* writing lines */

  /* Colour code for the word-order exercise (Steve's scheme) */
  --c-s:   #1a66d0;    /* Subject      = blue   */
  --c-v:   #e11d1d;    /* Verb         = red    */
  --c-o:   #17983c;    /* Object       = green  */
  --c-c:   #d98e00;    /* Complement   = gold   */
  --c-mod: #8e44ad;    /* modal verb   = purple */

  /* Type sizes — big for young readers */
  --t-title:  40pt;
  --t-head:   22pt;
  --t-body:   19pt;
  --t-write:  20pt;
  --t-note:   13pt;   /* JP support line */
}

/* ---- Page setup: A4 portrait for printing ---- */
@page { size: A4 portrait; margin: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-kid);
  color: var(--ink);
  background: #e9eef2;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.page {
  position: relative;
  width: 210mm;
  min-height: 292mm;          /* not a full 297: avoids a near-empty extra sheet */
  padding: 11mm 13mm 12mm;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.page + .page { page-break-before: always; }

/* ---- Title banner: fat, rounded, cheerful ---- */
.title {
  position: relative;
  background: var(--sky);
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: var(--t-title);
  line-height: 1.05;
  padding: 12px 20px;
  border-radius: 22px;
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px var(--sky);
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
}

/* ---- Exercise header: big number circle + coloured pill ---- */
.ex {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 8px;
}
.ex .no {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  font-weight: 700;
  font-size: 24pt;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--sun);
}
.ex .say {
  font-weight: 700;
  font-size: var(--t-head);
  line-height: 1.1;
}
/* colour the pill/number per section: add .c1/.c2/.c3/.c4 to .ex */
.ex.c1 .no { background: var(--coral); box-shadow: 0 0 0 3px var(--coral); color:#fff; }
.ex.c2 .no { background: var(--grass); box-shadow: 0 0 0 3px var(--grass); color:#fff; }
.ex.c3 .no { background: var(--grape); box-shadow: 0 0 0 3px var(--grape); color:#fff; }
.ex.c4 .no { background: var(--sky);   box-shadow: 0 0 0 3px var(--sky);   color:#fff; }

/* small Japanese support line under an instruction */
.jp {
  font-family: var(--font-jp);
  font-size: var(--t-note);
  color: #5a6b76;
  margin: 2px 0 0 58px;
  line-height: 1.4;
}

/* ---- Picture grid (3 across) ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
  margin-top: 6px;
}
/* stretch a grid so its rows spread down the whole page (no empty bottom) */
.grid.fill { flex: 1; align-content: space-between; }

/* stretch a stack of items to fill the page height evenly */
.fillcol { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.fillcol .scram { margin-top: 0; }
.cell { position: relative; display: flex; flex-direction: column; }
.pic {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px #d8e0e6;
  background: #eef2f5;
}
/* number badge on a picture */
.badge {
  position: absolute;
  top: -10px; left: -8px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  font-size: 19pt;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  z-index: 2;
}
.cell.c2 .badge { background: var(--grass); }

/* ---- Word bank (Exercise 1): chips with a box to write the number ---- */
.bank {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
  margin-top: 14px;
}
.word {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 3px solid var(--coral);
  border-radius: 14px;
  padding: 8px 12px;
  font-size: var(--t-body);
  font-weight: 700;
}
.word .box {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: 3px solid var(--coral);
  border-radius: 8px;
  background: #fff8f6;
}

/* ---- Handwriting guide (Exercise 2): 4-line kids' ruling ----
   solid top line, red dotted centre (x-height), solid baseline,
   red dotted descender line below. Three equal zones:
   top→centre (ascenders), centre→baseline (letter body), baseline→below. */
.hw {
  margin-top: 8px;
  height: 16mm;
  background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(to right, var(--c-v) 0 6px, transparent 6px 12px), /* descender */
    linear-gradient(var(--line), var(--line)),                                    /* baseline  */
    repeating-linear-gradient(to right, var(--c-v) 0 6px, transparent 6px 12px), /* centre    */
    linear-gradient(var(--line), var(--line));                                    /* top       */
  background-size:
    100% 2px,
    100% 2.4px,
    100% 2px,
    100% 2.4px;
  background-position:
    0 100%,        /* descender at the very bottom */
    0 66.66%,      /* baseline two-thirds down     */
    0 33.33%,      /* centre one-third down        */
    0 0;           /* top line                     */
}
/* compact 4-line ruling for sentence / answer writing (parts 3 & 4) */
.hw.sm { height: 9mm; margin-top: 3px; clear: both; }

/* a page carrying two exercises: tighten the vertical rhythm so both fit */
.page.tight .ex { margin: 9px 0 4px; }
.page.tight .qa { margin-top: 4px; }
.page.tight .scram { margin-top: 0; }
.page.tight .jp { margin-bottom: 2px; }
/* a plain write-on line (no midline) for sentences/answers */
.line {
  border-bottom: 3px solid var(--line);
  height: 12mm;
  margin-top: 4px;
}
.line.short { width: 120px; display:inline-block; height:1.1em; vertical-align:-4px; }

/* ---- Exercise 3: colour-coded word-order ---- */
.legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-weight: 700; font-size: 13pt;
  margin: 2px 0 6px 58px;
}
.scram {
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.3;
  margin: 12px 0 0 2px;
}
.scram .qn { color: var(--ink); margin-right: 6px; }
.scram .sep { color: #9bb0bd; font-weight: 400; margin: 0 4px; }
.s   { color: var(--c-s); }
.v   { color: var(--c-v); }
.o   { color: var(--c-o); }
.c   { color: var(--c-c); }
.mod { color: var(--c-mod); }

/* Japanese meaning hint on the SAME line as the English, floated right */
.jp-r {
  float: right;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 11pt;
  color: #5a6b76;
  margin-left: 14px;
}
/* small Japanese meaning hint under a scrambled sentence */
.hint {
  font-family: var(--font-jp);
  font-size: 12.5pt;
  color: #5a6b76;
  margin: 2px 0 0 2px;
  line-height: 1.35;
}

/* ---- There is / There are: little picture + write-in blank + phrase ---- */
.tia { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.tia .thumb {
  flex: 0 0 auto;
  width: 32mm; height: 24mm;
  object-fit: cover;
  border-radius: 12px;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px #d8e0e6;
  background: #eef2f5;
}
.tia .txt { font-size: var(--t-body); font-weight: 700; line-height: 1.3; }
/* a write-on blank sitting inside a line of text */
.wb {
  display: inline-block;
  min-width: 155px;
  border-bottom: 3px solid var(--line);
  height: 1.15em;
  vertical-align: -5px;
  margin-right: 4px;
}

/* ---- Exercise 4: questions with a model answer to lean on ---- */
.qa { margin-top: 12px; }
.qa .q  { font-size: var(--t-body); font-weight: 700; line-height: 1.25; }
.qa .q .qn { margin-right: 6px; }
.qa .model {
  font-size: 15pt; color: #5a6b76;
  margin: 2px 0 0 2px; line-height: 1.3;
}
.qa .model b { color: var(--ink); }

/* ---- Footer: page number + tiny word list (optional) ---- */
.foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
}
.foot .words { font-size: 13pt; color: #5a6b76; line-height: 1.5; }
.foot .words b { color: var(--ink); }
.pageno {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sky);
  color: #fff; font-weight: 700; font-size: 16pt;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Screen preview only ---- */
@media screen {
  body { padding: 16px; }
  .page { margin: 0 auto 16px; box-shadow: 0 2px 12px rgba(0,0,0,.18); }
}