/* =========================================================================
   Huët Röell Foundation — één pagina, sober
   Kleuren volgens INSTRUCTIE FILE:
     woordmerk  RGB 0|117|137  -> #007589
     beeldmerk  RGB 0|178|191  -> #00B2BF
   Font: Noway (Atipo, licentie vereist). Zolang die ontbreekt: Barlow.
   Geen font-smoothing-aanpassing: de standaardweergave van het besturings-
   systeem is scherper dan "antialiased".
   ========================================================================= */

:root{
  --teal-deep:#006378;   /* iets dieper dan het huisstijlblauw, voor scherper contrast in koppen */
  --teal:#00b2bf;
  --ink:#0e1a1e;         /* bijna zwart, i.p.v. blauwgrijs, voor scherpere leestekst */
  --muted:#3c4a4f;
  --bg:#ffffff;
  --line:#dcdad3;
  --line-soft:#ebe9e3;
  --font:"Noway","Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  font-size:17px;
  line-height:1.62;
}

img,svg{max-width:100%;height:auto}

.wrap{width:min(100% - 3rem,44rem);margin-inline:auto}
@media (max-width:34rem){.wrap{width:min(100% - 2rem,44rem)}}

/* ---------- kop van de pagina ---------- */
.masthead{position:relative;padding:2.5rem 0 1.5rem;border-bottom:1px solid var(--line)}
.masthead__row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem 2rem}
.masthead img{width:min(100%,15rem);display:block}

.masthead__right{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}

.nav-toggle{
  display:none;flex:none;align-self:center;
  width:2.25rem;height:2.25rem;padding:0;border:0;background:none;cursor:pointer;
}
.nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{
  display:block;width:1.35rem;height:2px;background:var(--teal-deep);border-radius:1px;
}
.nav-toggle__bars{position:relative;margin:0 auto}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0}
.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg)}

@media (max-width:42rem){
  .nav-toggle{display:block}
  .masthead__right{
    display:none;flex-direction:column;align-items:flex-start;gap:1rem;
    position:absolute;top:100%;left:0;right:0;z-index:10;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:1.25rem 1.5rem 1.5rem;margin:0;
  }
  .masthead__right.is-open{display:flex}
  .sitenav{flex-direction:column;align-items:flex-start;gap:.85rem}
  .sitenav a{font-size:.9rem;padding:0}
  .langswitch{order:2;margin:0;font-size:.72rem}
}

.sitenav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem 1.35rem}
.sitenav a{
  font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal-deep);text-decoration:none;padding:.2rem 0;
}
.sitenav a:hover{color:var(--teal);text-decoration:underline}

.langswitch{display:flex;align-items:center;gap:.26rem;font-size:.49rem;opacity:.8;margin-right:.38rem}
.langswitch a,.langswitch .lang-current{display:inline-flex;align-items:center;gap:.18rem}
.langswitch svg{display:block;flex:none;border-radius:1px}
.langswitch a{color:var(--muted);text-decoration:none}
.langswitch a:hover{color:var(--teal-deep);text-decoration:underline}
.langswitch .lang-current{font-weight:600;color:var(--muted)}

/* ---------- typografie ---------- */
h1{
  font-size:1.6rem;font-weight:500;color:var(--teal-deep);
  margin:2.5rem 0 1.75rem;letter-spacing:-.01em;
}
h2{
  font-size:1.18rem;font-weight:700;color:var(--teal-deep);
  margin:1.85rem 0 .6rem;letter-spacing:-.005em;
  scroll-margin-top:1.5rem;
}
p{margin:0 0 .85rem}
.intro{margin-top:1.1rem;font-size:1.05rem}
a{color:var(--teal-deep)}
a:hover{color:var(--teal)}
a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

ul{margin:0 0 .85rem;padding-left:1.1rem}
li{margin-bottom:.4rem}
li::marker{color:var(--teal)}

.contact p{margin-bottom:.25rem}

.bestuur{list-style:none;padding:0;margin:0 0 1rem}
.bestuur li{margin-bottom:.3rem}

/* ---------- financieel overzicht ---------- */
.cijfers{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:1rem;row-gap:.2rem;margin:0 0 1rem;
}
.cijfers .item{min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.cijfers .bedrag{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cijfers .totaal{border-top:1px solid var(--line);padding-top:.35rem;margin-top:.15rem}

/* ---------- voet ---------- */
main{padding-bottom:4rem}

@media print{
  body{font-size:11pt}
}

/* =========================================================================
   Noway webfont — activeer zodra de licentiebestanden in assets/fonts/ staan.

@font-face{font-family:"Noway";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/noway-regular.woff2") format("woff2");}
@font-face{font-family:"Noway";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/noway-bold.woff2") format("woff2");}
   ========================================================================= */