@font-face {
  font-family: "Nunito Sans";
  src: url(/assets/nunito-sans.woff2) format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* Huisstijl golfcenterdrachten.nl (Elementor globals) */
  --groen: #283618;
  --groen-2: #3b591a;
  --lime: #a9af0d;
  --creme: #efede5;
  --wit: #ffffff;
  --inkt: #1d2412;
  --grijs: #3f4636;
  --lijn: rgba(40, 54, 24, 0.14);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px;
  --uit: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--groen-2) var(--creme); }
body {
  margin: 0;
  font: 400 17px/1.5 "Nunito Sans", system-ui, sans-serif;
  color: var(--inkt);
  background: var(--creme);
  caret-color: var(--groen);
}
::selection { background: var(--lime); color: var(--inkt); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--groen); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; }
.cijfers { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: var(--s4); top: -64px; background: var(--groen); color: var(--wit); padding: var(--s2) var(--s4); border-radius: var(--r-s); z-index: 10; }
.skip:focus { top: var(--s4); }

/* Conceptbalk: alleen voor de beoordeling */
.concept { background: var(--inkt); color: #e9ebdf; font-size: 14px; }
.concept a { color: var(--wit); font-weight: 700; text-underline-offset: 3px; }
.concept summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: center; align-items: center;
  min-height: 40px; padding: var(--s2) var(--s4);
}
.concept summary::-webkit-details-marker { display: none; }
.concept__open { font-weight: 700; color: var(--wit); display: inline-flex; align-items: center; gap: var(--s2); }
.concept__open::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--uit); }
.concept[open] .concept__open::after { transform: translateY(2px) rotate(-135deg); }
.vergelijk { max-width: 1152px; margin: 0 auto; padding: var(--s2) var(--s5) var(--s5); animation: in .25s var(--uit) both; opacity: 0; transform: translateY(-4px); }
.vergelijk table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vergelijk th, .vergelijk td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.vergelijk thead th { color: #c9cdb9; font-weight: 700; }
.vergelijk tbody th { color: #c9cdb9; font-weight: 700; white-space: nowrap; width: 120px; }
.vergelijk td:last-child { color: var(--wit); font-weight: 700; }
.vergelijk p { margin-top: var(--s3); color: #c9cdb9; }

/* Kop */
.kop {
  max-width: 1200px; margin: 0 auto; padding: var(--s4) var(--s5);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
}
.merk { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 800; text-decoration: none; color: var(--groen); font-size: 17px; }
.merk svg { fill: currentColor; }
.kop nav { display: flex; align-items: center; gap: var(--s5); font-size: 15px; font-weight: 600; }
.kop nav a:not(.knop) { text-decoration: none; padding: var(--s3) 0; }
.kop nav a:not(.knop):hover { text-decoration: underline; text-underline-offset: 4px; }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s5);
  border-radius: 999px; background: var(--groen); color: var(--wit); font-weight: 700; text-decoration: none;
  transition: transform .15s var(--uit), background-color .15s var(--uit);
}
.knop:hover { background: var(--groen-2); transform: translateY(-1px); }
.knop:active { transform: translateY(0) scale(.98); }
.knop--klein { min-height: 40px; padding: 0 var(--s4); font-size: 14px; }
.knop--rustig { background: transparent; color: var(--groen); box-shadow: inset 0 0 0 1.5px var(--groen); }
.knop--rustig:hover { background: rgba(40, 54, 24, .06); }

/* Held */
.held {
  max-width: 1200px; margin: 0 auto; padding: var(--s7) var(--s5) var(--s9);
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s7); align-items: center;
}
.naam {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-bottom: var(--s5); padding: var(--s1) var(--s3) var(--s1) var(--s3);
  border-radius: 999px; background: var(--wit); box-shadow: 0 1px 2px rgba(29, 36, 18, .08), 0 4px 12px rgba(29, 36, 18, .06);
  font-size: 14px; font-weight: 700;
}
.naam__oud { position: relative; color: var(--grijs); }
.naam__oud::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: var(--groen-2);
  transform-origin: left; transform: scaleX(0); animation: streep .45s var(--uit) .5s forwards;
}
.naam__pijl { color: var(--grijs); opacity: 0; animation: in .3s var(--uit) .85s forwards; }
.naam__nieuw { color: var(--groen); opacity: 0; transform: translateX(-4px); animation: in .3s var(--uit) .95s forwards; }
h1 { font-size: clamp(36px, 4.6vw, 56px); font-weight: 800; color: var(--groen); }
.accent { position: relative; white-space: nowrap; }
.accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .14em; border-radius: 4px; background: var(--lime); z-index: -1;
  transform-origin: left; transform: scaleX(0); animation: streep .4s var(--uit) 1.05s forwards;
}
.held__tekst { position: relative; z-index: 0; }
.intro { margin-top: var(--s5); font-size: 19px; color: var(--grijs); max-width: 54ch; }
.status { margin-top: var(--s5); display: inline-flex; align-items: center; gap: var(--s2); font-size: 15px; font-weight: 700; color: var(--groen); }
.status__stip { width: 8px; height: 8px; border-radius: 50%; background: var(--grijs); position: relative; }
.status[data-staat="open"] .status__stip { background: #4c7a12; }
.status[data-staat="open"] .status__stip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #4c7a12; animation: puls 1.8s ease-out infinite; }
@keyframes puls { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }
.acties { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3); }

.held__beeld { margin: 0; }
.held__beeld img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-l);
  box-shadow: 0 1px 2px rgba(29, 36, 18, .10);
  animation: beeld .5s var(--uit) .1s both;
}
.held__beeld figcaption { margin-top: var(--s3); font-size: 14px; color: var(--grijs); }

@keyframes streep { to { transform: scaleX(1); } }
@keyframes in { to { opacity: 1; transform: none; } }
@keyframes beeld { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

/* Blokken: kop in kolom 1-5, inhoud in 6-12; één sectie-afstand (96 / 64) */
.blok {
  max-width: 1200px; margin: 0 auto; padding: var(--s9) var(--s5); border-top: 1px solid var(--lijn);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s5); row-gap: var(--s5); align-items: start;
}
.blok h2 { grid-column: 1 / 6; font-size: clamp(28px, 3vw, 36px); font-weight: 800; color: var(--groen); max-width: 14ch; }
.rechts { grid-column: 6 / 13; }
.tekst { display: grid; gap: var(--s4); }
.tekst p { max-width: 62ch; font-size: 18px; }

.lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); }
.lijst li { padding-top: var(--s4); border-top: 2px solid var(--groen); }
.lijst h3 { font-size: 19px; font-weight: 800; color: var(--groen); }
.lijst p { margin-top: var(--s2); color: var(--grijs); font-size: 16px; }

/* Bezoek: de enige achtergrondwissel, want hier ga je naartoe */
.blok--bezoek {
  max-width: none; border-top: 0; background: var(--groen); color: var(--creme);
  padding-left: max(var(--s5), calc((100% - 1152px) / 2)); padding-right: max(var(--s5), calc((100% - 1152px) / 2));
}
.blok--bezoek h2 { color: var(--wit); grid-row: 1; }
.blok--bezoek .links { grid-column: 1 / 6; grid-row: 2; }
.blok--bezoek .faq { grid-row: 1 / 3; }
.links dl { margin: 0; }
.links dl > div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid rgba(239, 237, 229, .2); }
.links dt { color: #d3d7c4; font-size: 15px; }
.links dd { margin: 0; font-weight: 700; color: var(--wit); }
.knop--licht { background: var(--creme); color: var(--groen); }
.knop--licht:hover { background: var(--wit); }
.knop--rand { background: transparent; color: var(--wit); box-shadow: inset 0 0 0 1.5px rgba(239, 237, 229, .7); }
.knop--rand:hover { background: rgba(255, 255, 255, .08); }
.blok--bezoek :focus-visible { outline-color: var(--lime); }
.faq h3 { font-size: 19px; font-weight: 800; color: var(--wit); margin-bottom: var(--s2); }
.faq details { border-bottom: 1px solid rgba(239, 237, 229, .2); }
.faq summary {
  list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  font-weight: 700; padding: var(--s3) 0; color: var(--wit);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--lime); transition: transform .2s var(--uit); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--s4); color: #e3e5d8; max-width: 60ch; }

.voet { max-width: 1200px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); font-size: 14px; color: var(--grijs); }
.voet a { text-underline-offset: 3px; }

/* Notitie-pagina */
.notitie { max-width: 760px; margin: 0 auto; padding: var(--s7) var(--s5) var(--s8); }
.notitie h1 { font-size: 36px; }
.notitie h2 { font-size: 22px; font-weight: 800; color: var(--groen); margin-top: var(--s7); }
.notitie p, .notitie li { color: var(--inkt); max-width: 68ch; }
.notitie p + p { margin-top: var(--s3); }
.notitie ul { padding-left: var(--s5); }
.notitie li + li { margin-top: var(--s2); }
.tabel { width: 100%; border-collapse: collapse; margin-top: var(--s4); font-size: 15px; background: var(--wit); border-radius: var(--r-m); overflow: hidden; }
.tabel th, .tabel td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--lijn); }
.tabel th { font-size: 13px; color: var(--grijs); font-weight: 700; }
.tabel td:first-child { font-weight: 700; white-space: nowrap; }

@media (max-width: 900px) {
  .held { grid-template-columns: 1fr; gap: var(--s6); padding-top: var(--s5); }
  .blok h2, .rechts, .blok--bezoek .links { grid-column: 1 / -1; }
  .blok--bezoek .faq { grid-row: auto; }
  .blok h2 { max-width: 20ch; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .kop { padding: var(--s3) var(--s4); }
  .kop nav a:not(.knop) { display: none; }
  .held, .blok { padding-left: var(--s4); padding-right: var(--s4); }
  .held { padding-bottom: var(--s8); }
  .blok { padding-top: var(--s8); padding-bottom: var(--s8); }
  .tekst p { font-size: 17px; }
  .vergelijk { padding-left: var(--s4); padding-right: var(--s4); }
  .vergelijk thead { display: none; }
  .vergelijk tr { display: grid; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .vergelijk th, .vergelijk td { display: block; padding: 0; border: 0; }
  .vergelijk tbody th { width: auto; color: var(--lime); }
  .vergelijk td::before { content: attr(data-label) ": "; color: #c9cdb9; font-weight: 400; }
  .intro { font-size: 17px; }
  .lijst { grid-template-columns: 1fr; }
  .acties .knop { flex: 1 1 100%; }
  .tabel { table-layout: fixed; font-size: 14px; }
  .tabel th, .tabel td { padding: var(--s2); overflow-wrap: anywhere; }
  .tabel td:first-child { white-space: normal; }
  .blok--bezoek { padding-left: var(--s4); padding-right: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}
.tabel + p { margin-top: var(--s3); }