/* Healthy Fungi — basis, typografie, header, footer en algemene indeling */
:root { --inkt:#26352b; --groen:#315d45; --vlak:#f7f8f5; --lijn:#dde5dd; --wit:#fff; --max:1260px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--inkt); background:var(--wit); font:16px/1.55 Arial, Helvetica, sans-serif; }
a { color:inherit; }
img { display:block; max-width:100%; height:auto; }
button { font:inherit; }
.container { width:min(calc(100% - 40px), var(--max)); margin-inline:auto; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:16px; top:16px; background:var(--wit); z-index:100; }
.site-header { background:var(--wit); border-bottom:1px solid var(--lijn); }
.header-inner { display:flex; align-items:center; min-height:82px; gap:24px; }
.brand { font-size:21px; font-weight:700; text-decoration:none; white-space:nowrap; }
.hoofdmenu { display:flex; gap:24px; align-items:center; margin-left:auto; }
.hoofdmenu a,.mandje-link { text-decoration:none; font-size:14px; }
.hoofdmenu a:hover,.mandje-link:hover { text-decoration:underline; }
.menu-knop { display:none; border:1px solid var(--lijn); background:var(--wit); padding:8px 12px; cursor:pointer; }
.site-main { min-height:65vh; }
h1 { font-size:clamp(32px,5vw,56px); line-height:1.1; font-weight:500; margin:0 0 20px; }
h2 { line-height:1.2; }
.pagina-intro { padding-block:70px 32px; }
.startblok { padding-block:110px; max-width:860px; }
.eyebrow { text-transform:uppercase; font-size:12px; letter-spacing:.1em; color:var(--groen); }
.knop { display:inline-block; padding:12px 20px; color:var(--wit); background:var(--groen); text-decoration:none; }
.site-footer { margin-top:80px; background:var(--vlak); border-top:1px solid var(--lijn); }
.footer-inner { display:flex; justify-content:space-between; padding-block:38px; gap:24px; }
@media(max-width:980px){
  .header-inner { flex-wrap:wrap; padding-block:16px; }
  .menu-knop { display:block; margin-left:auto; }
  .hoofdmenu { display:none; width:100%; order:3; flex-direction:column; align-items:stretch; gap:0; }
  .hoofdmenu.is-open { display:flex; }
  .hoofdmenu a { padding:12px 0; border-top:1px solid var(--lijn); }
  .mandje-link { margin-left:0; }
}
@media(max-width:580px){ .container { width:min(calc(100% - 28px),var(--max)); } }