/* Toekanmuseum-app: de kleuren van de borden en de site (donkergroen, oranje, papier), voor de gsm in de tuin.
   Geen externe lettertypes, geen inline stijl (de CSP laat alleen dit bestand toe). */
:root {
  --groen: #1F3329;
  --groen-2: #2A4537;
  --groen-3: #355643;
  --oranje: #F28C28;
  --oranje-tekst: #B2550B;
  --papier: #FBF6EC;
  --wit: #FFFFFF;
  --inkt: #1B2A22;
  --grijs: #56645B;
  --lijn: #E4DCCB;
  --licht: #EEF2EC;
  --juist: #2F7D4A;
  --fout: #B3261E;
  --kop: "Century Schoolbook", "Cambria", Georgia, "Times New Roman", serif;
  --tekst: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --rond: 14px;
  --tabs: 60px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--inkt); font: 17px/1.55 var(--tekst);
       padding-bottom: calc(var(--tabs) + env(safe-area-inset-bottom, 0px)); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oranje-tekst); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--oranje); outline-offset: 3px; border-radius: 4px; }
h1, h2 { font-family: var(--kop); line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); margin-bottom: 16px; }
h2 { font-size: 1.4rem; margin: 32px 0 12px; }
p { margin: 0 0 12px; }
figure { margin: 0; }
figcaption, .klein { font-size: .85rem; color: var(--grijs); }
figcaption { margin-top: 6px; }

.binnen { max-width: 640px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px));
          padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main.binnen { padding-top: 20px; }

/* kop en tabs */
.kop { background: var(--groen); color: var(--papier); padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top, 0px)); }
.merk { display: flex; align-items: center; gap: 10px; color: var(--papier); text-decoration: none;
        max-width: 640px; margin: 0 auto; }
.merk img { width: 44px; height: 44px; }
.merk b { display: block; font-family: var(--kop); font-size: 1.15rem; letter-spacing: .5px; }
.merk small { display: block; font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; opacity: .8; }

.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; background: var(--groen);
        padding-bottom: env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--groen-3); }
.tabs a { flex: 1; min-height: var(--tabs); display: flex; align-items: center; justify-content: center;
          color: var(--papier); text-decoration: none; font-weight: 600; font-size: .9rem; text-align: center;
          border-top: 3px solid transparent; }
.tabs a[aria-current="page"] { border-top-color: var(--oranje); color: var(--wit); }

.voet { padding-top: 24px; padding-bottom: 24px; font-size: .85rem; color: var(--grijs); }

/* algemeen */
.bovenregel { color: var(--oranje-tekst); font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
              font-size: .8rem; margin-bottom: 4px; }
.intro { font-size: 1.08rem; color: var(--groen-2); }
.groot { font-size: 1.2rem; font-weight: 700; }
.knop { display: inline-block; background: var(--oranje); color: var(--inkt); font: 700 1rem/1.2 var(--tekst);
        text-decoration: none; padding: 14px 22px; border-radius: 999px; border: 0; cursor: pointer; text-align: center; }
.knop:hover { background: #E07A18; }
.knop.breed { display: block; width: 100%; }
.knop-licht { background: transparent; color: var(--groen); box-shadow: inset 0 0 0 2px var(--groen); }
.knop-licht:hover { background: var(--licht); }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.melding { background: var(--licht); border-left: 4px solid var(--oranje); padding: 12px 14px; border-radius: 6px; }

/* plan van de tuin */
.plan-kader { background: var(--groen); border-radius: var(--rond); padding: 6px; margin: 16px 0; }
.plan { display: block; width: 100%; height: auto; }
.plan a:focus-visible circle { stroke: var(--wit); stroke-width: 3; }

/* lijsten van borden en tegels */
.borden { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--lijn); }
.borden a { display: flex; align-items: center; gap: 12px; padding: 10px 2px; min-height: 52px;
            border-bottom: 1px solid var(--lijn); color: var(--inkt); text-decoration: none; font-weight: 600; }
.nr { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--oranje); color: var(--inkt);
      display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; }
.tegels { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tegels a { display: block; height: 100%; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond);
            padding: 14px; color: var(--inkt); text-decoration: none; }
.tegels b { display: block; font-family: var(--kop); font-size: 1.1rem; margin-bottom: 4px; }
.tegels span { font-size: .88rem; color: var(--grijs); }

/* bord */
.foto img { border-radius: var(--rond); width: 100%; }
/* minmax(0, 1fr): een lange soortnaam rekt de kolom niet op */
.galerij { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.galerij b, .keuze b { overflow-wrap: anywhere; hyphens: auto; }
.galerij img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; width: 100%; }
.galerij b { display: block; margin-top: 4px; }
.galerij small { display: block; font-size: .75rem; color: var(--grijs); line-height: 1.3; }
@media (min-width: 560px) { .galerij { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gids { display: flex; align-items: center; gap: 14px; background: var(--wit); border: 1px solid var(--lijn);
        border-radius: var(--rond); padding: 14px; margin: 16px 0; }
.gids p { margin: 0; font-size: .95rem; }
.speel { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--oranje);
         color: var(--groen); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.speel .icoon { width: 32px; height: 32px; fill: currentColor; }
.speel .i-pauze, .speel.speelt .i-speel { display: none; }
.speel.speelt .i-pauze { display: inline; }
.speel.uit { background: var(--licht); color: var(--grijs); cursor: default; }
.speel.groot { width: 96px; height: 96px; margin: 8px auto 16px; }
.speel.groot .icoon { width: 46px; height: 46px; }
.spoor { flex: 1; min-width: 0; }
.spoor input { width: 100%; accent-color: var(--oranje); }
.spoor span { display: block; text-align: right; font-size: .85rem; color: var(--grijs); font-variant-numeric: tabular-nums; }
.meelezen { margin: -6px 0 16px; }
.meelezen summary, .talen summary { cursor: pointer; font-weight: 600; color: var(--groen-2); padding: 6px 0; }

.bordtekst { font-size: 1.12rem; }
.toemaatje { background: var(--licht); border-radius: 10px; padding: 12px 14px; }
.info { margin: 20px 0; }
.schuif { overflow-x: auto; border-radius: 12px; -webkit-overflow-scrolling: touch; }
.schuif img { width: 100%; min-width: 640px; max-width: none; }
.toekaans { font-style: italic; }

.opdracht { background: var(--groen); color: var(--papier); border-radius: var(--rond); padding: 18px; margin: 20px 0; }
.opdracht h2 { margin: 0 0 6px; color: var(--oranje); font-size: 1.15rem; letter-spacing: 1px; text-transform: uppercase;
               font-family: var(--tekst); }
.opdracht a:not(.knop) { color: #F7B66E; }
.opdracht .vink { background: var(--groen-2); }
.talen { margin: 8px 0 20px; }
.talen p { font-size: .95rem; }
.talen b { color: var(--oranje-tekst); margin-right: 4px; }

.verder { display: flex; justify-content: space-between; gap: 12px; margin: 24px 0 8px; }
.verder a { flex: 1; text-align: center; padding: 14px; border-radius: 999px; font-weight: 700; text-decoration: none;
            box-shadow: inset 0 0 0 2px var(--groen); color: var(--groen); }
.verder a[rel="next"], .verder a:last-child { background: var(--oranje); color: var(--inkt); box-shadow: none; }

/* afvinken */
.vink { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 10px; cursor: pointer; }
.vink input { flex: none; width: 28px; height: 28px; margin: 0; accent-color: var(--oranje); }
.vink b { display: block; }
.vink small { display: block; color: var(--grijs); font-size: .88rem; }
.opdrachten { list-style: none; padding: 0; margin: 0; }
.opdrachten li { background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; margin-bottom: 8px; }
.teller { font-size: 1.3rem; font-weight: 700; color: var(--groen-2); }
.klaar { background: var(--oranje); color: var(--inkt); font-weight: 700; padding: 14px; border-radius: 10px; }
.plan-kader.donker svg { display: block; width: 100%; height: auto; }

/* geluidenspel */
.spel, .spel-einde { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 16px;
                     margin: 16px 0; text-align: center; }
.spel[hidden], .spel-einde[hidden] { display: none; }
.ronde { font-weight: 700; color: var(--grijs); }
.keuzes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.keuze { border: 3px solid var(--lijn); background: var(--papier); border-radius: 12px; padding: 6px; cursor: pointer;
         font: 600 .92rem/1.25 var(--tekst); color: var(--inkt); }
.keuze img { border-radius: 8px; aspect-ratio: 1; object-fit: cover; width: 100%; margin-bottom: 4px; }
.keuze.juist { border-color: var(--juist); background: #E3F1E7; }
.keuze.fout { border-color: var(--fout); opacity: .55; }
.keuze:disabled { cursor: default; }
.uitslag { min-height: 1.6em; font-weight: 700; margin-top: 12px; }
.spel-einde .vink { text-align: left; background: var(--licht); }

/* wandeling en bronnen */
.wandeling { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 14px; margin: 16px 0; }
.wandeling img { border-radius: 10px; margin-bottom: 12px; }
.wandeling h2 { margin-top: 0; }
.bronnen { padding-left: 22px; font-size: .92rem; overflow-wrap: anywhere; }
.bronnen li { margin-bottom: 8px; }

@media (prefers-reduced-motion: no-preference) {
  .keuze, .speel { transition: transform .12s ease; }
  .keuze:active:not(:disabled), .speel:active { transform: scale(.97); }
}