/* SUE huisstijl (afgeleid van sue.nl) — basis bovenop Bootstrap 5.3 */
:root {
  /* Kleuren */
  --sue-navy: #25325f;          /* koppen, donkere vlakken, links */
  --sue-navy-heading: #24325f;  /* h2 op lichte vlakken */
  --sue-text: #39456e;          /* lopende tekst */
  --sue-text-muted: #6a7291;    /* secundaire tekst, "Alle inspiratie"-links */
  --sue-text-faint: #9aa0b7;    /* inactieve kaarttitels */
  --sue-border: #cbcfde;        /* randen van lichte kaarten */
  --sue-bg: #edf3f4;            /* pagina-achtergrond */
  --sue-white: #ffffff;
  --sue-pink: #e94271;          /* accent: CTA's, nummering */
  --sue-blue: #274083;          /* secundair blauw */

  /* Typografie */
  --sue-font-heading: 'Sora', sans-serif;   /* alleen h1 (hero) */
  --sue-font-body: 'Manrope', sans-serif;   /* al het overige */

  /* Vormen */
  --sue-radius-btn: 8px;
  --sue-radius-card: 20px;
  --sue-radius-card-lg: 25px;
  --sue-radius-img: 15px;

  /* Bootstrap koppelen aan de huisstijl */
  --bs-body-font-family: var(--sue-font-body);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.7;
  --bs-body-color: var(--sue-text);
  --bs-body-bg: var(--sue-bg);
  --bs-link-color: var(--sue-navy);
  --bs-link-hover-color: var(--sue-pink);
  --bs-border-color: var(--sue-border);
  --bs-gutter-x: 24px;
}

body { font-family: var(--sue-font-body); color: var(--sue-text); background: var(--sue-bg); }

/* Container: breedtes zoals sue.nl (eigen overschrijving van Bootstrap), 12px padding */
.container { padding-left: 12px; padding-right: 12px; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 730px; } }
@media (min-width: 992px)  { .container { max-width: 980px; } }
@media (min-width: 1200px) { .container { max-width: 1150px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }
@media (min-width: 1600px) { .container { max-width: 1500px; } }
@media (min-width: 1800px) { .container { max-width: 1700px; } }

/* Koppen */
h1, .h1 { font-family: var(--sue-font-heading); font-weight: 700; font-size: 30px; line-height: 1.2; color: var(--sue-white); }
h2, .h2 { font-family: var(--sue-font-body); font-weight: 600; font-size: 22px; line-height: 1.4; color: var(--sue-navy-heading); }
h3, .h3 { font-family: var(--sue-font-body); font-weight: 600; font-size: 21px; line-height: 1.4; color: var(--sue-navy); }
@media (min-width: 768px) {
  h1, .h1 { font-size: 48px; line-height: 1.2; }
  h2, .h2 { font-size: 28px; }
  h3.h3-lg { font-size: 24px; line-height: 1.4; }
}
h3.h3-kaart { font-weight: 700; }

/* Lopende tekst */
p { margin-bottom: 1rem; }
.sue-lead { font-size: 18px; line-height: 1.6; }
.sue-small { font-size: 13px; line-height: 1.8; color: var(--sue-navy); }
.sue-nummer { color: var(--sue-pink); font-size: 18px; line-height: 1.8; }

/* Knoppen — exact zoals sue.nl (.btn-large en .btn) */
:root {
  --sue-pijl-wit: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFF' d='m6.207 18-2.769-1.576 3.798-5.902H0V7.48h7.239l-3.8-5.904L6.206 0 12 9.001z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h12v18H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  --sue-pijl-navy: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%2325325F' d='m6.207 18-2.769-1.576 3.798-5.902H0V7.48h7.239l-3.8-5.904L6.206 0 12 9.001z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h12v18H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/* Primaire knop (sue.nl: .btn-large) */
.btn-sue {
  position: relative; display: inline-block;
  background: var(--sue-pink) var(--sue-pijl-wit) no-repeat 14px 50% / 12px 18px;
  border: none; border-radius: 8px;
  color: var(--sue-white); font-family: var(--sue-font-body); font-size: 16px; font-weight: 500; line-height: 30px;
  padding: 8px 16px 8px 40px; text-decoration: none; cursor: pointer; user-select: none;
  transition: .2s;
}
.btn-sue:hover { background-color: #db2d5e; background-position: 17px 50%; color: var(--sue-white); }
/* varianten: blauw (btn-primary) en licht (btn-light) */
.btn-sue--blauw { background-color: var(--sue-blue); }
.btn-sue--blauw:hover { background-color: #1f3470; }
.btn-sue--navy { background-color: var(--sue-navy); }
.btn-sue--navy:hover { background-color: #1f2b51; }
.btn-sue--licht { background-color: var(--sue-bg); background-image: var(--sue-pijl-navy); color: #24325f; }
.btn-sue--licht:hover { background-color: #dde7e9; color: #24325f; }

/* Secundaire knop (sue.nl: .btn) — vierkantje met pijl links, tekst ernaast */
.btn-sue-2 {
  position: relative; display: inline-block; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 50px;
  text-decoration: none; user-select: none;
  --sue-2-vlak: var(--sue-white); --sue-2-pijl: var(--sue-pijl-navy);
  --sue-2-tekst: var(--sue-white); --sue-2-tekst-hover: var(--sue-navy);
}
.btn-sue-2::before {
  content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 30px; z-index: 1;
  background: var(--sue-2-pijl) 50% no-repeat; background-size: 12px 18px;
  transition: .2s;
}
.btn-sue-2::after {
  content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  background-color: var(--sue-2-vlak); border-radius: 8px;
  transition: .2s;
}
.btn-sue-2 span {
  position: relative; z-index: 2; display: inline-block; padding: 0 12px 0 40px;
  font-family: var(--sue-font-body); font-size: 16px; font-weight: 500; line-height: 30px;
  color: var(--sue-2-tekst); transition: .2s;
}
.btn-sue-2:hover::after { width: 100%; height: 120%; top: 50%; transform: translateY(-50%); }
.btn-sue-2:hover span { color: var(--sue-2-tekst-hover); }
/* varianten: transparant/wit (op donker), blauw en roze (op licht) */
.btn-sue-2--blauw { --sue-2-vlak: var(--sue-blue); --sue-2-pijl: var(--sue-pijl-wit); --sue-2-tekst: var(--sue-navy); --sue-2-tekst-hover: var(--sue-white); }
.btn-sue-2--roze { --sue-2-vlak: var(--sue-pink); --sue-2-pijl: var(--sue-pijl-wit); --sue-2-tekst: var(--sue-navy); --sue-2-tekst-hover: var(--sue-white); }

/* Knoppenrij: primair + secundair naast elkaar */
.sue-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }