/* Mpiece — brand tokens & Bootstrap overrides
   Pas dit bestand aan om de huisstijl op alle sites te wijzigen. */

@import url("https://use.typekit.net/hxm5ydb.css");

:root {
  --mp-purple: #48388a;
  --mp-purple-rgb: 72, 56, 138;
  --mp-purple-dark: #5a23c8;
  --mp-purple-darker: #462680;
  --mp-purple-hover: #6528e0;
  --mp-cream: #ede4d2;
  --mp-cream-light: #f4eee2;
  --mp-orange: #ea6433;
  --mp-orange-dark: #f4511e;
  --mp-text: #1f1f23;
  --mp-text-muted: #5b5b66;
  --mp-border: rgba(0, 0, 0, 0.08);

  --bs-primary: var(--mp-purple);
  --bs-primary-rgb: var(--mp-purple-rgb);
  --bs-link-color: var(--mp-purple);
  --bs-link-hover-color: var(--mp-purple-hover);
  --bs-body-font-family: "gesta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--mp-text);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 1rem;
}

html {
  scroll-behavior: smooth;
}

body,
body.tk-gesta {
  font-family: "gesta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--mp-text);
  background-color: var(--mp-cream-light);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "gesta", system-ui, sans-serif;
  font-weight: 700;
}

a {
  color: var(--mp-purple);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--mp-purple-hover);
  text-decoration: underline;
}

/* Buttons */
.btn-primary,
.btn-mpiece {
  --bs-btn-bg: var(--mp-purple);
  --bs-btn-border-color: var(--mp-purple);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--mp-purple-hover);
  --bs-btn-hover-border-color: var(--mp-purple-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--mp-purple-darker);
  --bs-btn-active-border-color: var(--mp-purple-darker);
}

.btn-outline-mpiece {
  --bs-btn-color: var(--mp-purple);
  --bs-btn-border-color: var(--mp-purple);
  --bs-btn-hover-bg: var(--mp-purple);
  --bs-btn-hover-border-color: var(--mp-purple);
  --bs-btn-hover-color: #fff;
}

.bg-mppurple {
  background-color: var(--mp-purple) !important;
  color: #f5f5f5;
}

.bg-mpcream {
  background-color: var(--mp-cream) !important;
}

.text-mppurple {
  color: var(--mp-purple) !important;
}

/* Forms */
.form-control:focus,
.form-select:focus {
  border-color: var(--mp-purple);
  box-shadow: 0 0 0 0.25rem rgba(var(--mp-purple-rgb), 0.18);
}

/* Navbar */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--mp-purple) !important;
}

.navbar-brand svg {
  width: 28px;
  height: 40px;
}

.navbar .nav-link {
  color: var(--mp-text) !important;
  font-weight: 500;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: var(--mp-purple) !important;
}

/* Footer */
footer.mp-footer {
  background-color: #fff;
  border-top: 1px solid var(--mp-border);
}

footer.mp-footer .mp-footer-bar {
  background-color: var(--mp-purple);
  color: #f5f5f5;
}

footer.mp-footer a {
  color: var(--mp-text-muted);
}

footer.mp-footer a:hover {
  color: var(--mp-purple);
}