/* ===========================
   Mae Adventures - Printable Worksheets
   Clean black-and-white print style
   Body font is Andika (single-storey "a") for early-literacy readability
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Andika:wght@400;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Andika', 'Nunito', 'Arial Rounded MT Bold', Arial, sans-serif;
  background: #e8e0d4;
  color: #111;
}

/* ── Screen: paper card ── */
.ws-page {
  background: white;
  max-width: 680px;
  margin: 1.5rem auto;
  padding: 0.75in 0.7in 0.55in;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  min-height: 9in;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Push footer to bottom without overlapping content */
.ws-footer {
  margin-top: auto;
  padding-top: 0.4in;
}

/* ── Branding mark - removed from top, now footer only ── */
.ws-brand { display: none; }

/* ── Title block ── */
.ws-title {
  font-size: 1.65rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.12rem;
  line-height: 1.15;
}
.ws-grade {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 0.55rem;
}
.ws-rule { border: none; border-top: 1.5px solid #ccc; margin: 0.4rem 0 0.55rem; }

/* ── Name / Date line - full-width symmetrical ── */
.ws-fields {
  display: flex;
  gap: 2rem;
  margin-bottom: 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #444;
  align-items: flex-end;
}
.ws-fields label {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex: 1;
}
.ws-fields label:first-child { flex: 2; }
.ws-fields .field-line {
  flex: 1;
  min-width: 0;
  height: 20px;
  border: none;
  border-bottom: 1.5px solid #333;
}
.ws-fields .field-line--short { /* inherits flex:1 from parent rule */ }

/* ── Instructions ── */
.ws-instructions {
  font-size: 0.82rem;
  color: #333;
  margin-bottom: 0.6rem;
  line-height: 1.55;
  padding-left: 0.05in;
}
.ws-instructions strong { font-weight: 800; }

/* ── Footer ── */
.ws-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ws-footer-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.ws-footer-brand {
  font-size: 0.75rem;
  font-weight: 800;
  color: #555;
}
.ws-footer-url {
  font-size: 0.68rem;
  color: #999;
}

/* ── Decode row number labels ── */
.mc { display:flex; flex-direction:column; align-items:center; }
.mnum { font-size:0.58rem; color:#bbb; font-weight:800; line-height:1; margin-top:2px; }

/* ── Coloring page images (screen) ── */
.color-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 2.5px solid #111;
  box-sizing: border-box;
}

/* Coloring pages: remove excess whitespace on screen */
.ws-page:has(.color-img) {
  min-height: auto;
  padding: 0.3in 0.4in 0.5in;
}

/* ── Landscape coloring page images (screen) ── */
.color-img-landscape {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 2.5px solid #111;
  box-sizing: border-box;
}
.ws-page:has(.color-img-landscape) {
  min-height: auto;
  padding: 0.3in 0.4in 0.5in;
}

/* ── Screen-only title (coloring pages) - hidden on print ── */
.ws-screen-title {
  max-width: 680px;
  margin: 0.75rem auto 0;
  padding: 0 1rem;
  text-align: center;
}
.ws-screen-title h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #3D2B1F;
  margin-bottom: 0.15rem;
  line-height: 1.2;
}
.ws-screen-title p {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #888;
}

/* ── Print button (screen only) ── */
.print-btn {
  display: block;
  width: fit-content;
  margin: 0 auto 0.5rem;
  background: #111;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 1rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
}
.print-btn:hover { background: #333; }

/* ─────────────── PRINT ─────────────── */
@media print {
  html, body { background: white; }
  .ws-page {
    box-shadow: none;
    margin: 0;
    padding: 0.5in 0.6in 0.3in;
    max-width: 100%;
    min-height: auto;
  }
  .ws-footer {
    padding-top: 0.2in;
  }
  /* Coloring pages: enough left/right margin to stay inside printer's printable area */
  .ws-page:has(.color-img) {
    padding: 0.15in 0.45in 0.3in;
  }
  /* Coloring page images: fill the printable width, constrain height for portrait images */
  .color-img {
    display: block;
    max-width: 100%;
    max-height: 10.2in;
    width: auto;
    height: auto;
    margin: 0 auto;
  }
  /* Landscape coloring pages */
  .ws-page:has(.color-img-landscape) {
    padding: 0.15in 0.45in 0.3in;
  }
  .color-img-landscape {
    display: block;
    max-width: 100%;
    max-height: 7.5in;
    width: auto;
    height: auto;
    margin: 0 auto;
  }
  .print-btn { display: none; }
  .ws-screen-title { display: none; }
  @page { margin: 0.2in 0; }
}

/* --- Back + Print button row (screen only) --- */
.ws-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.75rem auto 0.5rem;
}
.back-btn {
  display: inline-block;
  background: #f4f0eb;
  color: #333;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  padding: 0.35rem 0.85rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
  text-decoration: none;
}
.back-btn:hover { background: #e8e0d4; }
/* Override print-btn margin when inside ws-actions */
.ws-actions .print-btn { margin: 0; }

@media print {
  .ws-actions .back-btn { display: none; }
}

/* ── Calendar month pages: mobile sizing ──
   Each month page's <style> block sets a 4rem month-name and 0.72in
   decorations sized for the landscape print sheet. On narrow viewports
   that overflows the screen — the giant letters wrap one-per-line and
   read as vertical. Override on small screens so the layout stays
   horizontal (matching the print version) and fits within the viewport.
   !important is used because each page's inline <style> tag comes after
   this external sheet in source order.
*/
@media (max-width: 760px) {
  .cal-month-name {
    font-size: clamp(1.5rem, 8.5vw, 2.8rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .cal-header { gap: 0.3rem !important; flex-wrap: nowrap !important; }
  .cal-deco { width: 0.42in !important; height: 0.42in !important; }
  .cal-deco--left, .cal-deco--right { gap: 0.15rem !important; }
}
@media (max-width: 420px) {
  .cal-month-name { font-size: clamp(1.2rem, 7.5vw, 2rem) !important; }
  .cal-deco { width: 0.32in !important; height: 0.32in !important; }
}