/* The nature scavenger hunt printable (/nature-scavenger-hunt), loaded after
   styles.css and pillar.css.

   The sheet is one element, .hunt-sheet, drawn as white paper on the dark page.
   On paper it is the ONLY thing printed: every other part of the page is hidden
   by the print rules at the bottom, and the sheet is sized in millimetres so it
   fits one page on both A4 (210 x 297 mm) and US Letter (216 x 279 mm), the
   shorter of the two setting the height budget. */

.hunt-top { padding-top: 48px; }
.hunt-top h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px; line-height: 1.45; color: var(--text); margin: 0 0 18px;
}
@media (min-width: 720px)  { .hunt-top h1 { font-size: 24px; } }
.hunt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.hunt-actions .btn { font-size: 12px; }
/* The Print button needs scripting, so it shows only when the inline script in
   the page's <head> has marked <html> before first paint; fx.js adds the click. */
.hunt-actions [data-print] { display: none; }
html.js .hunt-actions [data-print] { display: inline-block; }
/* The PDFs are the fallback to Print, so they sit a step quieter than it. */
.hunt-actions .hunt-pdf { background: var(--panel); }

/* ---- the sheet ---------------------------------------------------------- */
.hunt-sheet {
  background: #fff; color: #111827;
  max-width: 860px; margin: 32px auto 0; padding: 28px 28px 20px;
  box-shadow: 0 0 0 3px var(--border), 8px 8px 0 rgba(0, 0, 0, 0.35);
}
/* The page's text colours are for a dark ground; on paper everything is ink. */
.hunt-sheet, .hunt-sheet p, .hunt-sheet b, .hunt-sheet span { color: #111827; }
.hunt-sheet .hunt-foot span { color: #4b5563; }
.hunt-sheet h2 {
  font-family: 'Press Start 2P', monospace; font-size: 18px;
  margin: 0 0 14px; text-align: center; color: #111827;
}
.hunt-fields { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 10px 16px; margin: 0 0 12px; }
.hunt-fields span {
  font-family: 'VT323', monospace; font-size: 20px;
  border-bottom: 2px solid #111827; padding: 0 0 2px;
}
.hunt-rule { font-family: 'VT323', monospace; font-size: 20px; margin: 0 0 14px; text-align: center; }
.hunt-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.hunt-grid li {
  position: relative; border: 2px solid #111827;
  padding: 10px 8px 6px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: 150px;
}
/* The box to tick. Drawn, not an <input>, because it is filled in with a pencil. */
.hunt-grid li::before {
  content: ""; position: absolute; top: 6px; left: 6px;
  width: 18px; height: 18px; border: 2px solid #111827;
}
.hunt-grid img { width: auto; height: 84px; max-width: 100%; object-fit: contain; margin: 0 0 6px; }
.hunt-grid b {
  font-family: 'VT323', monospace; font-weight: normal; font-size: 22px; line-height: 1;
}
.hunt-grid i {
  display: block; width: 100%; margin: 4px 0 0;
  border-bottom: 1px dashed #6b7280; height: 14px;
}
.hunt-foot a { color: inherit; text-decoration: underline; }
.hunt-foot {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: 'VT323', monospace; font-size: 17px; color: #4b5563; margin: 12px 0 0;
}
@media (max-width: 719px) {
  .hunt-sheet { padding: 18px 14px 14px; }
  .hunt-fields { grid-template-columns: 1fr; }
  .hunt-grid { grid-template-columns: repeat(2, 1fr); }
  .hunt-foot { flex-direction: column; }
}

/* ---- the hero: copy beside the sheet ------------------------------------ */
/* On a laptop the sheet sits beside the copy as a taped page, so the first
   screen shows what you will print. The sheet stays a direct child of
   .rp-wide: the print rules below rely on that. */
.hunt-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; }
.hunt-facts li {
  padding: 6px 12px; border: 3px solid #000; background: var(--panel);
  box-shadow: 3px 3px 0 #000; font-size: 20px; line-height: 1.1;
}
.hunt-facts b { color: var(--gold); font-weight: normal; }
.hunt-hero-copy .rp-note { margin-top: 16px; }
@media screen and (min-width: 1000px) {
  .hunt-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
  .hunt-hero .hunt-sheet {
    margin: 0; padding: 20px 20px 14px; position: relative;
    transform: rotate(1.5deg);
  }
  .hunt-hero .hunt-sheet::before {           /* a strip of tape on the page */
    content: ""; position: absolute; top: -12px; left: 42%; width: 16%; height: 24px;
    transform: rotate(-4deg);
    background: linear-gradient(100deg, #ddc99ada, #ecdbb4eb 50%, #d8c496df);
  }
  .hunt-hero .hunt-sheet h2 { font-size: 16px; margin-bottom: 10px; }
  .hunt-hero .hunt-fields span, .hunt-hero .hunt-rule { font-size: 17px; }
  .hunt-hero .hunt-grid { gap: 7px; }
  .hunt-hero .hunt-grid li { min-height: 104px; padding: 8px 6px 4px; }
  .hunt-hero .hunt-grid li::before { width: 13px; height: 13px; top: 4px; left: 4px; }
  /* Wide shapes (the squirrel) would grow into the tick box: keep them narrow. */
  .hunt-hero .hunt-grid img { height: 52px; max-width: 76%; object-fit: contain; margin-bottom: 4px; }
  .hunt-hero .hunt-grid b { font-size: 18px; }
  .hunt-hero .hunt-grid i { height: 10px; }
  .hunt-hero .hunt-foot { font-size: 15px; }
}

/* ---- how to play, by age ------------------------------------------------ */
.hunt-steps, .hunt-ages {
  list-style: none; margin: 28px auto 0; padding: 0; max-width: 1000px;
  display: grid; gap: 18px; text-align: left;
}
/* Fixed column counts, so no tile is ever left alone on a row:
   steps 1 / 2 / 4 across, ages 1 / 3. */
.hunt-steps { grid-template-columns: minmax(0, 1fr); counter-reset: hunt-step; }
.hunt-ages { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .hunt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .hunt-ages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hunt-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hunt-steps li, .hunt-ages li {
  padding: 16px 16px 14px; border: 3px solid #000; background: var(--panel);
  box-shadow: 4px 4px 0 #000; font-size: 19px; line-height: 1.3;
}
.hunt-steps li { counter-increment: hunt-step; }
.hunt-steps li::before {
  content: counter(hunt-step); display: inline-block; margin-bottom: 10px; padding: 4px 8px;
  background: var(--gold); color: #111827;
  font-family: 'Press Start 2P', monospace; font-size: 12px; line-height: 1.5;
}
.hunt-steps strong { display: block; color: #fff; font-weight: normal; font-size: 21px; }
.hunt-ages b {
  display: block; margin-bottom: 8px; color: var(--gold); font-weight: normal;
  font-family: 'Press Start 2P', monospace; font-size: 20px; line-height: 1.375;
}
.hunt-h2-gap { margin-top: 56px; }

/* ---- the field guide: the sheet's silhouettes, with where to look ------- */
.hunt-guide {
  list-style: none; margin: 28px auto 0; padding: 0; max-width: 1080px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
  text-align: left;
}
.hunt-guide li {
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto 1fr; column-gap: 12px;
  align-items: start; padding: 12px; background: #fffdf4; color: #374151;
  border: 3px solid #000; box-shadow: 4px 4px 0 #000; font-size: 17px; line-height: 1.25;
}
.hunt-guide img { grid-row: 1 / 3; width: 64px; height: 56px; object-fit: contain; }
.hunt-guide b { color: #111827; font-weight: normal; font-size: 21px; line-height: 1.1; }

/* ---- when to go, be kind ------------------------------------------------ */
.hunt-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.hunt-tip { padding: 20px 20px 8px; border: 3px solid #000; background: var(--panel); box-shadow: 4px 4px 0 #000; }
.hunt-tip .rp-h2 { font-size: 16px; margin-bottom: 14px; }
.hunt-tip ul { margin: 0 0 12px; padding-left: 1.2em; }
.hunt-tip li { font-size: 19px; margin: 0 0 10px; }
.hunt-tip strong { color: var(--gold); font-weight: normal; }

/* ---- the app band: from silhouette to card ------------------------------ */
/* The band carries a picture as well as text, so its buttons go underneath. */
.hunt-download .rp-download-band__inner { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.hunt-download .cta-row { justify-content: center; }
.hunt-band { display: flex; align-items: center; gap: 28px; }
.hunt-band > div:last-child { flex: 1 1 auto; text-align: left; }
.hunt-band p + p { margin-top: 10px; }
.hunt-reveal { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.hunt-reveal-tile { width: 92px; padding: 14px 10px; background: #fffdf4; border: 3px solid #000; }
.hunt-reveal-arrow { color: var(--gold); font-size: 22px; }
.hunt-reveal-card { width: 112px; border-radius: 7px; transform: rotate(4deg); filter: drop-shadow(0 8px 12px #0006); }
@media (max-width: 719px) {
  .hunt-guide { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hunt-guide li { grid-template-columns: 1fr; grid-template-rows: auto; padding: 10px; font-size: 16px; }
  .hunt-guide img { grid-row: auto; width: 100%; height: 44px; margin-bottom: 6px; }
  .hunt-band { flex-direction: column; text-align: center; }
  .hunt-band > div:last-child { text-align: center; }
}

/* ---- paper -------------------------------------------------------------- */
/* No page margin: with one, the browser prints its own header and footer
   (title, date, URL) into it. The sheet carries the 12 mm itself. */
@page { margin: 0; }
@media print {
  body { background: #fff !important; }
  body > *:not(main), main > *:not(.hunt-print) { display: none !important; }
  .hunt-print { padding: 0 !important; margin: 0 !important; background: none !important; }
  .hunt-print > .rp-wide > *:not(.hunt-sheet) { display: none !important; }
  .hunt-print .rp-wide { max-width: none; padding: 0; display: block; }
  .hunt-sheet::before { display: none; }
  .hunt-sheet {
    box-shadow: none; margin: 0; padding: 12mm; max-width: none; transform: none !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .hunt-sheet h2 { font-size: 16pt; margin-bottom: 4mm; }
  .hunt-fields { grid-template-columns: 1.4fr 1fr 1.4fr; margin-bottom: 3mm; }
  .hunt-fields span, .hunt-rule { font-size: 14pt; }
  .hunt-rule { margin-bottom: 4mm; }
  .hunt-grid { grid-template-columns: repeat(4, 1fr); gap: 3mm; }
  .hunt-grid li { min-height: 0; height: 38mm; padding: 2mm 2mm 1.5mm; break-inside: avoid; }
  .hunt-grid li::before { width: 4mm; height: 4mm; top: 1.5mm; left: 1.5mm; }
  .hunt-grid img { height: 17mm; margin-bottom: 1.5mm; }
  .hunt-grid b { font-size: 15pt; }
  .hunt-grid i { height: 6mm; }
  .hunt-foot { flex-direction: row; font-size: 11pt; margin-top: 3mm; }
}