/*
  Sarah van der Land, opmaak van de site.
  Kleuren en lettertypen komen uit theme.json. Deze variabelen wijzen daarnaar,
  zodat een kleur op één plek wordt beheerd.
*/

:root {
  --cream:        var(--wp--preset--color--creme, #F8F4EB);
  --cream-2:      var(--wp--preset--color--creme-2, #F1EBDE);
  --navy:         var(--wp--preset--color--navy, #0D1B2A);
  --navy-2:       var(--wp--preset--color--navy-2, #142639);
  --navy-rule:    var(--wp--preset--color--navy-rule, #26384E);
  --on-navy:      var(--wp--preset--color--on-navy, #F4F1EB);
  --on-navy-soft: var(--wp--preset--color--on-navy-soft, #B6C0CD);
  --ink:          var(--wp--preset--color--ink, #14202E);
  --ink-soft:     var(--wp--preset--color--ink-soft, #4A5563);
  --faint:        var(--wp--preset--color--faint, #8B8578);
  --rule:         var(--wp--preset--color--rule, #D9D2C4);
  --gold:         var(--wp--preset--color--gold, #C8A36D);
  --gold-deep:    var(--wp--preset--color--gold-deep, #A9832F);
  --gold-ink:     var(--wp--preset--color--gold-ink, #86671F);

  --f-display: var(--wp--preset--font-family--display, "Playfair Display", Georgia, serif);
  --f-body:    var(--wp--preset--font-family--body, Lato, Arial, sans-serif);

  --gutter: clamp(1.4rem, 6vw, 6.5rem);
  --max: 78rem;
}

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

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* WordPress zet standaard marges en breedtes op blokken. Binnen onze
   secties bepalen wij de ruimte zelf, anders schuift alles dubbel. */
.svdl :where(p, h1, h2, h3, ul, ol, figure) { margin-block: 0; }
.svdl .wp-block-group { margin-block: 0; }
.svdl .wp-block-image { margin: 0; }
.svdl ul { list-style: none; padding-left: 0; }

h1, h2, h3, .display { font-family: var(--f-display); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }

.shell { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: 56rem; }

.lab {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.navy .lab { color: var(--gold); }

section { padding: clamp(4rem, 11vw, 10rem) 0; }

/* ---------- ribbon ---------- */
.ribbon { background: var(--navy-2); color: var(--on-navy-soft); }
.ribbon .shell { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; align-items: baseline; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.ribbon .lab { color: var(--gold); }
.ribbon .txt { font-size: 0.8rem; line-height: 1.5; }

/* ---------- topbar ---------- */
.topbar .shell { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; padding-bottom: 1rem; gap: 1rem; }
.brand { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.topbar a.lab { border-bottom: 1px solid var(--gold); padding-bottom: 2px; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(2.5rem, 7vw, 5rem); padding-bottom: 0; }
.hero h1 {
  font-size: clamp(2.9rem, 9.2vw, 7.4rem);
  line-height: 0.99;
  letter-spacing: -0.015em;
  max-width: 15ch;
  margin-top: 2.5rem;
}
.hero h1 span,
.hero h1 .has-inline-color { color: var(--gold-deep); }
.hero .sub {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  color: var(--ink-soft);
  margin-top: 2rem;
  max-width: 26ch;
}

.hero-media { margin-top: clamp(3rem, 7vw, 5.5rem); display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: end; }
@media (min-width: 58rem) {
  .hero-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 5rem); }
}
.hero-media img { width: 100%; height: auto; }
.hero-copy { display: grid; gap: 2rem; padding-bottom: clamp(0rem, 3vw, 3rem); max-width: 34rem; }
.hero-copy p { color: var(--ink-soft); }

.btn {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1.15rem 2.4rem;
  color: var(--ink);
  border: 1px solid var(--ink);
  background: transparent;
  transition: background 150ms ease, color 150ms ease;
  justify-self: start;
}
.btn:hover { background: var(--ink); color: var(--cream); }
.btn.gold { border-color: var(--gold); background: var(--gold); color: var(--navy); }
.btn.gold:hover { background: transparent; color: var(--gold); }

/* ---------- meta strip ---------- */
.meta { border-top: 1px solid var(--rule); }
.meta ul, .meta .lijst { display: grid; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .meta ul, .meta .lijst { grid-template-columns: repeat(3, 1fr); } }
.meta li, .meta .rij { padding: 1.6rem 0; border-top: 1px solid var(--rule); display: grid; gap: 0.4rem; }
@media (min-width: 46rem) {
  .meta li, .meta .rij { border-top: 0; border-left: 1px solid var(--rule); padding: 2rem 2.5rem; }
  .meta li:first-child, .meta .rij:first-child { border-left: 0; padding-left: 0; }
}
.meta .val { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- statement ---------- */
.statement p.big {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  line-height: 1.22;
  max-width: 20ch;
}
.statement .after { margin-top: 2.2rem; color: var(--gold-ink); font-size: 1.05rem; max-width: 34ch; }

/* ---------- twee kaarten ---------- */
.cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: clamp(3rem, 7vw, 5rem); }
@media (min-width: 54rem) { .cards { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.card { padding: clamp(1.8rem, 3.5vw, 2.6rem); display: grid; gap: 1.1rem; align-content: start; }
.card.light { background: #FBF8F1; }
.card.dark { background: var(--navy); color: var(--on-navy); }
.card p { color: var(--ink-soft); }
.card.dark p { color: var(--on-navy-soft); }
.card b { color: var(--ink); font-weight: 700; }

/* ---------- head ---------- */
.head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.14; max-width: 20ch; }
.navy h2 { color: var(--on-navy); }

/* ---------- sessies ---------- */
.sessie { display: grid; grid-template-columns: 1fr; gap: 1rem 3rem; padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid var(--rule); }
@media (min-width: 54rem) { .sessie { grid-template-columns: 6rem minmax(0, 1fr); } }
.sessie:last-of-type { border-bottom: 1px solid var(--rule); }
.sessie .num { font-family: var(--f-display); font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--gold-deep); line-height: 1; }
.sessie h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: 0.9rem; }
.sessie p { color: var(--ink-soft); max-width: 46ch; }
.sessie .res { color: var(--gold-ink); margin-top: 1rem; max-width: 46ch; }

.figure-wide { margin: clamp(3rem, 7vw, 5rem) 0 0; }
.figure-wide img { width: 100%; }

/* ---------- traject ---------- */
.traject li, .traject .rij { display: grid; grid-template-columns: 1fr; gap: 0.3rem 2.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 54rem) { .traject li, .traject .rij { grid-template-columns: 14rem 5rem minmax(0, 1fr); align-items: baseline; } }
.traject li:first-child, .traject .rij:first-child { border-top: 1px solid var(--rule); }
.traject .fase { font-weight: 700; }
.traject .duur { color: var(--gold-ink); font-size: 0.88rem; letter-spacing: 0.04em; }
.traject .wat { color: var(--ink-soft); }
.after-note { margin-top: 2.2rem; color: var(--gold-ink); max-width: 42ch; }

/* ---------- navy band ---------- */
.navy { background: var(--navy); color: var(--on-navy); }
.navy p, .navy li { color: var(--on-navy-soft); }
.grid2 { display: grid; gap: 1.8rem 4rem; grid-template-columns: 1fr; }
@media (min-width: 54rem) { .grid2 { grid-template-columns: 1fr 1fr; } }
.grid2 li, .grid2 .rij { border-top: 1px solid var(--navy-rule); padding-top: 1rem; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.about figure img { width: 100%; max-height: 34rem; object-fit: cover; object-position: center 18%; }
@media (min-width: 58rem) { .about { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); } }
.facts { display: grid; gap: 1.3rem; margin-top: 2.5rem; }
.facts li, .facts .rij { border-top: 1px solid var(--rule); padding-top: 0.9rem; color: var(--ink-soft); font-size: 0.97rem; }
.facts b { color: var(--ink); font-weight: 700; }

/* ---------- quotes ---------- */
.quote-feature { margin: 0 0 clamp(2.5rem, 5vw, 4rem); display: grid; gap: 1.5rem; max-width: 46rem; }
.quote-feature p { font-family: var(--f-display); font-size: clamp(1.3rem, 2.9vw, 2rem); line-height: 1.4; }
.quote-feature cite, .quotes cite { font-style: normal; color: var(--faint); font-size: 0.8rem; letter-spacing: 0.06em; }
.quotes { display: grid; gap: 2.2rem 4rem; grid-template-columns: 1fr; }
@media (min-width: 54rem) { .quotes { grid-template-columns: 1fr 1fr; } }
.quotes blockquote, .quotes .citaat { margin: 0; border-top: 1px solid var(--rule); padding-top: 1.3rem; display: grid; gap: 1rem; }
.quotes p { color: var(--ink-soft); }

/* ---------- faq ---------- */
.faq { display: grid; gap: 0 4rem; grid-template-columns: 1fr; }
@media (min-width: 58rem) { .faq { grid-template-columns: 1fr 1fr; } }
.faq li, .faq .rij { border-top: 1px solid var(--rule); padding: 1.5rem 0; display: grid; gap: 0.5rem; }
.faq .q { font-weight: 700; }
.faq .a { color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- note ---------- */
.note { border-left: 2px solid var(--gold); padding-left: 1.3rem; margin-top: 2.5rem; display: grid; gap: 0.5rem; max-width: 42rem; }
.note p { font-size: 0.92rem; color: var(--ink-soft); }
.navy .note p { color: var(--on-navy-soft); }

/* ---------- contact ---------- */
.contact { text-align: left; }
.contact .display { font-size: clamp(2.1rem, 5.4vw, 4.2rem); line-height: 1.08; max-width: 16ch; }
.contact .lede { margin-top: 1.8rem; max-width: 34ch; color: var(--on-navy-soft); }
.steps3 { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 0; }
.steps3 li, .steps3 .rij { display: grid; grid-template-columns: 1fr; gap: 0.2rem 2.5rem; padding: 1.1rem 0; border-top: 1px solid var(--navy-rule); }
@media (min-width: 46rem) { .steps3 li, .steps3 .rij { grid-template-columns: 13rem minmax(0, 1fr); } }
.steps3 .k { color: var(--gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding-top: 0.4rem; }
.mail { color: var(--on-navy); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }

footer { background: var(--cream-2); }
footer .shell { display: flex; flex-wrap: wrap; gap: 0.5rem 3rem; padding-top: 2rem; padding-bottom: 2rem; font-size: 0.78rem; color: var(--faint); letter-spacing: 0.04em; }

.rise { opacity: 0; transform: translateY(12px); animation: rise 800ms cubic-bezier(.2,.7,.3,1) forwards; }
.d1 { animation-delay: 60ms; } .d2 { animation-delay: 150ms; } .d3 { animation-delay: 260ms; } .d4 { animation-delay: 380ms; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } }



.hero-fig { margin: 0; }
.hero-fig img { width: 100%; height: auto; display: block; }
@media (min-width: 60rem) { .hero-fig { max-width: 26rem; margin-left: auto; } }

/* ---- breed beeld over de volle breedte ---- */
.band { margin: 0; }
.band img { display: block; width: 100%; height: auto; }
.band figcaption { display: none; }

/* ---- veilig en verantwoord, met beeld ---- */
.split { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 58rem) { .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.split figure { margin: 0; }
.split img { width: 100%; height: auto; display: block; }

/* ---- bogenpatroon, ontleend aan de bogen uit haar fotoshoot ---- */
.navy, .topbar.navy, .hero.navy, .meta.navy { position: relative; }
.navy > *, .hero.navy > *, .meta.navy > *, .topbar.navy > * { position: relative; z-index: 1; }
.hero.navy::after, .navy.contact::after, section.navy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjgwIiB2aWV3Qm94PSIwIDAgMjQwIDI4MCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQzhBMzZEIiBzdHJva2Utb3BhY2l0eT0iMC41IiBzdHJva2Utd2lkdGg9IjEiPjxwYXRoIGQ9Ik0xNSAyNDAgVjEwNSBhNDUgNDUgMCAwIDEgOTAgMCBWMjQwIi8+PHBhdGggZD0iTTEzNSAyNDAgVjEwNSBhNDUgNDUgMCAwIDEgOTAgMCBWMjQwIi8+PC9nPjwvc3ZnPg==") repeat;
  background-size: 460px auto;
  opacity: 0.30;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,1) 100%);
}

/* ---- variant B: navy opening, like the cover of her brochure ---- */
.topbar.navy, .hero.navy, .meta.navy { background: var(--navy); color: var(--on-navy); }
.hero.navy h1 { color: var(--on-navy); }
.hero.navy h1 span,
.hero.navy h1 .has-inline-color { color: var(--gold); }
.hero.navy .sub { color: var(--on-navy-soft); }
.hero.navy .hero-copy p { color: var(--on-navy-soft); }
.hero.navy .btn { color: var(--on-navy); border-color: var(--gold); }
.hero.navy .btn:hover { background: var(--gold); color: var(--navy); }
.meta.navy { border-top-color: var(--navy-rule); }
.meta.navy li { border-color: var(--navy-rule); }
.meta.navy .val { color: var(--on-navy-soft); }

/* ---------- alleen in de blokeditor ---------- */
.editor-styles-wrapper .svdl section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.editor-styles-wrapper .block-editor-block-list__layout { background: var(--cream); }

/* ---------- sectievlakken ---------- */
/* In de statische versie stond dit als inline stijl op de sectie. In blokken
   werkt een class beter, want die blijft staan als iemand de sectie verplaatst. */
.vlak-2 { background: var(--cream-2); }

/* ---------- ruimte en tekstkleur binnen secties ----------
   In de statische versie stonden deze regels als inline stijl. Als class
   blijven ze staan, ook als iemand de tekst in de editor aanpast. */
.statement p.big { margin-top: 1.2rem; }
.statement p.zacht { color: var(--ink-soft); max-width: 46ch; margin-top: 1.8rem; }

.split p.zacht { color: var(--ink-soft); }
.split p.zacht + p.zacht { margin-top: 1.3rem; }

.about .kolom h2 { margin-top: 1rem; }
.about .kolom p.goud { color: var(--gold-ink); margin-top: 1.5rem; }
.facts { margin-top: clamp(2.5rem, 5vw, 4rem); }

.contact p.display { margin-top: 1.2rem; }
.contact p.knopregel { margin-top: 2.2rem; }
.contact p.mailregel { margin-top: 2.5rem; }

/* ---------- extra gewicht voor de blokeditor ----------
   In de editor kleurt WordPress de blokken zelf mee. Door de class dubbel te
   noemen wegen deze regels zwaarder, zodat de vlakken ook tijdens het bewerken
   de goede kleur hebben. Zonder dit staat witte tekst op een lichte achtergrond. */
.topbar.navy.navy,
.hero.navy.navy,
.meta.navy.navy,
section.navy.navy { background: var(--navy); color: var(--on-navy); }
.vlak-2.vlak-2 { background: var(--cream-2); }
.card.dark.dark { background: var(--navy); color: var(--on-navy); }
.card.light.light { background: var(--cream); }

/* ---------- tekstpagina's ----------
   Voor pagina's die vooral tekst zijn: Over mij, Publicaties, Onderzoek,
   Onderwijs. Rustig, smal, met dezelfde typografie als de rest. */
.vlak-tekst { padding-block: clamp(3.5rem, 8vw, 7rem); }
.vlak-tekst h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.12;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 18ch;
}
.vlak-tekst h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 2.6rem; margin-bottom: 0.9rem; }
.vlak-tekst p { color: var(--ink-soft); max-width: 62ch; }
.vlak-tekst p + p { margin-top: 1.1rem; }
.vlak-tekst a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.vlak-tekst ul.lijst, .vlak-tekst ol.lijst {
  list-style: none; padding-left: 0; margin-top: 1rem; max-width: 62ch;
}
.vlak-tekst ul.lijst li, .vlak-tekst ol.lijst li {
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding: 0.7rem 0;
}
.vlak-tekst strong, .vlak-tekst b { color: var(--ink); }

/* de kopregel als los onderdeel bovenaan een pagina */
.topbar .brand a, .topbar .lab a { color: inherit; text-decoration: none; }

/* ---------- Het spanningsveld: kop links, uitleg rechts ----------
   Stond eerst alles onder elkaar links, met een leeg gat aan de rechterkant en
   drie verschillende tekstbreedtes boven elkaar. Naast elkaar leest het rustiger
   en vult het de bladspiegel. Op smalle schermen blijft het onder elkaar. */
@media (min-width: 62rem) {
  .statement .shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .statement > .shell > .lab    { grid-column: 1; grid-row: 1; }
  .statement > .shell > p.big   { grid-column: 1; grid-row: 2; max-width: none; }
  .statement > .shell > .uitleg { grid-column: 2; grid-row: 2; margin-top: 0.7rem; max-width: 44ch; }
  .statement > .shell > .cards  { grid-column: 1 / -1; grid-row: 3; }
  .statement .uitleg p.zacht { margin-top: 0; max-width: none; }
  .statement .uitleg p.after { margin-top: 1.6rem; }
}

/* ---------- bewijs: één uitgelicht citaat, hoog op de pagina ----------
   Sarah vroeg om bewijs eerder op de pagina, vlak nadat iemand heeft gelezen
   wat het oplevert. Eén citaat, groot gezet, met een gouden streep erboven. */
.bewijs .lab { display: block; }
.bewijs .quote-feature {
  margin: 1.4rem 0 0;
  max-width: 52rem;
  position: relative;
  padding-top: 2.2rem;
}
.bewijs .quote-feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  height: 1px;
  background: var(--gold);
}
.bewijs .quote-feature p { font-size: clamp(1.3rem, 3vw, 2.05rem); }

/* ---------- citaten, rustiger en luxer ----------
   Stond eerst als twee kolommen met alleen een dun streepje erboven. Nu twee
   panelen met veel ruimte, een gouden aanhalingsteken en de bron in kapitaal. */
.quotes {
  gap: clamp(1.5rem, 3vw, 2.4rem);
  padding-top: clamp(2.2rem, 4vw, 3.4rem);
  align-items: start;
}
.quotes blockquote, .quotes .citaat {
  margin: 0;
  border: 0;
  background: var(--cream-2);
  padding: clamp(1.9rem, 3.6vw, 3rem);
  display: grid;
  gap: 1.3rem;
  align-content: start;
  position: relative;
}
.quotes blockquote::before, .quotes .citaat::before {
  content: "\201C";
  position: absolute;
  top: clamp(0.6rem, 1.6vw, 1.1rem);
  left: clamp(1.5rem, 3vw, 2.4rem);
  font-family: var(--f-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
}
.quotes p {
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  margin-top: 1.2rem;
}
.quotes .bron, .quote-feature .bron {
  color: var(--faint);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0;
}
.quotes p.bron { font-family: var(--f-body); font-size: 0.8rem; margin-top: 0; }
.quote-feature .bron { font-family: var(--f-body); }

/* de bron blijft klein, ook in het uitgelichte citaat */
.bewijs .quote-feature p.bron,
.quotes .citaat p.bron,
.quote-feature p.bron {
  font-family: var(--f-body);
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 0;
}

/* ---------- menu bovenaan ----------
   Drie items rechts naast haar naam. Kennismaken houdt het gouden streepje,
   zodat de weg naar het contactblok het zwaarst weegt. */
.topbar .menu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem clamp(1.2rem, 2.5vw, 2.2rem); }
.topbar .menu p { margin: 0; }
.topbar .menu a {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-navy-soft); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.topbar .menu a:hover, .topbar .menu a:focus-visible { color: var(--on-navy); border-bottom-color: var(--gold); }
.topbar .menu p.lab a { color: var(--gold); border-bottom-color: var(--gold); }
.topbar .menu p.lab a:hover { color: var(--on-navy); }

/* ---------- voettekst met linkregel ---------- */
footer .shell { display: block; }
.voetmenu {
  display: flex; flex-wrap: wrap; gap: 0.6rem clamp(1.4rem, 3vw, 2.6rem);
  padding-bottom: 1.6rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--rule);
}
.voetmenu p { margin: 0; }
.voetmenu a {
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.voetmenu a:hover, .voetmenu a:focus-visible { color: var(--ink); border-bottom-color: var(--gold); }
.voetregel { display: flex; flex-wrap: wrap; gap: 0.5rem 3rem; }
.voetregel p { margin: 0; }

/* Op smalle schermen onder elkaar: naam boven, menu eronder als rij. */
@media (max-width: 34rem) {
  .topbar .shell { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .topbar .menu { gap: 0.4rem 1.2rem; }
}

/* ---------- wat het oplevert, drie kolommen ----------
   Naar het voorstel van Sarah van 11 september. */
.resultaat .opbrengst {
  background: var(--cream);
  padding: clamp(2rem, 4vw, 3.4rem);
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  display: grid;
  gap: clamp(2rem, 4vw, 3.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .resultaat .opbrengst { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .resultaat .opbrengst { grid-template-columns: repeat(3, 1fr); } }
.resultaat .kolom { display: grid; gap: 1.8rem; align-content: start; }
.resultaat .kolom > .lab { display: block; }
.resultaat .punt { border-left: 1px solid var(--gold); padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.resultaat .punt h3 {
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.35;
  font-weight: 400;
  margin: 0;
}
.resultaat .punt p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }