/* ==========================================================================
   Watersportvereniging Muiden
   Stylesheet voor de volledige site. Geen frameworks, geen build-stap.
   Kleuren komen uit het verenigingslogo: diepblauw, cyaan en goudgeel.
   ========================================================================== */

:root {
  --navy:      #12345f;
  --navy-dark: #0c2544;
  --blue:      #2e5fb0;
  --blue-soft: #e8eef8;
  --cyan:      #29b6e8;
  --gold:      #e9b824;
  --gold-soft: #fdf4dc;
  --sand:      #f7f5f0;
  --paper:     #ffffff;
  --ink:       #16202e;
  --ink-soft:  #4a5765;
  --line:      #e2ded6;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1140px;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(18, 52, 95, .06), 0 8px 24px rgba(18, 52, 95, .07);
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 600;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.section { padding: 76px 0; }
.section-sand { background: var(--sand); }
.section-navy { background: var(--navy); color: #dfe7f1; }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy a { color: var(--gold); }
/* Knoppen houden hun eigen kleur, ook op een donkere achtergrond */
.section-navy a.btn-gold, .hero a.btn-gold { color: var(--navy-dark); }
.section-navy a.btn-light, .hero a.btn-light { color: #fff; }
.section-navy a.btn-light:hover, .hero a.btn-light:hover { color: var(--navy); }
.section-navy a.btn-primary, .hero a.btn-primary { color: #fff; }

.eyebrow {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 .75em;
}
.section-navy .eyebrow { color: var(--gold); }

.lead { font-size: 1.15rem; color: var(--ink-soft); }
.section-navy .lead { color: #c3d2e4; }

.muted { color: var(--ink-soft); font-size: .95rem; }

/* Gouden streepje onder koppen */
.rule::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  background: var(--gold);
  margin: 22px 0 26px;
}
.center { text-align: center; }
.center.rule::after { margin-left: auto; margin-right: auto; }

/* ---------- Knoppen ---------- */

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--navy); color: #fff; }
.btn-gold { background: var(--gold); color: var(--navy-dark); }
.btn-gold:hover { background: #d5a615; color: var(--navy-dark); }
.btn-ghost { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn-ghost:hover { background: var(--blue); color: #fff; }
.btn-light { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn-light:hover { background: #fff; color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; color: var(--navy); }
.brand-tag { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 13px;
  font-size: .94rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
}
.nav a:hover { background: var(--blue-soft); color: var(--navy); }
.nav a[aria-current="page"] { color: var(--blue); box-shadow: inset 0 -2px 0 var(--gold); }
/* De knop in het menu blijft een knop, ook op de eigen pagina */
.nav a.btn[aria-current="page"] { color: #fff; box-shadow: none; background: var(--navy); }
/* De knop in het menu is altijd wit op blauw, in elke toestand */
.nav a.btn,
.nav a.btn:hover,
.nav a.btn:focus,
.nav a.btn:visited { color: #fff; }
.nav .btn { margin-left: 8px; padding: 10px 20px; }
.nav .btn:hover { background: var(--navy); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 10px 16px 18px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a:last-of-type { border-bottom: 0; }
  .nav .btn { margin: 12px 0 0; text-align: center; border-bottom: 0; }
}

@media (max-width: 560px) {
  .brand-tag { display: none; }
  .brand-name { font-size: .98rem; }
  .brand img { width: 38px; height: 38px; }
  .section { padding: 56px 0; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--navy);
  overflow: hidden;
}
.hero img.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,37,68,.35) 0%, rgba(12,37,68,.8) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 90px 24px 66px;
  width: 100%;
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero .eyebrow { color: var(--gold); }
.hero p { max-width: 58ch; color: #dbe5f1; font-size: 1.12rem; }

.hero-small { min-height: 340px; }
.hero-small h1 { max-width: 22ch; }

/* Heel langzame beweging in de kop, zodat de pagina leeft zonder af te leiden */
@keyframes drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(0, -1.2%, 0); }
}
.hero img.hero-bg { animation: drift 34s ease-out forwards; will-change: transform; }

/* Scrolwenk onderaan de kop van de homepage */
.hero-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  width: 22px;
  height: 36px;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 12px;
}
.hero-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(255,255,255,.85);
  animation: cue 2.1s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(12px); opacity: 0; }
}
@media (max-width: 700px) { .hero-cue { display: none; } }

/* Secties komen rustig op bij het scrollen */
.op {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.op.zichtbaar { opacity: 1; transform: none; }
.op-na-1 { transition-delay: .08s; }
.op-na-2 { transition-delay: .16s; }
.op-na-3 { transition-delay: .24s; }

/* ---------- Rasters en kaarten ---------- */

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: .35em; }
.card-body p { color: var(--ink-soft); font-size: .97rem; }
.card-link {
  margin-top: auto;
  padding-top: 16px;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.card-link::after { content: " \2192"; }

/* Split: tekst naast beeld */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split.top { align-items: start; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }
.split-text { max-width: 52ch; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split.reverse > *:first-child { order: 2; }
}

/* Feiten */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fact { padding: 22px 0; border-top: 3px solid var(--gold); }
.fact strong { display: block; font-family: var(--serif); font-size: 2rem; color: var(--navy); line-height: 1.1; }
.section-navy .fact strong { color: #fff; }
.fact span { font-size: .92rem; color: var(--ink-soft); }
.section-navy .fact span { color: #b9cadf; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* Opsommingen met vinkje */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative;
  padding: 0 0 14px 30px;
  color: var(--ink-soft);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 2px; top: .55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
.checklist strong { color: var(--ink); }

/* ---------- Tijdlijn ---------- */

.timeline { position: relative; margin: 0; padding: 0 0 0 34px; list-style: none; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--cyan));
}
.timeline > li { position: relative; padding-bottom: 40px; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: -34px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
}
.timeline .jaar {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 10px;
}
.timeline h3 { margin-bottom: .3em; }
.timeline p { color: var(--ink-soft); font-size: .98rem; }
.timeline img { margin-top: 16px; border-radius: var(--radius); }

/* ---------- Kaart ---------- */

.kaart {
  margin: 34px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #eff2ec;
}
.kaart img { width: 100%; display: block; }
.kaart figcaption {
  padding: 14px 18px;
  font-size: .88rem;
  color: var(--ink-soft);
  background: #fff;
  border-top: 1px solid var(--line);
}
.kaart figcaption a { color: var(--ink-soft); }

.kaart-kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px 56px;
  align-items: end;
  margin-bottom: 4px;
}
.kaart-kop h2 { margin-bottom: 0; }
.kaart-kop .rule::after { margin-bottom: 0; }
.kaart-kop .lead { padding-bottom: 6px; }
@media (max-width: 860px) {
  .kaart-kop { grid-template-columns: 1fr; gap: 6px; }
  .kaart-kop .lead { padding-bottom: 0; }
}

/* ---------- Kop zonder foto ---------- */

.kop {
  background: var(--navy);
  color: #dfe7f1;
  padding: 84px 0 72px;
  border-bottom: 5px solid var(--gold);
}
.kop h1 { color: #fff; margin-bottom: .3em; }
.kop .eyebrow { color: var(--gold); }
.kop p { max-width: 60ch; color: #c3d2e4; font-size: 1.12rem; }

/* ---------- Bestuur: ledenlijst ---------- */

.roster { margin: 0; padding: 0; list-style: none; }
.roster > li {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 36px;
  padding: 38px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.roster > li:first-child { border-top: 0; padding-top: 0; }
.roster img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--blue-soft);
}
.roster-naam {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: .6em;
}
.roster-naam h2 {
  font-size: 1.35rem;
  margin: 0;
}
.roster-naam span {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy-dark);
  background: var(--gold-soft);
  border: 1px solid #f0e0b4;
  padding: 3px 10px;
  border-radius: 100px;
}
.roster p { color: var(--ink-soft); max-width: 66ch; }
.roster a.li { font-size: .88rem; font-weight: 600; }

@media (max-width: 620px) {
  .roster > li { grid-template-columns: 1fr; gap: 18px; }
  .roster img { width: 104px; height: 104px; }
}

/* ---------- Bestuur ---------- */

.persoon { text-align: left; }
.persoon img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 18px;
  background: var(--blue-soft);
}
.persoon h3 { margin-bottom: .1em; }
.persoon .functie {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: .8em;
}
.persoon p { font-size: .95rem; color: var(--ink-soft); }
.persoon a.li { font-size: .88rem; font-weight: 600; }

/* ---------- Nieuws ---------- */

.nieuws-item {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
}
.nieuws-item:first-of-type { padding-top: 0; }
.nieuws-datum {
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 4px;
}
.nieuws-item h3 { margin-bottom: .35em; }
.nieuws-item p { color: var(--ink-soft); }
@media (max-width: 700px) {
  .nieuws-item { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Formulieren ---------- */

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow);
}
.veld { margin-bottom: 18px; }
.veld label {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld select,
.veld textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: .97rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd6de;
  border-radius: var(--radius);
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46, 95, 176, .15);
}
.veld textarea { min-height: 110px; resize: vertical; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .veld-rij { grid-template-columns: 1fr; } }

.akkoord { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--ink-soft); }
.akkoord input { margin-top: 5px; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Nieuwsbriefblok */
.nieuwsbrief {
  background: var(--gold-soft);
  border: 1px solid #f0e0b4;
  border-radius: var(--radius);
  padding: 34px;
}
.nieuwsbrief form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.nieuwsbrief input[type="email"] {
  flex: 1 1 240px;
  padding: 13px 14px;
  font: inherit;
  border: 1px solid #dcc98d;
  border-radius: var(--radius);
  background: #fff;
}
.nieuwsbrief input[type="email"]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(233,184,36,.25); }

/* Downloadblok */
.download {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}
.download img {
  border-radius: 2px;
  filter: drop-shadow(0 8px 22px rgba(18, 52, 95, .22));
}
.download > div { align-self: center; }
@media (max-width: 700px) {
  .download { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .download img { max-width: 170px; }
}

/* Uitgelicht blok */
.callout {
  border-left: 4px solid var(--gold);
  background: var(--sand);
  padding: 22px 26px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 30px 0;
}
.callout p { color: var(--ink-soft); }
.callout p:first-child { margin-top: 0; }

/* ---------- Footer ---------- */

.site-footer { background: var(--navy-dark); color: #b9cadf; padding: 64px 0 28px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h4 {
  color: #fff;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: #b9cadf; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-brand img { width: 62px; margin-bottom: 16px; }
.footer-brand p { max-width: 34ch; color: #93a8c2; font-size: .93rem; }
.footer-bottom {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  font-size: .85rem;
  color: #7e93ae;
}

/* Het wapen van Muiden. Het is een gedetailleerde tekening met twee
   schildhouders en een wapenspreuk, dus hij moet groot genoeg staan om
   leesbaar te zijn. Onder de 90 pixels wordt het een vlekje. */
.footer-wapen { width: 104px; height: auto; }

@media (max-width: 560px) {
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; }
}

/* ---------- Toegankelijkheid ---------- */

.skip {
  position: absolute;
  left: -9999px;
  background: var(--gold);
  color: var(--navy-dark);
  padding: 10px 16px;
  font-weight: 700;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { transition: none; }
  .hero img.hero-bg { animation: none; }
  .hero-cue::after { animation: none; }
  .op { opacity: 1; transform: none; transition: none; }
}