/* play-island.com: kleuren en vormen uit de app (STIJLGIDS.md). Geen lettertypen of plaatjes van anderen: de
   letters komen van het toestel zelf (een ronde letter als die er is). */

:root {
  --inkt: #3A2440;
  --papier: #FFF8EC;
  --kaart: #FFFFFF;
  --zacht: #EFE8F7;
  --lijn: #E2D9EE;
  --stil: #6E6280;
  --accent: #2EC4B6;
  --accent-donker: #1E8C82;
  --lucht: #ADDCF8;
  --geel: #FFC83D;
  --geel-licht: #FFF1C9;
  --rond: 22px;
  --breed: 1080px;
  --smal: 760px;
  --letter: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 18px/1.6 var(--letter);
}

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

a { color: var(--accent-donker); text-underline-offset: 3px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; font-weight: 800; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); }
h2 { font-size: clamp(1.35rem, 3.5vw, 1.8rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 14px; }

.breed { max-width: var(--breed); margin: 0 auto; padding: 0 16px; }
.smal { max-width: var(--smal); margin: 0 auto; padding: 0 16px; }
.stil { color: var(--stil); font-size: 0.92em; }

.overslaan { position: absolute; left: -9999px; }
.overslaan:focus { left: 16px; top: 8px; z-index: 10; background: var(--kaart); padding: 8px 14px; border-radius: 12px; }

/* ---------------------------------------------------------------- kop */

.kop { background: var(--papier); border-bottom: 2px solid var(--lijn); }
.kop-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 12px; padding-bottom: 12px; }
.merk img { height: 34px; width: auto; }
.menu { display: flex; gap: 6px; margin-left: auto; }
.menu a, .talen a {
  color: var(--inkt); text-decoration: none; font-weight: 700; padding: 6px 12px; border-radius: 999px;
}
.menu a:hover, .talen a:hover { background: var(--zacht); }
.menu a[aria-current="page"] { background: var(--accent); color: #fff; }
.talen { display: flex; gap: 2px; font-size: 0.85em; }
.talen a[aria-current="true"] { background: var(--zacht); }

@media (max-width: 640px) {
  .kop-rij { justify-content: center; }
  .menu { margin-left: 0; }
}

/* ---------------------------------------------------------------- het eiland bovenaan (zoals het opstartscherm) */

.held {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--lucht) url(../img/lucht.webp) center top / cover no-repeat;
  padding-top: 36px;
}
.held-tekst { position: relative; z-index: 2; }
.held h1 { margin: 0 auto 10px; max-width: 560px; }
.held-logo { width: 100%; }
.slogan { font-size: clamp(1.2rem, 3.4vw, 1.6rem); font-weight: 800; margin-bottom: 8px; }
.intro { max-width: 600px; margin: 0 auto 18px; }
.beloftes { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.beloftes li { background: rgba(255, 255, 255, 0.85); border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: 0.9em; }
.beloftes li::before { content: "✓ "; color: var(--accent-donker); }

/* Pip op het eiland: dezelfde verhoudingen als in het opstartscherm (de zee met het eiland is de onderste 59 %, Pip
   staat met zijn voeten op het midden van het eiland, de zon met stralen achter hem) */
.held-scene {
  position: relative;
  height: clamp(290px, 47vw, 540px);
  margin-top: -40px;
  background: url(../img/zee.webp) center bottom / auto 58.8% no-repeat;
}
.held-pip, .held-zon { position: absolute; left: 50%; transform: translateX(-50%); width: auto; max-width: none; }
.held-pip { height: 90.6%; bottom: 7.9%; z-index: 1; }
.held-zon { height: 229%; bottom: -61.5%; z-index: 0; opacity: 0.9; }

@media (prefers-reduced-motion: no-preference) {
  .held-zon { animation: draai 90s linear infinite; }
  @keyframes draai { to { transform: translateX(-50%) rotate(360deg); } }
}

/* ---------------------------------------------------------------- knoppen en kaarten */

.knop {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--accent-donker);
  transition: transform 0.1s, box-shadow 0.1s;
}
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-donker); }
.knop-uit { background: var(--zacht); color: var(--inkt); box-shadow: none; }
/* zolang de app nog niet in de Play Store staat: geen knop maar een rustig label (gestippelde rand: nog niet klikbaar) */
.binnenkort {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  color: var(--inkt);
  font-weight: 800;
  padding: 12px 24px;
  border: 2px dashed var(--accent-donker);
  border-radius: 999px;
}

.blok { padding: 48px 0; }
.blok-kort { padding: 24px 0; }
.blok-zacht { background: var(--zacht); }
.inleiding { color: var(--stil); margin-bottom: 24px; }

.kaart { background: var(--kaart); border: 2px solid var(--lijn); border-radius: var(--rond); padding: 28px 24px; }
/* een smalle kaart houdt aan de zijkanten 16 px vrij (de kaart zelf heeft zijn eigen binnenruimte) */
.smal.kaart { width: calc(100% - 32px); }
.kaart-accent { background: #E6F8F6; border-color: #BFEDE8; text-align: center; }

/* nooit smaller dan 240 px: dan past de langste naam (Ploppenbakkerij) met het label op één regel */
.plekken { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.plek { background: var(--kaart); border: 2px solid var(--lijn); border-radius: var(--rond); overflow: hidden; }
.plek img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.plek-tekst { padding: 14px 16px 6px; }
/* naam en label naast elkaar; een naam van meer woorden breekt zelf af, het label blijft op de eerste regel */
.plek-tekst h3 { display: flex; align-items: baseline; gap: 8px; font-size: 1.08rem; }
.plek-tekst p { font-size: 0.95em; }
.gratis {
  flex: none; font-size: 0.65rem; letter-spacing: 0.03em; line-height: 1.6; text-transform: uppercase;
  background: var(--geel); color: var(--inkt); border-radius: 999px; padding: 1px 8px; position: relative; top: -1px;
}

.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .twee { grid-template-columns: 1fr; gap: 24px; } }

.vinkjes { list-style: none; padding: 0; margin: 0; }
.vinkjes li { padding-left: 30px; position: relative; margin-bottom: 8px; }
.vinkjes li::before { content: "✓"; position: absolute; left: 4px; color: var(--accent-donker); font-weight: 800; }

.verhaal p { font-size: 1.02em; }
.handtekening { font-weight: 800; font-size: 1.2em; margin-top: 18px; }

/* ---------------------------------------------------------------- contact */

details { background: var(--kaart); border: 2px solid var(--lijn); border-radius: 16px; padding: 12px 18px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 700; }
details p { margin: 10px 0 4px; }

/* plekhouder die nog ingevuld moet worden (bouw_site.py: NAAM, EMAIL) */
.invullen { background: var(--geel-licht); padding: 0 6px; border-radius: 6px; }

/* ---------------------------------------------------------------- voet */

.voet { border-top: 2px solid var(--lijn); padding: 28px 0 36px; text-align: center; }
.voet p { margin-bottom: 6px; }
.voet-belofte { font-weight: 800; }