@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --font-body: "DM Sans", sans-serif;
  --page-background: #f8f9f5;
  --text-color: #414348;
  --footer-background: #edf1e5;
  --social-background: #59388a;
  --brand-purple: #59388a;
  --brand-green: #78964f;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-weight: 400;
  letter-spacing: .15px;
  background: radial-gradient(ellipse at 0 35%, #eaf0df 0, transparent 48%),
              radial-gradient(ellipse at 100% 0, #ede8f3 0, transparent 45%), #f8f9f5;
}

header { padding: 22px 24px 0; }
.logo {
  width: 680px;
  max-width: 100%;
  height: clamp(130px, 24vw, 200px);
  object-fit: cover;
}
.tagline { color: #666073; font-weight: 400; }
.site-nav {
  box-sizing: border-box;
  max-width: 880px;
  width: 100%;
  padding: 0 16px;
  border: 0;
  border-image: none;
  border-bottom: 1px solid #59388a20;
}
.site-nav ul { margin: 10px 0 20px; }
.site-nav ul li { margin: 0 20px; }
.site-nav ul li a {
  display: inline-block;
  color: #554764;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 0;
  text-shadow: none;
}
.site-nav ul li a:hover { color: var(--brand-purple); text-shadow: none; }
a { color: var(--brand-purple); text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-purple);
  outline-offset: 5px;
}
main {
  box-sizing: border-box;
  width: 100%;
  max-width: 850px;
  flex: 1;
  padding: 64px 32px 80px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--brand-purple);
  font-weight: 400;
  letter-spacing: -.5px;
  line-height: 1.15;
}
h1 { font-size: clamp(44px, 6vw, 64px); margin: 0 0 28px; }
h1::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 24px auto 0;
  border-radius: 3px;
  background: var(--brand-green);
}
h2 { font-size: 38px; }
h3 { font-size: 29px; }
p { line-height: 1.85; margin-bottom: 28px; }
main img { max-width: 100%; height: auto; border-radius: 12px; }
footer {
  padding: 26px 24px;
  border-top: 1px solid #78964f25;
  color: #555f49;
  font-size: 14px;
}
footer p { margin: 0; }
hr { background: #78964f40; width: 64px; }
.CTAKNOP, button[type="submit"] {
  display: inline-block;
  background: var(--brand-purple);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}
.CTAKNOP:hover, button[type="submit"]:hover { background: #43296c; color: #fff; transform: none; }
input, textarea, select {
  box-sizing: border-box;
  max-width: 100%;
  background: #fff;
  color: var(--text-color);
  border: 1px solid #cdd4c3;
  border-radius: 6px;
  padding: 12px;
  font: inherit;
}
.price-item { padding: 20px 0; border-bottom: 1px solid #78964f30; }
.price-name { color: var(--brand-purple); font-weight: 500; }
.price-value { color: #546d35; font-weight: 600; }
@media (max-width: 768px) {
  header { padding: 24px 20px 0; }
  .hamburger { top: 20px; right: 20px; }
  .hamburger div { background: var(--brand-purple); }
  .site-nav ul.show { background: #f8f9f5; border-radius: 8px; padding: 14px 0; }
  .site-nav ul li { margin: 4px 0; }
  main { padding: 44px 24px 56px; }
  h2 { font-size: 32px; }
}

/* Leesbare langere teksten en fotografie van Arthur. */
.site-nav { max-width: 1180px; }
.site-nav ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 24px; }
.site-nav ul li { margin: 0; }
main { max-width: 920px; }
main > p, main section { text-align: left; }
main > p { max-width: 720px; margin: 0 auto 28px; }
main > h2 { max-width: 720px; margin: 52px auto 24px; text-align: left; font-size: 30px; }
main > img { display: block; width: 100%; max-width: 720px !important; margin: 28px auto 40px !important; }
main > img[src*="arthur-portret"], main > img[src*="arthur-bij-de-vuurtoren"] { max-width: 440px !important; }
main > p:has(.CTAKNOP) { text-align: center; margin-top: 44px; }
.price-top { align-items: baseline; }
.price-value { white-space: nowrap; }
.price-note { margin-top: 10px; font-size: 16px; line-height: 1.7; }
.prices-section { max-width: 720px; margin: auto; }
@media (max-width: 768px) {
  .site-nav ul { display: none; }
  .site-nav ul.show { display: flex; }
  .site-nav ul li { margin: 4px 0; }
  main > h2 { font-size: 26px; }
  .price-top { flex-direction: column; gap: 6px; }
}

main > hr { display: none; }

.services-dropdown { position: relative; }
.services-toggle {
  border: 0;
  background: transparent;
  color: #554764;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 0;
  cursor: pointer;
}
.services-toggle span { display: inline-block; margin-left: 5px; transition: transform .2s; }
.services-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.services-toggle:hover, .services-toggle[aria-expanded="true"] { color: var(--brand-purple); }
.site-nav .services-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: -20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 230px;
  margin: 0;
  padding: 10px;
  text-align: left;
  background: #fdfefb;
  border: 1px solid #59388a18;
  border-radius: 10px;
  box-shadow: 0 12px 32px #33214314;
  z-index: 30;
}
.site-nav .services-menu[hidden] { display: none; }
.site-nav .services-menu li { display: block; margin: 0; }
.site-nav .services-menu a { display: block; padding: 10px 12px; border-radius: 5px; }
.site-nav .services-menu a:hover, .site-nav .services-menu a[aria-current="page"] { background: #edf1e5; }
.site-nav a[aria-current="page"] { color: var(--brand-purple); }
@media (max-width: 768px) {
  .site-nav .services-menu {
    position: static;
    min-width: 0;
    margin: 6px 0 10px;
    box-shadow: none;
    background: #edf1e5;
    text-align: center;
  }
}

/* Compactere koppen en navigatie. */
h1 { font-size: clamp(34px, 4vw, 46px); }
main { padding-top: 40px; }
header .logo { height: clamp(130px, 20vw, 168px); }
.site-nav > ul { margin-bottom: 14px; }
.services-toggle { display: inline-flex; align-items: center; gap: 8px; line-height: 1.5; }
.services-toggle span {
  width: 6px;
  height: 6px;
  margin: -3px 2px 0 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  font-size: 0;
}
.services-toggle[aria-expanded="true"] span { transform: translateY(3px) rotate(225deg); }
.site-nav .services-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
}
.site-nav ul li a:hover, .site-nav ul li a:focus-visible, .services-toggle:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
@media (max-width: 768px) {
  main { padding-top: 32px; }
  .site-nav .services-menu::before { display: none; }
}

/* Gelijke verticale uitlijning van links en de dienstenknop. */
.site-nav > ul { align-items: center; }
.site-nav > ul > li { display: flex; align-items: center; }
.site-nav > ul > li > a, .services-toggle { line-height: 1.5; }
@media (max-width: 768px) {
  .site-nav > ul > .services-dropdown { flex-direction: column; }
}

/* Smallere leeskolom, met een gecentreerde introductie op de homepage. */
main > p, main > h2, .prices-section { max-width: 640px; }
.page-home > h1 + p { max-width: 620px; text-align: center; }

/* Gecentreerde opening; inhoudelijke vervolgteksten links uitgelijnd. */
main > h1 { text-align: center; }
main > h1 + p { max-width: 640px; text-align: center; }
main > h1 + hr + p { max-width: 640px; text-align: center; }
main > img { margin-left: auto !important; margin-right: auto !important; }
main > h2, main > p { text-align: left; }
main > h1 + p, main > h1 + hr + p { text-align: center; }

.content-list { box-sizing: border-box; max-width: 640px; margin: 0 auto 28px; padding-left: 24px; text-align: left; }
.content-list li { padding-left: 4px; margin-bottom: 8px; line-height: 1.7; }
.content-list li::marker { color: var(--brand-green); }
.registration-mark { max-width: 640px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid #78964f30; text-align: center; }
.registration-mark img { display: inline-block; width: 220px; max-width: 100%; height: auto; border-radius: 0; }

.contact-details { max-width: 640px; margin: 32px auto; text-align: left; }
.contact-details p { margin: 0 0 24px; }
.contact-details a { overflow-wrap: anywhere; }