:root {
  --wgk-yellow: #FFC300;
  --wgk-black: #111111;
  --wgk-gray: #F5F6F7;
  --wgk-border: #E6E8EB;

  /* Bootstrap theme overrides */
  --bs-primary: var(--wgk-yellow);
  --bs-primary-rgb: 255, 195, 0;
  --bs-link-color: var(--wgk-black);
  --bs-link-hover-color: #000;
  --bs-body-color: var(--wgk-black);
  --bs-body-bg: #ffffff;
  --bs-border-color: var(--wgk-border);
}

html,
body {
  height: 100%;
}

body {
  background: var(--wgk-gray);
}

/* Headings: slightly punchier like the WGK site */
.h-display {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.btn {
  border-radius: 999px;
  /* pill */
  font-weight: 700;
  font-size: .95rem;
}

/* Buttons */
.btn-primary {
  --bs-btn-color: var(--wgk-black);

  /* Dit miste: achtergrond kleuren */
  --bs-btn-bg: var(--wgk-yellow);
  --bs-btn-hover-bg: #e0ab00;
  /* iets donkerder geel */
  --bs-btn-active-bg: #cc9a00;
  /* nog iets donkerder */

  --bs-btn-border-color: var(--wgk-yellow);
  --bs-btn-hover-border-color: #e0ab00;
  --bs-btn-active-border-color: #cc9a00;

  /* Optioneel: wat meer “button feel” */
  --bs-btn-focus-shadow-rgb: 255, 195, 0;

  padding: .6rem 1rem;
  font-size: .95rem;
}

.btn-outline-primary {
  --bs-btn-color: var(--wgk-black);
  --bs-btn-border-color: var(--wgk-yellow);
  --bs-btn-hover-bg: var(--wgk-yellow);
  --bs-btn-hover-border-color: var(--wgk-yellow);
  --bs-btn-hover-color: var(--wgk-black);
}

/* Navbar */
.navbar-wgk {
  background: #fff;
  border-bottom: 1px solid var(--wgk-border);
}

.navbar-wgk .brand-sub {
  color: #5b6066;
  font-size: .875rem;
}

.brand-logo {
  height: 34px;
  width: auto;
}

/* Cards */
.card {
  border: 1px solid var(--wgk-border);
  border-radius: 1.25rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
}

.card-soft {
  background: #fff;
}

/* Dropzone */
.dropzone {
  border: 2px dashed #cfd4d9;
  border-radius: 1.25rem;
  padding: 1.25rem;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dropzone.dragover {
  border-color: var(--wgk-yellow);
  box-shadow: 0 0 0 .25rem rgba(255, 195, 0, .25);
}

.thumb {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid var(--wgk-border);
}

.badge-wgk {
  background: var(--wgk-yellow);
  color: var(--wgk-black);
  font-weight: 700;
}

.muted {
  color: #5b6066;
}

/* Make forms feel a bit nicer */
.form-control,
.form-select {
  border-radius: .9rem;
}

/* Reduce motion for people who prefer it */
@media (prefers-reduced-motion: reduce) {
  .dropzone {
    transition: none;
  }
}