/*
 * Sintlijstje: de Sint-rand rond elke publieke pagina (plan-v5 §17, stijlgids v0.2):
 * vlaggenlijn en kopbalk op de hemel, dakenstrook met het paard, water met de boot.
 * Gebruikt door layouts.sint en layouts.blad.
 */
:root {
  --hemel: #DCEFFF;
  --papier: #FFFDF7;
  --inkt: #1E1A33;
  --inkt-zacht: #4A4560;
  --goud: #F2B705;
  --piet-blauw: #3A8EE6;
  --sintrood: #C8102E;
  --mijterrood: #8E0B22;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.binnen { width: min(1160px, 100% - 40px); margin-inline: auto; }
.twinkel { animation: twinkel 3s ease-in-out infinite; }
.golf { animation: golf 6s linear infinite; }
@keyframes golf { to { transform: translateX(-80px); } }
.wolk { animation: wolk 14s ease-in-out infinite alternate; }
@keyframes wolk { to { transform: translateX(-36px); } }

/* ---------- Vlaggenlijn: papieren vlaggetjes zoals bij de intocht ---------- */
.vlaggenlijn { position: relative; z-index: 3; display: block; width: 100%; height: 46px; }

/* ---------- Kopbalk ---------- */
.kopbalk {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 24px;
  width: min(1240px, 100% - 32px); margin-inline: auto; padding: 6px 0 18px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  font: 600 24px/1 var(--f-display); font-variation-settings: "SOFT" 100;
  color: var(--inkt); text-decoration: none;
}
.logo svg { width: 40px; height: 40px; }
.kopbalk ul { display: flex; gap: 6px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.kopbalk li a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--inkt); font-weight: 700; text-decoration: none; border-radius: 12px;
}
.kopbalk li a:hover { background: rgba(255, 253, 247, .7); }
.kopbalk li a[aria-current="page"] { text-decoration: underline 3px var(--sintrood); text-underline-offset: 8px; }
@media (max-width: 720px) {
  .kopbalk { flex-wrap: wrap; gap: 8px; }
  .kopbalk ul { order: 3; width: 100%; margin: 0; }
  .kopbalk .knop { margin-left: auto; }
}

/* ---------- Voet: water met de boot, bij dag ---------- */
.voet-water { position: relative; margin-top: var(--ritme); color: var(--inkt); background: var(--hemel); --grond: var(--hemel); overflow: hidden; }
.voet-water__scene { display: block; width: 100%; height: 150px; }
.voet-water__boot { animation: overvaren 48s linear infinite; animation-delay: -20s; }
@keyframes overvaren { from { transform: translateX(-260px); } to { transform: translateX(1500px); } }
.voet-water__links { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 18px 0 40px; }
.voet-water__links a { color: var(--inkt); font-weight: 700; text-underline-offset: 4px; text-decoration-color: var(--sintrood); text-decoration-thickness: 2px; }
.voet-water__links p { flex: 1 1 18em; margin: 0; text-align: right; color: var(--inkt-zacht); font-size: 16px; }
@media (max-width: 720px) { .voet-water__links p { text-align: left; } }

/* ---------- Hemelstrook boven gidspagina's (layouts.blad) ---------- */
.tafel + .voet-water { margin-top: 0; }
.hemelstrook { position: relative; background: var(--hemel); --grond: var(--hemel); overflow: hidden; }
.hemelstrook .kopbalk { padding-bottom: 0; }
.hemelstrook__daken { display: block; width: 100%; height: 128px; margin-top: 0; }
@media (max-width: 720px) { .hemelstrook__daken { height: 96px; } }

.ronde-klein { animation: ronde-klein 22s linear infinite; }
@keyframes ronde-klein { 0%, 100% { transform: translate(640px, -9px); } 46%, 50% { transform: translate(872px, -9px); } 96% { transform: translate(640px, -9px); } }
.omdraai-klein { transform-box: fill-box; transform-origin: 50% 50%; animation: omdraai-klein 22s steps(1) infinite; }
@keyframes omdraai-klein { 0%, 48% { transform: scaleX(1); } 48.01%, 98% { transform: scaleX(-1); } 98.01%, 100% { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .twinkel, .golf, .wolk, .ronde-klein, .omdraai-klein, .voet-water__boot { animation: none !important; }
  .ronde-klein { transform: translate(760px, -9px); }
}
.kopbalk .knop--klein { min-height: 44px; padding: 8px 18px; font-size: 16px; }