:root {
  color-scheme: light;
  --ink: #14211a;
  --muted: #617067;
  --paper: #f5f5ef;
  --card: #fff;
  --line: #d9ddd6;
  --green: #153f2e;
  --mint: #d8eadf;
  --lime: #dff37a;
  --orange: #f4d4a5;
  --shadow: 0 16px 45px rgba(20, 33, 26, 0.08);
  --sector-color: #65736b;
  --sector-soft: #edf0ee;
  --sector-ink: #39443e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  /* Site-wide scale-down, equivalent to pressing Cmd-minus three times at 100%.
     `zoom` (not a root font-size) so it also shrinks raw-px paddings,
     borders and images, not just rem-sized type. */
  zoom: 0.72;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; }

.access-gate {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 78% 18%, rgba(223, 243, 122, 0.2), transparent 28%),
    var(--green);
}

.access-card {
  width: min(100%, 520px);
  padding: clamp(28px, 6vw, 54px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
}

.access-mark {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: 32px;
  border-radius: 12px;
  background: var(--green);
  color: var(--lime);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.access-card h1 {
  margin-bottom: 18px;
  color: var(--ink);
  font-size: clamp(2.6rem, 9vw, 4.6rem);
}

.access-copy {
  margin-bottom: 30px;
  color: var(--muted);
  line-height: 1.65;
}

.access-card label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.access-entry { display: grid; grid-template-columns: 1fr auto; gap: 9px; }

.access-entry input { min-width: 0; }

.access-entry button {
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.access-error {
  min-height: 22px;
  margin: 10px 0 0;
  color: #a02929;
  font-size: 0.84rem;
}

.hero {
  min-height: 390px;
  padding: 0 clamp(24px, 6vw, 96px) 72px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(223, 243, 122, 0.2), transparent 28%),
    var(--green);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The right-hand side now carries an address, two social icons and the
     language button, so the row has to be allowed to break rather than push the
     page into horizontal scroll on a phone. */
  flex-wrap: wrap;
  gap: 10px 16px;
  max-width: 1220px;
  margin: auto;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* On a narrow screen the written-out address is the first thing to go: the icons
   stay recognisable at any width, and the address is repeated in the footer. */
@media (max-width: 620px) {
  .nav-right > .nav-link[href^='mailto:'] {
    display: none;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.02em;
}

/* The mark keeps its own dark-green tile, which sits on the same dark-green
   header, knocking the background out would leave a white fringe on the
   antialiased rings at 28px. */
.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: block;
}

.updated { color: rgba(255, 255, 255, 0.68); font-size: 0.84rem; }

/* Logo left, copy right. The mark is the brand statement here, so the nav
   carries the wordmark only -- the same mark twice, a hundred pixels apart,
   reads as a duplicate rather than as branding. */
.hero-copy {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
  max-width: 1220px;
  margin: 64px auto 0;
}

.hero-mark {
  flex-shrink: 0;
  width: clamp(120px, 15vw, 200px);
  height: auto;
  border-radius: 28px;
}

/* min-width: 0 lets the text column shrink inside the flex row instead of
   forcing the headline to overflow. */
.hero-text { min-width: 0; }

.eyebrow {
  margin: 0 0 12px;
  color: #97b8a3;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hero .eyebrow { color: var(--lime); }

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 680px;
  margin-bottom: 20px;
  /* Without this the hero headline breaks as "Vind het / traineeship wat bij /
     je past!" -- a stranded first line. balance evens the lines out and costs
     nothing where it is unsupported. */
  text-wrap: balance;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 7vw, 5.8rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.hero-text > p:last-child {
  max-width: 630px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.08rem;
  line-height: 1.7;
}

main {
  max-width: 1220px;
  margin: -34px auto 80px;
  padding: 0 24px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow);
}

.tab {
  display: flex;
  flex: 1 1 150px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  padding: 13px 18px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.tab.active { background: var(--green); color: #fff; }

.count {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 99px;
  background: rgba(21, 63, 46, 0.1);
  font-size: 0.75rem;
}

.tab.active .count { background: var(--lime); color: var(--green); }

.toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 230px) minmax(160px, 230px);
  gap: 16px;
  margin: 36px 0 54px;
}

label span, .field > span, dt {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Multi-select dropdown: a <details> whose summary looks like a select and
   whose panel holds the same checkbox chips the subscribe form uses. */
.multi { position: relative; }
.multi summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.multi summary::-webkit-details-marker { display: none; }
.multi summary::after { content: "▾"; color: var(--muted); margin-left: 10px; }
.multi[open] summary::after { content: "▴"; }
.multi-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  min-width: min(340px, 86vw);
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(17, 34, 24, 0.16);
}

input, select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

select {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 21px,
    calc(100% - 13px) 21px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

input:focus-visible,
select:focus-visible,
.multi summary:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(45, 110, 79, 0.25);
  outline-offset: 2px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 26px;
}

/* "Nu beschikbaar", "Oriënteer je vooruit" — these say what the tab you are on
   actually contains, but at 0.76rem in a pale grey-green they read as
   decoration above the heading rather than as part of it. */
.section-heading .eyebrow {
  font-size: 0.95rem;
  letter-spacing: 0.09em;
  color: var(--green);
  margin-bottom: 8px;
}

.section-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.section-heading > p {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.cards,
.company-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* --- Calendar ---------------------------------------------------------- */

.calendar-shell {
  padding: clamp(18px, 3vw, 34px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
}

.calendar-toolbar h3 {
  margin: 0;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500;
  text-transform: capitalize;
}

.calendar-toolbar button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--green);
  cursor: pointer;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 800;
}

.calendar-note {
  max-width: 760px;
  margin: 16px auto 28px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: center;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.calendar-weekdays span { padding: 9px 4px; }

.calendar-grid {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 10px;
}

.calendar-day {
  min-height: 116px;
  padding: 9px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.calendar-day-empty { background: #f6f6f2; }
.calendar-day-number { display: block; margin-bottom: 7px; color: var(--muted); font-size: 0.78rem; }

.calendar-event {
  display: block;
  margin-top: 5px;
  padding: 5px 6px;
  overflow: hidden;
  border-left: 3px solid var(--sector-color);
  border-radius: 5px;
  background: var(--sector-soft);
  color: var(--sector-ink);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event[data-kind="closes"] { opacity: 0.78; }
.calendar-more { display: block; margin-top: 6px; color: var(--muted); font-size: 0.68rem; }

.calendar-agenda { margin-top: 34px; }
.calendar-agenda h3 { margin: 0 0 12px; font-size: 1rem; }

.calendar-agenda-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.calendar-agenda-row time { color: var(--sector-ink); font-weight: 800; }
.calendar-agenda-row small { display: block; margin-top: 3px; color: var(--muted); }
.calendar-kind {
  padding: 5px 8px;
  border-radius: 99px;
  background: var(--mint);
  color: var(--green);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.calendar-kind[data-kind="closes"] { background: #eee; color: #626262; }
.calendar-empty { color: var(--muted); }

.card {
  display: flex;
  min-height: 430px;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--sector-color);
  border-radius: 13px;
  box-shadow: 0 3px 0 rgba(20, 33, 26, 0.02);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Safari/Chrome draw the native clear button on a search field as a small solid
   dot, which reads as a stray full stop at the end of the line. Same behaviour,
   drawn as an actual cross. */
input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  width: 14px;
  cursor: pointer;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 3 L11 11 M11 3 L3 11' stroke='%23636b66' stroke-width='2' stroke-linecap='round'/></svg>")
    center / 12px 12px no-repeat;
}

input[type='search']::-webkit-search-cancel-button:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 3 L11 11 M11 3 L3 11' stroke='%23202320' stroke-width='2' stroke-linecap='round'/></svg>");
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  opacity: 0.86;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

/* Brand colours need a light ground: LinkedIn blue and the Instagram gradient
   both sink into the dark green header. A white chip keeps them legible and
   makes the two read as one pair of buttons. */
.nav-icon-link {
  padding: 6px;
  border-radius: 10px;
  background: #fff;
  opacity: 1;
}

.nav-icon-link:hover,
.nav-icon-link:focus-visible {
  text-decoration: none;
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.social-icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.footer-social .social-icon {
  width: 26px;
  height: 26px;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  font-weight: 600;
}

.social-link:hover,
.social-link:focus-visible {
  text-decoration: underline;
}

.translate-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.translate-link:hover,
.translate-link:focus-visible {
  border-color: currentColor;
  background: rgba(0, 0, 0, 0.04);
}

.sector, .status {
  padding: 6px 9px;
  border-radius: 99px;
  background: var(--sector-soft);
  color: var(--sector-ink);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.status { background: var(--mint); color: var(--green); }
.status[data-status="closed"] { background: #eee; color: #626262; }
.status[data-status="upcoming"] { background: var(--orange); color: #6f4318; }
.status[data-status="unknown"] { background: #edf0ee; color: #617067; }

[data-sector="banking"] {
  --sector-color: #2362c7;
  --sector-soft: #e5efff;
  --sector-ink: #17458f;
}
[data-sector="insurance"] {
  --sector-color: #7a4bb3;
  --sector-soft: #f0e8fa;
  --sector-ink: #5d348c;
}
[data-sector="trading"] {
  --sector-color: #b86b12;
  --sector-soft: #fff0d9;
  --sector-ink: #814508;
}
[data-sector="consulting"] {
  --sector-color: #d15c48;
  --sector-soft: #fde9e5;
  --sector-ink: #923626;
}
[data-sector="government"] {
  --sector-color: #9c3f57;
  --sector-soft: #f8e6eb;
  --sector-ink: #742a3e;
}
[data-sector="energy"] {
  --sector-color: #2d8753;
  --sector-soft: #dff2e7;
  --sector-ink: #1f633c;
}
[data-sector="fmcg"] {
  --sector-color: #df7b22;
  --sector-soft: #fff0df;
  --sector-ink: #994b0b;
}
[data-sector="tech"] {
  --sector-color: #3976a8;
  --sector-soft: #e5f1f8;
  --sector-ink: #285779;
}
[data-sector="industry"] {
  --sector-color: #586a78;
  --sector-soft: #e9eef1;
  --sector-ink: #3e4f5b;
}
[data-sector="transport"] {
  --sector-color: #138486;
  --sector-soft: #def3f1;
  --sector-ink: #0c5d5e;
}
[data-sector="healthcare"] {
  --sector-color: #1f7a8c;
  --sector-soft: #ddf0f4;
  --sector-ink: #145561;
}
[data-sector="pharma"] {
  --sector-color: #4a7fb5;
  --sector-soft: #e6eff8;
  --sector-ink: #2f5a86;
}
[data-sector="education"] {
  --sector-color: #8a6d3b;
  --sector-soft: #f6eddc;
  --sector-ink: #66512b;
}
[data-sector="other"] {
  --sector-color: #747a73;
  --sector-soft: #eceeeb;
  --sector-ink: #50564f;
}

/* Vakgebieden: the category on a traineeship card and on the traineeship-tab
   filter. Its own palette, because it answers a different question from the
   employer's sector and the two are shown in the same visual slot. */
[data-field="finance"] {
  --sector-soft: #e5efff;
  --sector-ink: #17458f;
}
[data-field="it"] {
  --sector-soft: #e5f1f8;
  --sector-ink: #285779;
}
[data-field="engineering"] {
  --sector-soft: #e9eef1;
  --sector-ink: #3e4f5b;
}
[data-field="commercial"] {
  --sector-soft: #fff0df;
  --sector-ink: #994b0b;
}
[data-field="supplychain"] {
  --sector-soft: #def3f1;
  --sector-ink: #0c5d5e;
}
/* Named `investment` and `tax`, not `trading` and `legal`. Those two selectors
   matched nothing: `trading` and `legal` are TAG names, and the vakgebied keys
   they were meant to colour are `investment` and `tax` — so Investment &
   Trading and Fiscaal & Juridisch cards silently fell back to the default grey.
   The colours themselves are unchanged, they just apply now. */
[data-field="investment"] {
  --sector-soft: #fff0d9;
  --sector-ink: #814508;
}
[data-field="consulting"] {
  --sector-soft: #fde9e5;
  --sector-ink: #923626;
}
[data-field="tax"] {
  --sector-soft: #f8e6eb;
  --sector-ink: #742a3e;
}
[data-field="hr"] {
  --sector-soft: #f0e8fa;
  --sector-ink: #5d348c;
}
[data-field="sustainability"] {
  --sector-soft: #dff2e7;
  --sector-ink: #1f633c;
}
[data-field="management"] {
  --sector-soft: #eae7fb;
  --sector-ink: #443a8c;
}
/* The remaining three vakgebieden had no entry at all, so Banking (9 cards),
   Verzekeren & Pensioen (10) and Risk & Compliance (17) were indistinguishable
   from each other and from anything else uncoloured. */
[data-field="banking"] {
  --sector-soft: #e0e9f6;
  --sector-ink: #123a6b;
}
[data-field="insurance"] {
  --sector-soft: #e6eee9;
  --sector-ink: #2c5646;
}
[data-field="risk"] {
  --sector-soft: #fdeade;
  --sector-ink: #8a4213;
}
/* "Breed programma" is the absence of a category, so it stays deliberately
   neutral — it should not compete with the chips that name real work. */
[data-field="broad"] {
  --sector-soft: #eceeeb;
  --sector-ink: #50564f;
}

/* A deadline within a week turns urgent. */
.deadline-soon dd { color: #b3261e; font-weight: 700; }

/* Honeypot field: kept out of sight AND out of the accessibility tree; bots
   that fill every input reveal themselves. Not display:none, some bots skip
   hidden inputs. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.company { margin-bottom: 8px; color: var(--muted); font-size: 0.86rem; font-weight: 700; }

.card-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.card-brand-copy { min-width: 0; }

.logo-shell {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--sector-ink);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.logo-shell-large {
  width: 62px;
  height: 62px;
  border-radius: 15px;
  font-size: 0.95rem;
}

.company-logo {
  position: relative;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.logo-shell-large .company-logo { width: 44px; height: 44px; }
.company-logo[hidden] { display: none; }
.logo-fallback { position: absolute; inset: 0; display: grid; place-items: center; }

.title {
  margin-bottom: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.record-kind {
  margin: 0;
  color: var(--sector-ink);
  font-size: 0.72rem;
  font-weight: 750;
}

.description {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

dd { margin: 0; font-size: 0.86rem; }

.button {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.button:hover { background: #205a42; }

.empty {
  padding: 70px 20px;
  border: 1px dashed var(--line);
  border-radius: 13px;
  color: var(--muted);
  text-align: center;
}

/* --- Employer directory ------------------------------------------------- */

.company-card {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--sector-color);
  border-radius: 13px;
  background: var(--card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  /* Anchor for the stretched link below. z-index makes the card its own
     stacking context, so the overlay's z-index stays a private matter between
     the card and its own children and can never reach a neighbouring card. */
  position: relative;
  z-index: 0;
  cursor: pointer;
}

.company-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* The whole card opens the company profile, not just the link text.
   The card already LOOKED clickable — it lifts on hover — while only the small
   "Bekijk bedrijfsprofiel" line actually was.

   Done by stretching the existing anchor over the card rather than wrapping the
   card in one or adding a click handler, so it stays a real link: keyboard
   focus, Enter, middle-click, ⌘-click and "open in new tab" all keep working,
   and a screen reader still announces one link with a sensible name.

   ::before, not ::after — ::after already draws the arrow glyph.

   Scoped to .company-card on purpose: bedrijf.js reuses the .company-link class
   for the "Bekijk dit traineeship" link on the company profile page, and an
   unscoped rule would stretch an invisible overlay across whatever positioned
   ancestor it happened to find there. */
.company-card .company-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
  /* Above .company-logo, which sets z-index: 2 to clear the initials fallback
     behind it. Without this the logo is the one part of the card that swallows
     the click — the least obvious possible dead spot. */
  z-index: 3;
}

/* Focus belongs on the card, since the card is what activates. Without this the
   ring would draw around the small link text while the whole tile is the target.

   Scoped with :has so it degrades cleanly — a browser without :has support
   simply falls back to the normal a:focus-visible ring on the link, rather than
   losing the focus indicator altogether. Both rules share the condition, so the
   inner outline is only suppressed where the card's own outline replaces it. */
.company-card:has(.company-link:focus-visible) {
  outline: 3px solid rgba(45, 110, 79, 0.25);
  outline-offset: 2px;
}

.company-card:has(.company-link:focus-visible) .company-link {
  outline: none;
  text-decoration: underline;
}

.company-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.company-card h3 {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.company-description {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.company-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.company-stat {
  padding: 6px 9px;
  border-radius: 99px;
  background: var(--sector-soft);
  color: var(--sector-ink);
  font-size: 0.72rem;
  font-weight: 750;
}

.company-link {
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 850;
  text-decoration: none;
}

.company-link::after { content: " →"; }
.company-link:hover { text-decoration: underline; }

/* --- Discovery ---------------------------------------------------------- */

/* Georgia at 90px sets very tight by default, and -0.055em made "traineeship"
   read as one blur around the double e. Loosened for the hero headline only. */
.hero h1 { letter-spacing: 0.012em; }

/* The toolbar (search + filters) is hidden on Ontdekken AND Kalender, so both
   panels have to make up the space it would have occupied. Only Ontdekken did,
   which is why the calendar sat higher than every other tab. */
.discover-heading,
.toolbarless-heading { margin-top: 38px; }

.discover-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 28px;
  margin-bottom: 48px;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 12%, rgba(223, 243, 122, 0.2), transparent 32%),
    #fff;
  box-shadow: var(--shadow);
}

.discover-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.discover-add-row button {
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.discover-add-row input,
.company-combobox-row input { min-width: 0; }

.company-combobox-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.company-combobox-row button {
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.company-combobox-row button:disabled { opacity: 0.5; cursor: default; }

.selected-companies {
  display: flex;
  min-height: 40px;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.subscription-selected {
  min-height: 0;
  margin-top: 10px;
}

.selected-company {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 9px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--sector-soft);
  color: var(--sector-ink);
  font-size: 0.82rem;
  font-weight: 750;
}

.selected-company button {
  display: grid;
  width: 22px;
  height: 22px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 33, 26, 0.1);
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.discover-sectors { margin: 0; padding: 0; border: 0; }
.discover-sectors legend {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.discover-sectors .chip:has(input:checked) {
  border-color: var(--sector-color);
  background: var(--sector-soft);
  color: var(--sector-ink);
}

.recommendation-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.recommendation-header h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.recommendation-header > p {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.recommendation-reason {
  margin: -5px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--sector-color);
  color: var(--sector-ink);
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.5;
}

.discover-empty {
  padding: 42px;
  border: 1px dashed var(--line);
  border-radius: 13px;
  color: var(--muted);
  text-align: center;
}

.discover-empty p { max-width: 720px; margin: auto; line-height: 1.7; }

/* --- Internal employer profile ----------------------------------------- */

.profile-body { min-height: 100vh; }

.profile-site-header {
  padding: 0 24px;
  background: var(--green);
  color: #fff;
}

.profile-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  min-height: 76px;
  margin: auto;
}

.profile-back {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  font-weight: 750;
  text-decoration: none;
}

.profile-main {
  max-width: 1120px;
  margin: auto;
  padding: 34px 24px 90px;
}

.profile-breadcrumb {
  display: flex;
  gap: 9px;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 0.82rem;
}

.profile-breadcrumb a { color: var(--green); font-weight: 750; }

.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: end;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--line);
  border-top: 6px solid var(--sector-color);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 14%, var(--sector-soft), transparent 35%),
    #fff;
  box-shadow: var(--shadow);
}

.profile-identity {
  display: flex;
  gap: 22px;
  align-items: center;
}

.profile-logo-shell {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  font-size: 1.25rem;
}

.profile-logo-shell .company-logo { width: 64px; height: 64px; }

.profile-hero h1 {
  margin: 12px 0 0;
  font-size: clamp(2.5rem, 6vw, 4.9rem);
}

.profile-intro {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 24px;
  margin: 28px 0 72px;
}

.profile-story,
.profile-sidebar {
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}

.profile-story h2,
.profile-programmes h2 {
  margin: 0 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.profile-story > p:not(.eyebrow) {
  max-width: 740px;
  color: var(--muted);
  line-height: 1.75;
}

.profile-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.profile-facts h3 {
  margin: 0 0 13px;
  font-size: 0.9rem;
}

.profile-tag-list,
.profile-location-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-tag-list li,
.profile-location-list li {
  padding: 7px 10px;
  border-radius: 99px;
  background: var(--sector-soft, var(--mint));
  color: var(--sector-ink, var(--green));
  font-size: 0.76rem;
  font-weight: 750;
}

.profile-sidebar {
  align-self: start;
  background: var(--green);
  color: #fff;
}

.profile-sidebar .eyebrow { color: var(--lime); }

.profile-programme-count {
  display: block;
  margin-bottom: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  font-weight: 500;
}

.profile-sidebar > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.86rem;
  line-height: 1.6;
}

.secondary-button { margin-top: 24px; background: var(--lime); color: var(--green); }
.secondary-button:hover { background: #ecfa9b; }

.profile-programme-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.profile-programme-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--sector-color);
  border-radius: 12px;
  background: #fff;
}

.profile-programme-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-programme-card h3 {
  margin: 20px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 500;
}

.profile-programme-details {
  min-height: 42px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.profile-error {
  width: min(680px, calc(100% - 48px));
  margin: 12vh auto;
  padding: 44px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

.profile-error h1 { font-size: clamp(2.3rem, 7vw, 4rem); }
.profile-error .button { width: fit-content; margin: 26px auto 0; }

/* --- Subscribe band ------------------------------------------------------ */

.subscribe {
  padding: clamp(56px, 8vw, 96px) clamp(24px, 6vw, 96px);
  color: #fff;
  background:
    radial-gradient(circle at 15% 12%, rgba(223, 243, 122, 0.18), transparent 32%),
    var(--green);
}

.subscribe-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: 1220px;
  margin: auto;
}

.subscribe-copy h2 {
  margin: 0 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.subscribe-copy > p {
  max-width: 440px;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.7;
}

.subscribe-form {
  padding: clamp(22px, 3vw, 30px);
  background: rgba(255, 255, 255, 0.97);
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
  color: var(--ink);
}

.subscribe-form .field { display: block; margin-bottom: 20px; }

.subscribe-form .scope {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.subscribe-form legend {
  padding: 0;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chk {
  display: flex;
  gap: 10px;
  align-items: baseline;
  line-height: 1.5;
  cursor: pointer;
}

.chk input { width: auto; min-height: 0; margin: 0; }

.chk-all {
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--mint);
}

.scope-detail {
  display: grid;
  gap: 18px;
  transition: opacity 0.2s ease;
}

.scope-detail.disabled { opacity: 0.4; pointer-events: none; }

.scope-hint {
  margin: -4px 0 16px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

.scope-label {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scope-optional {
  margin-left: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
  opacity: 0.75;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chips-loading { color: var(--muted); font-size: 0.86rem; }

.chip {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  user-select: none;
}

.chip input { width: auto; min-height: 0; margin: 0; accent-color: var(--green); }
.chip:has(input:checked) { border-color: var(--green); background: var(--green); color: #fff; }

.consent {
  margin: 4px 0 18px;
  font-size: 0.82rem;
  color: var(--muted);
}

.consent a { color: var(--green); font-weight: 700; }

#sub-submit {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

#sub-submit:hover { background: #205a42; }
#sub-submit:disabled { opacity: 0.6; cursor: default; }

.subscribe-msg { min-height: 20px; margin: 14px 0 0; font-size: 0.88rem; }
.subscribe-msg[data-type="success"] { color: #1f6b45; }
.subscribe-msg[data-type="error"] { color: #a02929; }

/* --- Footer / privacy ---------------------------------------------------- */

.site-footer {
  padding: clamp(48px, 6vw, 80px) 24px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.footer-inner { max-width: 760px; margin: auto; color: var(--muted); }

.footer-inner h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.footer-inner p { line-height: 1.7; }
.footer-inner ul { padding-left: 20px; line-height: 1.7; }
.footer-inner li { margin-bottom: 8px; }
.footer-inner a { color: var(--green); font-weight: 700; }

@media (max-width: 900px) {
  .cards,
  .company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs { width: 100%; }
  .discover-builder { grid-template-columns: 1fr; }
  .profile-hero { grid-template-columns: 1fr; align-items: start; }
  .profile-layout { grid-template-columns: 1fr; }
  .subscribe-inner { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .access-entry { grid-template-columns: 1fr; }
  .access-entry button { min-height: 46px; }
  .hero { min-height: 350px; padding-bottom: 58px; }
  .hero-copy { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-mark { width: 104px; border-radius: 22px; }
  .updated { display: none; }
  main { margin-top: -25px; }
  .tabs { width: 100%; }
  .tab { justify-content: center; padding: 11px 9px; font-size: 0.8rem; }
  .toolbar { grid-template-columns: 1fr; margin-bottom: 42px; }
  .section-heading { align-items: start; flex-direction: column; gap: 12px; }
  .cards,
  .company-grid { grid-template-columns: 1fr; }
  .discover-add-row { grid-template-columns: 1fr; }
  .discover-add-row button { min-height: 46px; }
  .company-combobox-row { grid-template-columns: 1fr; }
  .company-combobox-row button { min-height: 46px; }
  .recommendation-header { align-items: start; flex-direction: column; }
  .profile-nav { align-items: start; flex-direction: column; justify-content: center; gap: 6px; }
  .profile-identity { align-items: start; flex-direction: column; }
  .profile-facts { grid-template-columns: 1fr; }
  .profile-programme-list { grid-template-columns: 1fr; }
  .calendar-weekdays,
  .calendar-grid { min-width: 720px; }
  .calendar-shell { overflow-x: auto; }
  .calendar-agenda { min-width: 0; }
  .calendar-agenda-row { grid-template-columns: 60px minmax(0, 1fr); }
  .calendar-kind { grid-column: 2; justify-self: start; }
}

.footer-social { margin-top: 18px; }
.footer-social a { font-weight: 600; }

/* Recommendation cards are ordinary traineeship cards with a "why" line on top,
   so the reason has to read as a label rather than as part of the vacancy. */
.recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.recommendation-grid .card .recommendation-reason {
  margin: 0 0 10px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 900px) { .recommendation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .recommendation-grid { grid-template-columns: 1fr; } }

.profile-programme-history {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.86rem;
}

.site-footer h3 { margin: 26px 0 8px; font-size: 1.02rem; }
.footer-contact { line-height: 1.7; }

/* Landing pages per vakgebied (/vakgebied/<slug>/), generated by
   scripts/build-site.mjs. They are plain server-rendered HTML on purpose — a
   crawler must see the traineeships without running any JavaScript — so they
   need their own layout rather than the app shell's. */
.landing { background: var(--paper); color: var(--ink); }

.landing-inner {
  max-width: 860px;
  margin: auto;
  padding: clamp(28px, 6vw, 72px) 24px 96px;
}

.landing-inner .eyebrow a { color: var(--green); text-decoration: none; }
.landing-inner .eyebrow a:hover { text-decoration: underline; }

.landing-inner h1 {
  margin-bottom: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.landing-inner h2 {
  margin: 48px 0 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 500;
}

.landing-lead {
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}
.landing-lead a { color: var(--green); font-weight: 700; }

.landing-list { margin: 0; padding: 0; list-style: none; }

.landing-list li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}

.landing-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.landing-list a:hover { text-decoration: underline; }

.landing-list strong { color: var(--muted); font-weight: 600; }

/* The status is the reason someone is on this page, so it has to be scannable
   down the left-to-right rag rather than buried in the sentence. */
.status-note {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  background: #eee;
  color: #626262;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  vertical-align: 1px;
}
.landing-list li:has(.status-note:not(:empty)) .status-note { background: #eee; }

.landing-employers, .landing-related {
  max-width: 70ch;
  color: var(--muted);
  line-height: 2;
}
.landing-related a { color: var(--green); font-weight: 700; }

.landing-cta { margin-top: 56px; }

.landing-button {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.status-note.open { background: var(--mint); color: var(--green); }
.status-note.upcoming { background: var(--orange); color: #6f4318; }

/* Links from the homepage footer to the generated /vakgebied/ pages. Without
   these the landing pages are orphans: reachable only via the sitemap, which a
   crawler treats as peripheral, and cut off from the homepage's authority. */
.field-nav { margin: 40px 0 8px; }
.field-nav h3 { margin-bottom: 12px; }
.field-nav p { display: flex; flex-wrap: wrap; gap: 8px; }
.field-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}
.field-nav a:hover { border-color: var(--green); }
.field-nav a span { color: var(--muted); font-size: 0.76rem; font-weight: 700; }

/* Privacy: the full statement, folded away.
   Collapsed rather than shortened — a <details> is still crawled, still counts
   as provided, and the visitor can open exactly the part they care about. What
   it must never become is vaguer; the wall of open text was the problem, not
   the openness. */
.privacy-lead {
  max-width: 66ch;
  margin-bottom: 20px;
  color: var(--muted);
  line-height: 1.7;
}

.privacy-details {
  max-width: 78ch;
  border-top: 1px solid var(--line);
}

.privacy-details details { border-bottom: 1px solid var(--line); }

.privacy-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 2px;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  list-style: none;
}
.privacy-details summary::-webkit-details-marker { display: none; }
.privacy-details summary::after {
  content: "+";
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
}
.privacy-details details[open] summary::after { content: "–"; }
.privacy-details summary:hover { color: var(--green); }

.privacy-details details > *:not(summary) {
  max-width: 68ch;
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.7;
}
.privacy-details details > ul { padding-left: 20px; }
.privacy-details details > ul li { margin-bottom: 10px; }

.privacy-updated {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.8rem;
}

/* "Deze maand" — the way back after browsing a year ahead through intake dates.
   Sits after the arrows and hides itself on the current month (see
   syncTodayButton in app.js), so it never occupies the row for nothing. */
/* Second row, centred under the month name, so the two arrows stay symmetric
   either side of the title. Adding a fourth grid column instead would have
   pushed the month off-centre for the sake of a button that is usually hidden.
   The width/height reset is needed because .calendar-toolbar button forces every
   button in this row to a 44px square. */
.calendar-today {
  grid-column: 2;
  justify-self: center;
  width: auto !important;
  height: auto !important;
  margin-top: -4px;
  padding: 7px 15px !important;
  border: 1px solid var(--line);
  border-radius: 99px !important;
  background: #fff !important;
  color: var(--ink) !important;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}
.calendar-today:hover { border-color: var(--green); color: var(--green); }