/* ============================================================
   IUASR Aanmeldportaal — Shared portal styles
   Design tokens + layout + components
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  --priColor100: #1E1446;
  --priColor102: rgba(30, 20, 70, 0.06);
  --priColor103: #F2F1F4;
  --secColor100: #C8102E;
  --secColor100-hover: #9A0C24;
  --secColor300: #FFD2B0;
  --secColor301: rgba(255, 210, 176, 0.3);
  --borderSubtleColor: rgba(30, 20, 70, 0.09);
  --borderColor: rgba(30, 20, 70, 0.2);
  --blackAltText: #6F6F6F;
  --serif-font: "DM Serif Display", serif;
  --sans-serif-font: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow-card: rgba(30, 20, 70, 0.06) 0px 2px 12px 0px;
  --shadow-card-hover: rgba(30, 20, 70, 0.12) 0px 8px 28px 0px;
  --shadow-header: rgba(30, 20, 70, 0.06) 0px 1px 0px 0px;
  --logo-header-h: 96px;
  --logo-footer-h: 96px;
  --cta-primary-bg: var(--priColor100);
  --cta-primary-txt: var(--priColor103);
  --cta-primary-step: var(--secColor300);
  --cta-primary-desc: rgba(242, 241, 244, 0.78);
  --cta-primary-btn-bg: #FFFFFF;
  --cta-primary-btn-fg: var(--priColor100);
  --cta-primary-btn-bd: #FFFFFF;
}

/* ---------- BASE RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans-serif-font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--priColor100);
  background: var(--priColor103);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--secColor100); text-decoration: none; }
a:hover { color: var(--secColor100-hover); text-decoration: underline; }
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.30);
  border-radius: 2px;
}

/* ---------- HEADER ---------- */
.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--borderSubtleColor);
  box-shadow: var(--shadow-header);
}
.site-header__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header__logo { display: flex; align-items: center; gap: 12px; }
.site-header__logo img {
  height: var(--logo-header-h);
  width: auto;
  display: block;
  transition: height 200ms cubic-bezier(0.2, 0, 0, 1);
}
.site-header__right {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
}
.site-header__right .meta { color: var(--blackAltText); font-weight: 300; }
.site-header__right a.login {
  color: var(--priColor100);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-header__right a.login:hover { color: var(--secColor100); text-decoration: none; }
.site-header__right a.register {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--secColor100);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.site-header__right a.register:hover {
  background: var(--secColor100-hover);
  color: #FFFFFF;
  text-decoration: none;
}

/* ---------- HERO BANNER ---------- */
.hero {
  position: relative;
  background-color: var(--priColor100);
  background-image:
    linear-gradient(115deg, rgba(30,20,70,0.82) 0%, rgba(30,20,70,0.55) 55%, rgba(30,20,70,0.25) 100%),
    url("https://inschrijving.iuasr.nl/wp-content/uploads/2026/05/iuasr-gebouw.jpg");
  background-size: cover;
  background-position: center 35%;
  color: var(--priColor103);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(242,241,244,0) 0%, rgba(242,241,244,0.5) 55%, var(--priColor103) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 130px 32px 170px;
}
.hero__content { max-width: 720px; }
.hero h1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 56px;
  line-height: 62px;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--priColor103);
}
.hero p.lead {
  font-size: 19px;
  line-height: 30px;
  margin: 0;
  color: rgba(242, 241, 244, 0.90);
  font-weight: 300;
  text-wrap: pretty;
  max-width: 580px;
}

/* ---------- MAIN ---------- */
.main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}

/* ---------- SECTIONS ---------- */
.section { margin-top: 80px; }
.section--top {
  margin-top: -32px;
  position: relative;
  z-index: 2;
  padding-top: 32px;
}
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.section--top .section__head { margin-bottom: 36px; }
.section__head h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 32px;
  line-height: 38px;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--priColor100);
}
.section__head .lede {
  margin: 6px 0 0;
  color: var(--blackAltText);
  font-weight: 300;
  font-size: 15px;
  max-width: 460px;
  text-wrap: pretty;
}

/* Landing-pagina: meer ademruimte tussen hero en CTA-sectie */
.home .main { padding-top: 0; }
.home .section--top { margin-top: 48px; }

/* ---------- INTRO ---------- */
.intro { margin-bottom: 48px; max-width: 720px; }
.intro__kicker {
  display: inline-block;
  background: var(--secColor300);
  color: var(--priColor100);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.intro h1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  margin: 0 0 16px;
  color: var(--priColor100);
  letter-spacing: -0.01em;
}
.intro p {
  font-size: 18px;
  line-height: 28px;
  margin: 0;
  color: var(--blackAltText);
  font-weight: 300;
  text-wrap: pretty;
}

/* ---------- CTA CARDS ----------
   2-koloms layout (Aanmelden + Herinschrijven). Primary card licht
   breder via 1.1fr — visueel zwaartepunt op de hoofdactie. */
.cta-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}
.cta-card {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms;
  box-shadow: var(--shadow-card);
  min-height: 280px;
}
.cta-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--borderColor);
}
.cta-card--primary {
  background: var(--cta-primary-bg);
  border-color: var(--cta-primary-bg);
  color: var(--cta-primary-txt);
}
.cta-card--primary:hover { border-color: var(--cta-primary-bg); }

.cta-card__step {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secColor100);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cta-card--primary .cta-card__step { color: var(--cta-primary-step); }
.cta-card__step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--sans-serif-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}
.cta-card h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 28px;
  line-height: 32px;
  margin: 0;
  color: inherit;
  letter-spacing: -0.005em;
}
.cta-card__desc {
  font-size: 15px;
  line-height: 22px;
  margin: 0;
  color: var(--blackAltText);
  font-weight: 400;
  flex: 1;
}
.cta-card--primary .cta-card__desc { color: var(--cta-primary-desc); font-weight: 300; }

.cta-card__bullets {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 20px;
  color: var(--blackAltText);
}
.cta-card--primary .cta-card__bullets { color: var(--cta-primary-desc); }
.cta-card__bullets li { display: flex; gap: 8px; align-items: flex-start; }
.cta-card__bullets li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  margin-top: 8px;
  flex: none;
  opacity: 0.6;
}

/* ---------- BUTTONS ---------- */
.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 41px;
  padding: 8px 16px;
  border: 2px solid transparent;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--sans-serif-font);
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms, box-shadow 150ms;
  gap: 8px;
  align-self: flex-start;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.30); }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--secColor100); color: #F2F1F4; border-color: var(--secColor100); }
.btn--primary:hover { background: var(--secColor100-hover); border-color: var(--secColor100-hover); color: #F2F1F4; }
.btn--secondary { background: transparent; color: var(--secColor100); border-color: var(--secColor100); }
.btn--secondary:hover { background: rgba(200, 16, 46, 0.06); color: var(--secColor100-hover); border-color: var(--secColor100-hover); }
.btn--inverse { background: var(--cta-primary-btn-bg); color: var(--cta-primary-btn-fg); border-color: var(--cta-primary-btn-bd); }
.btn--inverse:hover { filter: brightness(0.94); }
.btn .arrow { display: inline-block; transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- HELP ROW ---------- */
.help-row {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.help-row__icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--secColor301);
  color: var(--priColor100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.help-row__text { flex: 1; min-width: 240px; font-size: 15px; line-height: 22px; }
.help-row__text strong { font-weight: 500; color: var(--priColor100); }
.help-row__text .muted { color: var(--blackAltText); font-weight: 300; }
.help-row__links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.help-row__links a {
  color: var(--priColor100);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.help-row__links a:hover {
  color: var(--secColor100);
  border-bottom-color: var(--secColor100);
  text-decoration: none;
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--priColor100);
  color: rgba(242, 241, 244, 0.75);
  margin-top: 64px;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
}
.site-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 32px 36px;
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 36px;
}
.site-footer__brand img {
  height: var(--logo-footer-h);
  width: auto;
  display: block;
  margin-bottom: 16px;
  transition: height 200ms cubic-bezier(0.2,0,0,1);
}
.site-footer__brand p { margin: 0 0 6px; }
.site-footer__brand .addr { color: rgba(242, 241, 244, 0.65); }
.site-footer__brand .tagline {
  font-family: var(--serif-font);
  font-style: italic;
  color: var(--secColor300);
  font-size: 14.5px;
  margin: 14px 0 0;
  max-width: 280px;
  line-height: 22px;
}
.site-footer h4 {
  font-family: var(--sans-serif-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secColor300);
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer a {
  color: rgba(242, 241, 244, 0.85);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.site-footer a:hover { color: #FFFFFF; border-bottom-color: var(--secColor300); text-decoration: none; }
.site-footer__socials {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.site-footer__socials a {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(242,241,244,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(242,241,244,0.85);
  font-size: 14px;
}
.site-footer__socials a:hover {
  background: var(--secColor300);
  color: var(--priColor100);
  border-color: var(--secColor300);
}
.site-footer__bottom {
  border-top: 1px solid rgba(242, 241, 244, 0.10);
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 32px 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(242, 241, 244, 0.55);
}

/* ---------- ERROR PAGES (404, geen toegang) ---------- */
.main--error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 48px 32px;
}
.error-page { max-width: 480px; width: 100%; }
.error-page__code {
  display: block;
  font-family: var(--serif-font);
  font-size: 120px;
  line-height: 1;
  color: var(--priColor100);
  opacity: 0.08;
  margin-bottom: -16px;
  letter-spacing: -0.04em;
  user-select: none;
}
.error-page h1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  margin: 0 0 12px;
  color: var(--priColor100);
}
.error-page > p {
  font-size: 16px;
  line-height: 24px;
  color: var(--blackAltText);
  font-weight: 300;
  margin: 0 0 32px;
}
.error-page__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.error-page__contact {
  font-size: 13.5px;
  color: var(--blackAltText);
  font-weight: 300;
  margin: 0;
}

/* ---------- STEPS BAR ---------- */
.steps-bar {
  background: #FFFFFF;
  border-bottom: 1px solid var(--borderSubtleColor);
  width: 100%;
}
.steps-bar__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
/* ============================================================
   AUTH FLOW PAGES — /verify-login/ en /account-bevestigen/
   Gerenderd via template_redirect, gebruikt site header + footer.
   ============================================================ */
.main--auth-flow {
  flex: 1 0 auto; width: 100%;
  max-width: 480px; margin: 0 auto; padding: 56px 24px 80px;
  display: flex; align-items: flex-start; justify-content: center;
}
.auth-flow-card {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 12px;
  padding: 36px 36px 30px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(30, 20, 70, 0.06);
  text-align: center;
}
.auth-flow-card h1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  color: var(--priColor100);
  margin: 0 0 10px;
}
.auth-flow-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--blackAltText);
  margin: 0 0 22px;
}
.auth-flow-card p strong { color: var(--priColor100); font-weight: 500; }

.auth-flow-notice {
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  margin: 0 0 16px;
  text-align: left;
  border: 1px solid transparent;
}
.auth-flow-notice--error {
  background: #FBE9EB;
  border-color: #F2C9CF;
  color: #9A0C24;
}
.auth-flow-notice--success {
  background: #F1FAF5;
  border-color: #C6E3D2;
  color: #156A42;
}
.auth-flow-notice--info {
  background: #ECEAF2;
  border-color: rgba(30,20,70,0.10);
  color: var(--priColor100);
}

.auth-flow-form { margin: 0 0 12px; }
.auth-flow-form--inline { margin: 0; }

.auth-flow-otp-input {
  display: block; width: 100%;
  padding: 14px 16px;
  font-size: 26px;
  letter-spacing: 0.30em;
  text-align: center;
  font-family: var(--serif-font);
  border: 2px solid rgba(30, 20, 70, 0.15);
  border-radius: 6px;
  color: var(--priColor100);
  margin: 0 0 14px;
  box-sizing: border-box;
  background: #FFFFFF;
}
.auth-flow-otp-input:focus {
  outline: none;
  border-color: var(--priColor100);
}

/* Subtle text-link (gebruikt voor "Stuur opnieuw") — NIET zoals primary button */
.auth-flow-link {
  background: transparent;
  border: 0;
  color: var(--priColor100);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px;
  margin: 4px 0 0;
  width: 100%;
  text-align: center;
  font-family: var(--sans-serif-font);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-flow-link:hover { color: var(--secColor100); }

.auth-flow-card__actions {
  display: flex; gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.auth-flow-card__footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--borderSubtleColor);
  text-align: center;
}
.auth-flow-card__footer a {
  color: var(--blackAltText);
  font-size: 13px;
  text-decoration: none;
}
.auth-flow-card__footer a:hover { color: var(--priColor100); }

/* Verify result icon (account-bevestigen) */
.auth-flow-mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 28px; line-height: 1;
  margin: 0 auto 12px;
}
.auth-flow-mark--ok   { background: #156A42; }
.auth-flow-mark--err  { background: var(--secColor100); }
.auth-flow-mark--info { background: var(--priColor100); }

/* Steps-bar (op /aanmelden/) — scoped onder .steps zodat .stepper niet wordt vervuild */
.steps .step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 0;
  font-size: 13.5px;
  color: var(--blackAltText);
  font-weight: 400;
  position: relative;
}
.steps .step + .step {
  margin-left: 8px;
  padding-left: 24px;
}
.steps .step + .step::before {
  content: '›';
  position: absolute;
  left: 6px;
  color: var(--borderColor);
  font-size: 18px;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}
.steps .step--active { color: var(--priColor100); font-weight: 500; }
.steps .step--done   { color: #156A42; }
.steps .step__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--priColor102);
  color: var(--blackAltText);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background 200ms, color 200ms;
}
.steps .step--active .step__num { background: var(--priColor100); color: #FFFFFF; }
.steps .step--done .step__num   { background: #156A42; color: #FFFFFF; }

/* ---------- AANMELD — PAGE INTRO ---------- */
.main--aanmelden { padding-top: 40px; }
.aanmeld-intro {
  max-width: 680px;
  margin-bottom: 44px;
}
.aanmeld-intro h1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 38px;
  line-height: 46px;
  margin: 0 0 12px;
  color: var(--priColor100);
  letter-spacing: -0.01em;
}
.aanmeld-intro p {
  font-size: 16px;
  line-height: 24px;
  color: var(--blackAltText);
  font-weight: 300;
  margin: 0;
}
.aanmeld-intro__nav {
  margin-top: 12px !important;
  font-size: 13.5px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.aanmeld-intro__nav a {
  color: var(--priColor100);
  text-decoration: none;
  font-weight: 400;
}
.aanmeld-intro__nav a:hover { text-decoration: underline; }

/* ---------- AANMELD — NOTICE (bestaande student) ---------- */
.aanmeld-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 210, 176, 0.35);
  border: 1px solid rgba(255, 210, 176, 0.9);
  border-radius: 6px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 21px;
  color: var(--priColor100);
  margin-bottom: 32px;
}
.aanmeld-notice svg { flex: none; margin-top: 2px; color: #8C4513; }
.aanmeld-notice strong { font-weight: 500; }

/* ---------- PROGRAMME SECTION ---------- */
.prog-section { margin-bottom: 52px; }
.prog-section__head {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prog-section__head h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 28px;
  line-height: 34px;
  margin: 0;
  color: var(--priColor100);
}
.prog-section__note {
  font-size: 13.5px;
  color: var(--blackAltText);
  font-weight: 300;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ---------- PROGRAMME GRID ---------- */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
/* HBO-opleidingen: vaste 2 kolommen op desktop (PABO+BIT / PM+MGV). */
.prog-grid--hbo {
  grid-template-columns: repeat(2, 1fr);
}
.prog-grid--courses {
  grid-template-columns: repeat(3, 1fr);
}
/* Bijzondere toelating: één kaart, beperkte breedte, gecentreerd. */
.prog-grid--single {
  grid-template-columns: minmax(0, 480px);
  justify-content: start;
}
.prog-section__sub {
  font-size: 14px;
  color: var(--blackAltText);
  font-weight: 300;
  margin: 4px 0 0;
  line-height: 1.5;
}
.prog-section--bijzonder {
  padding: 24px 0 12px;
  border-top: 1px solid var(--borderSubtleColor);
}
.prog-section--bijzonder .prog-section__head h2 {
  font-size: 18px;
  font-weight: 600;
}

/* ---------- PROGRAMME CARD ---------- */
.prog-card {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 150ms, border-color 150ms, transform 150ms;
}
.prog-card:hover:not(.prog-card--inactive) {
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(30, 20, 70, 0.18);
  transform: translateY(-2px);
}
.prog-card--featured {
  border-color: var(--priColor100);
  border-width: 2px;
}
.prog-card--inactive { opacity: 0.5; cursor: default; }

.prog-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.prog-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--secColor300);
  color: var(--priColor100);
  letter-spacing: 0.01em;
}
.prog-card h3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  margin: 0;
  color: var(--priColor100);
}
.prog-card__institute {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--priColor100);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 2px 0 6px;
}
.prog-card__type {
  font-size: 12px;
  color: var(--secColor100);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.02em;
}
.prog-card__desc {
  font-size: 14px;
  line-height: 21px;
  color: var(--blackAltText);
  font-weight: 300;
  margin: 0;
  flex: 1;
}
.prog-card .btn { margin-top: 6px; }
.prog-card__unavailable {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--blackAltText);
  font-style: italic;
  margin-top: 6px;
}

/* ---------- HEADER — ingelogde gebruiker ---------- */
.user-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
.user-chip__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 6px;
  transition: background 120ms;
}
.user-chip__link:hover {
  background: var(--priColor102);
  text-decoration: none;
}
.user-chip__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.30);
}
.user-chip__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--priColor100);
  color: var(--secColor300);
  font-family: var(--serif-font);
  font-size: 14px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.user-chip__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--priColor100);
}
.user-chip__logout {
  display: flex;
  align-items: center;
  color: var(--blackAltText);
  font-size: 13px;
  padding: 5px 0 5px 14px;
  border-left: 1px solid var(--borderSubtleColor);
  transition: color 150ms;
}
.user-chip__logout:hover { color: var(--secColor100); text-decoration: none; }

/* ---------- AANMELDFORMULIER — context-bar + stepper + form-card ---------- */
.context {
  background: #FFFFFF;
  border-bottom: 1px solid var(--borderSubtleColor);
}
.context__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.context__back {
  color: var(--priColor100);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.context__back:hover { color: var(--secColor100); text-decoration: none; }
.context__title {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 17px;
  color: var(--priColor100);
  text-align: center;
}
.context__title small {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 12px;
  color: var(--blackAltText);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.context__progress { font-size: 12.5px; color: var(--blackAltText); font-weight: 400; }
.context__progress b { color: var(--priColor100); font-weight: 500; }

.main--formulier {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 32px 56px;
}

/* Stepper — desktop */
.stepper {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stepper .step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--blackAltText);
  flex: 1;
  min-width: 0;
}
.stepper .step__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--priColor102);
  color: var(--blackAltText);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 13px;
  flex: none;
}
.stepper .step__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper .step--current .step__num { background: var(--priColor100); color: var(--secColor300); }
.stepper .step--current .step__label { color: var(--priColor100); font-weight: 500; }
.stepper .step--done .step__num { background: #156A42; color: #FFFFFF; }
.stepper .step--done .step__label { color: var(--priColor100); }
.stepper .step__bar {
  flex: 0 1 24px;
  height: 1px;
  background: var(--borderSubtleColor);
  min-width: 12px;
}
.stepper .step--done + .step__bar { background: #156A42; }

/* Stepper — compact (tablet / narrow desktop): toon labels alleen voor
   current step, anders alleen nummer. Voorkomt cramped layout bij 5 stappen. */
@media (min-width: 641px) and (max-width: 1024px) {
  .stepper { padding: 14px 18px; gap: 6px; }
  .stepper .step { gap: 6px; flex: 0 1 auto; }
  .stepper .step__label { display: none; }
  .stepper .step--current { flex: 1 1 auto; }
  .stepper .step--current .step__label { display: inline; }
  .stepper .step__bar { flex: 1 1 12px; min-width: 8px; }
}

/* Stepper — mobile */
.stepper-mobile { display: none; }

/* Form card */
.form-card {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 32px 28px;
}
.form-card__required-note {
  font-size: 12px;
  color: var(--blackAltText);
  font-weight: 300;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borderSubtleColor);
}
.form-card__required-note .req {
  color: var(--secColor100);
  font-weight: 500;
}
/* Op de Controleer-stap geen "Velden met * zijn verplicht" tonen. */
.form-card--reviewing .form-card__required-note { display: none; }

/* Foutkaart / blokkade-melding (bv. al-herinschreven). */
.form-card__error h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 12px;
}
.form-card__error p { margin: 0 0 12px; line-height: 1.55; }
.form-card__meta {
  list-style: none;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--blackBgSubtle, #F5F4F8);
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  font-size: 14px;
}
.form-card__meta li { margin: 0 0 6px; }
.form-card__meta li:last-child { margin-bottom: 0; }

/* ---------- GRAVITY FORMS — volledig custom (gform_disable_css = true) ---------- */

/* Wrapper chrome */
.gform_wrapper { margin: 0; padding: 0; max-width: 100% !important; }
.gform_wrapper .gform_heading { display: none; }
.gform_wrapper .gform_body { margin: 0; }

/* Fields list — grid voor half/full width velden */
.gform_wrapper .gform_fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}
.gform_wrapper .gfield { margin: 0; grid-column: 1 / -1; min-width: 0; }
.gform_wrapper .gfield.iuasr-half { grid-column: span 1; }

/* Nationaliteitveld: standaard 100% breed (erft grid-column 1/-1 van .gfield).
   JS (aanmelden-stepper.js) voegt iuasr-half toe aan iuasr-nationality-lead
   wanneer iuasr-nationality-other zichtbaar is. GF gebruikt inline display:none
   voor conditional logic — niet de gfield_visibility_hidden class. */
.gform_wrapper .gfield.iuasr-nationality-other { grid-column: span 1; }

@media (max-width: 580px) {
  .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
  .gform_wrapper .gfield.iuasr-half { grid-column: 1 / -1; }
  .gform_wrapper .gfield.iuasr-nationality-other { grid-column: 1 / -1; }
}

/* Labels */
.gform_wrapper .gfield_label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--priColor100);
  margin-bottom: 6px;
}
.gform_wrapper .gfield_required { color: var(--secColor100); margin-left: 2px; }
.gform_wrapper .gfield_description {
  font-size: 13px;
  color: var(--blackAltText);
  margin: 4px 0 4px;
  line-height: 19px;
}

/* Text inputs / email / tel / number / url — design tokens 1:1 */
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container input[type="date"],
.gform_wrapper .ginput_container input[type="password"],
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: var(--sans-serif-font);
  font-size: 15px;
  font-weight: 400;
  color: var(--priColor100);
  background: #FFFFFF;
  border: 1px solid var(--borderColor);
  border-radius: 4px;
  line-height: 22px;
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
  -webkit-appearance: none;
  appearance: none;
}
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container input[type="date"],
.gform_wrapper .ginput_container input[type="password"],
.gform_wrapper .ginput_container select {
  height: 41px;
}
.gform_wrapper .ginput_container input::placeholder,
.gform_wrapper .ginput_container textarea::placeholder {
  color: rgba(30, 20, 70, 0.30);
}
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container select:focus,
.gform_wrapper .ginput_container textarea:focus {
  outline: none;
  border-color: var(--secColor100);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.20);
}
.gform_wrapper .ginput_container input[readonly],
.gform_wrapper .ginput_container input[disabled] {
  background: var(--priColor102);
  color: var(--blackAltText);
  cursor: not-allowed;
}
.gform_wrapper .ginput_container textarea {
  min-height: 120px;
  padding: 10px 12px;
  resize: vertical;
}

/* Select custom arrow */
.gform_wrapper .ginput_container_select { position: relative; }
.gform_wrapper .ginput_container_select::after {
  content: "";
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231E1446' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.gform_wrapper .ginput_container_select select { padding-right: 36px; }
.gform_wrapper .ginput_container_select select option:disabled { color: var(--blackAltText); }

/* Section breaks */
.gform_wrapper .gfield--type-section {
  margin-top: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borderSubtleColor);
}
.gform_wrapper .gsection_title {
  font-family: var(--serif-font);
  font-size: 20px;
  font-weight: 400;
  color: var(--priColor100);
  margin: 0;
}
.gform_wrapper .gsection_description {
  font-size: 13px;
  color: var(--blackAltText);
  margin: 4px 0 0;
}

/* GF 2.7+ rendert radio-groepen + date-dropdowns in <fieldset>.
   Browser-default fieldset heeft een border + padding rond de legend
   ("Geslacht (Vereist)"). Onderdrukken voor schone IUASR-look. */
.gform_wrapper fieldset.gfield,
.gform_wrapper .gfield fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  min-inline-size: 0;
}
.gform_wrapper fieldset.gfield > legend,
.gform_wrapper .gfield fieldset > legend {
  padding: 0;
  margin-bottom: 6px;
  float: none;
  width: auto;
}

/* Radio buttons als CARDS (design: .radio) */
.gform_wrapper .gfield_radio {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gform_wrapper .gfield_radio .gchoice,
.gform_wrapper .gfield_radio li {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 6px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 150ms;
  font-size: 14px;
  line-height: 20px;
  color: var(--priColor100);
}
.gform_wrapper .gfield_radio .gchoice:hover,
.gform_wrapper .gfield_radio li:hover,
.gform_wrapper .gfield_radio .gchoice:has(input[type="radio"]:checked),
.gform_wrapper .gfield_radio li:has(input[type="radio"]:checked) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.gform_wrapper .gfield_radio input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  accent-color: var(--secColor100);
  cursor: pointer;
  flex: none;
}
.gform_wrapper .gfield_radio label {
  font-size: 14px;
  line-height: 20px;
  color: var(--priColor100);
  cursor: pointer;
  margin: 0;
  font-weight: 400;
  flex: 1;
}

/* Horizontale radio rij — toevoegen met cssClass="iuasr-radio-row" */
.gform_wrapper .gfield.iuasr-radio-row .gfield_radio {
  flex-direction: row;
  flex-wrap: wrap;
}
.gform_wrapper .gfield.iuasr-radio-row .gfield_radio .gchoice,
.gform_wrapper .gfield.iuasr-radio-row .gfield_radio li {
  flex: 1 1 auto;
  min-width: 0;
}

/* Checkboxes — compact lijst (akkoordverklaring) */
.gform_wrapper .gfield_checkbox {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_checkbox li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.gform_wrapper .gfield_checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 3px 0 0;
  accent-color: var(--secColor100);
  cursor: pointer;
}
.gform_wrapper .gfield_checkbox label {
  font-size: 13.5px;
  line-height: 20px;
  color: var(--priColor100);
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}

/* Consent-veld — geen omlijnd blok, gewone checkbox-lijst */
.gform_wrapper .gfield.iuasr-consent .ginput_container_checkbox {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Radio-CARDS met titel + beschrijving (Betaalwijze).
   Voeg cssClass="iuasr-radio-cards" toe op het GF radio veld. Gebruik
   <b>Title</b><br><small>Description</small> in elk choice-text veld. */
.gform_wrapper .gfield.iuasr-radio-cards .gfield_radio {
  flex-direction: column;
}
.gform_wrapper .gfield.iuasr-radio-cards .gfield_radio .gchoice,
.gform_wrapper .gfield.iuasr-radio-cards .gfield_radio li {
  align-items: flex-start;
  padding: 6px 0;
}
/* Choice labels (binnen .gchoice / li) → flex column met title + description.
   GEBRUIK NIET op de field-label zelf — anders wrapt de * naar nieuwe regel. */
.gform_wrapper .gfield.iuasr-radio-cards .gchoice label,
.gform_wrapper .gfield.iuasr-radio-cards .gfield_radio li label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gform_wrapper .gfield.iuasr-radio-cards .gchoice label b,
.gform_wrapper .gfield.iuasr-radio-cards .gfield_radio li label b {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--priColor100);
}
.gform_wrapper .gfield.iuasr-radio-cards .gchoice label small,
.gform_wrapper .gfield.iuasr-radio-cards .gfield_radio li label small {
  font-size: 12.5px;
  color: var(--blackAltText);
  font-weight: 300;
  line-height: 1.55;
}

/* Name field complex layout */
.gform_wrapper .ginput_complex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gform_wrapper .ginput_complex .name_first,
.gform_wrapper .ginput_complex .name_last { display: flex; flex-direction: column; gap: 4px; }
.gform_wrapper .ginput_complex label { font-size: 12px; color: var(--blackAltText); margin: 0; }

/* File upload */
.gform_wrapper .ginput_container_fileupload { display: flex; flex-direction: column; gap: 6px; }
.gform_wrapper .ginput_container_fileupload input[type="file"] {
  font-size: 14px;
  color: var(--priColor100);
}
.gform_wrapper .gfield_fileupload_rules,
.gform_wrapper .gfield_fileupload_markup { font-size: 12px; color: var(--blackAltText); }

/* Error states */
.gform_wrapper .gfield_error .gfield_label { color: var(--secColor100); }
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea { border-color: var(--secColor100); }
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  color: var(--secColor100);
  font-size: 13px;
  margin: 5px 0 0;
  line-height: 18px;
}
.gform_wrapper .validation_error,
.gform_wrapper .gform_submission_error {
  color: var(--secColor100);
  font-size: 12.5px;
  font-weight: 500;
  margin: 0 0 14px;
  line-height: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  outline: none !important;
  box-shadow: none !important;
}
.gform_wrapper .validation_error h2,
.gform_wrapper .gform_submission_error h2 {
  font-family: var(--sans-serif-font);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 18px;
  margin: 0;
  color: var(--secColor100);
  display: inline;
}
.gform_wrapper .validation_error::before,
.gform_wrapper .gform_submission_error::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center;
}
.gform_wrapper .validation_error:focus,
.gform_wrapper .gform_submission_error:focus { outline: none !important; }

/* Final-step submit footer (matched met multi-step page footer hieronder) */
.gform_wrapper .gform_footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--borderSubtleColor);
}

/* Honeypot verbergen */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gf_invisible { display: none !important; visibility: hidden !important; }

/* GF hidden-fields: ook in admin-preview verbergen.
   GF toont admins normaal "Dit veld is verborgen..." als waarschuwing;
   voor IUASR is dat niet nodig (de slug-prefill is bedoeld onzichtbaar). */
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gfield--type-section.gfield_visibility_hidden { display: none !important; }

/* Geboortedatum — 3 dropdowns naast elkaar.
   Werkt voor elke GF-versie / -markup variant (.clear-multi wrapper,
   .gform-grid-row wrapper, of directe selects). */
.gform_wrapper .gfield--type-date .ginput_container,
.gform_wrapper .gfield--type-date .ginput_container .clear-multi,
.gform_wrapper .gfield--type-date .ginput_container .gform-grid-row,
.gform_wrapper .ginput_container_date,
.gform_wrapper .ginput_container_date .clear-multi {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.gform_wrapper .gfield--type-date .ginput_container > *,
.gform_wrapper .gfield--type-date .ginput_container .clear-multi > *,
.gform_wrapper .gfield--type-date .ginput_container .gform-grid-row > *,
.gform_wrapper .ginput_container_date > div,
.gform_wrapper .ginput_container_date .clear-multi > * {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
}
.gform_wrapper .gfield--type-date select,
.gform_wrapper .ginput_container_date select {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  border: 0 !important;
  border-bottom: 1px solid var(--borderColor) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
}
/* Verberg de per-select labels (Dag/Maand/Jaar) maar laat ze in DOM voor screenreaders */
.gform_wrapper .gfield--type-date .ginput_container label,
.gform_wrapper .ginput_container_date label {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Upload CARD style (design: .upload) — compact horizontale kaart.
   Het GF label fungeert als kop, de .ginput_container_fileupload is de kaart. */
.gform_wrapper .gfield--type-fileupload {
  background: #FFFFFF;
  border: 1.5px dashed var(--borderColor);
  border-radius: 6px;
  padding: 14px 16px;
  transition: border-color 150ms, background 150ms;
}
.gform_wrapper .gfield--type-fileupload:hover {
  border-color: var(--priColor100);
  background: var(--priColor102);
}
.gform_wrapper .gfield--type-fileupload .gfield_label {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gform_wrapper .gfield--type-fileupload .gfield_label::before {
  content: "";
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--priColor102) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231E1446' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") no-repeat center;
  background-size: 18px 18px;
  flex: none;
}
.gform_wrapper .gfield--type-fileupload .gfield_description {
  font-size: 12px;
  color: var(--blackAltText);
  margin: 6px 0 8px;
  font-weight: 300;
  text-align: center;
}
.gform_wrapper .gfield--type-fileupload .ginput_container_fileupload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-left: 0;
}
.gform_wrapper .gfield--type-fileupload input[type="file"] {
  flex: 1;
  font-size: 13px;
  color: var(--blackAltText);
}
/* Native file input button — minimal */
.gform_wrapper .gfield--type-fileupload input[type="file"]::file-selector-button,
.gform_wrapper .gfield--type-fileupload input[type="file"]::-webkit-file-upload-button {
  background: transparent;
  color: var(--secColor100);
  border: 2px solid var(--secColor100);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--sans-serif-font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 12px;
  transition: background 150ms, color 150ms;
}
.gform_wrapper .gfield--type-fileupload input[type="file"]::file-selector-button:hover,
.gform_wrapper .gfield--type-fileupload input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--secColor100);
  color: #FFFFFF;
}
.gform_wrapper .gfield--type-fileupload .gfield_fileupload_rules {
  font-size: 11.5px;
  color: var(--blackAltText);
  margin: 4px 0 0;
  text-align: center;
}

/* GF Orbital CSS voegt een groene vink toe bij bestandsselectie.
   Onderdruk die en gebruik onze eigen icoon-stijl altijd. */
.gform_wrapper .gfield--type-fileupload .gfield_label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231E1446' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") !important;
  background-color: var(--priColor102) !important;
}

/* Fileupload ERROR-staat — rode card + kruis-icoon + helder foutbericht.
   GF voegt .gfield_error toe op het .gfield element bij validatiefout. */
.gform_wrapper .gfield.gfield_error.gfield--type-fileupload {
  border-color: var(--secColor100) !important;
  background: rgba(200, 16, 46, 0.04) !important;
}
.gform_wrapper .gfield.gfield_error.gfield--type-fileupload .gfield_label {
  color: var(--secColor100) !important;
}
.gform_wrapper .gfield.gfield_error.gfield--type-fileupload .gfield_label::before {
  background-color: rgba(200, 16, 46, 0.12) !important;
  /* Kruis-icoon (X) in crimson */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
}
/* Foutmelding: plain rode tekst, geen achtergrond of border */
.gform_wrapper .gfield.gfield_error.gfield--type-fileupload .gfield_validation_message,
.gform_wrapper .gfield.gfield_error.gfield--type-fileupload .validation_message {
  color: var(--secColor100) !important;
  font-size: 13px !important;
  font-weight: 500;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Drag-and-drop fallback (als multipleFiles=true) — zelfde card stijl */
.gform_wrapper .gform_fileupload_multifile { width: 100%; }
.gform_wrapper .gform_drop_area {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}
.gform_wrapper .gform_drop_instructions {
  font-size: 12.5px;
  color: var(--blackAltText);
  flex: 1;
}
.gform_wrapper .gform_button_select_files {
  background: transparent;
  color: var(--secColor100);
  border: 2px solid var(--secColor100);
  border-radius: 4px;
  padding: 6px 14px;
  font-family: var(--sans-serif-font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.gform_wrapper .gform_button_select_files:hover {
  background: var(--secColor100);
  color: #FFFFFF;
}

/* Uploaded state — groene rand + bestand info + delete knop (design: .upload--done) */
.gform_wrapper .gfield--type-fileupload:has(.ginput_preview),
.gform_wrapper .gfield--type-fileupload.has-upload {
  border-style: solid;
  border-color: #156A42;
  background: #F1FAF5;
}
.gform_wrapper .gfield--type-fileupload:has(.ginput_preview) .gfield_label::before {
  background-color: #DFF1E7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23156A42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.gform_wrapper .gform_preview_list,
.gform_wrapper .ginput_preview_list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.gform_wrapper .ginput_preview,
.gform_wrapper .gform_preview_list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--priColor100);
  padding: 0;
}
.gform_wrapper .ginput_preview b,
.gform_wrapper .gform_preview_list b { font-weight: 500; }
.gform_wrapper .delete_file_button,
.gform_wrapper .gform_delete_file {
  margin-left: auto;
  color: var(--blackAltText);
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 150ms, color 150ms;
}
.gform_wrapper .delete_file_button:hover,
.gform_wrapper .gform_delete_file:hover {
  background: #FBE9EB;
  color: var(--secColor100);
}

/* GF's eigen step-indicator is uitgeschakeld (pagination.type=none) — hide voor safety */
.gform_wrapper .gf_page_steps,
.gform_wrapper .gf_progressbar_wrapper { display: none !important; }

/* GF multi-step — Volgende/Terug knoppen per pagina (design .action-row) */
.gform_wrapper .gform_page_footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--borderSubtleColor);
}
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button,
.gform_wrapper .gform_button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  min-height: 41px;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: var(--sans-serif-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background 150ms, color 150ms, border-color 150ms, box-shadow 150ms;
}
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_button {
  background: var(--secColor100);
  color: #F2F1F4;
  border-color: var(--secColor100);
  margin-left: auto;
}
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_button:hover {
  background: var(--secColor100-hover);
  border-color: var(--secColor100-hover);
  color: #F2F1F4;
}
.gform_wrapper .gform_previous_button {
  background: transparent;
  color: var(--priColor100);
  border-color: var(--borderColor);
}
.gform_wrapper .gform_previous_button:hover {
  border-color: var(--priColor100);
  background: var(--priColor102);
}
.gform_wrapper .gform_next_button:focus-visible,
.gform_wrapper .gform_previous_button:focus-visible,
.gform_wrapper .gform_button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.30);
}

/* "Andere opleiding kiezen" — injected via JS op stap 1 */
.gform_wrapper .gform_page_footer.iuasr-footer-with-back {
  /* Stap 1 heeft geen Vorige-knop, dus de back-link neemt die rol over */
  justify-content: flex-start;
}
.iuasr-back-to-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--priColor100);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 150ms, border-color 150ms;
}
.iuasr-back-to-choice:hover {
  background: var(--priColor102);
  border-color: var(--borderSubtleColor);
  color: var(--priColor100);
}
.iuasr-back-to-choice svg { display: inline-block; }

/* ============================================================
   Review — Intake-afspraak card (rijker design, consistent met IUASR)
   ============================================================ */
.review-intake-card {
  display: flex;
  gap: 18px;
  background: #F1FAF5;
  border: 1px solid #C6E3D2;
  border-left: 4px solid #156A42;
  border-radius: 8px;
  padding: 20px 22px;
  margin: 22px 0;
  box-shadow: 0 1px 2px rgba(21, 106, 66, 0.04);
}
.review-intake-card__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #156A42;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.review-intake-card__body { flex: 1; min-width: 0; }
.review-intake-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}
.review-intake-card__head h3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 19px;
  line-height: 24px;
  margin: 0;
  color: #0F4B2E;
}
.review-intake-card__when {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--priColor100);
  margin: 0 0 12px;
  line-height: 1.45;
}
.review-intake-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 13.5px;
}
.review-intake-card__meta-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--priColor100);
}
.review-intake-card__meta-row > i {
  color: #156A42;
  font-size: 13px;
  margin-top: 3px;
  flex: none;
  width: 16px;
  text-align: center;
}
.review-intake-card__meta-row dt {
  display: none;
}
.review-intake-card__meta-row dd {
  margin: 0;
  line-height: 1.4;
}
.review-intake-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.review-intake-card__actions .btn--sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.review-intake-card__actions .btn--primary {
  background: #156A42;
  color: #FFFFFF !important;
  border: 1px solid #156A42;
}
.review-intake-card__actions .btn--primary:hover {
  background: #0F4B2E;
  border-color: #0F4B2E;
  color: #FFFFFF !important;
}
.review-intake-card__actions .btn--secondary {
  background: transparent;
  color: #156A42 !important;
  border: 1px solid #C6E3D2;
  cursor: pointer;
  font-family: inherit;
}
.review-intake-card__actions .btn--secondary:hover {
  background: rgba(21, 106, 66, 0.08);
  color: #0F4B2E !important;
}

@media (max-width: 600px) {
  .review-intake-card {
    flex-direction: column;
    gap: 14px;
    padding: 18px;
  }
  .review-intake-card__actions .btn--sm { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   Mijn afspraak — intake bekijken en verzetten
   Design: Designs/pages/intake-verzetten.html (3-koloms Calendly-stijl)
   ============================================================ */
.main--mijn-afspraak { padding: 56px 0 96px; }
.mijn-afspraak-page  { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* Alle directe grid-kinderen mogen krimpen — voorkomt overflow in buurkolom */
.appt-card > * { min-width: 0; }

/* Pagina-intro */
.page__intro { margin: 0 0 22px; }
.page__intro h1 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 34px; line-height: 40px; margin: 0 0 6px;
  letter-spacing: -0.005em; color: var(--priColor100);
}
.page__intro p { margin: 0; color: var(--blackAltText); font-size: 15px; line-height: 1.5; }

/* Kleine knop-variant */
.btn--sm { font-size: 13px !important; min-height: 34px !important; padding: 5px 14px !important; }

/* ---- 3-koloms hoofdkaart ---- */
.appt-card {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 10px;
  box-shadow: rgba(30, 20, 70, 0.06) 0px 2px 12px 0px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 300px 1fr 260px;
  min-height: 540px;
}
.appt-card--simple { grid-template-columns: 1fr; min-height: 0; }

/* ---- Linkerpaneel ---- */
.appt-info {
  border-right: 1px solid var(--borderSubtleColor);
  padding: 28px 24px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.appt-info__kicker {
  font-family: var(--serif-font); font-size: 12px;
  color: var(--secColor100); letter-spacing: 0.10em;
  text-transform: uppercase; margin: 0;
}
.appt-info h2 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 20px; line-height: 26px;
  margin: -4px 0 0; letter-spacing: -0.005em; color: var(--priColor100);
}
.appt-info__with {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--borderSubtleColor);
}
.appt-info__with .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--priColor100); color: var(--secColor300);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif-font); font-size: 14px; flex: none;
}
.appt-info__with .who { font-size: 13.5px; }
.appt-info__with .who b { font-weight: 500; }
.appt-info__with .who small { display: block; color: var(--blackAltText); font-size: 12px; font-weight: 300; }
.appt-info__facts { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.appt-info__facts .row { display: flex; gap: 10px; align-items: flex-start; }
.appt-info__facts .row .ico {
  width: 16px; flex: none; color: var(--priColor100); opacity: 0.7;
  margin-top: 2px; font-size: 14px; text-align: center;
}
.appt-info__facts .row b { font-weight: 500; display: block; }
.appt-info__facts .row small { display: block; color: var(--blackAltText); font-size: 12px; font-weight: 300; margin-top: 2px; }
.appt-info__map-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; }
.appt-info__map-link:hover { color: var(--secColor100); text-decoration: underline; }

.appt-warning {
  background: #FDF4E3; border: 1px solid #F2D88F;
  border-radius: 6px; padding: 12px 14px;
  font-size: 13px; line-height: 20px; color: #8D5905;
  display: flex; gap: 10px; align-items: flex-start;
}
.appt-warning i { color: #8D5905; flex: none; margin-top: 2px; }
.appt-warning b { font-weight: 600; }

.appt-counter { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--borderSubtleColor); }
.appt-counter__lbl {
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--blackAltText); font-weight: 500; margin: 0 0 4px;
}
.appt-counter__val {
  font-family: var(--serif-font); font-size: 24px; line-height: 30px;
  margin: 0 0 6px; color: var(--priColor100);
}
.appt-counter__bar { display: flex; gap: 6px; margin-bottom: 10px; }
.appt-counter__bar span { flex: 1; height: 6px; border-radius: 3px; background: var(--priColor102); }
.appt-counter__bar span.used { background: var(--secColor100); }
.appt-counter__note { font-size: 12px; color: var(--blackAltText); font-weight: 300; margin: 0 0 14px; }

/* ---- Kalender ---- */
.appt-cal {
  padding: 24px 24px 20px;
  border-right: 1px solid var(--borderSubtleColor);
  display: flex; flex-direction: column;
  overflow: hidden; /* dag-cellen mogen nooit in de slots-kolom lopen */
}
.appt-cal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.appt-cal__title {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 20px; line-height: 24px; margin: 0; color: var(--priColor100);
}
.appt-cal__nav { display: flex; gap: 6px; }
.appt-cal__nav-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--borderColor);
  background: #FFFFFF; color: var(--priColor100);
  border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: background 130ms, border-color 130ms;
}
.appt-cal__nav-btn:hover:not(:disabled) { background: var(--priColor102); border-color: var(--priColor100); }
.appt-cal__nav-btn:disabled { opacity: 0.40; cursor: not-allowed; }
.appt-cal__dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--blackAltText); text-align: center;
  text-transform: uppercase; padding: 0 0 6px;
}
.appt-cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.appt-cal__day {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0; min-height: 0; /* voorkomt grid-overflow met aspect-ratio */
  border: 1px solid transparent; background: transparent;
  color: var(--priColor100); border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 400;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.appt-cal__day:hover:not(:disabled) { background: rgba(255,210,176,0.30); border-color: var(--secColor300); }
.appt-cal__day.is-other   { color: rgba(30,20,70,0.28); pointer-events: none; }
.appt-cal__day.is-disabled { color: rgba(30,20,70,0.30); cursor: not-allowed; }
.appt-cal__day.is-today   { font-weight: 600; box-shadow: inset 0 0 0 1px var(--borderColor); }
.appt-cal__day.has-slots  { font-weight: 500; }
.appt-cal__day.has-slots::before {
  content: "";
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--secColor100);
}
.appt-cal__day.is-current { background: rgba(255,210,176,0.30); border-color: var(--secColor300); font-weight: 600; }
.appt-cal__day.is-selected {
  background: var(--priColor100); color: #FFFFFF;
  border-color: var(--priColor100); font-weight: 600;
}
.appt-cal__day.is-selected::before { background: var(--secColor300); bottom: 4px; }
.appt-cal__legend {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borderSubtleColor);
  display: flex; gap: 14px;
  font-size: 11.5px; color: var(--blackAltText); font-weight: 300; flex-wrap: wrap;
}
.appt-cal__legend span { display: inline-flex; align-items: center; gap: 5px; }
.appt-cal__legend .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--secColor100); flex: none; }
.appt-cal__legend .strike { width: 14px; height: 1px; background: rgba(30,20,70,0.30); display: inline-block; flex: none; }
.appt-cal__legend .selected-marker { width: 12px; height: 12px; border-radius: 3px; background: var(--priColor100); flex: none; }
.appt-cal__skel {
  height: 16px; background: var(--priColor102); border-radius: 4px;
  animation: iuasr-skel 1.2s ease-in-out infinite alternate;
}
@keyframes iuasr-skel { from { opacity: 0.6; } to { opacity: 1; } }

/* ---- Tijdsloten-paneel ---- */
.appt-slots { padding: 24px 20px 20px; display: flex; flex-direction: column; }
.appt-slots__empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--blackAltText); font-size: 14px; padding: 20px 8px;
}
.appt-slots__empty .ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--priColor102);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px; font-size: 16px; color: var(--priColor100); opacity: 0.6;
}
.appt-slots__empty p { margin: 0; line-height: 1.5; }
.appt-slots__date {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 16px; line-height: 22px; margin: 0 0 4px; color: var(--priColor100);
}
.appt-slots__zone {
  font-size: 12px; color: var(--blackAltText); font-weight: 300;
  margin: 0 0 14px; display: inline-flex; align-items: center; gap: 6px;
}
.appt-slots__list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.appt-slots__empty-msg { color: var(--blackAltText); font-size: 14px; text-align: center; margin: 20px 0; }
.appt-slot {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 12px;
  background: #FFFFFF; color: var(--priColor100);
  border: 1.5px solid var(--borderColor); border-radius: 6px;
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  cursor: pointer;
  transition: background 130ms, border-color 130ms, color 130ms, transform 130ms;
}
.appt-slot:hover:not(:disabled) { border-color: var(--priColor100); background: var(--priColor102); transform: translateY(-1px); }
.appt-slot.is-current { border-color: var(--secColor300); background: rgba(255,210,176,0.30); cursor: default; pointer-events: none; }
.appt-slot.is-selected { border-color: var(--secColor100); background: #FFFFFF; color: var(--secColor100); box-shadow: 0 0 0 4px rgba(200,16,46,0.10); }
.appt-slot--disabled { opacity: 0.40; pointer-events: none; }

/* ---- Bevestigingsdrawer ---- */
.appt-confirm {
  grid-column: 1 / -1;
  border-top: 1px solid var(--borderSubtleColor);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 100%);
  padding: 20px 24px 22px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.appt-confirm__sum { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 240px; }
.appt-confirm__sum .row { display: flex; align-items: baseline; gap: 12px; font-size: 14px; }
.appt-confirm__sum .label {
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--blackAltText); font-weight: 500; width: 56px; flex: none;
}
.appt-confirm__sum .old { color: var(--blackAltText); text-decoration: line-through; font-weight: 300; }
.appt-confirm__sum .new { font-family: var(--serif-font); font-size: 18px; color: var(--priColor100); }
.appt-confirm__reason { flex: 1; min-width: 220px; }
.appt-confirm__reason label {
  font-size: 11.5px; color: var(--blackAltText); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 4px;
}
.appt-confirm__reason select {
  width: 100%; height: 38px; padding: 0 30px 0 12px;
  font-family: inherit; font-size: 14px; color: var(--priColor100);
  background: #FFFFFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path fill='%231E1446' d='M5 7l5 5 5-5z'/></svg>") right 8px center / 16px no-repeat;
  border: 1.5px solid var(--borderColor); border-radius: 4px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.appt-confirm__reason select:focus { outline: none; border-color: var(--secColor100); box-shadow: 0 0 0 3px rgba(200,16,46,0.15); }
.appt-confirm__actions { display: flex; gap: 10px; flex-wrap: wrap; align-self: flex-end; flex-shrink: 0; }

/* ---- Feedbackbanner ---- */
.appt-feedback { margin-top: 14px; font-size: 13.5px; padding: 12px 16px; border-radius: 6px; }
.appt-feedback.is-info  { background: #ECEAF2; color: var(--priColor100); }
.appt-feedback.is-error { background: #FBE9EB; color: #9A0C24; }

/* ---- State-schermen (leeg / geblokkeerd / bevestigd) ---- */
.appt-state { padding: 52px 40px 48px; text-align: center; max-width: 600px; margin: 0 auto; }
.appt-state__icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px; font-size: 28px;
}
.appt-state--blocked .appt-state__icon   { background: #FDF4E3; color: #8D5905; border: 1px solid #F2D88F; }
.appt-state--confirmed .appt-state__icon { background: #E7F5EE; color: #156A42; border: 1px solid #9CD9B6; }
.appt-state h2 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 28px; line-height: 34px; margin: 0 0 12px;
  letter-spacing: -0.005em; color: var(--priColor100);
}
.appt-state p { margin: 0 auto 14px; font-size: 15px; line-height: 24px; color: var(--blackAltText); max-width: 460px; }
.appt-state__facts {
  margin: 20px auto 0; max-width: 380px;
  background: var(--priColor102); border-radius: 8px;
  padding: 16px 20px; text-align: left;
  display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 6px; font-size: 14px;
}
.appt-state__facts dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blackAltText); font-weight: 500; padding-top: 4px; }
.appt-state__facts dd { margin: 0; color: var(--priColor100); font-weight: 500; }
.appt-state__actions { display: flex; gap: 10px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

.mijn-afspraak-help { color: var(--blackAltText); font-size: 13px; margin: 18px 0 0; text-align: center; }
.mijn-afspraak-help a { color: var(--priColor100); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .appt-card { grid-template-columns: 260px 1fr; }
  .appt-slots { grid-column: 1 / -1; border-top: 1px solid var(--borderSubtleColor); }
  .appt-slots__list { flex-direction: row; flex-wrap: wrap; overflow-y: visible; }
  .appt-slot { flex: 1 1 calc(25% - 8px); min-width: 100px; justify-content: center; }
}
@media (max-width: 720px) {
  .main--mijn-afspraak { padding: 32px 0 64px; }
  .mijn-afspraak-page { padding: 0 16px; }
  .page__intro h1 { font-size: 26px; line-height: 32px; }
  .appt-card { grid-template-columns: 1fr; min-height: 0; }
  .appt-cal  { order: 1; border-right: 0; border-bottom: 1px solid var(--borderSubtleColor); }
  .appt-info { order: 2; border-right: 0; border-bottom: 1px solid var(--borderSubtleColor); padding: 18px 18px 16px; }
  .appt-slots { order: 3; }
  .appt-confirm { order: 4; padding: 16px 18px 18px; flex-direction: column; gap: 14px; align-items: stretch; }
  .appt-confirm__actions { width: 100%; flex-direction: column; }
  .appt-confirm__actions .btn { width: 100%; }
  .appt-confirm__sum { min-width: 0; }
  .appt-confirm__reason { min-width: 0; }
  .appt-slots__list { flex-direction: column; }
  .appt-slot { flex: none; width: 100%; justify-content: flex-start; }
  .appt-state { padding: 36px 20px 30px; }
  .appt-state h2 { font-size: 22px; line-height: 28px; }
  .appt-state__facts { grid-template-columns: 1fr; column-gap: 0; row-gap: 2px; padding: 12px 16px; }
  .appt-state__facts dt { padding-top: 8px; }
  .appt-state__facts dt:first-child { padding-top: 0; }
  .appt-state__actions { flex-direction: column; gap: 8px; }
  .appt-state__actions .btn { width: 100%; }
}

/* Herinschrijving-CTA op landing: dim als de gebruiker al herinschreven is. */
.cta-card--disabled { opacity: 0.72; }

/* Disabled-knop voor blokkerende aanmelding op /aanmelden/ kaarten */
.btn--disabled,
.btn--disabled:hover,
.btn--disabled:focus {
  background: var(--priColor103) !important;
  color: var(--blackAltText) !important;
  border-color: var(--borderSubtleColor) !important;
  cursor: not-allowed !important;
  opacity: 0.85;
  box-shadow: none !important;
}

/* Aanmelden — blokkerende-aanmelding card (max 1 actieve per persoon) */
.aanmeld-blocking {
  display: flex; gap: 18px;
  max-width: 720px; margin: 24px auto;
  padding: 24px 26px;
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-left: 4px solid var(--priColor100);
  border-radius: 8px;
}
.aanmeld-blocking__icon {
  flex: none; width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--priColor103); color: var(--priColor100);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.aanmeld-blocking__body { flex: 1; min-width: 0; }
.aanmeld-blocking__body h1 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 22px; line-height: 26px; margin: 0 0 8px;
  color: var(--priColor100);
}
.aanmeld-blocking__body p { color: var(--blackAltText); font-size: 14.5px; line-height: 1.55; margin: 0 0 14px; }
.aanmeld-blocking__meta {
  display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px;
  margin: 0 0 16px;
}
.aanmeld-blocking__meta dt { font-size: 12px; color: var(--blackAltText); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.aanmeld-blocking__meta dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--priColor100); }
.aanmeld-blocking__meta dd code { font-size: 13px; background: var(--priColor103); padding: 2px 6px; border-radius: 3px; }
.aanmeld-blocking__actions { margin-bottom: 14px; }
.aanmeld-blocking__help { font-size: 13px; color: var(--blackAltText); margin: 0; }
.aanmeld-blocking__help a { color: var(--priColor100); }
@media (max-width: 640px) {
  .aanmeld-blocking { flex-direction: column; gap: 14px; padding: 20px; margin: 16px 14px; }
  .aanmeld-blocking__meta { grid-template-columns: 1fr; gap: 2px 0; }
  .aanmeld-blocking__meta dd { margin-bottom: 8px; }
  .aanmeld-blocking__actions .btn { width: 100%; box-sizing: border-box; text-align: center; }
}

/* Profielpagina — aanmelding-status card (tijdelijke dashboard) */
.sec-card--status .dl-grid code { font-size: 13px; background: var(--priColor103); padding: 2px 6px; border-radius: 3px; color: var(--priColor100); }
.sec-card--status .sec-card__count {
  font-size: 12.5px; color: var(--blackAltText);
  font-weight: 400; margin-left: 8px;
}
.profiel-apps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.profiel-apps__item {
  padding: 14px 16px;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 6px;
  background: #FFFFFF;
}
.profiel-apps__item + .profiel-apps__item { margin-top: 0; }
.profiel-apps__item .dl-grid { margin: 0; }
.profiel-status {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 4px;
  font-size: 13px; font-weight: 500;
  background: var(--priColor103); color: var(--priColor100);
}
.profiel-status--submitted,
.profiel-status--intake_scheduled,
.profiel-status--under_review { background: #ECEAF2; color: var(--priColor100); }
.profiel-status--awaiting_documents,
.profiel-status--awaiting_payment,
.profiel-status--incomplete    { background: #FDF4E3; color: #8D5905; }
.profiel-status--approved,
.profiel-status--enrolled      { background: #F1FAF5; color: #156A42; }
.profiel-status--rejected,
.profiel-status--cancelled     { background: #FBE9EB; color: #9A0C24; }
.profiel-status__note {
  font-size: 13px; color: var(--blackAltText);
  margin: 14px 0 0; line-height: 1.55;
}
.profiel-status__note a { color: var(--priColor100); }

/* Aanmelding annuleren — uitklapbaar binnen profiel-apps__item */
.cancel-aanmelding {
  margin-top: 12px;
  border-top: 1px solid var(--borderSubtleColor);
  padding-top: 10px;
}
.cancel-aanmelding summary {
  font-size: 13px; color: var(--secColor100);
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  list-style: none;
}
.cancel-aanmelding summary::-webkit-details-marker { display: none; }
.cancel-aanmelding summary::marker { content: ""; }
.cancel-aanmelding summary:hover { text-decoration: underline; }
.cancel-aanmelding__body {
  margin-top: 12px;
}
.cancel-aanmelding__body p {
  font-size: 13.5px; color: var(--defaultText); margin: 0 0 10px;
}
.cancel-aanmelding__form {
  display: flex; flex-direction: column; gap: 8px;
}
.cancel-aanmelding__label {
  font-size: 13px; font-weight: 500; color: var(--defaultText);
}
.cancel-aanmelding__form textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--borderSubtleColor); border-radius: 6px;
  font-size: 13.5px; resize: vertical; font-family: inherit;
  color: var(--defaultText); background: #FAFAFA;
}
.cancel-aanmelding__form textarea:focus {
  outline: none; border-color: var(--priColor100);
  box-shadow: 0 0 0 2px rgba(30,20,70,0.10);
}
.cancel-aanmelding__form button { align-self: flex-start; }

/* Actie-rij per aanmelding op profielpagina (annuleren links / afspraak rechts) */
.profiel-apps__actions {
  margin-top: 12px;
  border-top: 1px solid var(--borderSubtleColor);
  padding-top: 10px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.profiel-apps__actions--no-cancel { justify-content: flex-end; }
.profiel-apps__actions .appt-link {
  font-size: 13px; color: var(--priColor100);
  text-decoration: none;
}
.profiel-apps__actions .appt-link:hover { text-decoration: underline; }

/* Save & Continue — verbergen (auto-save vervangt deze knop, zie inc/gf-autosave.php) */
.gform_wrapper .gform_save_link,
.gform_wrapper a.gform_save_link,
.gform_wrapper input.gform_save_link,
.gform_wrapper .gform_save { display: none !important; }

/* Auto-save status — discrete text rechtsonder onder het form */
.iuasr-autosave-status {
  font-size: 12.5px;
  color: var(--blackAltText);
  margin: 8px 0 0;
  text-align: right;
  font-style: italic;
  min-height: 18px;
  letter-spacing: 0.01em;
}

/* Resume-link confirmation (alleen relevant als iemand de oude knop nog gebruikt) */
.gform_wrapper .gform_save_confirmation,
.gform_wrapper .gform_anchor + .gform_save_link_resume {
  background: var(--success-bg);
  border: 1px solid var(--success-bd);
  color: var(--success-fg);
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 13.5px;
}

/* Bevestigingsbericht na indiening */
.gform_confirmation_wrapper .gform_confirmation_message {
  background: rgba(21, 106, 66, 0.06);
  border: 1px solid rgba(21, 106, 66, 0.25);
  border-radius: 8px;
  padding: 20px 24px;
  color: #156A42;
  font-size: 15px;
  line-height: 22px;
}

/* ---------- INFO / WARNING BOXES (in formulier) ---------- */
.gform_wrapper .gfield--type-html .info,
.iuasr-info {
  background: var(--priColor102);
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--priColor100);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.iuasr-info svg { flex: none; margin-top: 2px; color: var(--priColor100); }
.iuasr-info p, .iuasr-info span { margin: 0; }
.iuasr-info b { font-weight: 500; }
.iuasr-info--warning {
  background: #FDF4E3;
  color: #8D5905;
  border: 1px solid #F2D88F;
}
.iuasr-info--warning svg { color: #8D5905; }
.iuasr-info--cost {
  background: #F1FAF5;
  color: #0F4B2E;
  border: 1px solid #B7E0C9;
  border-left: 4px solid #156A42;
}
.iuasr-info--cost svg { color: #156A42; }
.iuasr-info--cost b { color: #0F4B2E; }

/* Colloquium Doctum — compacte kosten-sectie op stap 5 (geen los warning-blok) */
.gform_wrapper .iuasr-cost-section .gsection_title {
  font-size: 15px;
  font-weight: 500;
  color: var(--priColor100);
  margin: 0;
}
.gform_wrapper .iuasr-cost-note { margin-top: -4px; }
.gform_wrapper .iuasr-cost-note .gfield_html_formatted,
.gform_wrapper .iuasr-cost-note .gfield_html { padding: 0; }
.gform_wrapper .iuasr-cost-line {
  font-size: 14px;
  color: var(--blackAltText);
  line-height: 1.55;
  margin: 0;
}
.gform_wrapper .iuasr-cost-line strong { color: var(--priColor100); font-weight: 500; }
.gform_wrapper .iuasr-cost-iban {
  font-size: 13px;
  color: var(--blackAltText);
  margin: 6px 0 0;
}

/* OER vakkennis-toelichting (PABO toelatingstoetsen) */
.gform_wrapper .iuasr-oer-note .gfield_html_formatted,
.gform_wrapper .iuasr-oer-note .gfield_html { padding: 0; }
.iuasr-oer-note {
  background: var(--priColor102);
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  padding: 14px 16px;
}
.iuasr-oer-note p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--blackAltText);
  margin: 0 0 8px;
}
.iuasr-oer-note p:last-child { margin: 0; }
.iuasr-oer-note strong { color: var(--priColor100); font-weight: 600; }
.iuasr-oer-note--warn {
  background: #FDF4E3;
  border-color: #F2D88F;
}
/* 'Let op'-alinea binnen hetzelfde kader subtiel scheiden (geen apart blok) */
.iuasr-oer-note__warn {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borderSubtleColor);
}

/* Colloquium Doctum — 3-koloms diploma upload-cards op stap 3
   Wordt grid op desktop, stacks op mobiel (zelfde patroon als iuasr-half). */
.gform_wrapper .gfield.iuasr-doc-third {
  flex: 1 1 calc(33.333% - 12px);
  min-width: 200px;
}
@media (max-width: 720px) {
  .gform_wrapper .gfield.iuasr-doc-third {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Pasfoto amber callout direct boven het pasfoto upload-veld */
.iuasr-photo-callout {
  background: #FDF4E3;
  border: 1px solid #F2D88F;
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  margin-bottom: -10px;
}
.iuasr-photo-callout__icon {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: rgba(141, 89, 5, 0.12);
  color: #8D5905;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.iuasr-photo-callout__body { font-size: 13px; line-height: 1.55; color: #8D5905; }
.iuasr-photo-callout__body b { font-weight: 600; display: block; margin-bottom: 2px; color: #6B4304; }

/* Cursus welkom-kaart op F4 stap 1 — per cursus één zichtbare kaart. */
.iuasr-course-welcome {
  background: var(--priColor102);
  border: 1px solid var(--borderSubtleColor);
  border-left: 4px solid var(--priColor100);
  border-radius: 6px;
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.iuasr-course-welcome__icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--priColor100);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  font-size: 18px;
}
.iuasr-course-welcome__body { font-size: 13.5px; line-height: 1.55; color: var(--priColor100); }
.iuasr-course-welcome__body b { font-weight: 600; display: block; margin-bottom: 4px; font-size: 14.5px; }
.iuasr-course-welcome__body span { color: var(--blackAltText); }
/* GF wrapper layout-overrides — voorkomt extra GF-padding op HTML fields */
.gform_wrapper .iuasr-course-welcome { margin-top: 4px; }

/* Tekenteller onder textarea (cssClass="iuasr-counted" + JS) */
.iuasr-counter {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  font-size: 12px;
  color: var(--blackAltText);
  font-weight: 300;
}
.iuasr-counter b {
  color: var(--priColor100);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------- CONTROLEER (review summary) — stap 5 ---------- */
.gform_wrapper .gfield.iuasr-review-header .gsection_title {
  font-family: var(--serif-font);
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
  color: var(--priColor100);
  margin: 0 0 6px;
}
.gform_wrapper .gfield.iuasr-review-header .gsection_description {
  font-size: 13.5px;
  color: var(--blackAltText);
  font-weight: 300;
  line-height: 1.55;
  margin: 0 0 14px;
}
/* ============================================================
   SKELETON LOADERS — generieke klassen voor async/JS-rendered content
   ============================================================ */
/* Shimmer sweep — Tailwind-stijl (links→rechts, zichtbare grijstinten) */
@keyframes iuasrShimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
:root {
  --skel-base:    #E8E6F0;
  --skel-shine:   #F5F4FA;
  --skel-bg: linear-gradient(
    90deg,
    var(--skel-base) 0%,
    var(--skel-shine) 50%,
    var(--skel-base) 100%
  );
}
.iuasr-skeleton,
.iuasr-skeleton-line,
.iuasr-skeleton-slot,
.mijn-afspraak-reschedule__skel-bar,
.mijn-afspraak-reschedule__skel-slot {
  background: var(--skel-bg);
  background-size: 1200px 100%;
  animation: iuasrShimmer 1.6s linear infinite;
  border-radius: 6px;
  display: block;
}
.iuasr-skeleton { border-radius: 6px; }
.iuasr-skeleton-line {
  height: 12px;
  border-radius: 4px;
}
.iuasr-skeleton-line--title { height: 16px; width: 140px; margin-bottom: 12px; }
.iuasr-skeleton-line--xs    { width: 80px; }
.iuasr-skeleton-line--sm    { width: 40%; }
.iuasr-skeleton-line--md    { width: 65%; }
.iuasr-skeleton-line--lg    { width: 85%; }
.iuasr-skeleton-card {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 10px;
  padding: 18px 20px;
}
.iuasr-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.iuasr-skeleton-slot {
  height: 64px;
  border-radius: 8px;
}

/* Review skeleton blocks */
.iuasr-review__skel { display: flex; flex-direction: column; gap: 20px; }
.iuasr-review__skel-block {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--borderSubtleColor);
}
.iuasr-review__skel-block:last-child { border-bottom: 0; padding-bottom: 0; }
.iuasr-review__skel-rows { display: flex; flex-direction: column; gap: 8px; }

/* Review error fallback */
.iuasr-review__error {
  font-size: 13px;
  color: var(--secColor100);
  margin: 0;
}

/* Mijn afspraak reschedule skeleton */
.mijn-afspraak-reschedule__skel-bar {
  height: 36px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.mijn-afspraak-reschedule__skel-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.mijn-afspraak-reschedule__skel-slot {
  height: 58px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .iuasr-skeleton,
  .iuasr-skeleton-line,
  .iuasr-skeleton-slot,
  .mijn-afspraak-reschedule__skel-bar,
  .mijn-afspraak-reschedule__skel-slot {
    animation: none !important;
    background: var(--skel-base) !important;
  }
}
@media (max-width: 640px) {
  .iuasr-skeleton-grid,
  .mijn-afspraak-reschedule__skel-slots { grid-template-columns: repeat(2, 1fr); }
}

.gform_wrapper .gfield.iuasr-review-wrap { padding: 0; }
.iuasr-review { display: flex; flex-direction: column; gap: 20px; }
.iuasr-review__loading {
  font-size: 13px;
  color: var(--blackAltText);
  font-style: italic;
  margin: 0;
}
.iuasr-review__section {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--borderSubtleColor);
}
.iuasr-review__section:last-of-type { border-bottom: 0; padding-bottom: 0; }
.iuasr-review__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.iuasr-review__head h3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  margin: 0;
  color: var(--priColor100);
}
.iuasr-review__edit {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--sans-serif-font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--priColor100);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 3px;
  border-bottom: 1px dotted var(--borderColor);
  transition: color 150ms, border-color 150ms;
}
.iuasr-review__edit:hover {
  color: var(--secColor100);
  border-bottom-color: var(--secColor100);
}
.iuasr-review__edit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.25);
  border-radius: 2px;
}
.iuasr-review__grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 4px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}
.iuasr-review__grid dt {
  color: var(--blackAltText);
  font-weight: 400;
}
.iuasr-review__grid dd {
  color: var(--priColor100);
  font-weight: 400;
  margin: 0;
  word-break: break-word;
}
@media (max-width: 580px) {
  .iuasr-review__grid {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .iuasr-review__grid dt {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 6px;
  }
  .iuasr-review__grid dd { margin-bottom: 4px; }
}

/* ---------- MIJN PROFIEL ---------- */
.main--profiel {
  flex: 1 0 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--priColor100);
  margin-bottom: 14px;
}
.back-link:hover { color: var(--secColor100); text-decoration: none; }
.profiel-intro { margin-bottom: 24px; max-width: 56ch; }
.profiel-intro h1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 32px;
  line-height: 38px;
  margin: 0 0 6px;
  color: var(--priColor100);
}
.profiel-intro p {
  font-size: 14px;
  line-height: 21px;
  color: var(--blackAltText);
  font-weight: 300;
  margin: 0;
}

.profile-hd {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  padding: 22px 26px;
  margin-bottom: 18px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.profile-hd__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--priColor100);
  color: var(--secColor300);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif-font);
  font-size: 28px;
  flex: none;
}
.profile-hd__body { flex: 1; min-width: 0; }
.profile-hd__name {
  font-family: var(--serif-font);
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  color: var(--priColor100);
  margin: 0;
}
.profile-hd__meta {
  font-size: 13px;
  color: var(--blackAltText);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Verified-badge (e-mailadres bevestigd?) */
.iuasr-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.iuasr-verified-badge--ok {
  background: #F1FAF5;
  color: #156A42;
  border: 1px solid #C6E3D2;
}
.iuasr-verified-badge--pending {
  background: #ECEAF2;
  color: #1E1446;
  border: 1px solid #D1CFD9;
}

.sec-card {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  padding: 22px 26px;
  margin-bottom: 16px;
}
.sec-card__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borderSubtleColor);
}
.sec-card__hd h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 19px;
  line-height: 24px;
  margin: 0;
  color: var(--priColor100);
}
.sec-card__hd .hint {
  font-size: 12px;
  color: var(--blackAltText);
  font-weight: 300;
}

dl.dl-grid {
  margin: 0;
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 8px 16px;
  font-size: 14px;
  line-height: 1.5;
  align-items: center;
}
dl.dl-grid dt {
  color: var(--blackAltText);
  font-weight: 400;
}
dl.dl-grid dd {
  color: var(--priColor100);
  margin: 0;
  word-break: break-word;
}
dl.dl-grid dd.muted,
dl.dl-grid .muted {
  color: var(--blackAltText);
  font-size: 12px;
}
dl.dl-grid .act { text-align: right; }
dl.dl-grid .row-sep {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--borderSubtleColor);
  margin: 4px 0;
}
.dt-note {
  display: block;
  font-size: 11px;
  color: var(--blackAltText);
  font-weight: 400;
  margin-top: 2px;
}
.dd-note {
  font-size: 12.5px;
  color: var(--blackAltText);
  margin-top: 6px;
  line-height: 1.5;
  max-width: 42ch;
}

.btn--sm {
  min-height: 32px;
  min-width: auto;
  padding: 4px 12px;
  font-size: 13px;
}
.btn--ghost {
  background: transparent;
  color: var(--priColor100);
  border-color: var(--borderColor);
}
.btn--ghost:hover {
  border-color: var(--priColor100);
  background: var(--priColor102);
  color: var(--priColor100);
}
.btn--destructive {
  background: transparent;
  color: var(--secColor100);
  border: 2px solid var(--secColor100);
}
.btn--destructive:hover {
  background: var(--secColor100);
  color: #FFFFFF;
}
.btn--block { display: flex; width: 100%; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill--on { background: rgba(21, 106, 66, 0.10); color: #156A42; }
.pill--off { background: #FDF4E3; color: #8D5905; }

/* Profiel-notice (after save) */
.profiel-notice {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.profiel-notice--success {
  background: rgba(21, 106, 66, 0.08);
  border: 1px solid rgba(21, 106, 66, 0.25);
  color: #0F4B2E;
}
.profiel-notice--error {
  background: rgba(200, 16, 46, 0.06);
  border: 1px solid rgba(200, 16, 46, 0.25);
  color: var(--secColor100);
}

/* Inline edit form binnen dl.dl-grid */
.dl-grid .dd-form { grid-column: 2 / -1; margin: 0; }
.inline-edit { display: flex; flex-direction: column; gap: 10px; }
.inline-edit__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.inline-edit__row input[type="text"],
.inline-edit__row input[type="email"],
.inline-edit__row input[type="tel"] {
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  font-family: var(--sans-serif-font);
  font-size: 14px;
  color: var(--priColor100);
  background: #FFFFFF;
  border: 1px solid var(--borderColor);
  border-radius: 4px;
  transition: border-color 150ms, box-shadow 150ms;
}
.inline-edit__row input:focus {
  outline: none;
  border-color: var(--secColor100);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.20);
}
.inline-edit__hint {
  font-size: 12px;
  color: var(--blackAltText);
  margin: -4px 0 0;
  font-weight: 300;
}
.inline-edit__row--single { grid-template-columns: 1fr; }

/* E-mail pending bevestiging */
.dd-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FDF4E3;
  border: 1px solid #F2D88F;
  color: #8D5905;
  font-size: 12px;
  font-weight: 400;
  border-radius: 4px;
  padding: 4px 10px;
  margin-top: 6px;
  line-height: 1.4;
}
.dd-pending svg { color: #8D5905; flex: none; }
.dd-pending b { font-weight: 500; color: #6B4304; }
.inline-edit__actions { display: flex; gap: 8px; }

/* Danger zone als sec-card variant — geen aparte grid layout, button gewoon
   onder de tekst zodat alignment altijd klopt. */
.sec-card--danger {
  background: #FBE9EB;
  border-color: #F2C9CF;
}
.sec-card--danger .sec-card__hd { border-bottom-color: #F2C9CF; }
.sec-card--danger .sec-card__hd h2 { color: var(--secColor100); }
.danger-body,
.danger-status {
  font-size: 13.5px;
  line-height: 1.6;
  color: #6B0F1F;
  margin: 0 0 16px;
}
.danger-status b { font-weight: 600; }
.danger-details summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--secColor100);
  border: 2px solid var(--secColor100);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 150ms, color 150ms;
}
.danger-details summary::-webkit-details-marker { display: none; }
.danger-details summary::marker { content: ""; }
.danger-details summary:hover {
  background: var(--secColor100);
  color: #FFFFFF;
}
.danger-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #F2C9CF;
}
.danger-form__label {
  font-size: 13px;
  font-weight: 500;
  color: #6B0F1F;
}
.danger-form textarea {
  width: 100%;
  min-height: 70px;
  padding: 8px 12px;
  font-family: var(--sans-serif-font);
  font-size: 14px;
  color: var(--priColor100);
  background: #FFFFFF;
  border: 1px solid var(--borderColor);
  border-radius: 4px;
  resize: vertical;
}
.danger-form textarea:focus {
  outline: none;
  border-color: var(--secColor100);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.20);
}
.danger-form button { align-self: flex-start; }

/* Legacy .danger-zone block — bewaard maar niet meer gebruikt op profiel */
.danger-zone {
  background: #FBE9EB;
  border: 1px solid #F2C9CF;
  border-radius: 8px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: 20px;
}
.danger-zone__body b {
  font-size: 14px;
  font-weight: 500;
  color: var(--secColor100);
  display: block;
}
.danger-zone__body small {
  font-size: 12.5px;
  color: var(--secColor100);
  display: block;
  margin-top: 2px;
  font-weight: 300;
}

@media (max-width: 640px) {
  dl.dl-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .inline-edit__row { grid-template-columns: 1fr; }
  dl.dl-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 8px; }
  dl.dl-grid .act { text-align: left; margin-top: 4px; }
  .danger-zone { grid-template-columns: 1fr; }
  .profile-hd__avatar { width: 56px; height: 56px; font-size: 24px; }
  .profile-hd__name { font-size: 20px; line-height: 24px; }
}

/* ---------- WACHTWOORD (forgot / change / reset) ---------- */
.main--auth {
  flex: 1 0 auto;
  width: 100%;
  padding: 48px 24px 64px;
  display: flex;
  justify-content: center;
}
.auth-wrap {
  max-width: 460px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.back-link--auth { align-self: flex-start; margin-bottom: 14px; }
.form-card--auth {
  max-width: 460px;
  width: 100%;
  margin: 0;
}
.text-center { text-align: center; }
.form-card--auth .form-card__title { text-align: center; }
.form-card--auth .form-card__sub { text-align: center; margin: 6px auto 18px; max-width: 38ch; }
.form-card--auth form { display: flex; flex-direction: column; gap: 14px; }
.form-card--auth .fld { display: flex; flex-direction: column; gap: 6px; }
.form-card--auth .fld label {
  font-size: 13px;
  font-weight: 500;
  color: var(--priColor100);
}
.form-card--auth .fld .req { color: var(--secColor100); margin-left: 2px; }
.form-card--auth .fld input {
  width: 100%;
  height: 41px;
  padding: 8px 12px;
  font-family: var(--sans-serif-font);
  font-size: 15px;
  font-weight: 400;
  color: var(--priColor100);
  background: #FFFFFF;
  border: 1px solid var(--borderColor);
  border-radius: 4px;
  transition: border-color 150ms, box-shadow 150ms;
}
.form-card--auth .fld input:focus {
  outline: none;
  border-color: var(--secColor100);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.20);
}

.auth-error {
  background: rgba(200, 16, 46, 0.06);
  border: 1px solid rgba(200, 16, 46, 0.25);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  color: var(--secColor100);
  font-size: 13px;
  line-height: 1.5;
}
.auth-error p { margin: 0; }
.auth-error p + p { margin-top: 4px; }
.auth-banner {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.auth-banner--info {
  background: var(--priColor102);
  color: var(--priColor100);
}
.auth-banner svg { flex: none; margin-top: 1px; color: var(--priColor100); }
.auth-banner small {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 500;
  color: var(--blackAltText);
  margin-bottom: 2px;
}
.auth-banner p { margin: 0; }
.auth-banner b { font-weight: 500; }
.auth-micro {
  font-size: 12.5px;
  color: var(--blackAltText);
  font-weight: 300;
  text-align: center;
  margin: 14px 0 0;
}
.auth-micro a {
  color: var(--priColor100);
  font-weight: 500;
}
.auth-micro a:hover { color: var(--secColor100); }
.sent-mark {
  width: 64px; height: 64px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: rgba(21, 106, 66, 0.10);
  color: #156A42;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- BEVESTIGINGSPAGINA ---------- */
.main--bevestiging {
  flex: 1 0 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}
.bvst-hero { text-align: center; margin-bottom: 32px; }
.success-mark {
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(21, 106, 66, 0.12);
  color: #156A42;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.success-mark::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: rgba(21, 106, 66, 0.08);
  z-index: -1;
}
.bvst-hero h1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 40px;
  line-height: 46px;
  margin: 0 0 10px;
  color: var(--priColor100);
  letter-spacing: -0.01em;
}
.bvst-hero__lede {
  font-size: 18px;
  line-height: 28px;
  color: var(--priColor100);
  margin: 0 auto;
  font-weight: 300;
  max-width: 52ch;
  text-wrap: pretty;
}
.bvst-hero__lede b { font-weight: 500; }

.bvst-ref {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
}
.bvst-ref__cell small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blackAltText);
  margin-bottom: 4px;
}
.bvst-ref__cell b {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 18px;
  color: var(--priColor100);
  display: block;
  line-height: 1.3;
  word-break: break-word;
}

/* CD-notice op bevestigingspagina: kandidaat moet weten dat hij/zij
   alleen het Colloquium Doctum heeft geboekt, niet de bachelor zelf. */
.bvst-cd-notice {
  background: var(--priColor102);
  border: 1px solid var(--borderSubtleColor);
  border-left: 4px solid var(--secColor100);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--priColor100);
}
.bvst-cd-notice p { margin: 0; }
.bvst-cd-notice strong { color: var(--secColor100); }

.bvst-expect {
  background: var(--secColor301);
  border: 1px solid var(--secColor300);
  border-radius: 8px;
  padding: 26px 28px;
  margin-bottom: 28px;
}
.bvst-expect h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  margin: 0 0 18px;
  color: var(--priColor100);
}
.bvst-expect__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: bvststep;
}
.bvst-expect__steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  counter-increment: bvststep;
}
.bvst-expect__steps li::before {
  content: counter(bvststep);
  width: 28px;
  height: 28px;
  background: var(--priColor100);
  color: var(--secColor300);
  font-family: var(--serif-font);
  font-size: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.bvst-expect__steps strong {
  display: block;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--priColor100);
  margin-bottom: 2px;
}
.bvst-expect__steps span {
  font-size: 13.5px;
  line-height: 20px;
  color: var(--priColor100);
  font-weight: 300;
}

.bvst-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.bvst-next-help {
  margin-top: 36px;
  text-align: center;
  font-size: 13px;
  color: var(--blackAltText);
  font-weight: 300;
  line-height: 1.6;
}
.bvst-next-help a {
  color: var(--priColor100);
  font-weight: 500;
  border-bottom: 1px dotted var(--borderColor);
  padding-bottom: 1px;
}
.bvst-next-help a:hover {
  color: var(--secColor100);
  border-bottom-color: var(--secColor100);
  text-decoration: none;
}

/* ============================================================
   VEELGESTELDE VRAGEN (P21) — /veelgestelde-vragen/
   Alle selectors gescoped onder .iuasr-faq-page om botsing met de
   contact-pagina FAQ (.iuasr-contact-page .iuasr-faq__*) te voorkomen.
   ============================================================ */
.iuasr-faq-page { padding-top: 0; padding-bottom: 0; }

/* ---------- HERO ---------- */
.iuasr-faq-page .iuasr-faq__hero {
  padding: 56px 0 0;
}
.iuasr-faq-page .iuasr-faq__crumbs {
  font-size: 12.5px; color: var(--blackAltText); margin-bottom: 18px;
  display: flex; gap: 8px; align-items: center;
}
.iuasr-faq-page .iuasr-faq__crumbs a { color: var(--blackAltText); text-decoration: none; }
.iuasr-faq-page .iuasr-faq__crumbs a:hover { color: var(--secColor100); text-decoration: underline; }
.iuasr-faq-page .iuasr-faq__crumbs .sep { color: var(--borderColor); }
.iuasr-faq-page .iuasr-faq__crumbs [aria-current="page"] { color: var(--priColor100); }
.iuasr-faq-page .iuasr-faq__hero h1 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 48px; line-height: 54px; margin: 0 0 14px;
  color: var(--priColor100); letter-spacing: -0.012em;
}
.iuasr-faq-page .iuasr-faq__hero p {
  font-size: 16.5px; color: var(--priColor100);
  font-weight: 300; margin: 0; line-height: 1.65;
  max-width: 60ch;
}

/* ---------- SEARCH BAR ---------- */
.iuasr-faq-page .iuasr-faq__search-wrap {
  margin: 32px 0 0;
}
.iuasr-faq-page .iuasr-faq__search {
  position: relative;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid var(--borderColor);
  border-radius: 10px;
  transition: border-color 150ms, box-shadow 150ms;
  box-shadow: var(--shadow-card);
}
.iuasr-faq-page .iuasr-faq__search:focus-within {
  border-color: var(--priColor100);
  box-shadow: 0 0 0 3px rgba(30, 20, 70, 0.10), var(--shadow-card);
}
.iuasr-faq-page .iuasr-faq__search-icon {
  flex: none;
  padding: 0 6px 0 18px;
  color: var(--blackAltText);
  display: inline-flex; align-items: center;
}
.iuasr-faq-page .iuasr-faq__search-input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-family: inherit;
  font-size: 17px; line-height: 1.4;
  color: var(--priColor100);
  padding: 18px 14px 18px 8px;
}
.iuasr-faq-page .iuasr-faq__search-input::placeholder { color: rgba(30,20,70,0.4); }
/* Verberg het native zoek-kruisje — we tonen een eigen wis-knop. */
.iuasr-faq-page .iuasr-faq__search-input::-webkit-search-cancel-button,
.iuasr-faq-page .iuasr-faq__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.iuasr-faq-page .iuasr-faq__search-clear {
  display: none;
  background: var(--priColor102);
  border: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  margin-right: 12px;
  cursor: pointer;
  color: var(--priColor100);
  align-items: center; justify-content: center;
  transition: background 120ms;
}
.iuasr-faq-page .iuasr-faq__search-clear:hover { background: var(--priColor103); }
.iuasr-faq-page .iuasr-faq__search.is-filled .iuasr-faq__search-clear { display: inline-flex; }
.iuasr-faq-page .iuasr-faq__search-count {
  font-size: 13px;
  color: var(--blackAltText);
  padding: 0 18px 0 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-left: 1px solid var(--borderSubtleColor);
  margin-left: 4px;
  padding-left: 16px;
}
.iuasr-faq-page .iuasr-faq__no-results {
  margin: 14px 0 0;
  font-size: 14.5px;
  font-weight: 300;
  color: var(--blackAltText);
}
.iuasr-faq-page .iuasr-faq__no-results a {
  color: var(--secColor100);
  font-weight: 500;
}

/* ---------- CATEGORY CHIPS ---------- */
.iuasr-faq-page .iuasr-faq__cats {
  margin: 28px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.iuasr-faq-page .iuasr-faq__cat {
  appearance: none;
  border: 1px solid var(--borderSubtleColor);
  background: #FFFFFF;
  color: var(--priColor100);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.iuasr-faq-page .iuasr-faq__cat:hover { border-color: var(--priColor100); }
.iuasr-faq-page .iuasr-faq__cat-n {
  font-size: 11.5px;
  color: var(--blackAltText);
  font-variant-numeric: tabular-nums;
  background: var(--priColor102);
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 500;
}
.iuasr-faq-page .iuasr-faq__cat[aria-pressed="true"] {
  background: var(--priColor100);
  color: #FFFFFF;
  border-color: var(--priColor100);
}
.iuasr-faq-page .iuasr-faq__cat[aria-pressed="true"] .iuasr-faq__cat-n {
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85);
}
.iuasr-faq-page .iuasr-faq__cat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 20, 70, 0.20);
}

/* ---------- LAYOUT GRID ---------- */
.iuasr-faq-page .iuasr-faq__body {
  margin-top: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  align-items: start;
}

/* ---------- SECTIONS ---------- */
.iuasr-faq-page .iuasr-faq__section { margin-bottom: 44px; }
.iuasr-faq-page .iuasr-faq__section:last-child { margin-bottom: 0; }
.iuasr-faq-page .iuasr-faq__section[hidden] { display: none; }
.iuasr-faq-page .iuasr-faq__section-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 0 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--borderSubtleColor);
}
.iuasr-faq-page .iuasr-faq__section-head h2 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 22px; line-height: 28px;
  color: var(--priColor100); margin: 0;
  letter-spacing: -0.005em;
}
.iuasr-faq-page .iuasr-faq__section-count {
  font-size: 12px; color: var(--blackAltText);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.iuasr-faq-page .iuasr-faq__none {
  font-size: 15px; color: var(--blackAltText); font-weight: 300;
}

/* ---------- ACCORDION ---------- */
.iuasr-faq-page .iuasr-faq__list { margin: 0; padding: 0; }
.iuasr-faq-page .iuasr-faq__item {
  border-bottom: 1px solid var(--borderSubtleColor);
}
.iuasr-faq-page .iuasr-faq__item[hidden] { display: none; }
.iuasr-faq-page .iuasr-faq__question {
  list-style: none; cursor: pointer;
  padding: 20px 48px 20px 0;
  position: relative;
  font-size: 16px; font-weight: 500;
  color: var(--priColor100);
  line-height: 1.5;
  transition: color 120ms;
}
.iuasr-faq-page .iuasr-faq__question::-webkit-details-marker,
.iuasr-faq-page .iuasr-faq__question::marker { display: none; content: ""; }
.iuasr-faq-page .iuasr-faq__question::after {
  content: ""; position: absolute;
  right: 8px; top: 50%;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--priColor102);
  transform: translate(0, -50%);
  transition: background 160ms;
}
.iuasr-faq-page .iuasr-faq__question::before {
  content: ""; position: absolute;
  right: 19px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--priColor100);
  border-bottom: 1.5px solid var(--priColor100);
  transform: translate(0, -75%) rotate(45deg);
  transition: transform 240ms cubic-bezier(.2,0,0,1);
  z-index: 1;
}
.iuasr-faq-page .iuasr-faq__item[open] .iuasr-faq__question::before {
  transform: translate(0, -25%) rotate(-135deg);
}
.iuasr-faq-page .iuasr-faq__item[open] .iuasr-faq__question::after { background: var(--secColor301); }
.iuasr-faq-page .iuasr-faq__question:hover { color: var(--secColor100); }
.iuasr-faq-page .iuasr-faq__question:hover::after { background: var(--secColor301); }
.iuasr-faq-page .iuasr-faq__question:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(200,16,46,0.20);
  border-radius: 2px;
}
.iuasr-faq-page .iuasr-faq__answer {
  padding: 0 0 24px 0;
  font-size: 15px; line-height: 1.7;
  color: var(--priColor100);
  font-weight: 300;
  animation: iuasrFaqFade 200ms ease-out;
}
.iuasr-faq-page .iuasr-faq__answer p { margin: 0 0 10px; }
.iuasr-faq-page .iuasr-faq__answer p:last-child { margin-bottom: 0; }
.iuasr-faq-page .iuasr-faq__answer a { color: var(--secColor100); }
.iuasr-faq-page .iuasr-faq__answer ul { margin: 6px 0 10px; padding-left: 20px; }
.iuasr-faq-page .iuasr-faq__answer ul li { margin-bottom: 4px; }
.iuasr-faq-page .iuasr-faq__answer b { font-weight: 500; }
@keyframes iuasrFaqFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Search highlight (gevuld door de zoek-JS) */
.iuasr-faq-page mark.hl {
  background: var(--secColor301);
  color: var(--priColor100);
  padding: 0 2px;
  border-radius: 2px;
}

/* ---------- NO RESULTS ---------- */
.iuasr-faq-page .iuasr-faq__empty {
  display: none;
  padding: 48px 32px;
  text-align: center;
  background: #FFFFFF;
  border: 1px dashed var(--borderColor);
  border-radius: 12px;
  margin-top: 8px;
}
.iuasr-faq-page .iuasr-faq__empty[data-active] { display: block; }
.iuasr-faq-page .iuasr-faq__empty-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--priColor102);
  color: var(--priColor100);
  margin: 0 auto 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.iuasr-faq-page .iuasr-faq__empty h3 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 22px; line-height: 28px;
  color: var(--priColor100); margin: 0 0 8px;
}
.iuasr-faq-page .iuasr-faq__empty p {
  font-size: 14.5px; color: var(--blackAltText);
  font-weight: 300; margin: 0 0 20px;
  line-height: 1.6;
  max-width: 42ch;
  margin-left: auto; margin-right: auto;
}
.iuasr-faq-page .iuasr-faq__empty .btn { margin-top: 4px; }

/* ---------- SIDEBAR ---------- */
.iuasr-faq-page .iuasr-faq__aside {
  position: sticky;
  top: 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.iuasr-faq-page .iuasr-faq__card {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 10px;
  padding: 22px 22px 20px;
}
.iuasr-faq-page .iuasr-faq__card h3 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 18px; line-height: 22px; margin: 0 0 12px;
  color: var(--priColor100);
}
.iuasr-faq-page .iuasr-faq__card p {
  font-size: 13.5px; color: var(--blackAltText);
  line-height: 1.6; margin: 0 0 14px;
  font-weight: 300;
}
.iuasr-faq-page .iuasr-faq__popular { list-style: none; margin: 0; padding: 0; }
.iuasr-faq-page .iuasr-faq__popular li { border-top: 1px solid var(--borderSubtleColor); }
.iuasr-faq-page .iuasr-faq__popular li:first-child { border-top: 0; }
.iuasr-faq-page .iuasr-faq__popular a {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 0;
  font-size: 13.5px; line-height: 1.45;
  color: var(--priColor100);
  text-decoration: none;
  font-weight: 400;
}
.iuasr-faq-page .iuasr-faq__popular a:hover { color: var(--secColor100); text-decoration: none; }
.iuasr-faq-page .iuasr-faq__popular a:hover .iuasr-faq__popular-num { color: var(--secColor100); }
.iuasr-faq-page .iuasr-faq__popular-num {
  flex: none;
  font-family: var(--serif-font);
  font-size: 14px;
  color: var(--blackAltText);
  width: 18px;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
  transition: color 120ms;
}

.iuasr-faq-page .iuasr-faq__card--contact {
  background: var(--priColor100);
  color: #FFFFFF;
  border: 0;
}
.iuasr-faq-page .iuasr-faq__card--contact h3 { color: #FFFFFF; }
.iuasr-faq-page .iuasr-faq__card--contact p { color: rgba(242,241,244,0.75); }
.iuasr-faq-page .iuasr-faq__ac-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 13.5px;
}
.iuasr-faq-page .iuasr-faq__ac-row:first-of-type { margin-top: 4px; }
.iuasr-faq-page .iuasr-faq__ac-ico {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: var(--secColor300);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.iuasr-faq-page .iuasr-faq__ac-k {
  font-size: 11px;
  color: rgba(242,241,244,0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  display: block;
  margin-bottom: 1px;
}
.iuasr-faq-page .iuasr-faq__ac-row a {
  color: #FFFFFF; text-decoration: none;
  border-bottom: 1px solid rgba(255,210,176,0.30);
  padding-bottom: 1px;
  font-weight: 500;
}
.iuasr-faq-page .iuasr-faq__ac-row a:hover { border-bottom-color: var(--secColor300); }
.iuasr-faq-page .iuasr-faq__ac-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  margin-top: 16px;
  background: #FFFFFF;
  color: var(--priColor100);
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background 120ms;
}
.iuasr-faq-page .iuasr-faq__ac-cta:hover { background: var(--secColor300); color: var(--priColor100); }
.iuasr-faq-page .iuasr-faq__ac-cta .arrow { transition: transform 200ms; }
.iuasr-faq-page .iuasr-faq__ac-cta:hover .arrow { transform: translateX(3px); }

/* ---------- BOTTOM CTA STRIP ---------- */
.iuasr-faq-page .iuasr-faq__cta-block {
  margin: 56px 0 64px;
  padding: 28px 32px;
  background: var(--secColor301);
  border-radius: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.iuasr-faq-page .iuasr-faq__cta-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  color: var(--priColor100);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.iuasr-faq-page .iuasr-faq__cta-text h3 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 22px; line-height: 28px;
  margin: 0 0 4px;
  color: var(--priColor100);
}
.iuasr-faq-page .iuasr-faq__cta-text p {
  font-size: 14px; color: var(--priColor100);
  font-weight: 300; margin: 0; line-height: 1.55;
  opacity: 0.75;
}
.iuasr-faq-page .iuasr-faq__cta-actions {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; justify-content: flex-end;
}
.iuasr-faq-page .iuasr-faq__cta-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500;
  color: var(--priColor100);
  text-decoration: none;
}
.iuasr-faq-page .iuasr-faq__cta-phone:hover { color: var(--secColor100); text-decoration: none; }
.iuasr-faq-page .iuasr-faq__cta-phone-ico {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- FAQ RESPONSIVE ---------- */
@media (max-width: 920px) {
  .iuasr-faq-page .iuasr-faq__body { grid-template-columns: 1fr; gap: 48px; }
  .iuasr-faq-page .iuasr-faq__aside { position: static; }
}
@media (max-width: 640px) {
  .iuasr-faq-page .iuasr-faq__hero { padding: 32px 0 0; }
  .iuasr-faq-page .iuasr-faq__hero h1 { font-size: 32px; line-height: 36px; }
  .iuasr-faq-page .iuasr-faq__hero p { font-size: 15px; }
  .iuasr-faq-page .iuasr-faq__search-input { font-size: 15.5px; padding: 14px 12px 14px 4px; }
  .iuasr-faq-page .iuasr-faq__search-count { display: none; }
  .iuasr-faq-page .iuasr-faq__cats {
    margin: 22px -18px 0;
    padding: 4px 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .iuasr-faq-page .iuasr-faq__cats::-webkit-scrollbar { display: none; }
  .iuasr-faq-page .iuasr-faq__cat { flex: none; }
  .iuasr-faq-page .iuasr-faq__question { font-size: 15px; padding-right: 44px; }
  .iuasr-faq-page .iuasr-faq__answer { padding-right: 0; font-size: 14.5px; }
  .iuasr-faq-page .iuasr-faq__cta-block {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 20px;
    text-align: left;
  }
  .iuasr-faq-page .iuasr-faq__cta-actions { justify-content: flex-start; }
}

/* ============================================================
   LANDINGSPAGINA V2 — front-page.php
   Scoped onder .home zodat .hero/.main/.section overrides geen
   andere templates raken (shared classes). Bron-blueprint:
   Designs/pages/landing-v2.html
   ============================================================ */
.home { background: #FFFFFF; }

/* ----- 01 Hero ----- */
.home .hero {
  background-color: var(--priColor100);
  background-image:
    linear-gradient(180deg, rgba(30,20,70,0.62) 0%, rgba(30,20,70,0.38) 45%, rgba(30,20,70,0.55) 100%),
    var(--banner-url, url("https://inschrijving.iuasr.nl/wp-content/uploads/2026/05/iuasr-gebouw.jpg"));
  background-size: cover;
  background-position: center 42%;
  color: #FFFFFF;
  overflow: hidden;
}
.home .hero::after { display: none; } /* v2 heeft geen onderfade */
.home .hero__inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 120px 32px 132px;
}
.home .hero__eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,210,176,0.92);
  font-weight: 500;
  margin: 0 0 22px;
  display: flex; align-items: center; gap: 14px;
}
.home .hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1.5px;
  background: var(--secColor300);
}
.home .hero h1 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 64px; line-height: 70px; margin: 0 0 22px;
  letter-spacing: -0.012em;
  text-wrap: balance;
  max-width: 18ch;
  color: #FFFFFF;
}
.home .hero h1 em {
  font-style: normal;
  color: var(--secColor300);
}
.home .hero__lead {
  font-size: 19px; line-height: 32px;
  color: rgba(255,255,255,0.88);
  font-weight: 300;
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* ----- Main / sections ----- */
.home .main {
  flex: 1 0 auto; width: 100%;
  max-width: 1120px; margin: 0 auto;
  padding: 0 32px;
}
.home .section { margin-top: 96px; }
.home .section--first { margin-top: 88px; }
.home .section__head { margin-bottom: 28px; display: block; }
.home .section__head h2 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 36px; line-height: 42px; margin: 0 0 10px;
  letter-spacing: -0.008em;
  color: var(--priColor100);
  text-wrap: balance;
  max-width: 22ch;
}
.home .section__head p {
  font-size: 15.5px; line-height: 1.65;
  color: var(--blackAltText); font-weight: 300;
  margin: 0; max-width: 56ch;
  text-wrap: pretty;
}

/* ----- 02 Action cards ----- */
.home .actions-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 20px;
}
.home .action-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 10px;
  padding: 32px 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow 200ms, transform 200ms, border-color 200ms;
  min-height: 300px;
  text-decoration: none;
  color: inherit;
}
.home .action-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
  border-color: var(--borderColor);
  text-decoration: none;
}
.home .action-card--primary {
  background: var(--priColor100);
  border-color: var(--priColor100);
  color: #FFFFFF;
}
.home .action-card--primary:hover { color: #FFFFFF; }
.home .action-card__num {
  font-family: var(--serif-font);
  font-size: 14px;
  color: var(--secColor100);
  display: flex; align-items: center; gap: 12px;
  letter-spacing: 0.02em;
}
.home .action-card__num .n {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.home .action-card--primary .action-card__num { color: var(--secColor300); }
.home .action-card h3 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 30px; line-height: 34px; margin: 0;
  letter-spacing: -0.005em;
  color: inherit;
  text-wrap: balance;
  max-width: 20ch;
}
.home .action-card__desc {
  font-size: 15px; line-height: 1.65;
  color: var(--blackAltText);
  margin: 0;
  font-weight: 300;
}
.home .action-card--primary .action-card__desc { color: rgba(255,255,255,0.78); }
.home .action-card__note {
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: var(--blackAltText);
  font-weight: 300;
}
.home .action-card__note strong { font-weight: 600; color: var(--priColor100); }
.home .action-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 15.5px;
  margin-top: auto;
  color: var(--secColor100);
}
.home .action-card__cta .arrow { transition: transform 200ms; }
.home .action-card:hover .action-card__cta .arrow { transform: translateX(4px); }
.home .action-card--primary .action-card__cta { color: var(--secColor300); }
.home .action-card--primary .action-card__cta:hover { color: #FFFFFF; }

/* ----- 03 Quote ----- */
.home .quote-block {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: center;
  padding: 24px 0;
}
.home .quote-block__mark {
  font-family: var(--serif-font);
  font-size: 88px;
  line-height: 1;
  color: var(--secColor100);
  margin-bottom: 4px;
  display: block;
  height: 36px;
}
.home .quote-block__text {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 38px; line-height: 50px;
  color: var(--priColor100);
  margin: 0 0 28px;
  letter-spacing: -0.005em;
  text-wrap: balance;
  max-width: 22ch;
}
.home .quote-block__rule {
  width: 56px; height: 1.5px;
  background: var(--priColor100);
  margin-bottom: 16px;
}
.home .quote-block__attrib {
  font-size: 13.5px;
  color: var(--blackAltText);
  line-height: 1.55;
}
.home .quote-block__attrib b {
  display: block;
  color: var(--priColor100);
  font-family: var(--sans-serif-font);
  font-size: 14.5px;
  font-weight: 500;
  margin-bottom: 2px;
}
.home .quote-block__attrib i {
  display: block;
  font-style: italic;
  color: var(--blackAltText);
  margin-top: 6px;
  font-size: 13px;
}
.home .quote-block__side {
  padding-left: 32px;
  border-left: 1px solid var(--borderSubtleColor);
}
.home .quote-block__side h4 {
  font-family: var(--sans-serif-font);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blackAltText);
  margin: 0 0 14px;
}
.home .quote-block__side p {
  font-size: 14px; line-height: 1.65;
  color: var(--priColor100);
  font-weight: 300;
  margin: 0;
}

/* ----- 04 Faculty / docentenblok ----- */
.home .faculty {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--priColor100);
  color: #FFFFFF;
}
.home .faculty__media {
  position: relative;
  min-height: 460px;
  background: #0F0828;
  overflow: hidden;
}
.home .faculty__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
  position: absolute; inset: 0;
}
.home .faculty__media::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(255,210,176,0.42) 0%, rgba(255,210,176,0.18) 22%, transparent 55%),
    radial-gradient(ellipse at 20% 92%, rgba(30,20,70,0.45) 0%, transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
.home .faculty__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(15,8,40,0.65) 100%),
    linear-gradient(90deg, transparent 65%, rgba(30,20,70,0.40) 100%);
  pointer-events: none;
  z-index: 2;
}
.home .faculty__caption {
  position: absolute;
  left: 24px; bottom: 22px; right: 24px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 3;
  color: #FFFFFF;
  font-size: 12.5px;
}
.home .faculty__caption .k {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--secColor300);
}
.home .faculty__caption .v {
  font-family: var(--serif-font);
  font-size: 17px; line-height: 1.3;
  color: #FFFFFF;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.home .faculty__body {
  padding: 56px 48px 52px;
  display: flex; flex-direction: column; gap: 18px;
  justify-content: center;
}
.home .faculty__label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--secColor300);
}
.home .faculty__title {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 34px; line-height: 40px; margin: 0;
  letter-spacing: -0.005em;
  text-wrap: balance;
  max-width: 20ch;
  color: #FFFFFF;
}
.home .faculty__desc {
  font-size: 15.5px; line-height: 1.7;
  color: rgba(255,255,255,0.82);
  font-weight: 300;
  margin: 0;
  max-width: 48ch;
}
.home .faculty__meta {
  display: flex; flex-wrap: wrap; gap: 28px;
  margin-top: 6px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.home .faculty__meta div {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 13.5px;
}
.home .faculty__meta .k {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,210,176,0.85);
}
.home .faculty__meta .v {
  color: #FFFFFF;
  font-weight: 500;
}

/* ----- 04b Donatie ANBI info ----- */
.home .donatie-anbi {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  padding: 48px;
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 12px;
}
.home .donatie-anbi__label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--secColor100);
  display: block; margin-bottom: 12px;
}
.home .donatie-anbi__title {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 26px; line-height: 34px; margin: 0;
  color: var(--priColor100);
  text-wrap: balance;
}
.home .donatie-anbi__body p {
  font-size: 15px; line-height: 1.78;
  color: var(--blackAltText);
  margin: 0 0 14px;
}
.home .donatie-anbi__body p:last-child { margin-bottom: 0; }

/* ----- 05 Help strip ----- */
.home .help-strip {
  margin: 96px 0 0;
  padding: 32px 40px;
  border-radius: 12px;
  background: var(--secColor301);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.home .help-strip__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.65);
  color: var(--priColor100);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.home .help-strip h3 {
  font-family: var(--serif-font); font-weight: 400;
  font-size: 22px; line-height: 28px;
  margin: 0 0 4px;
  color: var(--priColor100);
}
.home .help-strip p {
  font-size: 14px; color: var(--priColor100);
  font-weight: 300; margin: 0; line-height: 1.55;
  opacity: 0.78;
}
.home .help-strip__actions {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.home .help-strip__link {
  font-size: 14px; font-weight: 500;
  color: var(--priColor100);
  text-decoration: none;
  border-bottom: 1px solid rgba(30,20,70,0.30);
  padding-bottom: 1px;
}
.home .help-strip__link:hover { border-bottom-color: var(--priColor100); text-decoration: none; }
.home .help-strip__actions .btn--primary {
  background: var(--priColor100);
  border-color: var(--priColor100);
  color: #FFFFFF;
}
.home .help-strip__actions .btn--primary:hover {
  background: var(--priColor101, #2A1F66);
  border-color: var(--priColor101, #2A1F66);
  color: #FFFFFF;
}

/* ----- 06 Rich footer ----- */
.home .rich-footer {
  background: var(--priColor100);
  color: rgba(242,241,244,0.75);
  font-size: 13.5px; line-height: 1.6;
  margin-top: 96px;
  font-weight: 300;
}
.home .rich-footer__inner {
  max-width: 1120px; margin: 0 auto;
  padding: 56px 32px 36px;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 36px;
}
.home .rich-footer__brand img { height: 56px; width: auto; display: block; margin-bottom: 18px; filter: brightness(0) invert(1); }
.home .rich-footer__brand p { margin: 0; color: rgba(242,241,244,0.75); }
.home .rich-footer__brand p b { color: #FFFFFF; font-weight: 500; }
.home .rich-footer__brand .addr { margin-top: 10px; }
.home .rich-footer__brand .socials {
  display: flex; gap: 10px;
  margin-top: 20px;
}
.home .rich-footer__brand .socials a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  font-size: 15px;
  text-decoration: none;
}
.home .rich-footer__brand .socials a:hover { background: var(--secColor300); color: var(--priColor100); }
.home .rich-footer__col h4 {
  font-family: var(--sans-serif-font); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--secColor300); margin: 0 0 16px;
}
.home .rich-footer__col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.home .rich-footer__col a {
  color: rgba(242,241,244,0.85); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.home .rich-footer__col a:hover { color: #FFFFFF; border-bottom-color: var(--secColor300); text-decoration: none; }
.home .rich-footer__bottom {
  max-width: 1120px; margin: 0 auto;
  padding: 16px 32px 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  color: rgba(242,241,244,0.55); font-size: 12px;
}

/* ----- Landing v2 responsive ----- */
@media (max-width: 980px) {
  .home .hero__inner { padding: 96px 32px 104px; }
  .home .hero__eyebrow { font-size: 11.5px; }
  .home .hero h1 { font-size: 52px; line-height: 58px; }
  .home .hero__lead { font-size: 17px; line-height: 28px; }
  .home .actions-grid { grid-template-columns: 1fr; }
  .home .quote-block { grid-template-columns: 1fr; gap: 32px; }
  .home .quote-block__side { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid var(--borderSubtleColor); }
  .home .quote-block__text { font-size: 30px; line-height: 40px; }
  .home .faculty { grid-template-columns: 1fr; }
  .home .faculty__media { min-height: 320px; }
  .home .faculty__body { padding: 40px 32px; }
  .home .donatie-anbi { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
  .home .help-strip { grid-template-columns: 1fr; }
  .home .rich-footer__inner { grid-template-columns: 1fr 1fr; }
  .home .rich-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .home .hero__inner { padding: 64px 18px 72px; }
  .home .hero h1 { font-size: 38px; line-height: 44px; }
  .home .hero__lead { font-size: 15.5px; line-height: 26px; }
  .home .main { padding: 0 18px; }
  .home .section { margin-top: 64px; }
  .home .section--first { margin-top: 56px; }
  .home .section__head h2 { font-size: 28px; line-height: 32px; }
  .home .action-card { padding: 26px 22px 24px; min-height: 240px; }
  .home .action-card h3 { font-size: 24px; line-height: 28px; }
  .home .quote-block__text { font-size: 24px; line-height: 32px; }
  .home .faculty__body { padding: 32px 22px; }
  .home .faculty__title { font-size: 26px; line-height: 30px; }
  .home .donatie-anbi { padding: 24px; }
  .home .donatie-anbi__title { font-size: 22px; line-height: 28px; }
  .home .help-strip { padding: 24px 22px; grid-template-columns: 1fr; }
  .home .help-strip__actions { width: 100%; }
  .home .help-strip__actions .btn { flex: 1; }
  .home .rich-footer__inner { grid-template-columns: 1fr; padding: 36px 18px 24px; gap: 28px; }
  .home .rich-footer__bottom { padding: 14px 18px 20px; }
}

/* ---------- OPLEIDINGSPAGINA'S (publiek, SEO) ---------- */
.opl-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 32px 8px;
}
.opl-breadcrumb {
  font-size: 13.5px;
  color: var(--blackAltText);
  font-weight: 300;
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.opl-breadcrumb a { color: var(--blackAltText); text-decoration: none; }
.opl-breadcrumb a:hover { color: var(--secColor100); }
.opl-breadcrumb span[aria-hidden] { opacity: .5; }
.opl-hero__title {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 40px;
  line-height: 48px;
  color: var(--priColor100);
  margin: 0 0 12px;
}
.opl-hero__tagline {
  font-size: 18px;
  line-height: 28px;
  color: var(--blackAltText);
  font-weight: 300;
  max-width: 720px;
  margin: 0 0 24px;
}
.opl-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.opl-layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 32px 64px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
}
.opl-content { min-width: 0; }
.opl-content p { font-size: 16px; line-height: 26px; color: #3a3350; font-weight: 300; margin: 0 0 18px; }
.opl-content a { color: var(--secColor100); }
.opl-content h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 26px;
  line-height: 32px;
  color: var(--priColor100);
  margin: 32px 0 12px;
}
.opl-usps {
  list-style: none;
  margin: 4px 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.opl-usps li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 24px;
  color: #3a3350;
}
.opl-usps li i {
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--secColor100);
  font-size: 14px;
}

.opl-aside { position: sticky; top: 24px; display: grid; gap: 20px; }
.opl-card {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 14px;
  padding: 24px;
}
.opl-card h3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 19px;
  color: var(--priColor100);
  margin: 0 0 14px;
}
.opl-card--facts dl { margin: 0; display: grid; gap: 10px; }
.opl-card--facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--blackAltText); }
.opl-card--facts dd { margin: 0 0 4px; font-size: 15px; color: var(--priColor100); font-weight: 500; }
.opl-card--cta { background: var(--priColor102); border-color: var(--borderColor); }
.opl-card--cta p { font-size: 14.5px; line-height: 22px; color: var(--blackAltText); font-weight: 300; margin: 0 0 16px; }
.opl-card--cta .btn { width: 100%; }
.opl-card__note { margin: 14px 0 0 !important; font-size: 13px; }
.opl-card__note a { color: var(--secColor100); }

/* Overzichtspagina */
.opl-overview { max-width: 1120px; margin: 0 auto; padding: 56px 32px 64px; }
.opl-overview__head { max-width: 760px; margin-bottom: 36px; }
.opl-overview__head h1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 40px;
  line-height: 48px;
  color: var(--priColor100);
  margin: 0 0 14px;
}
.opl-overview__head p { font-size: 17px; line-height: 27px; color: var(--blackAltText); font-weight: 300; margin: 0; }
.opl-overview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.opl-tile {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 14px;
  padding: 26px 24px;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.opl-tile:hover { border-color: var(--borderColor); box-shadow: 0 8px 24px rgba(30,20,70,0.08); transform: translateY(-2px); }
.opl-tile__title {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 21px;
  line-height: 27px;
  color: var(--priColor100);
  margin: 0 0 8px;
}
.opl-tile__desc { font-size: 14.5px; line-height: 22px; color: var(--blackAltText); font-weight: 300; margin: 0 0 16px; flex: 1; }
.opl-tile__more { font-size: 14px; font-weight: 500; color: var(--secColor100); display: inline-flex; align-items: center; gap: 8px; }
.opl-tile:hover .opl-tile__more i { transform: translateX(3px); }
.opl-tile__more i { transition: transform .15s ease; }
.opl-overview__cta { margin-top: 40px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.opl-overview__cta p { margin: 0; font-size: 16px; color: var(--priColor100); }
.opl-detail { max-width: 760px; margin: 0 auto; padding: 56px 32px 64px; }

@media (max-width: 960px) {
  .opl-layout { grid-template-columns: 1fr; gap: 32px; }
  .opl-aside { position: static; }
  .opl-overview__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .opl-hero { padding: 36px 20px 4px; }
  .opl-hero__title, .opl-overview__head h1 { font-size: 30px; line-height: 38px; }
  .opl-layout { padding: 24px 20px 48px; }
  .opl-overview { padding: 36px 20px 48px; }
  .opl-overview__grid { grid-template-columns: 1fr; }
}

/* ---------- COMPLIANZ COOKIEBANNER — IUASR auth-flow-modalstijl ---------- */
/* Maakt van de gecentreerde Complianz-popup een compacte modal in de stijl van
   .auth-flow-card (uitlog-/bevestigingskaarten), met gedimde achtergrond.
   !important nodig omdat Complianz' CSS ná portal.css laadt. */

/* Gedimde achtergrond-overlay — alleen terwijl de banner zichtbaar is
   (cmplz-show), en weg zodra er geaccepteerd/geweigerd is (cmplz-dismissed). */
#cmplz-cookiebanner-container:has(.cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed)) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;
  background: rgba(30, 20, 70, 0.45) !important;
}

/* De kaart zelf — compact en gecentreerd, zoals .auth-flow-card. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  font-family: var(--sans-serif-font) !important;
  color: var(--priColor100) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--borderSubtleColor) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 60px rgba(30, 20, 70, 0.28) !important;
  max-width: 460px !important;
  width: calc(100% - 40px) !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  padding: 32px 32px 26px !important;
  text-align: center !important;
  z-index: 100000 !important;
}
.cmplz-cookiebanner .cmplz-header { padding: 0 !important; border: 0 !important; margin: 0 !important; }
.cmplz-cookiebanner .cmplz-title {
  font-family: var(--serif-font) !important;
  font-weight: 400 !important;
  font-size: 23px !important;
  line-height: 28px !important;
  color: var(--priColor100) !important;
  text-align: center !important;
}
.cmplz-cookiebanner .cmplz-body,
.cmplz-cookiebanner .cmplz-message {
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 300 !important;
  color: var(--blackAltText) !important;
  text-align: center !important;
}
.cmplz-cookiebanner a { color: var(--secColor100) !important; text-decoration: underline; }
.cmplz-cookiebanner a:hover { color: var(--secColor100-hover) !important; }
.cmplz-cookiebanner .cmplz-logo { display: none !important; }

/* Knoppen — gecentreerd, .btn-stijl. */
.cmplz-cookiebanner .cmplz-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
.cmplz-cookiebanner .cmplz-btn {
  font-family: var(--sans-serif-font) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  margin: 0 !important;
  border: 1.5px solid transparent !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: var(--secColor100) !important; color: #FFFFFF !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { background: var(--secColor100-hover) !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
  background: transparent !important;
  color: var(--secColor100) !important;
  border-color: var(--secColor100) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover { background: var(--secColor100) !important; color: #FFFFFF !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
  background: transparent !important;
  color: var(--priColor100) !important;
  border-color: var(--borderColor) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover { background: var(--priColor102) !important; }

/* Voorkeuren-categorieën (na "Voorkeuren bekijken") — links uitlijnen + toggles indigo. */
.cmplz-cookiebanner .cmplz-categories { text-align: left !important; margin-top: 14px !important; }
.cmplz-cookiebanner .cmplz-links { text-align: center !important; }
.cmplz-cookiebanner .cmplz-banner-checkbox input:checked + .cmplz-slider,
.cmplz-cookiebanner input.cmplz-consent-checkbox:checked + .cmplz-slider {
  background-color: var(--priColor100) !important;
}

/* "Beheer toestemming"-tab (revoke) onderaan. */
.cmplz-manage-consent .cmplz-btn,
#cmplz-manage-consent.cmplz-btn,
.cmplz-manage-consent button {
  background: var(--priColor100) !important;
  color: #FFFFFF !important;
  border-radius: 8px 8px 0 0 !important;
  font-family: var(--sans-serif-font) !important;
}

/* Cookie-modal mobiel: smaller, minder padding, knoppen onder elkaar. */
@media (max-width: 640px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    padding: 24px 20px 20px !important;
    max-height: 88vh !important;
  }
  .cmplz-cookiebanner .cmplz-title { font-size: 20px !important; line-height: 26px !important; }
  .cmplz-cookiebanner .cmplz-body,
  .cmplz-cookiebanner .cmplz-message { font-size: 13.5px !important; line-height: 1.5 !important; }
  .cmplz-cookiebanner .cmplz-buttons { flex-direction: column !important; gap: 8px !important; }
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { width: 100% !important; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .site-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
@media (max-width: 960px) {
  /* 2 kaarten — gelijk verdeeld op tablet, geen primary-fullwidth meer
     (gaf eerder een leeg vak rechts toen we van 3 → 2 kaarten gingen). */
  .cta-grid { grid-template-columns: 1fr 1fr; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .hero__inner { padding: 90px 32px 120px; }
}
@media (max-width: 640px) {
  .site-header__inner { padding: 14px 20px; }
  .site-header__logo img { height: max(40px, calc(var(--logo-header-h) * 0.72)); }
  .site-header__right { gap: 8px; }
  .site-header__right .meta { display: none; }
  .site-header__right a.login svg { display: none; }
  .site-header__right a.login,
  .site-header__right a.register { font-size: 13px; }
  .site-header__right a.register { min-height: 34px; padding: 7px 10px; }
  .hero__inner { padding: 64px 20px 90px; }
  .hero h1 { font-size: 36px; line-height: 42px; }
  .hero p.lead { font-size: 16px; line-height: 25px; }
  .main { padding: 32px 20px 56px; }
  .intro { margin-bottom: 32px; }
  .intro h1 { font-size: 32px; line-height: 38px; }
  .intro p { font-size: 16px; line-height: 24px; }
  .cta-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  .cta-card { min-height: 0; padding: 24px 22px 22px; gap: 14px; }
  .cta-card--primary { grid-column: auto; }
  .cta-card h2 { font-size: 24px; line-height: 28px; }
  .btn { width: 100%; }
  .help-row { padding: 18px; gap: 14px; }
  .help-row__text { min-width: 0; flex-basis: 100%; }
  .help-row__links { flex-basis: 100%; gap: 12px 18px; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; padding: 36px 20px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__bottom { padding: 18px 20px 24px; flex-direction: column; gap: 6px; }
  /* Aanmelden — stap 1 (steps-bar op /aanmelden/) */
  .steps-bar__inner { padding: 0 20px; }
  .steps .step__label { display: none; }
  .steps .step--active .step__label { display: inline; }
  .steps .step--done .step__label { display: none; }
  .aanmeld-intro h1 { font-size: 28px; line-height: 34px; }
  .prog-grid, .prog-grid--hbo, .prog-grid--courses { grid-template-columns: 1fr; }
  /* Header user chip */
  .user-chip__name { display: none; }
  /* Bevestigingspagina */
  .main--bevestiging { padding: 36px 18px 56px; }
  .success-mark { width: 68px; height: 68px; }
  .success-mark svg { width: 36px; height: 36px; }
  .bvst-hero h1 { font-size: 28px; line-height: 34px; }
  .bvst-hero__lede { font-size: 16px; line-height: 24px; }
  .bvst-ref { grid-template-columns: 1fr; gap: 14px; padding: 16px 18px; }
  .bvst-expect { padding: 22px 20px; }
  .bvst-expect h2 { font-size: 19px; line-height: 24px; }
  .bvst-actions { flex-direction: column; align-items: stretch; }
  .bvst-actions .btn { width: 100%; }
  /* Context bar */
  .context__inner { padding: 12px 18px; gap: 8px; }
  .context__title { font-size: 15px; }
  /* Aanmeldformulier — stap 2 */
  .main--formulier { padding: 22px 18px 48px; }
  /* Desktop stepper verbergen, mobile stepper tonen */
  .stepper { display: none; }
  .stepper-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    border: 1px solid var(--borderSubtleColor);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 22px;
  }
  .stepper-mobile__count {
    font-family: var(--serif-font);
    font-size: 17px;
    color: var(--priColor100);
    line-height: 1;
  }
  .stepper-mobile__count small {
    font-family: var(--sans-serif-font);
    font-size: 12px;
    color: var(--blackAltText);
    font-weight: 400;
    margin-left: 4px;
  }
  .stepper-mobile__label { font-size: 13px; color: var(--priColor100); font-weight: 500; flex: 1; }
  .stepper-mobile__dots { display: flex; gap: 4px; }
  .stepper-mobile__dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--priColor102);
    display: inline-block;
  }
  .stepper-mobile__dots i.is-current { background: var(--priColor100); width: 18px; border-radius: 999px; }
  .stepper-mobile__dots i.is-done { background: #156A42; }
  /* Form card mobile */
  .form-card { padding: 24px 20px 22px; border-radius: 8px; }
  /* GF aanpassingen */
  .gform_wrapper .ginput_complex { grid-template-columns: 1fr; }
  .gform_wrapper .gform_button { width: 100%; }
  /* Datumvelden blijven 3 naast elkaar, ook op mobiel */
  .gform_wrapper .ginput_container_date select { font-size: 14px; }
  .gform_wrapper .gform_next_button { width: 100%; }
  .gform_wrapper .gform_page_footer { flex-wrap: wrap; }
}

/* ============================================================
   Mobile button UX — alle formulieracties + intake-card acties
   stacken full-width op <=640px. Primaire actie bovenaan via
   flex-direction: column-reverse (GF rendert in DOM-volgorde:
   previous → save → next, mobile-UX wil next bovenaan).
   ============================================================ */
@media (max-width: 640px) {
  /* GF multi-step footer — stack alle knoppen, primary bovenaan */
  .gform_wrapper .gform_page_footer,
  .gform_wrapper .gform_footer {
    display: flex !important;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .gform_wrapper .gform_page_footer.iuasr-footer-with-back {
    /* Stap 1: "Andere opleiding kiezen" link links, Volgende rechts —
       op mobiel ook gestapeld met primaire actie bovenaan. */
    flex-direction: column-reverse;
    justify-content: flex-start;
  }
  .gform_wrapper .gform_page_footer .gform_next_button,
  .gform_wrapper .gform_page_footer .gform_previous_button,
  .gform_wrapper .gform_page_footer .gform_button,
  .gform_wrapper .gform_footer .gform_next_button,
  .gform_wrapper .gform_footer .gform_button {
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  /* "Andere opleiding kiezen" link wordt visueel een knop op mobiel */
  .iuasr-back-to-choice {
    display: flex !important;
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    min-height: 41px;
    box-sizing: border-box;
  }
  /* Save & Continue link (als opnieuw zichtbaar gemaakt) — full width */
  .gform_wrapper .gform_save_link,
  .gform_wrapper a.gform_save_link,
  .gform_wrapper input.gform_save_link {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    text-align: center;
  }

  /* Review-stap intake-card buttons (Toevoegen aan agenda + Wijzigen) */
  .review-intake-card__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .review-intake-card__actions .btn,
  .review-intake-card__actions .btn--sm {
    width: 100%;
    justify-content: center;
  }

  /* Bevestigingspagina action-rij — Terug + Nog aanmelding */
  .bvst-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .bvst-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .bvst-actions__calendar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .bvst-actions__calendar .btn {
    width: 100%;
    justify-content: center;
  }

  /* Auth-flow pagina (login/register/2fa/account-bevestigen errorstate) */
  .auth-flow-card__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .auth-flow-card__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Mijn-afspraak knoppen — al primair gestapeld op 600px in eigen rule,
     hier nog eens expliciet voor 640px-breakpoint (UAT verwacht <=640px). */
  .mijn-afspraak-card__actions .btn { width: 100%; justify-content: center; }
  .mijn-afspraak-empty__actions .btn { width: 100%; box-sizing: border-box; }
}

/* ============================================================
   LEGAL & STATIC PAGES — design-aligned (P19)
   - /contact/ via .iuasr-contact-page (cols: bezoek campus + form)
   - /voorwaarden/, /privacyverklaring/, /cookieverklaring/,
     /klachtenprocedure/ via .iuasr-doc-page (sticky TOC + numbered
     sections + tabellen + deflist + rights-list).
   ============================================================ */

/* ---------- COMMON HERO (shared crumbs) ---------- */
.iuasr-doc-crumbs {
  font-size: 12.5px;
  color: var(--blackAltText);
  margin-bottom: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.iuasr-doc-crumbs a { color: var(--blackAltText); text-decoration: none; }
.iuasr-doc-crumbs a:hover { color: var(--secColor100); text-decoration: underline; }
.iuasr-doc-crumbs .sep { color: var(--borderColor); }
.iuasr-doc-crumbs [aria-current="page"] { color: var(--priColor100); }

/* ============================================================
   CONTACT PAGINA
   ============================================================ */
.iuasr-contact-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 44px 24px 64px;
}
.iuasr-contact-hero {
  margin-bottom: 44px;
  max-width: 60ch;
}
.iuasr-contact-hero h1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 44px;
  line-height: 50px;
  margin: 0 0 14px;
  color: var(--priColor100);
  letter-spacing: -0.01em;
}
.iuasr-contact-hero p {
  font-size: 16px;
  color: var(--priColor100);
  font-weight: 300;
  margin: 0;
  line-height: 1.65;
}
.iuasr-contact-hero p a { color: var(--secColor100); }

.iuasr-cx-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
  align-items: start;
}
.iuasr-col-heading {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 26px;
  line-height: 30px;
  color: var(--priColor100);
  margin: 0 0 6px;
}
.iuasr-col-sub {
  font-size: 13.5px;
  color: var(--blackAltText);
  font-weight: 300;
  margin: 0 0 22px;
  line-height: 1.55;
}

.iuasr-visit-address {
  font-size: 16px;
  line-height: 1.7;
  color: var(--priColor100);
  margin: 0 0 20px;
}
.iuasr-visit-address b { font-weight: 500; }

.iuasr-visit-map {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--priColor102);
  border: 1px solid var(--borderSubtleColor);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}
.iuasr-visit-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.iuasr-visit-map__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--secColor100);
  margin-top: 10px;
  text-decoration: none;
}
.iuasr-visit-map__link:hover { color: var(--secColor100-hover); text-decoration: underline; }

.iuasr-contact-list {
  font-size: 15px;
  line-height: 1.7;
  color: var(--priColor100);
  margin: 0;
  padding: 0;
  list-style: none;
}
.iuasr-contact-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borderSubtleColor);
}
.iuasr-contact-list li:last-child { border-bottom: 0; }
.iuasr-contact-list .k {
  color: var(--blackAltText);
  font-size: 13.5px;
  padding-top: 1px;
}
.iuasr-contact-list .v a {
  color: var(--priColor100);
  text-decoration: none;
  border-bottom: 1px solid var(--borderColor);
}
.iuasr-contact-list .v a:hover {
  color: var(--secColor100);
  border-bottom-color: var(--secColor100);
}
.iuasr-contact-list .v small {
  display: block;
  font-size: 13px;
  color: var(--blackAltText);
  font-weight: 300;
  margin-top: 2px;
}

.iuasr-section-divider {
  margin: 28px 0 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--blackAltText);
}

/* Contact-secties onder de twee kolommen */
.iuasr-contact-section-head {
  max-width: 620px;
  margin-bottom: 20px;
}
.iuasr-contact-section-head h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 26px;
  line-height: 30px;
  color: var(--priColor100);
  margin: 0 0 6px;
}
.iuasr-contact-section-head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--blackAltText);
  font-weight: 300;
}

.iuasr-contact-faq {
  margin: 42px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--borderSubtleColor);
}

.iuasr-faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.iuasr-faq-list details {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 0;
  overflow: hidden;
}
.iuasr-faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  color: var(--priColor100);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.45;
}
.iuasr-faq-list summary::-webkit-details-marker { display: none; }
.iuasr-faq-list summary::after {
  content: "+";
  float: right;
  color: var(--secColor100);
  font-weight: 600;
  margin-left: 12px;
}
.iuasr-faq-list details[open] summary::after { content: "-"; }
.iuasr-faq-list p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--blackAltText);
  font-size: 14px;
  line-height: 1.6;
}

.iuasr-org-card {
  margin-top: 42px;
  padding: 28px;
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.iuasr-org-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.iuasr-org-grid div {
  min-width: 0;
  padding: 14px 16px;
  background: var(--priColor102);
  border: 1px solid var(--borderSubtleColor);
  border-radius: 6px;
}
.iuasr-org-grid dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blackAltText);
  margin-bottom: 4px;
}
.iuasr-org-grid dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--priColor100);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
/* Op heel smalle viewports (<360px) IBAN toestaan af te breken om
   overflow van de cell te voorkomen. Op normale schermen blijft het
   nummer netjes op één regel. */
@media (max-width: 360px) {
  .iuasr-org-grid dd { white-space: normal; overflow-wrap: anywhere; letter-spacing: 0; }
}

/* Contact-form: onderstreepte velden, alleen textarea heeft rand.
   GF wrapper-classes worden hier overrulet om dit minimalistische
   ontwerp te bereiken zonder de aanmeld-formulieren te beïnvloeden
   (scoped via .iuasr-contact-page parent). */
.iuasr-contact-page .gform_wrapper .gfield {
  margin-bottom: 18px !important;
}
.iuasr-contact-page .gform_wrapper .gfield_label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--priColor100);
  display: block;
  margin-bottom: 6px;
}
/* Alle text-achtige inputs op contactform: transparente achtergrond,
   onderstreepte stijl. Het bericht-textarea is hieronder uitgezonderd
   (witte box conform design). */
.iuasr-contact-page .gform_wrapper input[type="text"],
.iuasr-contact-page .gform_wrapper input[type="email"],
.iuasr-contact-page .gform_wrapper input[type="tel"],
.iuasr-contact-page .gform_wrapper input[type="url"],
.iuasr-contact-page .gform_wrapper input[type="number"] {
  width: 100% !important;
  box-sizing: border-box;
  font-family: var(--sans-serif-font);
  font-size: 15px;
  background: transparent !important;
  color: var(--priColor100);
  border: 0;
  border-bottom: 1px solid var(--borderColor);
  padding: 8px 0;
  line-height: 1.4;
  border-radius: 0;
  transition: border-color 120ms;
}
/* Defensief: GF wikkelt phone-inputs soms in een container die zelf
   een achtergrond meekrijgt vanuit de generieke aanmeld-styling.
   Forceer transparent op de hele contact-form veld-wrapper. */
.iuasr-contact-page .gform_wrapper .gfield,
.iuasr-contact-page .gform_wrapper .ginput_container,
.iuasr-contact-page .gform_wrapper .ginput_container_phone,
.iuasr-contact-page .gform_wrapper .ginput_container_text,
.iuasr-contact-page .gform_wrapper .ginput_container_email,
.iuasr-contact-page .gform_wrapper .ginput_container_name {
  background: transparent !important;
}
.iuasr-contact-page .gform_wrapper textarea {
  width: 100% !important;
  box-sizing: border-box;
  font-family: var(--sans-serif-font);
  font-size: 15px;
  color: var(--priColor100);
  border: 1px solid var(--borderColor);
  border-radius: 4px;
  padding: 10px 12px;
  background: #FFFFFF;
  resize: vertical;
  min-height: 120px;
}
.iuasr-contact-page .gform_wrapper input:focus,
.iuasr-contact-page .gform_wrapper textarea:focus {
  outline: none;
  border-color: var(--priColor100);
}
.iuasr-contact-page .gform_wrapper textarea:focus {
  box-shadow: 0 0 0 3px rgba(30, 20, 70, 0.08);
}
.iuasr-contact-page .gform_wrapper .gfield.iuasr-consent .ginput_container_checkbox {
  background: transparent;
  padding: 0;
}
.iuasr-contact-page .iuasr-form-sla {
  font-size: 13px;
  color: var(--blackAltText);
  font-weight: 300;
  margin-top: 6px;
}

/* Override de globale GF confirmation card-styling (regel 2029) op de
   contact-pagina: de design success-state (.contact-success) heeft zijn
   eigen layout zonder card-bg. Verwijder de groene/grijze achtergrond,
   border en padding zodat de check-icon, titel en meta-list zonder
   omsluitende box verschijnen. */
.iuasr-contact-page .gform_confirmation_wrapper,
.iuasr-contact-page .gform_confirmation_wrapper .gform_confirmation_message,
.iuasr-contact-page .gform_wrapper .gform_confirmation_message,
.iuasr-contact-page .gform_confirmation_message {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--priColor100) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ============================================================
   CONTACT-SUCCESS — design success-state na form submit
   GF renders de confirmation-message-HTML waar het form stond;
   classes hieronder matchen de design-markup in gf-definitions.php
   F6 confirmation HTML.
   ============================================================ */
.iuasr-contact-page .contact-success { padding-top: 4px; }
.iuasr-contact-page .cs-mark {
  /* Geen groene achtergrond - neutrale paarse tint past bij IUASR-stijl
     en voorkomt 'celebration'-vibe. */
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--priColor102);
  color: var(--priColor100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.iuasr-contact-page .cs-mark svg {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: iuasrCsDraw 420ms cubic-bezier(0.2, 0, 0, 1) 140ms forwards;
}
@keyframes iuasrCsDraw { to { stroke-dashoffset: 0; } }
.iuasr-contact-page .cs-title {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 30px;
  line-height: 34px;
  color: var(--priColor100);
  margin: 0 0 10px;
}
.iuasr-contact-page .cs-lead {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--priColor100);
  font-weight: 300;
  margin: 0 0 22px;
  max-width: 42ch;
}
.iuasr-contact-page .cs-lead b { font-weight: 500; }
.iuasr-contact-page .cs-meta {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 16px;
  margin: 0 0 24px;
  padding: 14px 0;
  border-top: 1px solid var(--borderSubtleColor);
  border-bottom: 1px solid var(--borderSubtleColor);
  font-size: 13.5px;
  line-height: 1.5;
}
.iuasr-contact-page .cs-meta dt {
  color: var(--blackAltText);
  margin: 0;
  font-size: 13px;
}
.iuasr-contact-page .cs-meta dd {
  color: var(--priColor100);
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.iuasr-contact-page .cs-meta dd.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.iuasr-contact-page .cs-next {
  font-size: 13px;
  color: var(--blackAltText);
  margin: 0 0 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.iuasr-contact-page .cs-steps {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  counter-reset: iuasrcsstep;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--priColor100);
}
.iuasr-contact-page .cs-steps li {
  counter-increment: iuasrcsstep;
  position: relative;
  padding: 8px 0 8px 32px;
}
.iuasr-contact-page .cs-steps li::before {
  content: counter(iuasrcsstep);
  position: absolute;
  left: 0;
  top: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--priColor102);
  color: var(--priColor100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.iuasr-contact-page .cs-steps li b { font-weight: 500; }
.iuasr-contact-page .cs-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.iuasr-contact-page .cs-link {
  font-size: 14px;
  color: var(--secColor100);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.iuasr-contact-page .cs-link:hover {
  color: var(--secColor100-hover);
  border-bottom-color: currentColor;
}
.iuasr-contact-page .cs-link--ghost { color: var(--blackAltText); }
.iuasr-contact-page .cs-link--ghost:hover { color: var(--priColor100); }

/* ============================================================
   CONTACT-FAQ — design hairline accordion two-column
   ============================================================ */
.iuasr-contact-page .iuasr-faq {
  margin: 56px 0 0;
  border-top: 1px solid var(--borderSubtleColor);
  padding-top: 44px;
}
.iuasr-contact-page .iuasr-faq__head {
  max-width: 60ch;
  margin-bottom: 22px;
}
.iuasr-contact-page .iuasr-faq__title {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 26px;
  line-height: 30px;
  color: var(--priColor100);
  margin: 0 0 6px;
}
.iuasr-contact-page .iuasr-faq__sub {
  font-size: 13.5px;
  color: var(--blackAltText);
  font-weight: 300;
  margin: 0;
  line-height: 1.55;
}
.iuasr-contact-page .iuasr-faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  border-top: 1px solid var(--borderSubtleColor);
}
.iuasr-contact-page .iuasr-faq__item {
  border-bottom: 1px solid var(--borderSubtleColor);
}
.iuasr-contact-page .iuasr-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 40px 18px 0;
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--priColor100);
  line-height: 1.5;
  transition: color 120ms;
}
.iuasr-contact-page .iuasr-faq__item summary::-webkit-details-marker { display: none; }
.iuasr-contact-page .iuasr-faq__item summary::marker { content: ""; }
.iuasr-contact-page .iuasr-faq__item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translate(0, -75%) rotate(45deg);
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
  color: var(--blackAltText);
}
.iuasr-contact-page .iuasr-faq__item[open] summary::after {
  transform: translate(0, -25%) rotate(-135deg);
  color: var(--secColor100);
}
.iuasr-contact-page .iuasr-faq__item summary:hover { color: var(--secColor100); }
.iuasr-contact-page .iuasr-faq__item summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(200, 16, 46, 0.20);
  border-radius: 2px;
}
.iuasr-contact-page .iuasr-faq__answer {
  padding: 0 40px 20px 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--blackAltText);
  animation: iuasrFaqFade 180ms ease-out;
}
.iuasr-contact-page .iuasr-faq__answer p { margin: 0 0 8px; }
.iuasr-contact-page .iuasr-faq__answer p:last-child { margin-bottom: 0; }
.iuasr-contact-page .iuasr-faq__answer a { color: var(--secColor100); }
.iuasr-contact-page .iuasr-faq__answer a:hover { color: var(--secColor100-hover); }
@keyframes iuasrFaqFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.iuasr-contact-page .iuasr-faq__foot {
  margin-top: 20px;
  font-size: 14px;
  color: var(--blackAltText);
}
.iuasr-contact-page .iuasr-faq__foot a {
  color: var(--secColor100);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.iuasr-contact-page .iuasr-faq__foot a:hover { color: var(--secColor100-hover); }

/* ============================================================
   ORG-STRIP — design version (5-col met titel + 4 items)
   Vervangt de eerdere .iuasr-org-card kaartstijl.
   ============================================================ */
.iuasr-contact-page .iuasr-org-strip {
  border-top: 1px solid var(--borderSubtleColor);
  border-bottom: 1px solid var(--borderSubtleColor);
  padding-top: 28px;
  padding-bottom: 28px;
  margin-top: 40px;
  margin-bottom: 52px;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) repeat(4, 1fr);
  gap: 18px 36px;
  align-items: start;
}
.iuasr-contact-page .iuasr-org-strip__title {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.35;
  color: var(--priColor100);
  margin: 0;
}
.iuasr-contact-page .iuasr-org-strip__title small {
  font-family: var(--sans-serif-font);
  display: block;
  font-size: 12.5px;
  color: var(--blackAltText);
  font-weight: 300;
  margin-top: 4px;
  line-height: 1.4;
}
.iuasr-contact-page .iuasr-org-strip__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.iuasr-contact-page .iuasr-org-strip__item .k {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blackAltText);
}
.iuasr-contact-page .iuasr-org-strip__item .v {
  font-size: 14.5px;
  color: var(--priColor100);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

@media (max-width: 880px) {
  .iuasr-contact-page .iuasr-org-strip {
    grid-template-columns: 1fr 1fr;
  }
  .iuasr-contact-page .iuasr-org-strip__title { grid-column: 1 / -1; }
  .iuasr-contact-page .iuasr-faq__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .iuasr-contact-page .cs-meta {
    grid-template-columns: 95px 1fr;
  }
}
@media (max-width: 480px) {
  .iuasr-contact-page .iuasr-org-strip {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (max-width: 360px) {
  .iuasr-contact-page .iuasr-org-strip__item .v {
    white-space: normal;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   JURIDISCH SJABLOON
   ============================================================ */
.iuasr-doc-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

.iuasr-doc-hero {
  border-bottom: 1px solid var(--borderSubtleColor);
  padding-bottom: 22px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: end;
}
.iuasr-doc-hero > .iuasr-doc-crumbs,
.iuasr-doc-hero > .iuasr-doc-hero__type,
.iuasr-doc-hero > h1 {
  grid-column: 1;
}
.iuasr-doc-hero h1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 42px;
  line-height: 48px;
  margin: 0 0 14px;
  color: var(--priColor100);
  letter-spacing: -0.01em;
  max-width: 24ch;
}
.iuasr-doc-hero__actions {
  grid-column: 2;
  grid-row: span 3;
  align-self: end;
}
@media (max-width: 640px) {
  .iuasr-doc-hero { grid-template-columns: 1fr; }
  .iuasr-doc-hero__actions { grid-column: 1; grid-row: auto; margin-top: 14px; }
}
.iuasr-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 13px;
  color: var(--blackAltText);
  align-items: center;
}
.iuasr-doc-meta .item { display: inline-flex; align-items: center; gap: 6px; }
.iuasr-doc-meta b { color: var(--priColor100); font-weight: 500; }
.iuasr-doc-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--borderColor);
}
.iuasr-doc-meta-line {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--blackAltText);
  margin: 0 0 18px;
}
.iuasr-doc-meta-line strong { color: var(--blackAltText); font-weight: 500; }

/* Hero-actie-knoppen: PDF (cond) / Printen / Link kopiëren.
   Subtiele button-stijl zodat ze niet concurreren met de titel. */
.iuasr-doc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.iuasr-doc-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans-serif-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--priColor100);
  background: #FFFFFF;
  border: 1px solid var(--borderColor);
  border-radius: 6px;
  padding: 7px 12px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.iuasr-doc-action:hover {
  background: var(--priColor102);
  border-color: var(--priColor100);
  color: var(--priColor100);
  text-decoration: none;
}
.iuasr-doc-action:focus-visible {
  outline: 2px solid var(--secColor100);
  outline-offset: 2px;
}
.iuasr-doc-action svg {
  flex: none;
  opacity: 0.7;
}
.iuasr-doc-action:hover svg { opacity: 1; }
.iuasr-doc-action[data-iuasr-doc-copied="1"] {
  color: var(--success-fg, #156A42);
  border-color: rgba(21, 106, 66, 0.30);
  background: rgba(21, 106, 66, 0.06);
}
.iuasr-doc-action[data-iuasr-doc-copied="1"] svg { opacity: 1; }

.iuasr-doc-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}

/* Sticky TOC */
.iuasr-doc-toc {
  position: sticky;
  top: 24px;
  font-size: 13.5px;
  line-height: 1.5;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 4px 4px 4px 0;
}
.iuasr-doc-toc__hd {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--blackAltText);
  margin: 0 0 12px;
}
.iuasr-doc-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: iuasrtoc;
  display: flex;
  flex-direction: column;
}
.iuasr-doc-toc li { counter-increment: iuasrtoc; position: relative; }
.iuasr-doc-toc a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px 6px 14px;
  color: var(--priColor100);
  text-decoration: none;
  border-left: 2px solid transparent;
  line-height: 1.45;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.iuasr-doc-toc a::before {
  content: counter(iuasrtoc, decimal-leading-zero);
  font-size: 11px;
  color: var(--blackAltText);
  font-variant-numeric: tabular-nums;
  flex: none;
  min-width: 18px;
}
.iuasr-doc-toc a:hover {
  background: var(--priColor102);
  border-left-color: var(--borderColor);
  text-decoration: none;
}
.iuasr-doc-toc a.is-current {
  background: var(--priColor102);
  border-left-color: var(--secColor100);
  font-weight: 500;
}
.iuasr-doc-toc a.is-current::before {
  color: var(--secColor100);
  font-weight: 500;
}

/* Content kolom */
.iuasr-doc-content {
  min-width: 0;
  max-width: 68ch;
}
.iuasr-doc-content .lead,
.iuasr-doc-content > p:first-child {
  font-size: 17px;
  line-height: 1.65;
  color: var(--priColor100);
  font-weight: 400;
  margin: 0 0 28px;
}
.iuasr-doc-content .iuasr-doc-meta-line {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--blackAltText);
  font-size: 13px;
  line-height: 1.35;
  font-style: italic;
}
.iuasr-doc-content .iuasr-doc-meta-line strong {
  color: inherit;
  font-weight: 500;
}
.iuasr-doc-content h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 26px;
  line-height: 32px;
  color: var(--priColor100);
  margin: 36px 0 6px;
  scroll-margin-top: 24px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.iuasr-doc-content h2:first-child { margin-top: 0; }
.iuasr-doc-content h2 .num {
  font-family: var(--sans-serif-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--blackAltText);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  flex: none;
  padding-top: 2px;
}
.iuasr-doc-content h2 .num::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--borderColor);
  vertical-align: middle;
  margin: 0 0 4px 8px;
}
.iuasr-doc-content h3 {
  font-family: var(--sans-serif-font);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 24px;
  color: var(--priColor100);
  margin: 22px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.iuasr-doc-content h3 .num {
  font-size: 13px;
  font-weight: 500;
  color: var(--blackAltText);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.iuasr-doc-content p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--priColor100);
}
.iuasr-doc-content ul {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
}
.iuasr-doc-content ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.65;
}
.iuasr-doc-content ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--secColor100);
}
.iuasr-doc-content strong { font-weight: 600; }
.iuasr-doc-content a { color: var(--secColor100); }
.iuasr-doc-content a:hover { color: var(--secColor100-hover); }

/* Inline notitie met oranje strookje */
.iuasr-doc-content .note {
  margin: 4px 0 22px;
  padding-left: 18px;
  border-left: 2px solid var(--secColor300);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--blackAltText);
}
.iuasr-doc-content .note b { color: var(--priColor100); font-weight: 500; }

/* Tabellen (doelen × grondslagen, bewaartermijnen) */
.iuasr-doc-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 22px;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
}
.iuasr-doc-content th,
.iuasr-doc-content td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borderSubtleColor);
}
.iuasr-doc-content th {
  background: var(--priColor102);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--priColor100);
}
.iuasr-doc-content tr:last-child td { border-bottom: 0; }
.iuasr-doc-content td b { color: var(--priColor100); font-weight: 500; }

/* Definitielijst voor begrippen (Artikel 1) — vlak, dunne lijnen */
.iuasr-doc-content .deflist {
  margin: 6px 0 24px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 28px;
  font-size: 14.5px;
  line-height: 1.55;
  border-top: 1px solid var(--borderSubtleColor);
  border-bottom: 1px solid var(--borderSubtleColor);
  padding: 14px 0;
}
.iuasr-doc-content .deflist dt {
  color: var(--blackAltText);
  font-weight: 500;
  font-size: 13.5px;
}
.iuasr-doc-content .deflist dd { margin: 0; color: var(--priColor100); }

/* Rustig sluitblok onderaan elk juridisch document */
.iuasr-doc-end {
  margin: 40px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--borderSubtleColor);
}
.iuasr-doc-end h3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: var(--priColor100);
  margin: 0 0 6px;
}
.iuasr-doc-end p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--priColor100);
  max-width: 62ch;
}
.iuasr-doc-end a.cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--secColor100);
  text-decoration: none;
  margin-top: 6px;
}
.iuasr-doc-end a.cta:hover { color: var(--secColor100-hover); }

/* Verwante documenten als tekstlinks */
.iuasr-doc-related {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--borderSubtleColor);
}
.iuasr-doc-related h3 {
  font-family: var(--sans-serif-font);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--blackAltText);
  margin: 0 0 12px;
}
.iuasr-doc-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.iuasr-doc-related a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--priColor100);
  text-decoration: none;
  font-size: 14.5px;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  width: fit-content;
}
.iuasr-doc-related a:hover {
  color: var(--secColor100);
  border-bottom-color: var(--secColor100);
}
.iuasr-doc-related a .m {
  font-size: 12.5px;
  color: var(--blackAltText);
}

/* ============================================================
   LAATSTE NIEUWS — landingspagina nieuws-cards
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.news-card {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: box-shadow 200ms cubic-bezier(0.2,0,0,1), transform 200ms cubic-bezier(0.2,0,0,1), border-color 200ms;
}
.news-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--borderColor);
  text-decoration: none;
  color: inherit;
}
.news-card__media {
  aspect-ratio: 16 / 9;
  background: var(--priColor100) center / cover no-repeat;
  position: relative;
  overflow: hidden;
}
.news-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(30,20,70,0) 40%, rgba(30,20,70,0.35) 100%);
}
.news-card__media--collegegeld {
  background:
    radial-gradient(circle at 80% 20%, rgba(255,210,176,0.4) 0%, transparent 55%),
    linear-gradient(135deg, #1E1446 0%, #2A1F66 100%);
}
.news-card__media--opleiding {
  background:
    radial-gradient(circle at 20% 80%, rgba(200,16,46,0.45) 0%, transparent 55%),
    linear-gradient(135deg, #2A1F66 0%, #1E1446 70%);
}
.news-card__media--open-dag {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,210,176,0.55) 0%, transparent 60%),
    linear-gradient(135deg, #1E1446 0%, #3A2A7A 100%);
}
.news-card__media--default {
  background: linear-gradient(135deg, #1E1446 0%, #2A1F66 100%);
}
.news-card__media .glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-font);
  font-size: 96px;
  color: rgba(255,210,176,0.20);
  line-height: 1;
  letter-spacing: -0.04em;
  z-index: 1;
}
.news-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.news-card__meta {
  font-size: 12px;
  color: var(--blackAltText);
  font-weight: 400;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.news-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.news-card h3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--priColor100);
}
.news-card__excerpt {
  font-size: 14px;
  line-height: 21px;
  color: var(--blackAltText);
  margin: 0;
  text-wrap: pretty;
  flex: 1;
}
.news-card__read {
  font-size: 13px;
  font-weight: 500;
  color: var(--secColor100);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.news-card__read .arrow { transition: transform 200ms ease; }
.news-card:hover .news-card__read { color: var(--secColor100-hover); }
.news-card:hover .news-card__read .arrow { transform: translateX(3px); }
@media (max-width: 960px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid > :nth-child(3) { grid-column: 1 / -1; }
  .news-grid > :nth-child(3) .news-card__media { aspect-ratio: 21 / 9; }
}
@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-grid > :nth-child(3) .news-card__media { aspect-ratio: 16 / 9; }
}

/* ============================================================
   SECTION__MORE — "Alle berichten →" link naast sectietitel
   ============================================================ */
.section__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--secColor100);
  text-decoration: none;
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 4px;
  transition: color 150ms;
}
.section__more:hover { color: var(--secColor100-hover); text-decoration: none; }
.section__more .arrow { transition: transform 200ms ease; }
.section__more:hover .arrow { transform: translateX(3px); }

/* ============================================================
   NEWS-NAV — prev/next paginering op landing
   ============================================================ */
.news-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.news-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--borderColor);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--priColor100);
  text-decoration: none;
  background: #FFFFFF;
  transition: background 150ms, border-color 150ms;
}
.news-nav__btn:hover {
  background: var(--priColor103);
  border-color: var(--priColor100);
  text-decoration: none;
  color: var(--priColor100);
}
.news-nav__btn--disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.news-nav__pages { font-size: 13px; color: var(--blackAltText); min-width: 48px; text-align: center; }
#news-ajax-wrap { transition: opacity 200ms ease; }
#news-ajax-wrap.is-loading { opacity: 0.45; pointer-events: none; }

/* ============================================================
   FAQ — accordion op landing + contactpagina (iuasr_render_faq)
   ============================================================ */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 40px;
  border-top: 1px solid var(--borderSubtleColor);
}
.faq-item {
  border-bottom: 1px solid var(--borderSubtleColor);
  padding: 4px 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 4px 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: var(--priColor100);
  letter-spacing: -0.005em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat,
    var(--priColor102);
  color: var(--priColor100);
  transition: transform 220ms cubic-bezier(0.2,0,0,1), background 200ms;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat,
    var(--secColor300);
}
.faq-item summary:hover { color: var(--secColor100); }
.faq-item__body {
  padding: 0 36px 22px 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--blackAltText);
  font-weight: 400;
  max-width: 520px;
}
.faq-item__body p { margin: 0 0 10px; }
.faq-item__body p:last-child { margin-bottom: 0; }
.faq-item__body a { color: var(--secColor100); font-weight: 500; }
.faq-foot {
  margin-top: 28px;
  font-size: 14px;
  color: var(--blackAltText);
  font-weight: 300;
}
.faq-foot a { color: var(--secColor100); font-weight: 500; }
@media (max-width: 960px) {
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   BLOG OVERVIEW — /nieuws/ (page-nieuws.php)
   ============================================================ */
.blog-breadcrumb {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 32px 0;
  font-size: 13px;
  color: var(--blackAltText);
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.blog-breadcrumb a { color: var(--priColor100); text-decoration: none; font-weight: 400; }
.blog-breadcrumb a:hover { color: var(--secColor100); text-decoration: underline; }
.blog-breadcrumb .sep { opacity: 0.5; }
.single .blog-breadcrumb { max-width: 880px; padding-top: 24px; }

.blog-page-head {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 32px 0;
}
.blog-page-head h1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 52px;
  line-height: 60px;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  color: var(--priColor100);
}
.blog-page-head__intro {
  font-size: 18px;
  line-height: 28px;
  color: var(--blackAltText);
  font-weight: 300;
  margin: 0 0 24px;
  max-width: 640px;
}

.blog-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 32px 72px;
}

/* --- Featured row --- */
.blog-featured {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--borderSubtleColor);
  padding-bottom: 56px;
}
.blog-featured__main {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.blog-featured__main:hover { color: inherit; text-decoration: none; }
.blog-featured__media {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-featured__media .glyph {
  font-family: var(--serif-font);
  font-size: 200px;
  line-height: 1;
  color: rgba(255,210,176,0.22);
  letter-spacing: -0.04em;
}
.blog-featured__main h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 36px;
  line-height: 42px;
  margin: 22px 0 12px;
  color: var(--priColor100);
  letter-spacing: -0.01em;
  transition: color 150ms;
}
.blog-featured__main:hover h2 { color: var(--secColor100); }
.blog-featured__meta {
  font-size: 13px;
  color: var(--blackAltText);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.blog-featured__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.blog-featured__excerpt {
  font-size: 16px;
  line-height: 25px;
  color: var(--blackAltText);
  margin: 0;
  max-width: 580px;
}
.blog-featured__side {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid var(--borderSubtleColor);
  padding-left: 28px;
}
.blog-featured__side h3 {
  font-family: var(--sans-serif-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blackAltText);
  margin: 0 0 12px;
}
.blog-side-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  padding: 14px 0;
  border-bottom: 1px solid var(--borderSubtleColor);
}
.blog-side-item:first-of-type { padding-top: 0; }
.blog-side-item:last-of-type { border-bottom: 0; padding-bottom: 0; }
.blog-side-item:hover { color: inherit; text-decoration: none; }
.blog-side-item__meta { font-size: 12px; color: var(--blackAltText); }
.blog-side-item h4 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  margin: 2px 0 0;
  color: var(--priColor100);
  transition: color 150ms;
}
.blog-side-item:hover h4 { color: var(--secColor100); }

/* --- Section head + list --- */
.blog-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.blog-list-head h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 26px;
  margin: 0;
  color: var(--priColor100);
  letter-spacing: -0.005em;
}
.blog-list-count { font-size: 13px; color: var(--blackAltText); font-weight: 300; }

/* --- Card grid --- */
.blog-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
.blog-post {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms cubic-bezier(0.2,0,0,1);
}
.blog-post:hover { color: inherit; text-decoration: none; transform: translateY(-2px); }
.blog-post__media {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  margin-bottom: 16px;
}
.blog-post__media .glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-font);
  font-size: 96px;
  line-height: 1;
  color: rgba(255,210,176,0.20);
  letter-spacing: -0.04em;
}
.blog-post__meta {
  font-size: 12px;
  color: var(--blackAltText);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.blog-post__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.blog-post h3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  margin: 8px 0 6px;
  color: var(--priColor100);
  letter-spacing: -0.005em;
  transition: color 150ms;
}
.blog-post:hover h3 { color: var(--secColor100); }
.blog-post__excerpt {
  font-size: 14px;
  line-height: 21px;
  color: var(--blackAltText);
  margin: 0;
}

/* Blog media backgrounds (featured + blog-post cards) */
.blog-media--collegegeld,
.blog-post--collegegeld .blog-post__media {
  background:
    radial-gradient(circle at 78% 22%, rgba(255,210,176,0.55) 0%, transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(200,16,46,0.30) 0%, transparent 50%),
    linear-gradient(135deg, #1E1446 0%, #2A1F66 100%);
}
.blog-media--opleiding,
.blog-post--opleiding .blog-post__media {
  background:
    radial-gradient(circle at 20% 80%, rgba(200,16,46,0.45) 0%, transparent 55%),
    linear-gradient(135deg, #2A1F66 0%, #1E1446 70%);
}
.blog-media--open-dag,
.blog-post--open-dag .blog-post__media {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,210,176,0.55) 0%, transparent 60%),
    linear-gradient(135deg, #1E1446 0%, #3A2A7A 100%);
}
.blog-media--default,
.blog-post--default .blog-post__media {
  background:
    radial-gradient(circle at 80% 20%, rgba(255,210,176,0.45) 0%, transparent 55%),
    linear-gradient(135deg, #1E1446 0%, #2A1F66 100%);
}

/* --- Pagination --- */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--borderSubtleColor);
  font-size: 14px;
  flex-wrap: wrap;
}
.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 4px;
  color: var(--priColor100);
  text-decoration: none;
  font-weight: 500;
  border: 1px solid transparent;
}
.blog-pagination a:hover { background: rgba(30,20,70,0.06); text-decoration: none; }
.blog-pagination .current { background: var(--priColor100); color: var(--priColor103); }
.blog-pagination .dots { color: var(--blackAltText); font-weight: 300; cursor: default; }
.blog-pagination .prev,
.blog-pagination .next { border: 1px solid var(--borderColor); gap: 6px; padding: 0 14px; }

/* ============================================================
   BLOG SINGLE POST — single.php
   ============================================================ */
.blog-article {
  flex: 1 0 auto;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 32px 64px;
}
.blog-article__header { margin: 24px 0 32px; }
.blog-article h1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  color: var(--priColor100);
}
.blog-article__lede {
  font-size: 20px;
  line-height: 30px;
  color: var(--priColor100);
  margin: 0;
  font-weight: 300;
}
.blog-article__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--borderSubtleColor);
  font-size: 14px;
  color: var(--blackAltText);
  flex-wrap: wrap;
}
.blog-article__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.blog-article__share { margin-left: auto; display: flex; gap: 8px; }
.blog-article__share a {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--borderColor);
  color: var(--priColor100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.blog-article__share a:hover {
  background: var(--priColor100);
  color: var(--secColor300);
  border-color: var(--priColor100);
  text-decoration: none;
}

.blog-article__hero {
  margin: 0 0 40px;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 8;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-article__hero .glyph {
  font-family: var(--serif-font);
  font-size: 160px;
  line-height: 1;
  color: rgba(255,210,176,0.30);
  letter-spacing: -0.04em;
}
.blog-article__hero--photo {
  background-size: cover;
  background-position: center;
  background-color: var(--surfaceColor);
}

/* Body prose */
.blog-prose { font-size: 17.5px; line-height: 30px; color: #2a2348; }
.blog-prose p { margin: 0 0 22px; }
.blog-prose h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 28px;
  line-height: 34px;
  margin: 44px 0 14px;
  letter-spacing: -0.005em;
  color: var(--priColor100);
}
.blog-prose h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  margin: 32px 0 10px;
  color: var(--priColor100);
}
.blog-prose ul,
.blog-prose ol { padding-left: 22px; margin: 0 0 22px; }
.blog-prose li { margin: 0 0 8px; }
.blog-prose ul li::marker { color: var(--secColor100); }
.blog-prose blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--secColor100);
  font-family: var(--serif-font);
  font-size: 22px;
  line-height: 32px;
  color: var(--priColor100);
  font-style: italic;
}
.blog-prose blockquote cite {
  display: block;
  font-family: var(--sans-serif-font);
  font-size: 13px;
  font-style: normal;
  color: var(--blackAltText);
  margin-top: 8px;
}
.blog-prose strong { font-weight: 500; color: var(--priColor100); }
.blog-prose a { font-weight: 500; }
.blog-prose hr { border: 0; border-top: 1px solid var(--borderSubtleColor); margin: 36px 0; }
.blog-prose img { max-width: 100%; height: auto; border-radius: 6px; display: block; }
.blog-prose figure { margin: 28px 0; }
.blog-prose figcaption { font-size: 13px; color: var(--blackAltText); text-align: center; margin-top: 8px; }
.blog-prose .wp-block-image { margin: 28px 0; }
.blog-prose .wp-block-image img { max-width: 100%; height: auto; border-radius: 6px; }
.blog-prose .wp-block-image.alignfull img,
.blog-prose .wp-block-image.alignwide img { border-radius: 0; }

/* Article CTA block */
.blog-article__cta {
  margin: 48px 0 0;
  background: var(--priColor100);
  color: var(--priColor103);
  border-radius: 10px;
  padding: 32px 36px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.blog-article__cta h3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  margin: 0 0 4px;
  color: var(--priColor103);
}
.blog-article__cta p {
  margin: 0;
  color: rgba(242,241,244,0.78);
  font-size: 15px;
  font-weight: 300;
  max-width: 460px;
}
.blog-article__cta-btns { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }

/* Related posts */
.blog-related {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 32px 64px;
  border-top: 1px solid var(--borderSubtleColor);
}
.blog-related h2 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 22px;
  color: var(--priColor100);
}
.blog-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.blog-related-card {
  background: #FFFFFF;
  border: 1px solid var(--borderSubtleColor);
  border-radius: 8px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 200ms, transform 200ms, border-color 200ms;
  box-shadow: var(--shadow-card);
}
.blog-related-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--borderColor);
  text-decoration: none;
  color: inherit;
}
.blog-related-card__meta { font-size: 12px; color: var(--blackAltText); }
.blog-related-card h3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  margin: 0;
  color: var(--priColor100);
}
.blog-related-card__read {
  font-size: 13px;
  font-weight: 500;
  color: var(--secColor100);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.blog-related-card__read .arrow { transition: transform 200ms ease; }
.blog-related-card:hover .blog-related-card__read .arrow { transform: translateX(3px); }

/* Responsive blog */
@media (max-width: 1024px) {
  .blog-posts { grid-template-columns: 1fr 1fr; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured__side { border-left: 0; padding-left: 0; padding-top: 12px; }
}
@media (max-width: 960px) {
  .blog-related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .blog-breadcrumb { padding: 18px 20px 0; }
  .blog-page-head { padding: 24px 20px 0; }
  .blog-page-head h1 { font-size: 36px; line-height: 42px; }
  .blog-page-head__intro { font-size: 16px; }
  .blog-main { padding: 28px 20px 56px; }
  .blog-featured { padding-bottom: 36px; margin-bottom: 36px; }
  .blog-featured__main h2 { font-size: 26px; line-height: 32px; }
  .blog-featured__media .glyph { font-size: 120px; }
  .blog-posts { grid-template-columns: 1fr; gap: 28px; }
  .blog-pagination a, .blog-pagination span { min-width: 34px; height: 34px; }
  .blog-article { padding: 16px 20px 48px; }
  .blog-article h1 { font-size: 32px; line-height: 38px; }
  .blog-article__lede { font-size: 17px; line-height: 26px; }
  .blog-article__hero { aspect-ratio: 4 / 3; }
  .blog-article__hero .glyph { font-size: 96px; }
  .blog-prose { font-size: 16.5px; line-height: 28px; }
  .blog-prose h2 { font-size: 24px; line-height: 30px; }
  .blog-article__cta { padding: 24px 22px; }
  .blog-article__cta-btns { margin-left: 0; }
  .blog-article__share { margin-left: 0; }
  .blog-related { padding: 40px 20px 48px; }
  .news-nav { flex-wrap: wrap; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .iuasr-doc-layout { grid-template-columns: 1fr; gap: 28px; }
  .iuasr-doc-toc {
    position: static;
    max-height: none;
    padding: 18px 20px;
    background: #FFFFFF;
    border: 1px solid var(--borderSubtleColor);
    border-radius: 8px;
  }
}
@media (max-width: 880px) {
  .iuasr-cx-cols { grid-template-columns: 1fr; gap: 44px; }
  .iuasr-faq-list { grid-template-columns: 1fr; }
  .iuasr-org-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .iuasr-contact-page,
  .iuasr-doc-page { padding-left: 16px; padding-right: 16px; }
  .iuasr-contact-page { padding-top: 28px; }
  .iuasr-contact-hero h1 { font-size: 32px; line-height: 36px; }
  .iuasr-doc-hero h1 { font-size: 30px; line-height: 36px; }
  .iuasr-col-heading { font-size: 22px; line-height: 26px; }
  .iuasr-org-card { padding: 20px; }
  .iuasr-org-grid { grid-template-columns: 1fr; gap: 10px; }
  .iuasr-contact-list li { grid-template-columns: 90px 1fr; gap: 12px; }
  .iuasr-doc-content h2 { font-size: 22px; line-height: 28px; }
  .iuasr-doc-content .deflist {
    grid-template-columns: 1fr;
    gap: 2px 0;
    padding: 14px 0;
  }
  .iuasr-doc-content .deflist dt { margin-top: 8px; }
}