/* ==========================================================================
   Regionaal Schisis Fonds
   style.css : één bestand voor de hele site

   Uitgangspunt is een patiëntenbrochure van een ziekenhuis.
   Eén leeskolom, veel wit, dunne lijnen, blauw enkel voor titels en links.
   Geen kaders rond alles, geen pijlen, geen kleurvlakken zonder reden.
   Lettertypes worden zelf gehost (zie onderaan). Nooit Google Fonts.
   ========================================================================== */

:root {
  --blauw:      #1443b8;
  --blauw-diep: #0d2c7d;
  --blauw-vlak: #f0f5fd;
  --inkt:       #1b2333;
  --grijs:      #5a6478;
  --lijn:       #dde4ee;
  --wit:        #ffffff;

  --sans: "Schisis Sans", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans);

  --kolom: 660px;   /* leeskolom */
  --breed: 1080px;  /* header en voettekst */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--wit);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

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

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

.wrap   { width: min(100% - 2.5rem, var(--breed)); margin-inline: auto; }
.kolom  { width: min(100% - 2.5rem, var(--kolom)); margin-inline: auto; }

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

/* ---------- Header ------------------------------------------------------ */

.kop {
  position: sticky; top: 0; z-index: 50;
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}

/* De headerbalk loopt breder dan de leeskolom, zodat het logo helemaal
   links staat en het menu helemaal rechts. */
.kop .wrap { width: min(100% - 3rem, 1600px); }

.kop__balk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: .85rem 0;
}

.merk { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--blauw); }
.merk__logo { width: 44px; height: 44px; flex: none; }
.merk__naam { font-size: 1.02rem; line-height: 1.2; font-weight: 700; display: block; }
.merk__sub  { display: block; font-size: .76rem; color: var(--grijs); font-weight: 400; }

.nav__lijst { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav__lijst a {
  display: block; padding: .5rem .6rem;
  font-size: .9rem; text-decoration: none; color: var(--inkt); white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav__lijst a:hover { color: var(--blauw); }
.nav__lijst a[aria-current="page"] { color: var(--blauw); border-bottom-color: var(--blauw); }

.nav__uit { position: relative; }
.nav__knop {
  font: inherit; font-size: .9rem; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--inkt); padding: .5rem .6rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.nav__knop:hover { color: var(--blauw); }
.nav__knop::after {
  content: ""; width: .35rem; height: .35rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.nav__menu {
  position: absolute; top: 100%; left: 0; min-width: 235px;
  background: var(--wit); border: 1px solid var(--lijn);
  box-shadow: 0 8px 24px rgba(27,35,51,.10);
  list-style: none; margin: 0; padding: .3rem; display: none;
}
.nav__uit[data-open="true"] .nav__menu { display: block; }
.nav__menu a { font-size: .89rem; padding: .45rem .65rem; border-bottom: 0; }
.nav__menu a:hover { background: var(--blauw-vlak); }

.nav__hamburger {
  display: none; font: inherit; color: var(--blauw);
  background: none; border: 1px solid var(--lijn); padding: .5rem .85rem; cursor: pointer;
}

/* ---------- Titelblok --------------------------------------------------- */

.titelblok { padding: 3.25rem 0 2rem; border-bottom: 1px solid var(--lijn); margin-bottom: 2.75rem; }
.titelblok h1 {
  font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 2.6rem); line-height: 1.15;
  margin: 0 0 .9rem; color: var(--blauw); max-width: 20ch;
}
.titelblok p {
  font-size: 1.1rem; line-height: 1.65; color: var(--grijs); margin: 0; max-width: 60ch;
}

/* ---------- Lopende tekst ----------------------------------------------- */

.tekst { padding-bottom: 4rem; }
.tekst > * + * { margin-top: 1.15em; }

.tekst h2 {
  font-weight: 700; font-size: 1.35rem; line-height: 1.3; color: var(--blauw);
  margin-top: 3rem; margin-bottom: .25rem;
}
.tekst h2:first-child { margin-top: 0; }

.tekst h3 {
  font-weight: 600; font-size: 1.05rem; color: var(--inkt);
  margin-top: 2.1rem; margin-bottom: .1rem;
}
.tekst h3 span {
  display: block; font-weight: 400; font-size: .9rem; color: var(--grijs);
}

.tekst p  { margin-block: 0; }
.tekst ul { margin-block: 0; padding-left: 1.2rem; }
.tekst li + li { margin-top: .35rem; }
.tekst li::marker { color: var(--blauw); }
.tekst strong { font-weight: 600; }

/* Onderverdeling binnen een hoofdstuk */
.scheiding { border: 0; border-top: 1px solid var(--lijn); margin: 2.75rem 0; }

/* Kader met een aandachtspunt. Spaarzaam gebruiken. */
.nota {
  background: var(--blauw-vlak);
  border-left: 3px solid var(--blauw);
  padding: 1.1rem 1.35rem;
  font-size: .98rem;
}
.nota p:first-child { margin-top: 0; }
.nota p:last-child  { margin-bottom: 0; }

/* Afbeelding met bijschrift */
.beeld { margin: 2.25rem 0; }
.beeld img { border: 1px solid var(--lijn); }
.beeld figcaption { font-size: .87rem; color: var(--grijs); margin-top: .55rem; }
.beeld__credit { display: block; font-size: .8rem; }

/* Contactblok van een zorgverlener */
.zorgverlener {
  display: flex; gap: 1.1rem; align-items: flex-start;
  border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
  padding: 1.1rem 0;
}
.zorgverlener img { width: 68px; height: 68px; object-fit: cover; flex: none; }
.zorgverlener__naam { font-weight: 600; display: block; }
.zorgverlener__rol  { color: var(--grijs); font-size: .92rem; display: block; margin-bottom: .35rem; }
.zorgverlener__contact { font-size: .93rem; margin: 0; }

/* Verwijzing naar de volgende pagina */
.verder {
  display: block; text-decoration: none;
  border-top: 1px solid var(--lijn); padding-top: 1.4rem; margin-top: 3rem;
}
.verder__label { font-size: .88rem; color: var(--grijs); display: block; }
.verder__titel { display: block; font-size: 1.15rem; font-weight: 600; color: var(--blauw); margin-top: .2rem; }
.verder:hover .verder__titel { text-decoration: underline; }

/* ---------- Startpagina ------------------------------------------------- */

.onthaal { padding: 4rem 0 2.5rem; text-align: center; }
.onthaal__logo { width: 132px; height: 132px; margin: 0 auto 1.5rem; }
.onthaal h1 {
  font-weight: 700; font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.12;
  color: var(--blauw); margin: 0 0 1.4rem;
}
.onthaal__citaten { margin: 0 auto; max-width: 40ch; }
.onthaal__citaten p {
  font-size: 1.06rem; line-height: 1.55; color: var(--inkt); font-style: italic;
  margin: 0 0 .5rem;
}
.onthaal__citaten p:last-child { margin-bottom: 0; }

.introtekst { padding-bottom: 3rem; border-bottom: 1px solid var(--lijn); }
.introtekst p { margin: 0 0 1.1em; }
.introtekst p:last-child { margin-bottom: 0; }

/* Eenvoudige inhoudslijst, geen kaarten */
.wegwijs { padding: 3rem 0 4rem; }
.wegwijs h2 { font-weight: 700; font-size: 1.35rem; color: var(--blauw); margin: 0 0 1.4rem; }
.wegwijs ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.wegwijs li { border-bottom: 1px solid var(--lijn); }
.wegwijs a  { display: block; padding: 1rem .25rem; text-decoration: none; color: var(--inkt); }
.wegwijs a:hover { background: var(--blauw-vlak); }
.wegwijs__titel { display: block; font-weight: 600; color: var(--blauw); }
.wegwijs__uitleg { display: block; font-size: .94rem; color: var(--grijs); }

/* ---------- Voettekst --------------------------------------------------- */

.voet { background: var(--blauw-diep); color: #c8d6f0; padding: 3rem 0 1.75rem; font-size: .94rem; }
.voet a { color: #fff; }
.voet__rooster { display: grid; gap: 2.5rem 3rem; grid-template-columns: 1.7fr 1fr 1fr; }

/* Logo naast de tekst, zodat de titel op dezelfde hoogte staat
   als de titels van de twee andere kolommen. */
.voet__over { display: flex; align-items: flex-start; gap: 1rem; }
.voet__logo { width: 52px; height: 52px; flex: none; }
.voet h2 { font-size: .95rem; color: #fff; margin: 0 0 .75rem; font-weight: 600; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li + li { margin-top: .45rem; }
.voet p { margin: 0 0 1em; }
.voet__sociaal { display: flex; gap: 1.25rem; }
.voet__sociaal a { display: inline-flex; align-items: center; gap: .45rem; }
.voet__onder {
  border-top: 1px solid rgba(255,255,255,.18); margin-top: 2.5rem; padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .85rem; color: #98abd2;
}
.voet__disclaimer { max-width: 62ch; margin-top: 1.25rem; font-size: .86rem; color: #98abd2; }

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 980px) {
  .voet__rooster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  .nav__hamburger { display: block; }
  .nav { display: none; width: 100%; }
  .kop[data-menu="open"] .nav { display: block; padding-bottom: .75rem; }
  .kop__balk { flex-wrap: wrap; }
  .nav__lijst { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lijst a, .nav__knop {
    padding: .7rem .25rem; width: 100%; text-align: left;
    border-bottom: 1px solid var(--lijn);
  }
  .nav__menu { position: static; display: none; border: 0; box-shadow: none;
               border-left: 2px solid var(--lijn); margin-left: .5rem; }
  .onthaal { padding: 2.75rem 0 2rem; }
  .onthaal__logo { width: 104px; height: 104px; }
  .titelblok { padding: 2.25rem 0 1.5rem; margin-bottom: 2rem; }
  .voet__rooster { grid-template-columns: 1fr; gap: 1.75rem; }
  .zorgverlener { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

@media print {
  .kop, .nav, .verder, .wegwijs { display: none; }
  body { color: #000; }
  a { color: #000; }
}

/* ---------- Zelf gehoste lettertypes -----------------------------------
   Nu staan de teksten op de systeemlettertypes uit --sans. Dat vraagt geen
   enkele externe request en geeft dus geen probleem met de GDPR.

   Wil je een eigen lettertype, kies dan een humanistische schreefloze met
   een rustige g en a. Source Sans 3 en Inter zijn gratis en zelf te hosten.
   Zet de .woff2 bestanden in /fonts/ en haal onderstaande blokken uit
   commentaar. Laad nooit lettertypes via de Google Fonts CDN.

@font-face {
  font-family: "Schisis Sans";
  src: url("../fonts/sans-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Schisis Sans";
  src: url("../fonts/sans-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Schisis Sans";
  src: url("../fonts/sans-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
----------------------------------------------------------------------- */