/* ===== Basis typografie & kleur voor alle pagina's ===== */
:root{
  --font-family: "sans-serif", Helvetica, Arial, sans-serif;
  --rpv-text: rgb(0,0,80); /* RPV blauw voor lopende tekst */
}

html, body{
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* formulieren en knoppen laten erven */
button, input, select, textarea {
  font-family: inherit;
}

body{
  color: var(--rpv-text);
  font-size: 16px;          /* iets groter dan default */
  line-height: 1.6;
}

/* Content binnen <main> */
.main-content a{
  color: var(--rpv-text);
  text-decoration: underline;
}
.main-content a:hover{
  text-decoration: none;
}

/* Pagina-opmaak die we op alle contentpagina's kunnen gebruiken */
.page-title{
  margin: 30px 0 10px 0;
  font-size: 24px;
  font-weight: 700;
}

/* Subtitel op pagina's (tussen h1 en body) */
.page-subtitle{
  margin: 6px 0 16px 0;
  font-size: 20px;
  font-weight: 700;
}


.page-body{
  max-width: 1000px;
  width: 90%;
}

.page-body p{ margin: 0 0 1em 0; }

.page-body ul{
  margin: 0 0 1em 1.25em;
  padding: 0;
}
.page-body li{ margin: .4em 0; }
/* Afbeeldingenrij op index: alles op één lijn */
.index-logos{
  display:flex;
  flex-wrap:nowrap;            /* één regel, geen wrap */
  align-items:center;          /* netjes uitlijnen */
  justify-content:space-between;
  gap:16px;                    /* gelijke ruimte tussen beelden */
  margin:40px 4px 0 4px;
}

/* Basis voor alle afbeeldingen */
.index-logos .index-logo{
  display:block;
  height:auto;
}

/* Gewenste breedtes per beeld (zoals in je oude HTML) */
.index-logos .db-kerk{ width:210px; }
.index-logos .db-logo{ width:220px; }
.index-logos .zb-kerk{ width:375px; }
.index-logos .zb-logo{ width:160px; }

/* Optioneel: als de rij ooit krapper wordt, horizontaal scrollen i.p.v. afbreken */
@media (max-width: 900px){
  .index-logos{
    overflow-x:auto;
  }
}

/* Pagina-layout voor sticky footer */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* main moet de overgebleven ruimte opvullen */
.main-content {
  flex: 1 0 auto;
  padding: 24px 0; /* laat jouw bestaande padding staan */
}

/* footer duwt zichzelf naar onderen */
/* Sticky layout (laat staan als je dit al had) */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
.main-content { flex: 1 0 auto; }

/* Footer: NIET breder dan container */
.site-footer{
  margin-top: auto;       /* duwt footer omlaag */
  background: transparent;/* geen volle-breedte kleur meer */
  color: #fff;
}

.footer-inner{
  position: relative;
  background: rgb(49,84,150);   /* RPV-blauw alleen binnen container */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  border-radius: 12px 12px 0 0; /* optioneel, staat netjes */
  padding: 0 16px;              /* binnenmarge in de kleur-balk */
}

/* dunne scheidslijn bovenin, binnen container-breedte */
.footer-inner::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(255,255,255,.25);
  border-radius: 12px 12px 0 0;
}

/* Links rechts */
.footer-links{
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links a{
  color: #fff;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background-color .2s ease-in-out, opacity .2s ease-in-out;
  opacity: .95;
}
.footer-links a:hover{
  background-color: rgba(255,255,255,.12);
  opacity: 1;
}

/* Mobiel stapelen */
@media (max-width: 900px){
  .footer-inner{
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
  }
  .footer-links{ flex-wrap: wrap; justify-content: center; gap: 12px; }
}




/* ===== Header basis (zoals eerder) ===== */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;color:#fff;backdrop-filter:saturate(180%) blur(6px)}
.header-top{display:flex;align-items:center;gap:16px;min-height:56px;position:relative}
.brand{color:#fff;text-decoration:none;margin-right:auto}
.brand-title{font-weight:700}
.nav-toggle{display:none}
.nav-burger{display:none;width:36px;height:28px;cursor:pointer}
.nav-burger span{display:block;height:3px;background:rgb(49,84,150);margin:6px 0;border-radius:2px}

/* Belangrijk voor full-width menu */
.site-nav{margin-left:0;width:100%}

/* Volle-breedte hoofdmenu: alle knoppen even groot */
/* Volle-breedte hoofdmenu: gelijk verdeeld + minimale breedte */
.nav-list{
  display: flex;
  flex-wrap: wrap;          /* <— laat meerdere rijen toe indien te smal */
  gap: 8px;                 /* gelijke ruimte tussen knoppen */
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.nav-item{
  position: relative;
  flex: 1 1 140px;          /* <— elk item krijgt basis 160px, deelt verder gelijk mee */
  min-width: 140px;         /* <— nooit smaller dan 160px */
}

/* Zorg dat <a> en <button> exact hetzelfde renderen */
.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;

  /* vul hele li */
  width: 100%;
  box-sizing: border-box;

  /* typografie & ruimte */
  font: inherit;            /* zelfde font als body */
  line-height: 1.2;         /* consistente teksthoogte */
  padding: 0 16px;          /* horizontale ruimte, geen extra hoogte */
  min-height: 40px;         /* net iets hoger dan tekst, uniforme knoppen */

  /* reset button-defaults */
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(49,84,150);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color .2s ease-in-out;
}
.nav-link:hover { background-color: rgb(39,70,125); }

/* li-items gelijk verdelen en minimaal even breed (jij gebruikte 140px) */
.nav-list { display:flex; flex-wrap:wrap; gap:8px; width:100%; margin:0; padding:0; list-style:none; }
.nav-item  { position:relative; flex:1 1 140px; min-width:140px; }

/* submenu blijft gelijk */
.has-sub { position: relative; }


/* Submenu container – zelfde breedte als de knop */
/* Submenu (default verborgen) */
.nav-sub{
  display: none;                 /* <-- belangrijk */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: transparent; /* of #fff als je een kaart wil */
  border-radius: 8px;
  padding: 8px;
  margin: 0;
  list-style: none;
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
  z-index: 1000;

  /* spacing tussen submenu-tegels */
  gap: 8px;                      /* werkt zodra display:grid actief is */
}

/* Toon submenu bij hover/keyboard */
.has-sub{ position: relative; }  /* anker voor absolute submenu */
.has-sub:hover > .nav-sub,
.has-sub:focus-within > .nav-sub{
  display: grid;                 /* nu pas tonen */
}

/* Submenu items als ‘tegel’ */
.nav-sub a{
  display: block;
  padding: 8px 14px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  background-color: rgb(49,84,150);
  border-radius: 6px;
  transition: background-color .2s ease-in-out;
}
.nav-sub a:hover{ background-color: rgb(39,70,125); }

/* Mobiel: submenu altijd uitklappen onder de knop */
@media (max-width: 900px){
  .nav-sub{
    position: static;
    box-shadow: none;
    padding: 8px 0;
    display: grid;              /* op mobiel wél standaard zichtbaar */
  }
}


/* Mobiel: stapelen onder elkaar */
@media (max-width:900px){
  .nav-burger{display:block}
  .site-nav{display:none;width:100%}
  .nav-toggle:checked ~ .site-nav{display:block}
  .nav-list{flex-direction:column}
  .nav-item{flex:none}
  .nav-link{width:100%}
  
}

/* ===== Logo strip ===== */
.logo-strip{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0;
  padding:20px 0 10px 0;                /* extra ruimte boven de images */
  background-color:#fff;                 /* wit tussenstuk */
}
.logo-strip::before,
.logo-strip::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:6px;                            /* 8px zoals gevraagd */
  background-color:rgb(49,84,150);
}
.logo-strip::before{ top:0; }            /* bovenste blauwe balk */
.logo-strip::after{ bottom:0; }          /* onderste blauwe balk */

.logo-strip .logo-col{ flex:0 0 auto; cursor:pointer; }
.logo-strip img{
  max-width:400px;
  height:100px;
  width:auto;
  object-fit:contain;
  padding: 10px 0;                /* ruimte boven en onder de images */
}

/* Optionele individuele marges (behouden, maar images blijven 400x100) */
.logo-strip .left img{  margin:0 0 0 30px; }
.logo-strip .center img{margin:0 0 0 30px; }
.logo-strip .right img{ margin:0 0 0 30px; }

/* container & main */
.container{max-width:1240px;margin:0 auto;padding:0 16px}
.main-content{padding:24px 0}

/* Sectietitel onder een page-title */
.section-title{
  margin: 20px 0 10px 0;
  font-size: 18px;
  font-weight: 700;
}

/* Bestuurstabel – borderloos, luchtig, netjes uitgelijnd */
.board-table{
  width: 100%;
  max-width: 900px;
  border-collapse: separate;
  border-spacing: 0 8px;       /* ‘lucht’ tussen rijen i.p.v. borders */
}
.board-table th, .board-table td{
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}
.board-table thead th{
  font-weight: 700;
  font-size: 14px;
  opacity: .9;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,80,.15);
}
.board-table tbody tr{
  background: #fff;            /* wit zoals rest van de site */
  box-shadow: 0 2px 10px rgba(0,0,0,.04); /* subtiele kaartlook */
  border-radius: 8px;
}
.board-table tbody td:first-child{ border-radius: 8px 0 0 8px; }
.board-table tbody td:last-child{  border-radius: 0 8px 8px 0; }

/* Links in tabel */
.board-table a{
  color: var(--rpv-text);
  text-decoration: underline;
}
.board-table a:hover{ text-decoration: none; }

/* Jaarverslag / documentafbeeldingen */
.report-pages{
  display: grid;
  gap: 16px;                 /* ruimte tussen pagina-afbeeldingen */
  max-width: 900px;          /* iets ruimer dan standaard body, maar nog netjes */
}

.doc-page{
  margin: 0;
}

.doc-page img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #c8c8c8; /* vergelijkbaar met 'gray' maar wat subtieler */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.doc-page figcaption{
  text-align: center;
  font-size: 14px;
  margin-top: 6px;
  opacity: .85;
}

/* Brede contentvariant (voor sponsor-overzichten e.d.) */
.page-body--wide{ max-width:1240px; width:100%; }

/* Subtiele hulptekst */
.muted{ opacity:.8; font-size:14px; margin-top:-6px; }

/* Blauwe scheidingsbalk (container-breed) */
.rule-8{
  height:8px;
  background: rgb(49,84,150);
  border-radius:4px;
  margin:24px 0;
}

/* Sponsor index grid */
.sponsor-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:16px;
  margin:16px 0 24px 0;
}
.sponsor-card a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:12px;
  text-decoration:none;
  color: var(--rpv-text);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sponsor-card a:hover{
  transform: translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
/* Thumbnails overal exact gelijk */
.sponsor-thumb{
  width: 100%;
  height: 90px;
  padding: 8px;
  display: grid;
  place-items: center;
  background: #fff;
  overflow: hidden;
  border-radius: 8px;
}
.sponsor-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* past altijd binnen het kader */
  display: block;
}

/* Advertentie-kader met vaste hoogte en binnen-padding */
.sponsor-ad-box{
  width: 100%;
  max-width: 1240px;
  height: 360px;         /* desktop-hoogte */
  padding: 16px;         /* ruimte tot de randen */
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  overflow: hidden;
}
.sponsor-ad{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* NOOIT uitsteken of vervormen */
  display: block;
}

/* Mobiel iets compacter */
@media (max-width: 900px){
  .sponsor-ad-box{
    height: 240px;
    padding: 12px;
  }
}

.sponsor-name{ font-size:14px; text-align:center; }

/* Sponsor secties */
.sponsor-section{ margin:24px 0; }
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:8px;
}
.sponsor-title{ font-size:20px; margin:0; }
.sponsor-back{
  font-size:14px;
  text-decoration:none;
  color: rgb(49,84,150);
  background: rgba(49,84,150,.10);
  padding:6px 10px;
  border-radius:6px;
  transition: background-color .2s ease-in-out;
}
.sponsor-back:hover{ background: rgba(49,84,150,.18); }

.sponsor-ad{
  width:100%; max-width:1240px; height:auto;
  background:#fff;
  border:1px solid #c8c8c8;
  border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  display:block;
}

/* Magazine: picker + chips */
.issue-picker{
  display:flex; align-items:center; gap:12px; margin:0 0 12px 0;
}
.issue-label{ font-weight:700; }
.issue-select{
  padding:8px 10px; border:1px solid #c8c8c8; border-radius:8px; background:#fff; font: inherit;
}

.issue-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 12px 0;
}
.issue-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px; border-radius:999px;
  background: rgba(49,84,150,.10);
  color: rgb(49,84,150); text-decoration:none;
  transition: background-color .2s ease-in-out, transform .08s ease-in-out;
}
.issue-chip:hover{ background: rgba(49,84,150,.18); transform: translateY(-1px); }
.issue-chip.is-active{ background: rgb(49,84,150); color:#fff; }

/* Iframe weergave */
.magazine-frame{
  width: 1200px;
  min-height: 80vh;            /* lekker groot venster */
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
@media (max-width: 900px){
  .magazine-frame{ min-height: 70vh; }
}

/* Subkopje onder section-title */
.subsection-title{
  margin: 16px 0 8px 0;
  font-size: 17px;
  font-weight: 700;
}

/* Tabel wrapper: horizontaal scrollen op smalle schermen */
.table-wrap{
  overflow-x: auto;
  max-width: 100%;
}

/* Agenda-tabel in RPV-stijl */
.agenda-table{
  width: 100%;
  max-width: 900px;
  border-collapse: separate;
  border-spacing: 0 8px;              /* ‘lucht’ tussen rijen */
}
.agenda-table thead th{
  background: rgb(49,84,150);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 12px;
  text-align: left;
  border-radius: 8px 8px 0 0;
}
.agenda-table tbody tr{
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.agenda-table tbody td{
  padding: 10px 12px;
  vertical-align: top;
}
.agenda-table tbody td:first-child{
  width: 180px;                       /* vaste kolombreedte voor maand */
  font-weight: 700;
  color: rgb(49,84,150);
  border-radius: 8px 0 0 8px;
}
.agenda-table tbody td:last-child{
  border-radius: 0 8px 8px 0;
}

/* Mobiel: iets compacter */
@media (max-width: 900px){
  .agenda-table tbody td:first-child{ width: 140px; }
}

/* Grotere inline weergave voor document-afbeeldingen (vakantierooster) */
.report-pages--wide{
  max-width: 1240px;   /* of gebruik 100% voor nog breder binnen .container */
  width: 100%;
}

/* Notices (meldingen) */
.notice{
  padding:10px 12px;
  border-radius:8px;
  margin:8px 0 12px 0;
  font-weight:600;
}
.notice--warning{
  background: rgba(255, 183, 77, .15);     /* zachte oranje tint */
  border: 1px solid rgba(255, 183, 77, .6);
  color:#5a3b00;
}
/* Hydrotherapie: locaties in cards */
.loc-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px){
  .loc-grid{ grid-template-columns: 1fr; } /* één per rij (rustig en leesbaar) */
}

.loc-card{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
@media (min-width: 700px){
  .loc-card{
    grid-template-columns: 320px 1fr; /* beeld links, tekst rechts */
    align-items: start;
  }
}

.loc-media img{
  width: 100%;
  height: 220px;
  object-fit: cover;     /* vult het kader mooi; geen rare randen */
  border-radius: 8px;
  display: block;
}

.loc-content .section-title{
  margin-top: 0;
  margin-bottom: 8px;
}

.loc-list{
  margin: 0;
  padding-left: 18px;
}
.loc-list li{ margin-bottom: 6px; }

/* CTA rij onder de kaarten */
.cta-row{ margin-top: 8px; }

/* Afbeelding + bijschrift */
.figure{ margin:12px 0; text-align:center; }
.figure img{ width:100%; max-width:500px; height:auto; border-radius:8px; display:block; margin:0 auto; }
.figure-caption{ font-size:14px; opacity:.8; margin-top:6px; }

/* Linklijsten in kolommen */
.link-columns{
  margin: 6px 0 14px 0;
  padding-left: 18px;
  columns: 1;
  column-gap: 24px;
}
.link-columns li{
  break-inside: avoid;
  margin-bottom: 6px;
}
@media (min-width: 900px){
  .link-columns{ columns: 2; }
}
/* Intro-kaart bovenaan Voorlichting Reuma */
.info-card{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid #c8c8c8;
  border-radius:12px;
  background: rgba(49,84,150,.06);
}
.info-card__text p{ margin:6px 0 0 0; }
.info-card__cta .button-like{ white-space:nowrap; }
@media (max-width: 700px){
  .info-card{ flex-direction:column; align-items:flex-start; }
}

/* Inhoudsopgave */
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin: 6px 0; }
.toc a { text-decoration: none; }
.toc-hint { font-size: 12px; opacity: .7; margin-left: 12px; }

/* “Terug naar boven” rechts in de kop */
.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.section-title .to-top { font-size: 14px; opacity: .8; }

/* Blauwe scheidslijn (consistent met site) */
.rule { height: 8px; background: rgb(49,84,150); border: 0; border-radius: 4px; margin: 24px 0; }

/* Afbeeldingen */
.figure { margin: 12px 0; }
.figure img { width: 100%; height: auto; border-radius: 8px; display: block; }
.figure--right { float: right; width: min(340px, 45%); margin: 0 0 12px 16px; }
@media (max-width: 800px){ .figure--right{ float:none; width:100%; margin:12px 0; } }

/* Twee afbeeldingen naast elkaar */
.media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  margin: 10px 0 16px 0;
}
@media (max-width: 800px){ .media-pair{ grid-template-columns: 1fr; } }

/* Gedichten/versregels */
.poem { white-space: pre-line; font-style: italic; line-height: 1.6; }


/* ===== Forms (RPV) ===== */
.form-section{max-width:900px;margin:0 auto}
.form-grid{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:12px 16px;
}
.form-grid label{align-self:center;color:rgb(0,0,80);font-weight:600}
.form-input,.form-select,.form-textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #d0d6e0;
  border-radius:8px;
  font-size:16px;
  background:#fff;
  color:rgb(0,0,80);
}
.form-textarea{resize:vertical}
/* vervangt de oude .checkline */
.checkline{
  grid-column: 1 / -1;
  display: grid;                       /* 2 kolommen: checkbox + tekst */
  grid-template-columns: 20px 1fr;
  column-gap: 10px;
  align-items: start;
  line-height: 1.5;
  color: rgb(0,0,80);
  overflow-wrap: anywhere;             /* breekt lange woorden/URLs netjes */
  hyphens: auto;                       /* nl-hyphenatie waar mogelijk */
}
.checkline input{
  margin-top: 2px;                     /* lijnt checkbox mooi met 1e regel */
}
.checkline a{
  text-decoration: underline;
}

.form-spacer{display:none}
.form-actions{margin-top:16px;display:flex;justify-content:flex-end;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:8px;border:none;cursor:pointer;
  font-weight:600;text-decoration:none
}
.btn-primary{background:rgb(49,84,150);color:#fff;transition:background .2s ease-in-out}
.btn-primary:hover{background:rgb(39,70,125)}
.iban{text-transform:uppercase}

/* Mobile */
@media (max-width:700px){
  .form-grid{grid-template-columns:1fr}
  .form-grid label{margin-top:8px}
  .form-actions{justify-content:stretch}
  .btn{width:100%}
}

/* ===== Compacte kaart-stijl ===== */
.card{
  background:#fff;
  border:1px solid rgba(49,84,150,.15);
  border-radius:10px;
  padding:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.card--compact{ padding:12px; border-radius:8px; }
.card + .card{ margin-top:12px; }

.card h2{
  margin:0 0 8px 0;
  font-size:18px;
  color:rgb(49,84,150);
}

/* layout helpers */
.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:900px){
  .info-grid{ grid-template-columns:1fr; }
}

/* nette typografie binnen content */
.content address{ font-style:normal; line-height:1.6; }
.content .signature{ margin-top:12px; font-style:italic; }