/* css/page.css -- the content pages: How It Works, Why Brainy Badger and the SEO landing pages.
   Loaded AFTER /css/home.css, which supplies the tokens, nav, footer, buttons and the closing
   call-to-action band (.band-cta, .cta-buttons, .cta-links). This file only adds the page header
   band and the readable content cards. */

main:focus { outline: none; }

/* ---------- page header band ---------- */
/* a saturated brand blue into violet hero, with white text (the title is 7:1 or better, the intro about 6:1) */
.page-hero { background: linear-gradient(120deg, #1E47B8 0%, #4A3BAE 60%, #5E3BB5 100%); color: #fff; border-bottom: 1px solid var(--line); padding: 40px 0 38px; }
.container.narrow { max-width: 840px; }
.page-title { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); overflow-wrap: break-word; color: #fff; }
.page-question { margin-top: 12px; color: #DCE6FF; font-size: clamp(19px, 2.8vw, 23px); font-weight: 600; line-height: 1.3; }
.page-intro { max-width: 640px; margin-top: 12px; color: #EEF3FF; font-size: var(--fs-lead); line-height: var(--lh-body); }
.page-hero .btn { margin-top: 24px; }
/* the hero's button is white, so it reads on the blue */
.page-hero .btn-solid { background: #fff; color: var(--brand); border-color: #fff; }
.page-hero .btn-solid:hover { background: #EEF3FF; border-color: #EEF3FF; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.page-hero :focus-visible { outline-color: #fff; }
/* the small label above the title sits on the gradient, so it is white too (6.6:1 at the violet end) */
.page-hero .eyebrow { color: #fff; }
@media (max-width: 480px) {
  .page-hero { padding: 30px 0 30px; }
  .page-hero .btn { width: 100%; }
}

/* ---------- content cards ---------- */
.page-body { background: var(--cream); padding: 36px 0 48px; }
.doc-card {
  margin-bottom: 18px; padding: 26px 28px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.doc-card:last-child { margin-bottom: 0; }
/* a teal top edge on the content cards; the card's own grey border stays on the other sides */
.doc-card { border-top: 4px solid var(--teal); }
.doc-card h2 { font-size: clamp(24px, 3vw, 30px); line-height: var(--lh-heading); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); }
.doc-card h3 { margin-top: 22px; font-size: 19px; line-height: 1.25; font-weight: 700; }
.doc-card p { margin-top: 12px; font-size: var(--fs-body); line-height: var(--lh-long); max-width: var(--measure); }
.doc-card h2 + p { margin-top: 10px; }
.doc-card > :first-child { margin-top: 0; }
.doc-card p + h2 { margin-top: 26px; }
.doc-card .tick-list + .doc-closing { margin-top: 22px; }
.doc-card p a, .doc-card li a { font-weight: 600; text-underline-offset: 3px; }
.doc-card p a:hover, .doc-card li a:hover { color: var(--blue-dark); text-decoration-thickness: 2px; }
.doc-card .tick-list { gap: 14px; margin-top: 16px; }
.doc-card .tick-list li { padding-left: 36px; font-size: var(--fs-body); line-height: var(--lh-long); max-width: var(--measure); }
.doc-card .tick-list li::before { top: 3px; }
.doc-card .teacher-ui { padding: 0 6px; background: var(--pale-deep); border-radius: 6px; font-weight: 600; white-space: nowrap; }
.doc-card .doc-note {
  padding: 14px 16px; background: var(--violet-soft); border-left: 4px solid var(--violet); border-radius: 0 12px 12px 0;
  font-size: 16px; line-height: 1.6;
}
.doc-card .doc-closing { color: var(--muted); font-weight: 600; }

/* numbered steps */
.doc-steps { counter-reset: step; display: grid; gap: 18px; margin-top: 16px; }
.doc-steps li { counter-increment: step; position: relative; padding-left: 48px; font-size: var(--fs-body); line-height: var(--lh-long); max-width: var(--measure); }
.doc-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--teal); color: #fff; font-weight: 700;
}

@media (max-width: 480px) {
  .page-body { padding: 24px 0 36px; }
  .doc-card { padding: 20px 18px; }
  .doc-card p, .doc-card .tick-list li, .doc-steps li { font-size: 16.5px; }
}

/* ---------- closing call-to-action band: an optional sentence under its heading ---------- */
.band-cta .cta-note { max-width: 560px; margin: 10px auto 0; color: #EEF3FF; font-size: 17px; }

/* ---------- the SEO landing pages: a row of game pictures that link to the games ---------- */
.game-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.game-strip figure { margin: 0; }
.game-strip img { display: block; width: 100%; height: auto; aspect-ratio: 300 / 168; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.game-strip figcaption { margin-top: 6px; font-size: 15px; font-weight: 600; text-align: center; }
@media (max-width: 520px) { .game-strip { gap: 8px; } .game-strip figcaption { font-size: 13px; } }