/*
Theme Name: Penning
Theme URI: https://hondmagmee.nl
Description: Lean theme voor Hond Mag Mee — een stadsgids voor uit eten met de hond. Gebouwd rond één datastructuur: de zaak, met zeven geverifieerde velden. Geen pagebuilder, geen framework.
Author: Hond Mag Mee
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: penning
*/

/* ── Tokens ───────────────────────────────────────────────
   Palet komt uit het onderwerp: het grind van het wandelpad,
   het mos, en de messing penning aan de halsband.
   De penning is het enige plek waar kleur schreeuwt.
*/
:root {
  --kiezel:        #e7e8e1;
  --kiezel-diep:   #dcded4;
  --wit:           #fbfbf8;
  --basalt:        #16211e;
  --basalt-zacht:  #56605c;
  --mos:           #2f5d50;
  --mos-licht:     #e2eae6;
  --penning:       #b98a2e;
  --penning-diep:  #8c661d;
  --water:         #3e6e88;

  --lijn:          #c9cbc0;
  --lijn-hard:     var(--basalt);

  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'Public Sans', system-ui, -apple-system, sans-serif;
  --font-data:     'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --maat:          1.25rem;
  --radius:        3px;
}

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

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

body {
  margin: 0;
  background: var(--kiezel);
  color: var(--basalt);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mos); text-underline-offset: 3px; }
a:hover { color: var(--basalt); }

:focus-visible {
  outline: 3px solid var(--penning);
  outline-offset: 2px;
}

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

.omhulsel {
  width: min(100% - 2.5rem, 62rem);
  margin-inline: auto;
}

/* Alleen voor screenreaders */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.overslaan {
  position: absolute; left: -9999px;
  background: var(--basalt); color: var(--wit);
  padding: .75rem 1rem; z-index: 100;
}
.overslaan:focus { left: 1rem; top: 1rem; }

/* ── Data-label: het typografische signaal dat iets
   een gecontroleerd feit is en geen marketingtekst ── */
.data {
  font-family: var(--font-data);
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Kop ───────────────────────────────────────────── */
.kop {
  border-bottom: 1px solid var(--lijn);
  background: var(--kiezel);
}
.kop__binnen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.125rem;
}
.merk {
  font-family: var(--font-data);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--basalt); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
}
.merk:hover { color: var(--mos); }
.merk__stip {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--penning);
  box-shadow: 0 0 0 3px var(--kiezel), 0 0 0 4px var(--penning-diep);
}
.kop nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.kop nav a {
  font-family: var(--font-data); font-size: .6875rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--basalt-zacht); text-decoration: none;
}
.kop nav a:hover { color: var(--basalt); text-decoration: underline; }

/* ── Stadskop: het antwoord vóór de merknaam ────────── */
.stadskop { padding-block: 3.5rem 2rem; }
.stadskop__eyebrow { color: var(--basalt-zacht); margin-bottom: .875rem; }
.stadskop h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 700;
  font-size: clamp(2.75rem, 9vw, 4.75rem);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
}
.stadskop__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  color: var(--basalt-zacht);
  padding-top: .75rem;
  border-top: 1px solid var(--lijn);
}
.stadskop__inleiding {
  max-width: 42ch; margin: 1.5rem 0 0;
  font-size: 1.125rem; color: var(--basalt-zacht);
}

/* ── Filter ────────────────────────────────────────── */
.filter {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 2.5rem;
}
.filter__knop {
  font-family: var(--font-data); font-size: .6875rem;
  letter-spacing: .09em; text-transform: uppercase;
  background: transparent; color: var(--basalt-zacht);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: .5rem .9rem;
  cursor: pointer;
}
.filter__knop:hover { border-color: var(--basalt); color: var(--basalt); }
.filter__knop[aria-pressed="true"] {
  background: var(--basalt); border-color: var(--basalt); color: var(--wit);
}

/* ── Uitgelicht: apart, gelabeld, boven de redactie ── */
.uitgelicht {
  border: 2px solid var(--basalt);
  border-radius: var(--radius);
  background: var(--wit);
  padding: 1.5rem;
  margin-bottom: 3rem;
  position: relative;
}
.uitgelicht__label {
  position: absolute; top: -.6rem; left: 1.25rem;
  background: var(--basalt); color: var(--wit);
  padding: .2rem .6rem; border-radius: 2px;
}
.uitgelicht__disclaimer {
  color: var(--basalt-zacht);
  margin: 1rem 0 0; padding-top: .875rem;
  border-top: 1px dashed var(--lijn);
  font-size: .8125rem;
}

/* ── De zaak: het hart van de site ─────────────────── */
.zaken { list-style: none; margin: 0; padding: 0; }

.zaak {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  grid-template-areas:
    "rang hoofd  penning"
    ".    velden penning"
    ".    bron   bron";
  gap: 0 1rem;
  padding: 2rem 0;
  border-top: 1px solid var(--lijn);
}
.zaak:last-child { border-bottom: 1px solid var(--lijn); }
.zaak__rang  { grid-area: rang; }
.zaak__hoofd { grid-area: hoofd; }
.penning     { grid-area: penning; }
.velden      { grid-area: velden; }
.bron        { grid-area: bron; }

.zaak__rang {
  font-family: var(--font-data);
  font-size: 1rem; font-weight: 700;
  color: var(--lijn);
  padding-top: .35rem;
}

.zaak__hoofd { min-width: 0; }
.zaak__naam {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 600;
  font-size: 1.625rem; line-height: 1.15;
  margin: 0 0 .25rem;
  letter-spacing: -.01em;
}
.zaak__naam a { color: inherit; text-decoration: none; }
.zaak__naam a:hover { text-decoration: underline; text-decoration-color: var(--penning); }
.zaak__adres { color: var(--basalt-zacht); font-size: .9375rem; margin: 0 0 .875rem; }
.zaak__oneliner { margin: 0 0 1.25rem; max-width: 48ch; }

/* ── De penning: de signature.
   Een gestanste halsbandpenning die het enige antwoord draagt
   dat er echt toe doet. Kantelt licht, als aan een ring. ── */
.penning {
  align-self: start;
  display: grid; place-content: center;
  width: 5.25rem; height: 5.25rem;
  border-radius: 50%;
  text-align: center;
  transform: rotate(-4deg);
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
  flex-shrink: 0;
}
.zaak:hover .penning { transform: rotate(2deg); }

.penning span { display: block; }
.penning__hoofd {
  font-family: var(--font-data);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.1;
}
.penning__sub {
  font-family: var(--font-data);
  font-size: .5625rem; letter-spacing: .1em;
  text-transform: uppercase; opacity: .7; margin-top: .2rem;
}

/* Binnen = messing. Het beste antwoord, en het enige dat glimt. */
.penning--binnen {
  background: var(--penning);
  color: #2a1f08;
  border: 2px solid var(--penning-diep);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.16);
}
/* Terras = gegraveerd, niet gegoten. */
.penning--terras {
  background: transparent;
  color: var(--basalt);
  border: 2px dashed var(--basalt-zacht);
}

/* ── Veldenkaart: de zeven velden, als recordkaart ─── */
.velden {
  margin: 0;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--wit);
  overflow: hidden;
}
.veld {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 1rem;
  padding: .625rem .9rem;
  border-bottom: 1px solid var(--kiezel-diep);
  align-items: baseline;
}
.veld:last-child { border-bottom: 0; }
.veld dt { color: var(--basalt-zacht); }
.veld dd { margin: 0; font-size: .9375rem; }

.ja  { color: var(--mos); font-weight: 600; }
.nee { color: var(--basalt-zacht); }
.veld--water dd .ja { color: var(--water); }

/* ── Bron & datum: het vertrouwenssignaal ──────────── */
.bron {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem .75rem;
  margin-top: .875rem;
  color: var(--basalt-zacht);
}
.bron__punt { color: var(--lijn); }
.bron a { color: var(--basalt-zacht); }

.claim {
  font-family: var(--font-data);
  font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--basalt);
  text-decoration: none;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: .35rem .75rem;
  transition: background .15s, border-color .15s;
}
.claim:hover { background: var(--basalt); border-color: var(--basalt); color: var(--wit); }

/* ── Badge-blok: de motor van het verdienmodel ─────── */
.badge-blok {
  margin: 4rem 0;
  padding: 2.25rem;
  border: 1px solid var(--lijn-hard);
  border-radius: var(--radius);
  background: var(--mos-licht);
  display: grid; gap: 1.5rem;
  grid-template-columns: 7.5rem 1fr;
  align-items: center;
}
.badge-blok h2 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: 1.5rem; margin: 0 0 .5rem;
}
.badge-blok p { margin: 0 0 1rem; color: var(--basalt-zacht); max-width: 52ch; }

.badge-schijf {
  width: 7.5rem; height: 7.5rem;
  border-radius: 50%;
  background: var(--penning);
  border: 3px solid var(--penning-diep);
  box-shadow: inset 0 3px 8px rgba(255,255,255,.45), inset 0 -4px 9px rgba(0,0,0,.18);
  display: grid; place-content: center; text-align: center;
  color: #2a1f08; transform: rotate(-5deg);
}
.badge-schijf strong {
  display: block; font-family: var(--font-data);
  font-size: .8125rem; letter-spacing: .06em; line-height: 1.2;
}
.badge-schijf em {
  display: block; font-family: var(--font-data); font-style: normal;
  font-size: 1.375rem; font-weight: 700; margin-top: .15rem;
}

.knop {
  display: inline-block;
  font-family: var(--font-data);
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase;
  background: var(--basalt); color: var(--wit);
  text-decoration: none;
  padding: .75rem 1.25rem;
  border-radius: var(--radius);
}
.knop:hover { background: var(--mos); color: var(--wit); }

/* ── Stedenraster (voorpagina) ─────────────────────── */
.hero { padding-block: 5rem 3rem; }
.hero h1 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 700;
  font-size: clamp(2.5rem, 7.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -.025em;
  margin: 0 0 1.25rem;
  max-width: 16ch;
}
.hero p { font-size: 1.1875rem; max-width: 46ch; color: var(--basalt-zacht); margin: 0; }

.steden {
  list-style: none; margin: 0 0 4rem; padding: 0;
  border-top: 1px solid var(--lijn);
}
.steden li { border-bottom: 1px solid var(--lijn); }
.steden a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 1.125rem .25rem;
  text-decoration: none; color: var(--basalt);
}
.steden a:hover { background: var(--wit); }
.steden__naam {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: 1.5rem; font-weight: 600;
}
.steden__aantal { color: var(--basalt-zacht); }

/* ── Voet ──────────────────────────────────────────── */
.voet {
  border-top: 1px solid var(--lijn);
  margin-top: 4rem; padding-block: 2.5rem 3.5rem;
  color: var(--basalt-zacht);
}
.voet a { color: var(--basalt-zacht); }
.voet__rijen { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1rem; }

/* ── Losse tekstpagina's ───────────────────────────── */
.tekst { padding-block: 3.5rem; max-width: 40rem; }
.tekst h1 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; margin: 0 0 1.5rem;
}
.tekst h2 {
  font-family: var(--font-display);
  font-size: 1.5rem; margin: 2.5rem 0 .75rem;
}

/* ── Mobiel ────────────────────────────────────────── */
@media (max-width: 46rem) {
  .zaak {
    grid-template-columns: 2.5rem 1fr;
    grid-template-areas:
      "rang    hoofd"
      "penning penning"
      "velden  velden"
      "bron    bron";
    gap: .5rem .75rem;
  }
  .penning {
    justify-self: start;
    width: 4.5rem; height: 4.5rem;
    margin-bottom: 1rem;
  }
  .veld { grid-template-columns: 1fr; gap: .1rem; padding: .625rem .8rem; }
  .badge-blok { grid-template-columns: 1fr; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .zaak:hover .penning { transform: rotate(-4deg); }
}

/* ── Formulieren ───────────────────────────────────────
   De toestemming is het hele doel van dit formulier.
   Dus krijgt dat vinkje ruimte, geen kleine lettertjes. */
.formulier { margin: 2rem 0 0; max-width: 34rem; }
.formulier p { margin: 0 0 1.25rem; }

.formulier label {
  display: block;
  font-family: var(--font-data);
  font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--basalt-zacht);
  margin-bottom: .4rem;
}
.formulier input[type="text"],
.formulier input[type="email"],
.formulier textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--basalt);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: .7rem .8rem;
}
.formulier input:focus, .formulier textarea:focus {
  border-color: var(--basalt);
  outline: 2px solid var(--penning); outline-offset: 1px;
}
.formulier textarea { resize: vertical; }

.toestemming {
  background: var(--mos-licht);
  border: 1px solid var(--mos);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.toestemming label {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem;
  align-items: start;
  font-family: var(--font-body);
  font-size: .9375rem; letter-spacing: normal; text-transform: none;
  color: var(--basalt); margin: 0; cursor: pointer;
}
.toestemming input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--mos); }

.honeypot { position: absolute; left: -9999px; }

.klein { font-size: .875rem; color: var(--basalt-zacht); }

.melding {
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border-left: 4px solid;
  background: var(--wit);
}
.melding--goed { border-color: var(--mos); }
.melding--fout { border-color: #b3261e; }

/* ── Badge-pagina ──────────────────────────────────────── */
.badge-toon {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 2rem; align-items: center;
  margin: 2rem 0 3rem;
}
.badge-toon img { transform: rotate(-4deg); }
.inleiding { font-size: 1.1875rem; color: var(--basalt); }

.embed {
  background: var(--basalt); color: #d8ded9;
  padding: 1.1rem; border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--font-data); font-size: .8125rem; line-height: 1.6;
}
.embed code { color: inherit; }

/* ── Criteria ──────────────────────────────────────────── */
.criteria { list-style: none; counter-reset: c; margin: 2rem 0; padding: 0; }
.criteria li {
  counter-increment: c;
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem;
  padding: 1.5rem 0; border-top: 1px solid var(--lijn);
}
.criteria li::before {
  content: counter( c, decimal-leading-zero );
  font-family: var(--font-data); font-weight: 700;
  color: var(--penning);
}
.criteria h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.criteria p { margin: 0; color: var(--basalt-zacht); }

@media (max-width: 46rem) {
  .badge-toon { grid-template-columns: 1fr; }
}

/* ── De derde penning: het eerlijke gat ────────────────
   Niet gegoten, niet gegraveerd — nog blanco. Hij hoort
   er onaf uit te zien. Dat is precies wat de restauranthouder
   moet zien als hij zijn eigen zaak opzoekt. */
.penning--onbekend {
  background: repeating-linear-gradient(
    -45deg,
    var(--kiezel-diep) 0 6px,
    var(--kiezel) 6px 12px
  );
  color: var(--basalt-zacht);
  border: 2px dotted var(--basalt-zacht);
}
.penning--onbekend .penning__hoofd { font-size: .8125rem; }

.veld--gat { background: #fdf6e6; }
.veld--gat dd { color: var(--basalt); }
.veld--gat a {
  display: inline-block;
  color: var(--penning-diep); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ── Wandelingen op de stadspagina ─────────────────────── */
.wandelingen { margin: 4rem 0; }
.wandelingen__titel {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: 1.75rem; margin: 0 0 1.25rem;
}
.wandelroutes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.wandelroutes li { border-bottom: 1px solid var(--lijn); }
.wandelroutes a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.125rem .25rem; text-decoration: none; color: var(--basalt);
}
.wandelroutes a:hover { background: var(--wit); }
.wandelroutes a:hover .wandelroutes__naam { text-decoration: underline; text-decoration-color: var(--mos); }
.wandelroutes__naam {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: 1.375rem; font-weight: 600;
}
.wandelroutes__meta { color: var(--basalt-zacht); flex-shrink: 0; text-align: right; }

/* ── Wandeling-artikel ─────────────────────────────────── */
.wandeling { padding-bottom: 2rem; }
.gebiedskaart { margin-bottom: 1rem; }

.seizoen-tip {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--mos-licht);
  border-left: 4px solid var(--mos);
  border-radius: var(--radius);
}
.seizoen-tip .data { color: var(--mos); margin: 0 0 .5rem; }
.seizoen-tip p:last-child { margin: 0; }

.wandeling__route {
  max-width: 42rem;
  font-size: 1.0625rem;
  margin: 2.5rem 0;
}
.wandeling__route p { margin: 0 0 1.25rem; }
.wandeling__route h2 {
  font-family: var(--font-display); font-size: 1.5rem;
  margin: 2rem 0 .75rem;
}

.erna { margin: 3.5rem 0 2rem; }
.erna h2 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: 1.75rem; margin: 0 0 .25rem;
}
.erna__intro { color: var(--basalt-zacht); margin: 0 0 1rem; }

.terug { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--lijn); }
.terug a {
  font-family: var(--font-data); font-size: .8125rem;
  letter-spacing: .04em; text-decoration: none; color: var(--mos);
}
.terug a:hover { color: var(--basalt); text-decoration: underline; }

/* ── Structured claim-velden: de zaak vult zichzelf in ── */
.antwoorden {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1.25rem 1.1rem;
  margin: 0 0 1.25rem;
}
.antwoorden legend {
  font-family: var(--font-data);
  font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--basalt); padding: 0 .4rem;
}
.antwoorden .klein { margin: 0 0 1rem; }
.antwoorden__vraag { font-weight: 600; margin: 0 0 .5rem; }

.radiorij { display: flex; gap: 1.25rem; margin-bottom: 1rem; }
.radiorij label,
.vinkje {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-size: .9375rem;
  letter-spacing: normal; text-transform: none; color: var(--basalt);
  margin: 0 0 .5rem; cursor: pointer;
}
.radiorij input, .vinkje input { width: 1.1rem; height: 1.1rem; accent-color: var(--mos); margin: 0; }
.antwoorden input[type="text"] { width: 100%; }