@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg-top: #F4F6F4;
  --bg-bottom: #FAFBFA;
  --sage: #2D6A4F;
  --sage-dark: #163C2C;
  --sage-darker: #0F2B20;
  --sand: #74A98C;
  --ink: #1C2622;
  --muted: #566B60;
  --card-border: #E1E7E2;
  --card-bg: #FFFFFF;
  --accent-gold: #B08D57;
  --tint-pink: #F4E3DD;
  --tint-sand: #F0E9D9;
  --tint-sage: #E7EFE8;
}

/* Subtle per-section accent: "Eetstoornissen" pages (Ursula, TEN,
   Vroegsignalering, Nieuws) get a teal-blue accent instead of the
   default sage-green, so it's clearer which area of the site you're
   in. Every rule below already reads these variables, so overriding
   them here is enough to recolor headings, active nav state, links
   and buttons on those pages only. */
body.group-eetstoornissen {
  --sage-darker: #164451;
  --sage: #2C7C8F;
  --sand: #6FA3AC;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(160deg, var(--tint-pink) 0%, var(--tint-sand) 42%, var(--tint-sage) 78%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* Site header / nav */
header.site-header {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 40px;
}
.site-header-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

nav.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
nav.site-nav > a {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
  letter-spacing: 0.01em;
}
nav.site-nav > a:hover {
  background: var(--bg-top);
  color: var(--sage-darker);
}
nav.site-nav > a.active {
  background: var(--sage-darker);
  color: #FFFFFF;
}

/* Home button: a small filled circle with a house icon, deliberately
   set apart from the text-label pages so it always reads as "go to
   the start" rather than one more section in the row. */
nav.site-nav > a.nav-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--sage-darker);
  color: #FFFFFF;
  flex-shrink: 0;
}
nav.site-nav > a.nav-home:hover {
  background: var(--sage);
  color: #FFFFFF;
}
nav.site-nav > a.nav-home.active {
  box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--accent-gold);
}
nav.site-nav > a.nav-home svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Grouped dropdown nav */
.nav-group {
  position: relative;
}
.nav-group summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: 0.6;
}
.nav-group summary:hover {
  background: var(--bg-top);
  color: var(--sage-darker);
}
.nav-group.current summary {
  color: var(--sage-darker);
  font-weight: 700;
}
.nav-group[open] summary {
  background: var(--sage-darker);
  color: #FFFFFF;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.nav-group[open] summary::after { opacity: 1; }
/* Dropdown sits flush against the summary (no gap) so the mouse never
   crosses empty space between them - that gap was closing the menu
   prematurely on the way down. Visual breathing room comes from the
   dropdown's own padding instead of a positioning gap. */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-radius: 0 10px 10px 10px;
  box-shadow: 0 10px 28px rgba(15, 43, 32, 0.14);
  padding: 8px 6px 6px;
  margin-top: -1px;
  min-width: 200px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown a {
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown a:hover {
  background: var(--bg-top);
  color: var(--sage-darker);
}
.nav-dropdown a.active {
  background: var(--sage-darker);
  color: #FFFFFF;
}

/* Homepage */
.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - 180px);
  padding: 40px 24px;
}
.home-avatar {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 24px;
  border: 5px solid #FFFFFF;
  box-shadow: 0 8px 28px rgba(15, 43, 32, 0.16);
}
.home-hero h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--sage-darker);
  letter-spacing: -0.015em;
}
.home-hero .home-kicker {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 14px;
}
.home-intro {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 480px;
  margin: 0 auto 8px;
}
.home-divider {
  width: 48px;
  height: 3px;
  background: var(--accent-gold);
  border-radius: 2px;
  margin: 28px auto 0;
}

section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 36px;
  margin-bottom: 24px;
  scroll-margin-top: 90px;
  box-shadow: 0 1px 3px rgba(15, 43, 32, 0.04);
}
section h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--sage-darker);
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--bg-top);
  display: flex;
  align-items: center;
  gap: 10px;
}
section > h2:first-child {
  margin-top: -4px;
}
.section-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin: 16px 0 18px;
}

/* Reusable in-page subheading, for splitting a tab's content into
   logical sections (used on Ursula, TEN, and similar pages) */
.subhead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--sage-darker);
  margin: 28px 0 10px;
}
.subhead:first-of-type {
  margin-top: 20px;
}

/* Bio / CV */
.profile-top {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 24px 0 24px;
}
.avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
  display: block;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 10px rgba(15, 43, 32, 0.12);
}
.profile-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  white-space: nowrap;
}
.profile-role {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #3B5B78;
  background: #E4EEF5;
  border: 1px solid #CFE0EC;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 8px;
}
.linkedin-link:hover { background: #D8E6F0; }
.bio-text {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 28px;
}
.cv-block h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-gold);
  font-weight: 700;
  margin: 0 0 14px;
}
.cv-entry {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--card-border);
}
.cv-entry:first-of-type { border-top: none; padding-top: 0; }
.cv-period {
  flex: 0 0 110px;
  font-size: 13px;
  color: var(--sage-darker);
  font-weight: 700;
}
.cv-details p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 600;
}
.cv-details span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
  font-weight: 400;
}
.cv-details a.pub-link {
  font-size: 13px;
  color: var(--sage-darker);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-top: 6px;
  border-bottom: 1px solid var(--sand);
}
.cv-details a.pub-link:hover { border-bottom-color: var(--sage-darker); }
.placeholder-note {
  font-size: 12.5px;
  color: #9AA6A0;
  font-style: italic;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--card-border);
}

.news-item {
  padding: 18px 0;
  border-top: 1px solid var(--card-border);
}
.news-item:first-of-type { border-top: none; padding-top: 0; }
.news-item .source {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sage-darker);
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.news-item h3 {
  font-size: 16.5px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
  line-height: 1.4;
}
.news-item p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 8px;
}
.news-item a {
  font-size: 13px;
  color: var(--sage-darker);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--sand);
}
.news-item a:hover { border-bottom-color: var(--sage-darker); }
.support-note {
  font-size: 13px;
  color: var(--muted);
  background: var(--bg-top);
  border-radius: 10px;
  padding: 16px 18px;
  line-height: 1.65;
  margin-top: 8px;
  border-left: 3px solid var(--accent-gold);
}
.support-note a { color: var(--sage-darker); }

.placeholder-block {
  font-size: 13px;
  color: #9AA6A0;
  font-style: italic;
  line-height: 1.6;
}

/* TEN block */
.ten-text {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 24px;
}
.ten-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.ten-pillars li {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sage-darker);
  background: var(--bg-top);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 5px 13px;
}
.ten-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--sage-darker);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 8px;
  margin-top: 12px;
}
.ten-link:hover { background: var(--sage); }

footer {
  text-align: center;
  font-size: 12.5px;
  color: #8B978F;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--card-border);
}

/* Back-to-top button, injected by nav.js on long pages */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sage-darker);
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 43, 32, 0.25);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  z-index: 15;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { background: var(--sage); }
.back-to-top svg { width: 18px; height: 18px; }