/* Gedeelde componenten: container, knoppen, tekstlinks, golf, hero van subpagina's, kaarten, chips. */

/* Container */
.container { max-width: var(--wm-container); margin: 0 auto; padding: 0 var(--wm-pad); }

/* Golf-divider */
/* De golf loopt 2px door in de volgende sectie, zodat er op mobiel geen haarlijn tussen secties ontstaat. */
.wave { line-height: 0; position: relative; z-index: 1; margin-bottom: -2px; }
.wave svg { display: block; width: 100%; height: var(--wm-wave-h); }
.wave--abs { position: absolute; left: 0; right: 0; bottom: -2px; margin-bottom: 0; }
.wave--abs-1 { position: absolute; left: 0; right: 0; bottom: -2px; margin-bottom: 0; }
.wave--hero svg { height: clamp(52px, 7vw, 118px); }

/* Highlight achter een woord in een kop */
/* Highlighted word in the hero title: a solid yellow pill, like the yellow buttons (no transparency). */
.hl {
  display: inline-block; background: var(--wm-sand); color: var(--wm-navy);
  border-radius: 999px; padding: .02em .24em .06em; line-height: 1.05;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Knoppen */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 19px 32px; border-radius: 999px;
  font-size: 19px; font-weight: 800; line-height: normal;
  border: 0; cursor: pointer;
  transition: transform .28s var(--wm-ease), box-shadow .28s ease, background .28s ease, color .28s ease, border-color .28s ease;
}
.btn--zand { background: var(--wm-sand); color: var(--wm-navy); }
.btn--zand:hover { color: var(--wm-navy); transform: translateY(-4px); box-shadow: 0 20px 44px rgba(232,220,116,.35); }
.btn--zand.btn--shadow { box-shadow: 0 16px 40px rgba(1,32,45,.35); }
.btn--zand.btn--shadow:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 22px 50px rgba(232,220,116,.4); }
.btn--navy { background: var(--wm-navy); color: #fff; }
.btn--navy:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 20px 42px rgba(2,67,94,.32); background: var(--wm-navy-hover); }
.btn--navy.btn--flat:hover { background: var(--wm-navy); box-shadow: 0 20px 42px rgba(2,67,94,.34); }
.btn--teal { background: rgba(23,162,174,.9); color: #fff; box-shadow: 0 16px 40px rgba(1,32,45,.3); }
.btn--teal:hover { color: #fff; background: var(--wm-teal); transform: translateY(-4px) scale(1.02); }
.btn--outline { border: 2px solid rgba(255,255,255,.6); color: #fff; background: transparent; }
.btn--outline:hover { background: var(--wm-teal); border-color: var(--wm-teal); color: #fff; transform: translateY(-4px); }
.btn--outline-wit { border: 2px solid rgba(255,255,255,.7); color: #fff; background: transparent; }
.btn--outline-wit:hover { background: #fff; color: var(--wm-navy); transform: translateY(-4px); }
.btn--outline-navy { border: 2px solid var(--wm-navy); color: var(--wm-navy); background: transparent; }
.btn--outline-navy:hover { background: var(--wm-navy); color: var(--wm-sand); transform: translateY(-4px); }
.btn--wit { background: #fff; color: var(--wm-navy); }
.btn--wit:hover { color: var(--wm-navy); transform: translateY(-4px); box-shadow: 0 20px 42px rgba(2,67,94,.2); }
.btn-group { display: flex; flex-wrap: wrap; gap: 14px; }

/* Tekstlink met onderstreping en pijl */
.tlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 700; color: var(--wm-navy);
  border-bottom: 2px solid rgba(2,67,94,.35); padding-bottom: 3px;
  transition: gap .25s ease, border-color .25s ease, color .25s ease;
}
.tlink:hover { gap: 16px; color: var(--wm-navy); border-color: var(--wm-navy); }
.tlink.is-teal { border-color: rgba(23,162,174,.55); }
.tlink.is-teal:hover { border-color: var(--wm-teal); }
.tlink.is-koraal { border-color: rgba(233,123,90,.55); }
.tlink.is-koraal:hover { border-color: var(--wm-coral); }
.tlink.is-zand { border-color: rgba(217,200,69,.75); }
.tlink.is-zand:hover { border-color: var(--wm-sand-dark); }
.tlink.is-navy { border-color: rgba(2,67,94,.4); }
.tlink.is-navy:hover { border-color: var(--wm-navy); }
.tlink--geel { color: var(--wm-sand); border-color: rgba(232,220,116,.4); }
.tlink--geel:hover { color: var(--wm-sand); border-color: var(--wm-sand); }
.tlink--geel-los { color: var(--wm-sand); border: 0; padding-bottom: 0; }
.tlink--geel-los:hover { color: var(--wm-sand); }

/* Sectiekoppen */
.h-section { margin: 0; font-size: clamp(32px, 4.4vw, 62px); line-height: 1.04; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.h-section--sm { font-size: clamp(30px, 4.2vw, 56px); }
.h-section--md { font-size: clamp(30px, 4.2vw, 54px); }
.p-intro { margin: 16px 0 0; font-size: 18px; line-height: 1.7; color: var(--wm-text-intro); max-width: 58ch; }
.p-body { margin: 0; font-size: 18px; line-height: 1.75; text-wrap: pretty; }

/* Hero van subpagina's */
.hero-page {
  position: relative; min-height: 58svh; display: flex; align-items: flex-end;
  padding: clamp(150px, 20vh, 220px) 0 0; isolation: isolate;
}
.hero-page--tall { min-height: 62svh; }
.hero-page__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.hero-page__overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(1,32,45,.9) 0%, rgba(2,52,74,.6) 42%, rgba(1,32,45,.95) 100%); }
.hero-page__in { width: 100%; max-width: var(--wm-container); margin: 0 auto; padding: 0 var(--wm-pad) clamp(64px, 9vh, 110px); }
.hero-page__eyebrow { display: block; font-size: 20px; font-weight: 700; letter-spacing: .04em; color: var(--wm-sand); }
.hero-page__title { margin: 16px 0 0; font-size: clamp(36px, 5.6vw, 72px); line-height: 1.03; font-weight: 800; letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; }
.hero-page__title--lg { font-size: clamp(36px, 5.6vw, 76px); }
.hero-page__intro { margin: clamp(18px, 2.4vw, 26px) 0 0; font-size: 18px; line-height: 1.75; color: rgba(255,255,255,.94); max-width: 58ch; text-wrap: pretty; }
.hero-page__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: clamp(24px, 3vw, 34px) 0 0; }
.hero-page__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(22px, 3vw, 30px) 0 0; }
.chip-anchor {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.4); color: #fff; font-size: 18px; font-weight: 700;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.chip-anchor:hover { background: var(--wm-sand); border-color: var(--wm-sand); color: var(--wm-navy); transform: translateY(-3px); }

/* Badge / label (leeftijd, datum) */
.badge { display: inline-block; font-size: 18px; font-weight: 800; padding: 9px 16px; border-radius: 999px; }
.badge.is-navy { background: var(--wm-navy); color: var(--wm-sand); }
.badge.is-zand { background: var(--wm-sand); color: var(--wm-navy); }
.badge.is-teal { background: var(--wm-teal); color: #fff; }
.badge.is-koraal { background: var(--wm-coral); color: #fff; }
.badge.is-creme { background: var(--wm-cream); color: var(--wm-navy); }
.badge.is-wit { background: #fff; color: var(--wm-navy); }

/* Icoonvak (gekleurd vierkant met icoon) */
.iconbox { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.iconbox--sm { width: 46px; height: 46px; border-radius: 14px; }
.iconbox--md { width: 64px; height: 64px; border-radius: 20px; }
.iconbox.is-zand { background: var(--wm-sand); color: var(--wm-navy); }
.iconbox.is-koraal { background: var(--wm-coral); color: #fff; }
.iconbox.is-teal { background: var(--wm-teal); color: #fff; }
.iconbox.is-navy { background: var(--wm-navy); color: var(--wm-sand); }
.iconbox.is-creme { background: var(--wm-cream); color: var(--wm-navy); }
.iconbox.is-wit { background: #fff; color: var(--wm-navy); }

/* Kleurbalk bovenop kaarten */
.bar { display: block; height: 7px; }
.bar--8 { height: 8px; }
.bar.is-navy { background: var(--wm-navy); }
.bar.is-zand { background: var(--wm-sand); }
.bar.is-teal { background: var(--wm-teal); }
.bar.is-koraal { background: var(--wm-coral); }
.bar.is-creme { background: var(--wm-cream); }

/* Genummerde stap (1, 2, 3) */
.stepnum { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.stepnum.is-navy { background: var(--wm-navy); color: var(--wm-sand); }
.stepnum.is-teal { background: var(--wm-teal); color: #fff; }
.stepnum.is-koraal { background: var(--wm-coral); color: #fff; }
.stepnum.is-zand { background: var(--wm-sand); color: var(--wm-navy); }

/* Quicklink-tegel (over ons, ik ben nieuw, contact) */
.qlink {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 22px; border-radius: 20px; background: var(--wm-navy); color: #fff;
  font-size: 19px; font-weight: 800; box-shadow: 0 14px 34px rgba(2,67,94,.18);
  transition: transform .28s var(--wm-ease), background .28s ease, box-shadow .28s ease;
}
.qlink:hover { color: #fff; transform: translateY(-4px); background: var(--wm-navy-hover); box-shadow: 0 22px 46px rgba(2,67,94,.3); }
.qlink svg { color: var(--wm-sand); flex: 0 0 auto; }

/* Google Maps-kaart */
.map { border-radius: 22px; overflow: hidden; border: 3px solid rgba(255,255,255,.16); box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.map iframe { display: block; width: 100%; height: 232px; border: 0; }

/* Contactkaart (icoon + twee regels) */
.infocard {
  display: flex; align-items: center; gap: 18px; background: #fff; color: var(--wm-navy);
  border-radius: 22px; padding: 16px 24px 16px 16px; box-shadow: 0 10px 26px rgba(2,67,94,.1);
  transition: transform .3s var(--wm-ease), box-shadow .3s ease, background .3s ease, color .3s ease;
}
.infocard:hover { color: var(--wm-navy); transform: translateX(8px); box-shadow: 0 20px 40px rgba(2,67,94,.24); }
.infocard--invert:hover { background: var(--wm-navy); color: #fff; }
.infocard__t { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.infocard__s { display: block; margin-top: 3px; font-size: 18px; font-weight: 600; opacity: .82; }

/* Bericht-kaart (fallback templates) */
.postcard { background: #fff; color: var(--wm-navy); border-radius: 26px; overflow: hidden; box-shadow: 0 16px 38px rgba(2,67,94,.16); display: flex; flex-direction: column; transition: transform .35s var(--wm-ease), box-shadow .35s ease; }
.postcard:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(2,67,94,.28); }
.postcard__img { height: 212px; overflow: hidden; }
.postcard__img img { width: 100%; height: 100%; object-fit: cover; }
.postcard__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.postcard__title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.015em; }
.postcard__title a { color: inherit; }
.postcard__meta { font-size: 16px; font-weight: 600; color: var(--wm-text-muted); }
.postcard__excerpt { margin: 0; font-size: 18px; line-height: 1.65; color: var(--wm-text-body); }

/* Content-pagina (juridische pagina's, berichten) */
.content-page { background: var(--wm-cream); color: var(--wm-navy); padding: clamp(40px, 5vw, 74px) 0 clamp(70px, 9vw, 120px); }
.content-page__in { max-width: 860px; }
.prose { font-size: 18px; line-height: 1.75; color: var(--wm-text-intro); }
.prose h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.02em; color: var(--wm-navy); margin: 1.6em 0 .6em; }
.prose h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.015em; color: var(--wm-navy); margin: 1.4em 0 .5em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose a { color: var(--wm-navy); font-weight: 700; border-bottom: 2px solid rgba(23,162,174,.55); transition: border-color .25s ease; }
.prose a:hover { border-color: var(--wm-teal); }
.prose img { border-radius: 22px; }
.prose blockquote { margin: 1.4em 0; padding: 18px 24px; border-left: 4px solid var(--wm-sand); background: #fff; border-radius: 0 18px 18px 0; }
.prose .wp-block-button__link { display: inline-flex; padding: 16px 28px; border-radius: 999px; background: var(--wm-navy); color: #fff; font-weight: 800; border: 0; }

/* Archief-grid */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: clamp(26px, 3vw, 40px); }

/* Paginering */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--wm-navy); font-weight: 700; }
.pagination .page-numbers.current { background: var(--wm-navy); color: var(--wm-sand); }