@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,600;0,700;1,400&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Fira+Mono:wght@400;500&display=swap');

:root {
  --wad: #1a2b2c;
  --wad-soft: #35494a;
  --schelpwit: #f2ede2;
  --schelpwit-deep: #e5dcc7;
  --wit: #fffdf9;
  --getij: #d18a3d;
  --getij-deep: #a4671f;
  --kwelder: #6b8f52;
  --kwelder-deep: #4c6a38;
  --wierblauw: #4a7a82;
  --wierblauw-deep: #35595f;

  --font-display: "Bitter", Georgia, serif;
  --font-body: "Nunito Sans", "Segoe UI", sans-serif;
  --font-data: "Fira Mono", ui-monospace, monospace;

  --content-max: 76rem;
  --reading-max: 42rem;

  --step-0: clamp(.85rem, .8rem + .2vw, .95rem);
  --step-1: clamp(1.04rem, .99rem + .2vw, 1.15rem);
  --step-2: clamp(1.35rem, 1.15rem + .8vw, 1.9rem);
  --step-3: clamp(1.85rem, 1.45rem + 1.7vw, 2.75rem);
  --step-4: clamp(2.3rem, 1.7rem + 2.7vw, 3.7rem);

  --space-xs: clamp(.6rem, .5rem + .4vw, .9rem);
  --space-s: clamp(1rem, .8rem + .9vw, 1.6rem);
  --space-m: clamp(1.7rem, 1.3rem + 1.8vw, 2.7rem);
  --space-l: clamp(2.8rem, 2rem + 3.6vw, 5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--wad);
  background: var(--schelpwit);
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.62;
}
img { display: block; max-width: 100%; }
p { max-width: 70ch; }
a { color: var(--wierblauw-deep); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--getij-deep); }
:focus-visible { outline: .18rem solid var(--getij); outline-offset: .16rem; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--wad);
  text-wrap: balance;
}
h1 { margin: 0; font-size: var(--step-4); }
h2 { margin: 0 0 .8rem; font-size: var(--step-3); }
h3 { margin: 0 0 .5rem; font-size: var(--step-2); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: .8rem 1.1rem; background: var(--getij); color: var(--wad); }
.skip-link:focus { left: 1rem; top: 1rem; }
.eyebrow { display: inline-block; font-family: var(--font-data); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wierblauw-deep); }
.shell { width: min(calc(100% - 2rem), var(--content-max)); margin-inline: auto; }

/* ---------- Header: .kust ---------- */
.kust { background: var(--wit); border-bottom: 2px solid var(--wad); position: sticky; top: 0; z-index: 50; }
.kust-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; min-height: 4.4rem; padding-block: .6rem; }
.kust-merk { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--wad); }
.kust-merk-mark { width: 2.1rem; height: 2.1rem; flex-shrink: 0; }
.kust-merk-naam { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1; }
.kust-merk-sub { display: block; font-family: var(--font-data); font-size: .6rem; letter-spacing: .04em; color: var(--wierblauw-deep); margin-top: .2rem; }
.kust-nav { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.kust-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem .3rem; color: var(--wad-soft); text-decoration: none; font-weight: 700; font-size: .9rem; border-bottom: 2px solid transparent; }
.kust-nav a:hover, .kust-nav a[aria-current="page"] { color: var(--getij-deep); border-bottom-color: var(--getij); }

/* ---------- Hero: .getijstand (tide-state toggle) ---------- */
.getijstand { position: relative; overflow: hidden; border-bottom: 2px solid var(--wad); background: var(--wad); }
.getijstand-inner { position: relative; padding-block: var(--space-l) var(--space-m); }
.getijstand-kop { max-width: 40rem; color: var(--wit); }
.getijstand-kop h1 { color: var(--wit); margin-top: .6rem; }
.getijstand-dek { margin-top: 1.1rem; font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem); max-width: 50ch; color: var(--schelpwit-deep); }
.getijstand-eyebrow { color: var(--getij); }
.getijstand-toggle-row { display: flex; align-items: center; gap: .9rem; margin-top: var(--space-m); flex-wrap: wrap; }
.getijstand-toggle { position: relative; display: inline-flex; background: var(--wad-soft); border: 2px solid var(--wit); border-radius: 999px; padding: .25rem; font-family: var(--font-data); font-size: .78rem; }
.getijstand-toggle button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--schelpwit-deep); font: inherit; font-weight: 500; padding: .55rem 1.1rem; min-height: 44px; cursor: pointer; border-radius: 999px; }
.getijstand-toggle button[aria-pressed="true"] { color: var(--wad); }
.getijstand-toggle-thumb { position: absolute; top: .25rem; bottom: .25rem; left: .25rem; width: calc(50% - .25rem); background: var(--getij); border-radius: 999px; transition: transform .25s ease; z-index: 0; }
.getijstand[data-tij="hoog"] .getijstand-toggle-thumb { transform: translateX(100%); }
.getijstand-live-label { font-family: var(--font-data); font-size: .78rem; color: var(--schelpwit-deep); }
.getijstand-visual { position: relative; margin-top: var(--space-m); height: clamp(11rem, 30vw, 16rem); border: 2px solid var(--wit); overflow: hidden; }
.getijstand-lucht { position: absolute; inset: 0; background: linear-gradient(180deg, #7fa8ad 0%, #bcd4d3 70%); }
.getijstand-water { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, #3d6870 0%, #2a4c53 100%); transition: height .5s ease; }
.getijstand[data-tij="hoog"] .getijstand-water { height: 92%; }
.getijstand-wad { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: repeating-linear-gradient(100deg, #8a6a3d 0 18px, #7a5c33 18px 36px); opacity: 1; transition: opacity .4s ease, height .5s ease; }
.getijstand[data-tij="hoog"] .getijstand-wad { opacity: 0; height: 0%; }
.getijstand-wandelaar { position: absolute; bottom: 8%; width: .55rem; height: .55rem; background: var(--wit); border-radius: 50%; opacity: 1; transition: opacity .3s ease; }
.getijstand[data-tij="hoog"] .getijstand-wandelaar { opacity: 0; }
.getijstand-caption { position: absolute; left: .9rem; bottom: .7rem; font-family: var(--font-data); font-size: .74rem; color: var(--wit); background: rgba(26,43,44,.55); padding: .3rem .6rem; }
.getijstand-links { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-top: var(--space-m); }
.getijstand-links a { color: var(--wit); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--getij); padding-bottom: .1rem; }
.getijstand-links a:hover { color: var(--getij); }
@media (min-width: 60rem) {
  .getijstand-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); align-items: center; }
  .getijstand-visual { margin-top: 0; height: clamp(14rem, 22vw, 20rem); }
}

/* ---------- Content architecture: .zandbank — a tide-log spine, not repeated kicker+content blocks ---------- */
.zandbank { position: relative; }
.zandbank::before {
  content: "";
  position: absolute;
  left: .9rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--getij) 0%, var(--wierblauw) 55%, var(--wad) 100%);
  opacity: .35;
  display: none;
}
@media (min-width: 64rem) {
  .zandbank::before { display: block; }
  .zandbank > * { padding-left: 2.4rem; }
}
.getij-merk {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: .45rem;
  padding: .18rem .55rem;
  border: 1.5px solid var(--getij-deep);
  border-radius: 999px;
  background: var(--wit);
  font-family: var(--font-data);
  font-size: .68rem;
  letter-spacing: .03em;
  color: var(--getij-deep);
}
.getij-merk::before { content: "▲"; font-size: .55rem; }
.wandelpad-intro { max-width: var(--reading-max); margin-bottom: 1.2rem; }
.wandelpad-intro h2 { display: block; }
.wandelpad-intro p { margin: 0; color: var(--wad-soft); }
/* legacy alias retained only for any stray reference — not used as the primary section wrapper anymore */
/* Sections vary in column width and horizontal anchor (left/center/right) rather
   than alternating a fixed-width full-bleed background stripe — meant to echo an
   unmarked route picked across a sandbank, not a repeating band pattern. */
.zandbank { padding-block: var(--space-l); display: flex; flex-direction: column; gap: var(--space-l); }
.wandelpad { width: min(calc(100% - 2rem), var(--content-max)); margin-inline: auto; }
.wandelpad--breed { max-width: min(calc(100% - 2rem), 58rem); }
.wandelpad--smal { max-width: min(calc(100% - 2rem), 44rem); }
.wandelpad--links { margin-inline: 0 auto; }
.wandelpad--rechts { margin-inline: auto 0; }
.wandelpad--tint { background: var(--wit); border: 2px solid var(--wad); padding: var(--space-m); }
@media (min-width: 30rem) {
  .wandelpad--links, .wandelpad--rechts { width: min(90%, var(--content-max)); }
}

/* Island cards: .eiland */
.eiland-rooster { display: grid; gap: 1.1rem; }
.eiland { display: block; background: var(--wit); border: 2px solid var(--wad); text-decoration: none; color: inherit; position: relative; }
.eiland-foto { aspect-ratio: 4/3; overflow: hidden; border-bottom: 2px solid var(--wad); }
.eiland-foto img { width: 100%; height: 100%; object-fit: cover; }
.eiland-body { padding: 1.1rem 1.2rem 1.3rem; }
.eiland-tag { display: inline-block; font-family: var(--font-data); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--getij-deep); margin-bottom: .4rem; }
.eiland h3 { margin: 0 0 .35rem; font-size: 1.3rem; }
.eiland p { margin: 0; font-size: .95rem; color: var(--wad-soft); }
@media (min-width: 40rem) { .eiland-rooster { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.peil-rooster { display: grid; gap: .15rem; margin: 1.4rem 0; background: var(--wad); border: 2px solid var(--wad); }
.peil-rooster div { background: var(--wit); padding: .8rem 1rem; }
.peil-rooster dt { font-family: var(--font-data); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wierblauw-deep); }
.peil-rooster dd { margin: .2rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
@media (min-width: 34rem) { .peil-rooster { grid-template-columns: repeat(3, 1fr); } }

.duinrand { padding: 1.1rem 1.2rem; border-left: 6px solid var(--getij); background: var(--wit); margin: 1.4rem 0; }
.duinrand p:last-child { margin-bottom: 0; }
.duinrand-label { display: block; font-family: var(--font-data); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--getij-deep); margin-bottom: .3rem; }

table.vergelijking { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; }
table.vergelijking th, table.vergelijking td { border: 1px solid var(--wad-soft); padding: .6rem .7rem; text-align: left; vertical-align: top; }
table.vergelijking th { background: var(--wad); color: var(--wit); font-family: var(--font-data); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
table.vergelijking tr:nth-child(even) td { background: var(--schelpwit-deep); }

.foto-breed { margin: 1.4rem 0; border: 2px solid var(--wad); }
.foto-breed img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.foto-breed figcaption { padding: .6rem .8rem; font-family: var(--font-data); font-size: .74rem; color: var(--wad-soft); background: var(--wit); }

/* ---------- Signature element: .gidscheck (Wadlopen Reality Check) ---------- */
.gidscheck { display: grid; gap: 1rem; margin-top: 1.4rem; background: var(--wit); border: 2px solid var(--wad); padding: var(--space-m); }
.gidscheck-vraag { display: grid; gap: .5rem; }
.gidscheck-vraag > span { font-family: var(--font-data); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wierblauw-deep); }
.gidscheck-opties { display: flex; flex-wrap: wrap; gap: .5rem; }
.gidscheck-optie { font: inherit; font-size: .88rem; padding: .6rem .9rem; min-height: 44px; border: 2px solid var(--wad); background: var(--schelpwit); cursor: pointer; }
.gidscheck-optie[aria-pressed="true"] { background: var(--wad); color: var(--wit); }
.gidscheck-resultaat { border-top: 2px dashed var(--wad-soft); padding-top: 1rem; margin-top: .4rem; }
.gidscheck-resultaat h4 { margin: 0 0 .4rem; font-size: 1.15rem; }
.gidscheck-resultaat p { margin: 0; }
.gidscheck-niveau { display: inline-block; font-family: var(--font-data); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: .2rem .55rem; margin-bottom: .5rem; }
.gidscheck-niveau--go { background: var(--kwelder); color: var(--wit); }
.gidscheck-niveau--gids { background: var(--getij); color: var(--wad); }
.gidscheck-niveau--stop { background: #a4382f; color: var(--wit); }

/* ---------- Footer: .wal ---------- */
.wal { background: var(--wad); color: var(--schelpwit-deep); padding-block: var(--space-m); border-top: 6px solid var(--wierblauw); }
.wal a { color: var(--wit); }
.wal-grid { display: grid; gap: 1.6rem; }
.wal h4 { color: var(--wit); font-family: var(--font-data); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .6rem; }
.wal nav { display: flex; flex-direction: column; gap: .4rem; }
.wal small { display: block; margin-top: 1.4rem; color: #9fb0ad; font-size: .82rem; }
@media (min-width: 44rem) { .wal-grid { grid-template-columns: 1.3fr 1fr 1fr; } }

.terug { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.5rem; font-size: .9rem; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Desktop: keep the alternating blocks and the spine inside the centered content column instead of hugging the viewport edges */
@media (min-width: 64rem) {
  .zandbank { --col-edge: max(1rem, calc((100% - var(--content-max)) / 2)); }
  .zandbank::before { left: calc(var(--col-edge) - 1.2rem); }
  .zandbank > * { padding-left: 0; }
  .zandbank > .wandelpad--links { margin-left: var(--col-edge); margin-right: auto; }
  .zandbank > .wandelpad--rechts { margin-right: var(--col-edge); margin-left: auto; }
}