@import url("https://fonts.googleapis.com/css2?family=Suranna&family=Mulish:wght@300;400;600;700&display=swap");

/* ===== tokens/fonts.css ===== */
/* ============================================================
   Fonts — Suranna (titels) + Mulish (tekst & UI)
   Both Google Fonts. Loaded from the Google Fonts CDN.
   font-family names stay 'Suranna' and 'Mulish'.

   NOTE: For production on Umbraco/uSkinned, prefer self-hosting
   the .woff2 files (speed + GDPR). The family names do not change.
   ============================================================ */

/* ===== tokens/colors.css ===== */
/* ============================================================
   Colors — Inge Peeters
   "Magenta is een juweel, geen schreeuw." Use it sparingly.
   Distribution guideline 60/30/10:
   ~60% warm white · ~30% ink + sage · ~10% magenta + gold.
   ============================================================ */

:root {
  /* ---- Core brand ---- */
  --c-magenta: #A2047D;   /* Primary. Title accents, links, buttons, highlights. */
  --c-rose: #B95FA4;      /* Secondary accent. Hover, large display text, soft fills. */
  --c-ink: #323131;       /* All running text. */
  --c-cream: #FAF6F1;     /* Page base. The calm breath under everything. */
  --c-white: #FFFFFF;     /* Cards & surfaces that want to lift slightly. */
  --c-sage: #9FB0A0;      /* Nature accent. Fills, sections, decoration. */
  --c-gold: #C6A15B;      /* Subtle accent. Hairlines, small details. */

  /* ---- Soft washes (section backgrounds) ---- */
  --c-magenta-wash: #F4E7F0;  /* Very light magenta behind a section or quote. */
  --c-sage-wash: #EDF1EC;     /* Quiet green section background. */

  /* ---- Support neutrals (derived) ---- */
  --c-muted: #7C746D;          /* Captions, meta, secondary text on cream. */
  --c-hairline: rgba(198, 161, 91, 0.28); /* Gold hairline at low opacity. */
  --c-border: rgba(50, 49, 49, 0.14);     /* Soft ink border for fields/cards. */
  --c-border-strong: rgba(50, 49, 49, 0.22);

  /* ---- Semantic aliases ---- */
  --color-bg: var(--c-cream);
  --color-surface: var(--c-white);
  --color-text: var(--c-ink);
  --color-text-muted: var(--c-muted);
  --color-primary: var(--c-magenta);
  --color-primary-hover: var(--c-rose);
  --color-on-primary: var(--c-cream);
  --color-link: var(--c-magenta);
  --color-link-hover: var(--c-rose);
  --surface-wash-magenta: var(--c-magenta-wash);
  --surface-wash-sage: var(--c-sage-wash);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   Typography — Suranna (titels) + Mulish (tekst & UI)
   Suranna is light & high-contrast: use it large. Never below
   ~1.25rem for headings, or the contrast disappears.
   Sentence case for headings; eyebrows in UPPERCASE.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-title: 'Suranna', Georgia, 'Times New Roman', serif;
  --font-body: 'Mulish', system-ui, -apple-system, sans-serif;

  /* ---- Weights (Mulish) ---- */
  --fw-light: 300;     /* @kind font */
  --fw-regular: 400;   /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */

  /* ---- Type scale (rem, 16px base) ---- */
  --fs-hero: clamp(2.75rem, 6vw, 4.5rem); /* @kind font */
  --fs-h1: 2.75rem;
  --fs-h2: 2.125rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-eyebrow: 0.8125rem;
  --fs-body-lg: 1.25rem;
  --fs-body: 1.125rem;
  --fs-small: 0.875rem;

  /* ---- Line heights ---- */
  --lh-display: 1.05; /* @kind font */
  --lh-heading: 1.15; /* @kind font */
  --lh-body: 1.7;     /* @kind font */
  --lh-tight: 1.3;    /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-eyebrow: 0.14em; /* @kind font */
  --ls-button: 0.06em;  /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   Spacing & layout — Inge Peeters
   "Ruimte is een ontwerpkeuze." Let everything breathe.
   4px base scale. px for component-internal gaps, rem for
   vertical rhythm.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Section rhythm (generous — this is a calm practice) ---- */
  --section-y: clamp(64px, 10vw, 128px); /* @kind spacing */

  /* ---- Content widths ---- */
  --content-max: 720px;   /* Running text — max ~65 chars for reading rest. */
  --wide-max: 1200px;     /* Wide sections — hero, imagery. */
  --gutter: clamp(24px, 5vw, 48px); /* @kind spacing */ /* Outer margin: 24px mobile, 48px+ desktop. */

  /* ---- Grid ---- */
  --grid-gap: 24px;

  /* ---- Breakpoints (reference values) ---- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ===== tokens/radius-motion.css ===== */
/* ============================================================
   Radius & motion — Inge Peeters
   Soft, organic rounding. Gentle, calm transitions — no bounce.
   ============================================================ */

:root {
  /* ---- Corner radius (soft, organic) ---- */
  --radius-sm: 8px;     /* Buttons, small elements */
  --radius-md: 16px;    /* Cards, input fields */
  --radius-lg: 28px;    /* Large image blocks, sections */
  --radius-pill: 999px; /* Pill buttons, tags */

  /* ---- Shadows (very soft — never heavy) ---- */
  --shadow-soft: 0 18px 48px -28px rgba(50, 49, 49, 0.22);
  --shadow-lift: 0 28px 64px -32px rgba(50, 49, 49, 0.28);
  --focus-ring: 0 0 0 4px var(--c-magenta-wash);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur: 200ms;      /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}

/* ===== tokens/base.css ===== */
/* ============================================================
   Base — element defaults built on the tokens.
   Kept intentionally light so the system composes cleanly.
   ============================================================ */

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--color-link-hover); }

/* Reusable eyebrow / overline utility:
   a small, spaced Mulish label above a Suranna title. */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-magenta);
}

/* Thin hairline divider in gold/sage at low opacity. */
.hairline {
  border: 0;
  border-top: 1px solid var(--c-hairline);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== page styles ===== */

  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--c-white); }
  img { max-width: 100%; }
  @keyframes ipFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .ip-page { animation: ipFade var(--dur-slow) var(--ease) both; }
  @media (max-width: 940px) {
    .ip-split { grid-template-columns: 1fr !important; }
    .ip-split-img { order: -1; }
    .ip-offers { grid-template-columns: 1fr !important; }
    .ip-prices { grid-template-columns: 1fr !important; }
    .ip-detail-body { grid-template-columns: 1fr !important; }
    .ip-detail-body aside { position: static !important; }
    .ip-hero-ed { grid-template-columns: 1fr !important; }
    .ip-hero-ed-img { order: -1; }
    .ip-footer { grid-template-columns: 1fr 1fr !important; }
  }
  @media (max-width: 780px) {
    .ip-nav-desktop { display: none !important; }
    .ip-burger { display: inline-flex !important; }
    .ip-footer { grid-template-columns: 1fr !important; text-align: center; justify-items: center; }
    .ip-footer img { height: 120px !important; margin: 0 auto; }
    .ip-footer p { margin-left: auto !important; margin-right: auto !important; }
    .ip-footer ul { align-items: center; }
    .ip-footer li { justify-content: center; }
    .ip-footer-bottom { justify-content: center !important; text-align: center; }
  }
  @media (min-width: 781px) {
    .ip-mobile-menu { display: none !important; }
  }
  @media (max-width: 600px) {
    .ip-cta-row { flex-direction: column; align-items: center; }
  }
  .ip-prakt-btn { background: var(--c-white); color: var(--c-gold); border: 1.5px solid var(--c-gold); }
  .ip-prakt-btn:hover { background: var(--c-gold); color: var(--c-white); border-color: var(--c-gold); }
  .ip-menu-item { position: relative; }
  .ip-submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 16px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur) var(--ease); z-index: 70; }
  .ip-menu-item:hover .ip-submenu { opacity: 1; visibility: visible; pointer-events: auto; }


/* ===== header ===== */
.ip-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,0); border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ip-header.ip-scrolled { background: rgba(255,255,255,0.86); border-bottom-color: var(--c-hairline);
  backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); }

/* ===== mobile menu ===== */
.ip-mobile-menu { display: none; }
.ip-mobile-menu.ip-open { display: flex; }

/* ===== links ===== */
a { color: var(--c-magenta); }
a:hover { color: var(--c-rose); }

/* ===== buttons (design-system Button) ===== */
.ip-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; letter-spacing: var(--ls-button, 0.06em);
  line-height: 1; padding: 14px 28px; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none;
  border: 1.5px solid transparent; box-sizing: border-box;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ip-btn--sm { padding: 10px 20px; font-size: 0.85rem; }
.ip-btn--full { width: 100%; }
.ip-btn--primary { background: var(--c-magenta); color: var(--c-cream); border-color: var(--c-magenta); }
.ip-btn--primary:hover { background: var(--c-rose); border-color: var(--c-rose); color: var(--c-cream); }
.ip-btn--secondary { background: transparent; color: var(--c-magenta); border-color: var(--c-magenta); }
.ip-btn--secondary:hover { background: var(--c-magenta); color: var(--c-cream); }

/* ===== form fields (design-system TextField) ===== */
.ip-fieldwrap { display: flex; flex-direction: column; gap: 7px; }
.ip-label { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--c-ink); }
.ip-field { width: 100%; background: var(--c-white); border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-md); padding: 13px 16px; font-family: var(--font-body); font-size: 1rem;
  line-height: 1.5; color: var(--c-ink); outline: none; box-sizing: border-box;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
textarea.ip-field { resize: vertical; }
.ip-field:focus { border-color: var(--c-magenta); box-shadow: var(--focus-ring); }

/* ===== hover states carried over from the design ===== */
.ip-hv1:hover { background: var(--c-magenta-wash) }
.ip-hv2:hover { background: var(--c-magenta-wash) }
.ip-hv3:hover { background: var(--c-magenta-wash) }
.ip-hv4:hover { background: var(--c-magenta-wash) }
.ip-hv5:hover { background: var(--c-magenta-wash) }
.ip-hv6:hover { background: var(--c-magenta-wash) }

/* ===== page shell ===== */
.ip-site { font-family: var(--font-body); color: var(--c-ink); background: var(--c-white); min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: clip; display: flex; flex-direction: column; }
.ip-site > main { flex: 1 0 auto; display: flex; flex-direction: column; } /* Sticky footer: main eist de restruimte op. */
.ip-site > main > .ip-page { flex: 1 0 auto; display: flex; flex-direction: column; } /* Keten doortrekken zodat een sectie (bv. de 404) kan meegroeien tot aan de footer. */

/* ===== Umbraco-aanvullingen =====
   Styling voor tekst uit de Richtext editor (die geen inline styles meekrijgt). */
.ip-prose p { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.75; color: var(--c-ink); margin: 0; text-wrap: pretty; }
.ip-prose p + p { margin-top: 18px; }
.ip-prose--detail p { line-height: 1.78; }
.ip-prose--detail p + p { margin-top: 20px; }
.ip-prose a { color: var(--c-magenta); }

/* ---- Carrousel (getuigenissen + fotogalerij) ---- */
.ip-carrousel { scrollbar-width: none; }
.ip-carrousel::-webkit-scrollbar { display: none; }
.ip-carrousel__pijl { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-hairline); color: var(--c-magenta); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); transition: opacity 120ms ease, border-color 120ms ease; }
.ip-carrousel__pijl:hover { border-color: var(--c-magenta); }
.ip-carrousel__pijl:disabled { opacity: 0.35; cursor: default; border-color: var(--c-hairline); }
.ip-carrousel__pijl--vorige { left: -64px; }
.ip-carrousel__pijl--volgende { right: -64px; }
@media (max-width: 1280px) { .ip-carrousel__pijl { width: 40px; height: 40px; } .ip-carrousel__pijl--vorige { left: -46px; } .ip-carrousel__pijl--volgende { right: -46px; } }
@media (max-width: 760px) { .ip-carrousel__pijl { display: none; } }
@media (max-width: 960px) { .ip-carrousel__item { flex-basis: calc((100% - var(--grid-gap)) / 2) !important; } }
@media (max-width: 640px) { .ip-carrousel__item { flex-basis: 100% !important; } }

/* ---- Fotogalerij (diploma's) ---- */
.ip-galerij__item { flex: 0 0 calc((100% - 2 * var(--grid-gap)) / 3); scroll-snap-align: start; box-sizing: border-box; height: 250px; background: var(--c-white); border: 1px solid var(--c-hairline); border-radius: var(--radius-md); padding: 14px; display: flex; align-items: center; justify-content: center; cursor: zoom-in; transition: border-color 120ms ease, box-shadow 120ms ease; }
.ip-galerij__item:hover { border-color: var(--c-magenta); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); }
.ip-galerij__item img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
@media (max-width: 960px) { .ip-galerij__item { flex-basis: calc((100% - var(--grid-gap)) / 2); } }
@media (max-width: 640px) { .ip-galerij__item { flex-basis: 100%; } }

/* ---- Lichtbak (klik om te vergroten) ---- */
.ip-lichtbak { position: fixed; inset: 0; z-index: 1000; background: rgba(26, 21, 30, 0.88); display: flex; align-items: center; justify-content: center; padding: 4vw; cursor: zoom-out; }
.ip-lichtbak img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5); background: var(--c-white); }

.ip-lichtbak__pijl { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: none; color: var(--c-magenta); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1001; transition: background 120ms ease, opacity 120ms ease; }
.ip-lichtbak__pijl:hover { background: #fff; }
.ip-lichtbak__pijl:disabled { opacity: 0.3; cursor: default; }
.ip-lichtbak__pijl--vorige { left: clamp(10px, 3vw, 40px); }
.ip-lichtbak__pijl--volgende { right: clamp(10px, 3vw, 40px); }

/* ---- Banner op mobiel: tekst in de linkerhelft houden, weg van het gezicht op de foto ----
   !important omdat de subtitel/tekst inline max-widths dragen. De knoppen vallen er
   bewust buiten: die mogen de volle breedte blijven gebruiken. ---- */
@media (max-width: 780px) {
  .ip-banner__inhoud > span,
  .ip-banner__inhoud > h1,
  .ip-banner__inhoud > p { max-width: 55vw !important; }
}

/* ---- Footer-onderbalk op mobiel: alles netjes gecentreerd onder elkaar ---- */
@media (max-width: 780px) {
  .ip-footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .ip-footer-bottom > span { justify-content: center; }
}

/* ---- RTE-tekst: bold iets minder vet dan de browser-standaard (700) ---- */
.ip-prose strong, .ip-prose b { font-weight: 600; }

/* ---- Opleidingen (Over mij): ingeklapt toont alleen de eerste 4 ----
   !important is hier nodig: de li's hebben een inline display: grid en inline wint anders. */
.ip-opleidingen--ingeklapt > .ip-opleiding:nth-child(n+5) { display: none !important; }
/* het 4e item is dan visueel het laatste: geen bungelende verbindingslijn */
.ip-opleidingen--ingeklapt > .ip-opleiding:nth-child(4) > div:nth-child(2) { border-left-color: transparent !important; }