/* =========================================================================
   PLACE2ESCAPE — huisstijl
   versie 1.0.0 · augustus 2026

   Dit is het enige bestand waarin vormgeving hoort te staan.
   Stel niets in via Elementor zelf: dan staat er over een half jaar
   op zeven pagina's een net iets ander petrol.

   Inhoud
   1. Lettertypes
   2. Tokens — kleuren, maten, ruimte
   3. Basis
   4. Tekst
   5. Links
   6. Knoppen
   7. Kaarten
   8. Raster
   9. De vier afdelingen
   10. Hulpklassen
   ====================================================================== */


/* =========================================================================
   1. LETTERTYPES

   De bestanden horen in assets/fonts/ te staan, op uw eigen server.
   Niet bij Google ophalen — zie hoofdstuk 3 van het bouwplan.

   Staan ze er nog niet? Dan valt de site netjes terug op het
   systeemlettertype. De site blijft werken, hij oogt alleen anders.
   ====================================================================== */

@font-face{
  font-family:"Outfit";
  src:url("../fonts/outfit-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Outfit";
  src:url("../fonts/outfit-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Outfit";
  src:url("../fonts/outfit-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Outfit";
  src:url("../fonts/outfit-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

@font-face{
  font-family:"Karla";
  src:url("../fonts/karla-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Karla";
  src:url("../fonts/karla-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/jetbrainsmono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/jetbrainsmono-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}


/* =========================================================================
   2. TOKENS

   Verander hier iets, en de hele site verandert mee.
   Dat is het hele punt van dit bestand.
   ====================================================================== */

:root{

  /* --- kleuren, exact uit de huisstijl --- */
  --p2e-petrol:      #2E6B7A;
  --p2e-petrol-diep: #14424E;
  --p2e-koraal:      #E8674A;
  --p2e-koraal-diep: #C24F35;
  --p2e-creme:       #F6F2E9;
  --p2e-inkt:        #17252A;

  /* afgeleiden — nooit met de hand een nieuwe grijstint verzinnen */
  --p2e-lijn:        rgba(23,37,42,.12);
  --p2e-lijn-sterk:  rgba(23,37,42,.24);
  --p2e-zacht:       rgba(23,37,42,.70);
  --p2e-zachter:     rgba(23,37,42,.50);
  --p2e-vlak:        #FFFFFF;
  --p2e-vlak-warm:   #FBF9F4;

  /* --- lettertypes --- */
  --p2e-kop:  "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --p2e-lees: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --p2e-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --p2e-hand: "Caveat", "Bradley Hand", "Segoe Script", cursive;

  /* --- maten --- */
  --p2e-tekst:      17px;   /* wordt per afdeling overschreven */
  --p2e-regelhoogte:1.65;
  --p2e-h1: clamp(30px, 4.6vw, 46px);
  --p2e-h2: clamp(23px, 2.9vw, 30px);
  --p2e-h3: 19px;

  /* --- ruimte --- */
  --p2e-ruimte:    24px;   /* wordt per afdeling overschreven */
  --p2e-ruimte-xs: 8px;
  --p2e-ruimte-s:  14px;
  --p2e-ruimte-l:  40px;
  --p2e-ruimte-xl: 72px;

  /* --- vormen --- */
  --p2e-rond:      12px;
  --p2e-rond-klein:8px;
  --p2e-rond-pil:  999px;
  --p2e-breedte:   1120px;  /* maximale leesbreedte van een pagina */

  /* --- beweging --- */
  --p2e-snel: .15s ease;
}


/* =========================================================================
   3. BASIS
   ====================================================================== */

body{
  background:var(--p2e-creme);
  color:var(--p2e-inkt);
  font-family:var(--p2e-lees);
  font-size:var(--p2e-tekst);
  line-height:var(--p2e-regelhoogte);
  -webkit-font-smoothing:antialiased;
}

/* Eén vaste breedte voor alle pagina-inhoud. */
.p2e-binnen{
  width:100%;
  max-width:var(--p2e-breedte);
  margin-inline:auto;
  padding-inline:var(--p2e-ruimte);
}

/* Verticale ruimte tussen de blokken van een pagina. */
.p2e-sectie{
  padding-block:var(--p2e-ruimte-xl);
}


/* =========================================================================
   4. TEKST
   ====================================================================== */

.p2e h1, .p2e-h1,
.p2e h2, .p2e-h2,
.p2e h3, .p2e-h3{
  font-family:var(--p2e-kop);
  color:var(--p2e-petrol-diep);
  letter-spacing:-.02em;
  line-height:1.15;
  margin:0 0 var(--p2e-ruimte-s);
  text-wrap:balance;
}

.p2e h1, .p2e-h1{ font-size:var(--p2e-h1); font-weight:700 }
.p2e h2, .p2e-h2{ font-size:var(--p2e-h2); font-weight:600 }
.p2e h3, .p2e-h3{ font-size:var(--p2e-h3); font-weight:600 }

.p2e p{ margin:0 0 var(--p2e-ruimte-s); max-width:68ch }

/* Inleidende zin onder een kop. Groter en rustiger dan gewone tekst. */
.p2e-intro{
  font-size:calc(var(--p2e-tekst) + 2px);
  color:var(--p2e-zacht);
  max-width:56ch;
  margin-bottom:var(--p2e-ruimte-l);
}

/* Kleine bovenkop, bijvoorbeeld boven een afdelingstitel. */
.p2e-bovenkop{
  font-family:var(--p2e-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--p2e-petrol);
  margin:0 0 var(--p2e-ruimte-xs);
}

/* Handgeschreven accent. Spaarzaam gebruiken: één per pagina.
   Caveat wordt dun op grote maat, dus altijd gewicht 700 en ruim formaat. */
.p2e-hand{
  font-family:var(--p2e-hand);
  font-weight:700;
  font-size:clamp(40px, 7.4vw, 68px);
  letter-spacing:0;
  line-height:1.05;
  color:var(--p2e-petrol-diep);
}

/* Codes, cijfers en alles wat de speler moet overtypen. */
.p2e-code{
  font-family:var(--p2e-mono);
  font-size:.95em;
  letter-spacing:.06em;
  background:rgba(46,107,122,.09);
  border-radius:var(--p2e-rond-klein);
  padding:2px 7px;
}


/* =========================================================================
   5. LINKS
   ====================================================================== */

.p2e a{
  color:var(--p2e-petrol);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--p2e-snel);
}
.p2e a:hover{ color:var(--p2e-koraal-diep) }

/* Eén focusstijl voor de hele site. Nooit weghalen:
   wie met het toetsenbord navigeert, is hierop aangewezen. */
.p2e a:focus-visible,
.p2e-knop:focus-visible,
.p2e-kaart:focus-visible,
.p2e button:focus-visible,
.p2e input:focus-visible{
  outline:3px solid var(--p2e-petrol);
  outline-offset:3px;
  border-radius:var(--p2e-rond-klein);
}


/* =========================================================================
   6. KNOPPEN

   <a class="p2e-knop" href="...">Verder spelen</a>
   <a class="p2e-knop p2e-knop--rustig" href="...">Meer lezen</a>
   ====================================================================== */

.p2e-knop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--p2e-ruimte-xs);

  font-family:var(--p2e-kop);
  font-weight:600;
  font-size:17px;
  line-height:1;
  text-decoration:none;
  text-align:center;

  color:var(--p2e-creme);
  background:var(--p2e-koraal);
  border:2px solid var(--p2e-koraal);
  border-radius:var(--p2e-rond-klein);

  /* minimaal 44 bij 44 pixels — anders is hij op een telefoon niet te raken */
  min-height:44px;
  padding:14px 26px;

  cursor:pointer;
  transition:background var(--p2e-snel), border-color var(--p2e-snel), transform var(--p2e-snel);
}

.p2e-knop:hover{
  background:var(--p2e-koraal-diep);
  border-color:var(--p2e-koraal-diep);
  color:var(--p2e-creme);
  transform:translateY(-1px);
}

.p2e-knop:active{ transform:translateY(0) }

/* De tweede knop op een pagina. Er is er maar één die schreeuwt. */
.p2e-knop--rustig{
  color:var(--p2e-petrol);
  background:transparent;
  border-color:var(--p2e-lijn-sterk);
}
.p2e-knop--rustig:hover{
  color:var(--p2e-petrol-diep);
  background:var(--p2e-vlak);
  border-color:var(--p2e-petrol);
}


/* =========================================================================
   7. KAARTEN

   De bouwsteen van de afdelings- en themapagina's.

   <a class="p2e-kaart" href="/nl/senioren/steden/">
     <span class="p2e-kaart__kop">Steden</span>
     <span class="p2e-kaart__sub">Maastricht, Wenen</span>
   </a>
   ====================================================================== */

.p2e-kaart{
  display:flex;
  flex-direction:column;
  gap:var(--p2e-ruimte-xs);

  background:var(--p2e-vlak);
  border:1px solid var(--p2e-lijn);
  border-radius:var(--p2e-rond);
  padding:var(--p2e-ruimte);

  text-decoration:none;
  color:inherit;

  transition:border-color var(--p2e-snel), transform var(--p2e-snel), box-shadow var(--p2e-snel);
}

.p2e-kaart:hover{
  border-color:var(--p2e-petrol);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(20,66,78,.08);
}

.p2e-kaart__kop{
  font-family:var(--p2e-kop);
  font-weight:600;
  font-size:var(--p2e-h3);
  color:var(--p2e-petrol-diep);
  line-height:1.2;
}

.p2e-kaart__sub{
  font-size:15px;
  color:var(--p2e-zachter);
}

/* Beeld bovenin een kaart. */
.p2e-kaart__beeld{
  display:block;
  width:calc(100% + 2 * var(--p2e-ruimte));
  margin:calc(var(--p2e-ruimte) * -1) calc(var(--p2e-ruimte) * -1) var(--p2e-ruimte-s);
  border-radius:var(--p2e-rond) var(--p2e-rond) 0 0;
  aspect-ratio:4 / 3;
  object-fit:cover;
  background:var(--p2e-vlak-warm);
}

/* Klein label op een kaart: "gratis proberen", "nieuw". */
.p2e-label{
  align-self:flex-start;
  font-family:var(--p2e-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--p2e-petrol-diep);
  background:rgba(46,107,122,.12);
  border-radius:var(--p2e-rond-pil);
  padding:5px 11px;
}
.p2e-label--koraal{
  color:#7A2E1B;
  background:rgba(232,103,74,.18);
}


/* =========================================================================
   8. RASTER

   <div class="p2e-raster">…kaarten…</div>
   <div class="p2e-raster p2e-raster--breed">…voor vier afdelingen…</div>
   ====================================================================== */

.p2e-raster{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap:var(--p2e-ruimte);
}

.p2e-raster--breed{
  grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}


/* =========================================================================
   9. DE VIER AFDELINGEN

   Zelfde bouwstenen, andere sfeer. De klasse komt automatisch op de
   <body> te staan via functions.php, op basis van de URL.
   ====================================================================== */

/* Kinderen — vrolijk, dichter op elkaar, rondere vormen. */
.afd-kinderen{
  --p2e-tekst:17px;
  --p2e-ruimte:20px;
  --p2e-rond:18px;
  --p2e-rond-klein:12px;
  --p2e-creme:#FBF6EC;
}
.afd-kinderen .p2e-kaart:hover{ border-color:var(--p2e-koraal) }

/* Tieners — strakker, koeler, meer contrast. */
.afd-tieners{
  --p2e-tekst:17px;
  --p2e-ruimte:22px;
  --p2e-rond:6px;
  --p2e-rond-klein:4px;
  --p2e-creme:#F1EEE7;
}

/* Volwassenen — de standaard. */
.afd-volwassenen{
  --p2e-tekst:17px;
  --p2e-ruimte:24px;
}

/* Senioren — grotere letters, meer wit, rustiger. */
.afd-senioren{
  --p2e-tekst:19px;
  --p2e-regelhoogte:1.75;
  --p2e-ruimte:32px;
  --p2e-ruimte-xl:88px;
  --p2e-h3:21px;
}
.afd-senioren .p2e-knop{ font-size:19px; padding:16px 30px }
.afd-senioren .p2e-kaart__sub{ font-size:17px }
.afd-senioren .p2e-kaart:hover{ transform:none }  /* geen wiebel */


/* =========================================================================
   10. HULPKLASSEN
   ====================================================================== */

/* Tekst die alleen een schermlezer hoort. Voor labels bij iconen.
   Niet gebruiken om zoekwoorden te verstoppen — zie hoofdstuk 6b. */
.p2e-alleen-voorlezen{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.p2e-midden{ text-align:center }
.p2e-midden p, .p2e-midden .p2e-intro{ margin-inline:auto }

/* Wie beweging heeft uitgezet, krijgt geen beweging. */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .p2e-kaart:hover,
  .p2e-knop:hover{ transform:none }
}

/* Afdrukken: geen achtergronden, geen kaarten. */
@media print{
  body{ background:#fff }
  .p2e-kaart{ border-color:#999; box-shadow:none }
}