/* The free colouring-page section (free/). Builds on /assets/theme.css, not on the main site's
   stylesheet. Generated pages come from tools/build-free.mjs; this file is written by hand. */

/* Colours, radii, fonts and shadows come from the shared /assets/theme.css (the app's tokens),
   linked before this file. Only what is particular to these pages is defined here. */
:root {
  --fp-sheet: #FFFFFF; /* drawings are black ink on white paper in both themes */
  /* The "more in the app" band is dark in both themes, so its text uses the app's dark-theme
     values: text, textSecondary and sunflowerInk. */
  --fp-band: var(--brand-ink);
  --fp-band-text: #F7F0E4;
  --fp-band-text-secondary: #BDB1A3;
  --fp-band-accent: #F6C866;
}

@media (prefers-color-scheme: dark) {
  :root { --fp-band: var(--color-background-element); }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font: 400 1.0625rem/1.55 var(--font-body);
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--color-tint); text-underline-offset: 0.18em; }

h1, h2, h3, .fp-button, .fp-age, .fp-card-title, .fp-header nav { font-family: var(--font-display); }
h1, h2, h3 { font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.fp-wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

.fp-skip { position: absolute; left: -999px; top: 8px; background: var(--color-text); color: var(--color-background); padding: 8px 14px; border-radius: var(--radius-md); z-index: 10; }
.fp-skip:focus { left: 8px; }

:focus-visible { outline: 3px solid var(--color-tint); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Header and footer */

.fp-header { border-bottom: 1px solid var(--color-border); background: var(--color-background); }
.fp-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; padding-block: 10px; }
.fp-brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; color: var(--color-text); text-decoration: none; }
.fp-brand img { width: 40px; height: 40px; }
.fp-wordmark span { color: var(--brand-tomato); }
.fp-header nav { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; }
.fp-header nav a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.fp-header nav a:hover { color: var(--color-tint); }
.fp-header nav .fp-nav-app { background: var(--color-primary); color: var(--color-on-primary); padding: 7px 18px; border-radius: var(--radius-pill); }
.fp-header nav .fp-nav-app:hover { color: var(--color-on-primary); background: var(--color-primary-pressed); }

.fp-footer { border-top: 1px solid var(--color-border); padding: 28px 0 40px; margin-top: 48px; font-size: 0.95rem; }
.fp-footer p { margin: 0 0 0.4em; }
.fp-footer-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 10px 0 14px; }
.fp-footer-nav a { color: var(--color-text); }

/* Language bar (/assets/language.js), as on the main site: always shown, no close button. */
.fp-lang-bar { background: var(--color-background-selected); border-bottom: 1px solid var(--color-border); font-size: 13px; }
.fp-lang-bar .fp-wrap { display: flex; align-items: center; gap: 10px 20px; min-height: 60px; padding-block: 10px; }
.fp-lang-bar p { flex: 1; margin: 0; line-height: 1.45; }
.fp-lang-bar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fp-lang-bar-actions[hidden] { display: none; }
.fp-lang-bar select { min-height: 36px; min-width: 130px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background-element); color: var(--color-text); font: inherit; cursor: pointer; }
.fp-lang-bar-go { min-height: 36px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--color-text); color: var(--color-background); font: inherit; font-weight: 600; cursor: pointer; }
.fp-lang-bar-go:hover { opacity: 0.85; }
.fp-lang-bar-links { display: flex; align-items: center; gap: 10px; }
.fp-lang-bar-links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-text); }
.fp-lang-bar-links a[aria-current] { font-weight: 600; text-decoration: none; }

/* Shared bits */

.fp-lead { font-size: 1.2rem; color: var(--color-text-secondary); max-width: 46em; }
.fp-muted { color: var(--color-text-secondary); }
.fp-small { font-size: 0.92rem; }
.fp-eyebrow { font-weight: 500; color: var(--color-tint); margin-bottom: 0.4em; }

.fp-button {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 var(--color-primary-pressed);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  margin-right: 8px;
}
.fp-button:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--color-primary-pressed); }
.fp-button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--color-primary-pressed); background: var(--color-primary-pressed); }

/* Age levels as crayon chips: 3–5 sky, 6–8 leaf, 9+ plum. */
.fp-age { display: inline-block; font-weight: 600; font-size: 0.9rem; padding: 3px 12px; border-radius: var(--radius-pill); text-decoration: none; vertical-align: middle; }
.fp-age-1 { background: var(--color-sky-soft); color: var(--color-sky-ink); }
.fp-age-2 { background: var(--color-leaf-soft); color: var(--color-leaf-ink); }
.fp-age-3 { background: var(--color-plum-soft); color: var(--color-plum-ink); }
h2 .fp-age { font-size: 1rem; margin-right: 6px; position: relative; top: -2px; }

/* Gallery */

.fp-hero { padding: 48px 0 16px; }
.fp-jump { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fp-jump a:hover { text-decoration: underline; }

.fp-level { padding: 32px 0 8px; scroll-margin-top: 16px; }
.fp-level-head p { color: var(--color-text-secondary); }

.fp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; }
.fp-grid-small { grid-template-columns: repeat(auto-fill, minmax(150px, 200px)); }
.fp-card a { display: block; background: var(--color-background-element); border-radius: var(--radius-xl); padding: 12px 12px 14px; box-shadow: var(--shadow-paper); color: var(--color-text); text-decoration: none; height: 100%; transition: transform 0.15s ease; }
.fp-card a:hover { transform: translateY(-3px) rotate(-0.6deg); }
.fp-card img { background: var(--fp-sheet); width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg); margin-bottom: 10px; }
.fp-card-title { display: block; font-weight: 600; font-size: 1.05rem; }
.fp-card-sub { display: block; font-size: 0.88rem; color: var(--color-text-secondary); }
.fp-card-locked a { position: relative; }
.fp-card-locked img { opacity: 0.55; }
.fp-card-locked .fp-card-sub::before { content: '🔒 '; }
.fp-card-free .fp-card-sub { color: var(--color-tint); font-weight: 500; }

.fp-why { margin-top: 48px; padding: 44px 0 28px; background: var(--color-background-element); border-block: 1px solid var(--color-border); }
.fp-why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 28px; }
.fp-why-grid li { border-top: 4px solid var(--brand-sunflower); padding-top: 14px; }
.fp-why-grid li:nth-child(2) { border-top-color: var(--brand-tomato); }
.fp-why-grid li:nth-child(3) { border-top-color: var(--brand-sky); }
.fp-why-grid li:nth-child(4) { border-top-color: var(--brand-leaf); }
.fp-why-grid p { color: var(--color-text-secondary); }

.fp-cta { background: var(--fp-band); color: var(--fp-band-text); padding: 52px 0; margin-top: 48px; border-block: 1px solid var(--color-border); }
.fp-cta-inner { max-width: 760px; text-align: center; }
.fp-cta .fp-eyebrow { color: var(--fp-band-accent); }
.fp-cta p { color: var(--fp-band-text-secondary); font-size: 1.1rem; }
.fp-cta .fp-button { margin: 8px 0 0; }

.fp-use { padding-top: 40px; max-width: 760px; }
.fp-use p { color: var(--color-text-secondary); }

/* Drawing page */

.fp-crumbs { padding: 22px 0 6px; font-size: 0.95rem; color: var(--color-text-secondary); }
.fp-crumbs a { color: var(--color-text-secondary); }

.fp-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 20px 0 12px; }
.fp-sheet { background: var(--fp-sheet); border-radius: var(--radius-sm); padding: 6%; box-shadow: var(--shadow-paper); transform: rotate(-1deg); }
.fp-dots .fp-sheet { transform: rotate(1deg); }
.fp-sheet img { width: 100%; aspect-ratio: 1; }
.fp-panel-copy h1 { margin-top: 12px; }
.fp-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.92rem; margin-top: 18px; }
.fp-tags span:not(.fp-muted) { background: var(--color-background-selected); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 1px 10px; }
.fp-dots { margin-top: 28px; }
.fp-section { padding-top: 40px; }
.fp-section > p { color: var(--color-text-secondary); }

@media (max-width: 760px) {
  .fp-panel { grid-template-columns: 1fr; gap: 24px; }
  .fp-dots .fp-panel-copy { order: -1; }
  .fp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fp-grid-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-hero { padding-top: 28px; }
  .fp-lang-bar .fp-wrap { flex-wrap: wrap; gap: 8px; }
  .fp-lang-bar p { flex-basis: 100%; }
  .fp-lang-bar-actions { flex: 1; }
  .fp-lang-bar select { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-card a, .fp-button { transition: none; }
  .fp-card a:hover { transform: none; }
}

@media print {
  .fp-header, .fp-footer, .fp-cta, .fp-button, .fp-lang-bar { display: none; }
}