/* --------------------------------------------------------------------------
   Kookrooster — opmaak in de CityLight-huisstijl.

   Alles staat onder .clkr, zodat er niets van deze regels buiten het blok
   terechtkomt.

   LET OP — de reset hieronder moet bovenaan blijven staan.

   In het voorbeeld zag dit blok er anders uit dan op de site zelf, en dat had
   één oorzaak: de kaartjes met de avonden zijn <button>-elementen, en Astra en
   Elementor hebben eigen regels voor knoppen. Die zetten er een merkkleur op,
   maken de tekst hoofdletters en geven hem letterafstand mee. Vandaar dat de
   kaartjes op de site vol turquoise stonden met KOPPEN IN KAPITALEN.

   Die regels winnen niet door specificiteit maar door hun herkomst, dus hier
   staat !important. Spaarzaam, en alleen op wat een thema pleegt over te nemen.
   -------------------------------------------------------------------------- */

.clkr{
  --clkr-brand:#00ABAC; --clkr-amber:#F2A93C;
  --clkr-vlak:#0E2B30; --clkr-vlak2:#0A2327;
  --clkr-tekst:#EFFAFA; --clkr-zacht:#9FBEC0; --clkr-lijn:rgba(255,255,255,.09);
  font-family:Inter,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--clkr-tekst);
  /* Een eigen leeskolom, net als in het voorbeeld. Zonder deze regel loopt het
     blok op een paginabrede sjabloon van rand tot rand, terwijl de paginakop
     dat niet doet — en dan lijkt alles scheef te staan. */
  width:100%;
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}
.clkr *{box-sizing:border-box;}
.clkr h1,.clkr h2,.clkr h3,.clkr h4,.clkr p,.clkr label,.clkr span,.clkr b,.clkr em{
  text-transform:none !important;
}
.clkr button,.clkr .clkr-knop{
  font-family:Sora,Inter,sans-serif !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-decoration:none !important;
  text-shadow:none !important;
  min-height:0 !important;
  line-height:1.3 !important;
}
.clkr h2,.clkr h3{font-family:Sora,Inter,sans-serif;font-weight:700;margin:0;
  letter-spacing:-.3px;color:var(--clkr-tekst);}
.clkr p{line-height:1.7;color:var(--clkr-zacht);}
.clkr-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.clkr-val{position:absolute !important;left:-9999px;}

/* De paginatitel van het thema weghalen als het blok zijn eigen kop toont.
   Die titel van Astra staat buiten elke container en begint dus aan de uiterste
   linkerrand, terwijl het blok netjes in de leeskolom staat. */
body.clkr-eigen-kop .entry-header{display:none !important;}

/* ---------- kop ---------- */
.clkr-label{display:inline-block;padding:7px 16px;border-radius:999px;font-size:12.5px;
  font-weight:700;letter-spacing:2.4px !important;text-transform:uppercase !important;
  color:var(--clkr-amber);background:rgba(242,169,60,.12);
  border:1px solid rgba(242,169,60,.35);}
.clkr-titel{font-size:clamp(28px,4.4vw,44px);font-weight:800;letter-spacing:-.6px;
  margin:18px 0 0 !important;line-height:1.1;}
.clkr-titel em{font-style:normal;
  background:linear-gradient(96deg,#F2A93C 0%,#7BE0D8 48%,#00ABAC 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
.clkr-intro{font-size:17px;max-width:64ch;margin:18px 0 0;}

/* ---------- meldingen ---------- */
.clkr-melding{border-radius:14px;padding:15px 18px;margin:0 0 22px;font-size:15.5px;line-height:1.6;}
.clkr-melding.ok{background:rgba(0,171,172,.14);border:1px solid rgba(0,171,172,.45);color:#BFF0F0;}
.clkr-melding.fout{background:rgba(242,169,60,.13);border:1px solid rgba(242,169,60,.45);color:#F7D9A6;}

/* ---------- stand ---------- */
.clkr-stand{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:28px 0 0;
  background:var(--clkr-vlak);border:1px solid var(--clkr-lijn);border-radius:18px;padding:20px 24px;}
.clkr-stand b{font-family:Sora,Inter,sans-serif;font-size:26px;color:var(--clkr-amber);}
.clkr-stand-tekst{flex:0 0 auto;font-size:15px;line-height:1.35;}
.clkr-stand-tekst span{color:#7FA5A7;font-size:13.5px;}
.clkr-meter{flex:1 1 200px;min-width:160px;height:9px;border-radius:5px;
  background:rgba(255,255,255,.1);overflow:hidden;}
.clkr-meter i{display:block;height:100%;background:linear-gradient(90deg,#F2A93C,#00ABAC);}

/* ---------- stappen ---------- */
.clkr .clkr-stap{font-size:20px;margin:36px 0 14px;}   /* .clkr h3 hierboven is
      specifieker dan een losse klasse, vandaar de .clkr ervoor — anders wint
      dat margin:0 en plakt de kop tegen het balkje erboven. */
.clkr .clkr-stap span{color:var(--clkr-brand);}
.clkr .clkr-paneel .clkr-stap{margin:0;}

/* ---------- de avonden ---------- */
.clkr-rooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
  gap:14px;margin:20px 0 0;width:100%;}
.clkr .clkr-avond{
  display:block !important;
  width:100% !important;
  text-align:left !important;
  cursor:pointer;
  font-size:15px !important;
  font-weight:400 !important;
  color:var(--clkr-tekst) !important;
  background:var(--clkr-vlak) !important;
  background-image:none !important;
  border:1px solid var(--clkr-lijn) !important;
  border-radius:18px !important;
  padding:18px !important;
  box-shadow:none !important;
  transition:border-color .18s,transform .18s,background .18s;
}
.clkr .clkr-avond:hover:not(:disabled){border-color:rgba(0,171,172,.65) !important;
  transform:translateY(-2px);}
.clkr .clkr-avond.gekozen{border-color:var(--clkr-brand) !important;
  background:rgba(0,171,172,.13) !important;box-shadow:inset 0 0 0 1px var(--clkr-brand) !important;}
/* Een volle avond wordt niet grijs gemaakt: hij moet leesbaar blijven, alleen
   niet meer uitnodigen om aan te klikken. */
.clkr .clkr-avond:disabled{cursor:default;opacity:1;
  background:rgba(14,43,48,.55) !important;border-style:dashed !important;}
.clkr .clkr-avond > span{display:block;}
.clkr-nr{font-size:12px;font-weight:700;letter-spacing:1.6px !important;
  text-transform:uppercase !important;color:#6F9294;}
.clkr-dag{font-family:Sora,Inter,sans-serif;font-weight:700;font-size:19px;margin:6px 0 0;
  color:var(--clkr-tekst);}
.clkr-thema{font-size:13.5px;color:var(--clkr-zacht);line-height:1.35;margin:6px 0 12px;min-height:2.6em;}
.clkr-wie{font-size:12.5px;color:#7FA5A7;margin:9px 0 0;}

.clkr .clkr-pil{display:inline-block !important;font-size:12px;font-weight:700;
  letter-spacing:.5px !important;padding:6px 12px;border-radius:999px;line-height:1.25;}
.clkr-pil.vrij{color:#7BE0D8;background:rgba(0,171,172,.16);border:1px solid rgba(0,171,172,.5);}
.clkr-pil.half,.clkr-pil.dessert{color:var(--clkr-amber);background:rgba(242,169,60,.15);
  border:1px solid rgba(242,169,60,.55);}
/* Vol: dicht, in dezelfde geel-oranje familie. Zo lees je het van een afstand
   en zie je meteen dat het iets anders betekent dan "nog één kok gezocht". */
.clkr-pil.vol{color:#3A2A0B;background:var(--clkr-amber);border:1px solid var(--clkr-amber);}
.clkr-toelichting{font-size:13px;color:#7FA5A7;margin:12px 0 0;}

/* ---------- panelen ---------- */
.clkr-paneel{margin:28px 0 0;background:var(--clkr-vlak2);border:1px solid var(--clkr-lijn);
  border-radius:22px;padding:26px;width:100%;}
.clkr-paneel[hidden]{display:none;}
.clkr-paneel h3{font-size:20px;}

/* ---------- keuzes ---------- */
.clkr-keuzes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;margin:16px 0 0;}
.clkr .clkr-keuze{display:block;cursor:pointer;background:var(--clkr-vlak);
  border:1px solid var(--clkr-lijn);border-radius:16px;padding:16px 18px;
  transition:border-color .18s,background .18s;position:relative;margin:0;}
.clkr .clkr-keuze:hover{border-color:rgba(0,171,172,.55);}
.clkr .clkr-keuze input{position:absolute;opacity:0;width:1px;height:1px;}
.clkr-kop{display:flex !important;align-items:center;gap:9px;
  font-family:Sora,Inter,sans-serif;font-weight:700;font-size:16px;color:var(--clkr-tekst);}
.clkr-bol{width:17px;height:17px;border-radius:50%;border:2px solid #4E7375;flex:0 0 auto;}
.clkr-uitleg{display:block !important;font-size:13.5px;color:var(--clkr-zacht);
  margin:8px 0 0;line-height:1.5;}
.clkr-uitleg em{display:block !important;color:var(--clkr-amber);font-style:normal;margin-top:5px;}
.clkr-uitleg em:empty{display:none !important;}
.clkr .clkr-keuze.aan{border-color:var(--clkr-brand);background:rgba(0,171,172,.12);}
.clkr .clkr-keuze.aan .clkr-bol{border-color:var(--clkr-brand);
  background:radial-gradient(circle,#00ABAC 0 45%,transparent 46%);}
.clkr .clkr-keuze.uit{opacity:.5;cursor:not-allowed;}
.clkr-plek{margin-bottom:6px;}

/* Het toetje hoort bij het koken; geen keuze meer, wel een regel die het zegt. */
.clkr-toetje{margin:16px 0 0 !important;background:var(--clkr-vlak);
  border:1px solid var(--clkr-lijn);border-radius:16px;padding:14px 18px;
  font-size:14.5px;color:var(--clkr-zacht) !important;}
.clkr-toetje strong{color:var(--clkr-tekst);}

.clkr .clkr-vink{display:flex;align-items:flex-start;gap:12px;cursor:pointer;margin:16px 0 0;
  background:var(--clkr-vlak);border:1px solid var(--clkr-lijn);border-radius:16px;padding:16px 18px;}
.clkr .clkr-vink[hidden]{display:none;}
.clkr .clkr-vink input{width:19px;height:19px;accent-color:var(--clkr-brand);
  margin-top:2px;flex:0 0 auto;opacity:1;position:static;}
.clkr-vink b{font-family:Sora,Inter,sans-serif;font-size:15.5px;display:block;color:var(--clkr-tekst);}
.clkr-vink em{display:block;font-style:normal;font-size:13.5px;color:var(--clkr-zacht);margin-top:4px;}

/* ---------- velden ---------- */
.clkr-velden{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 0;}
.clkr .clkr-veld{display:flex;flex-direction:column;gap:7px;margin:0;}
.clkr-breed-veld{grid-column:1/-1;}
.clkr .clkr-veld label{font-size:13.5px;font-weight:600;color:var(--clkr-tekst);margin:0;}
.clkr .clkr-veld label i{font-style:normal;color:#6F9294;font-weight:500;}
.clkr .clkr-veld input,.clkr .clkr-veld textarea{
  background:rgba(8,34,38,.6) !important;border:1px solid rgba(255,255,255,.16) !important;
  border-radius:12px !important;padding:13px 15px !important;color:var(--clkr-tekst) !important;
  font-family:Inter,sans-serif !important;font-size:15.5px !important;width:100%;
  box-shadow:none !important;}
.clkr .clkr-veld input:focus,.clkr .clkr-veld textarea:focus{outline:none;
  border-color:var(--clkr-brand) !important;box-shadow:0 0 0 3px rgba(0,171,172,.18) !important;}
.clkr .clkr-veld textarea{min-height:86px;resize:vertical;}
.clkr ::placeholder{color:#5E7E80;opacity:1;}

/* ---------- knoppen ---------- */
.clkr .clkr-knop{
  display:inline-flex !important;align-items:center;justify-content:center;gap:10px;
  border:0 !important;cursor:pointer;
  background:linear-gradient(96deg,#F2A93C,#00ABAC) !important;
  color:#06181A !important;font-weight:700 !important;font-size:16px !important;
  padding:15px 30px !important;border-radius:999px !important;margin:22px 12px 0 0;
  width:auto !important;box-shadow:none !important;}
.clkr .clkr-knop:hover{filter:brightness(1.07);color:#06181A !important;}
.clkr .clkr-knop.clkr-kaal{background:none !important;
  border:1px solid rgba(255,255,255,.28) !important;color:var(--clkr-tekst) !important;}
.clkr .clkr-breed{width:100% !important;}
.clkr-klein{font-size:13px;color:#6F9294;margin:16px 0 0;max-width:64ch;}

/* ---------- codescherm ---------- */
.clkr-code{background:var(--clkr-vlak);border:1px solid var(--clkr-lijn);border-radius:20px;
  padding:30px;max-width:440px;text-align:center;margin:0 auto;}
.clkr-code b{font-family:Sora,Inter,sans-serif;font-size:17px;color:var(--clkr-tekst);}
.clkr-code p{font-size:14px;margin:10px 0 0;}
.clkr .clkr-code input{width:100%;text-align:center;letter-spacing:5px !important;
  font-size:22px !important;font-family:Sora,Inter,sans-serif !important;font-weight:700;
  background:rgba(8,34,38,.6) !important;border:1px solid rgba(255,255,255,.16) !important;
  border-radius:12px !important;padding:14px !important;color:var(--clkr-tekst) !important;
  margin:16px 0 0;text-transform:uppercase !important;}

/* ---------- gelukt ---------- */
.clkr-gelukt{background:linear-gradient(150deg,rgba(0,171,172,.16),rgba(242,169,60,.08));
  border:1px solid rgba(0,171,172,.45);border-radius:22px;padding:30px;margin:28px 0 0;}
.clkr-gelukt h3{font-size:24px;}
.clkr-groot{color:var(--clkr-tekst) !important;font-size:17px;margin:12px 0 0;}
.clkr-vers{margin:22px 0;padding:18px 22px;border-left:3px solid var(--clkr-amber);
  background:rgba(242,169,60,.07);border-radius:0 14px 14px 0;}
.clkr-vers p{color:var(--clkr-tekst) !important;font-size:17px;font-style:italic;margin:0;}
.clkr-vers cite{display:block;margin-top:9px;font-style:normal;font-size:13.5px;
  color:var(--clkr-amber);letter-spacing:.4px;}

/* ---------- blokje voor Mijn CityLight ---------- */
.clkr-blok{background:var(--clkr-vlak);border:1px solid var(--clkr-lijn);border-radius:22px;
  padding:28px;}
.clkr-blok h3{font-size:22px;margin:16px 0 0;}
.clkr-blok p{margin:12px 0 0;}

@media (max-width:640px){
  .clkr-velden{grid-template-columns:1fr;}
  .clkr-paneel{padding:20px;}
  .clkr .clkr-knop{width:100% !important;margin-right:0;}
}