/* ---------- Fonts ---------- */
/* 1) Gilroy: bij voorkeur self-host (WOFF2) in /assets/fonts/
   - Als je de files niet hebt, werkt de fallback automatisch. */
@font-face{
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Titels & headings */
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.nav-link,
.btn{
  font-family: var(--jd-font-heading);
  font-weight: 400; /* Phudu regular */
}

/* Optioneel: kleine tweak zodat Phudu er strak uitziet */
h1, h2, h3{
  letter-spacing: 0.2px;
}

:root{
  /* Font stacks (fallbacks) */
  --jd-font-body: "Gilroy", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --jd-font-heading: "Phudu", "Gilroy", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Merk */
  --jd-accent: #F1E50F;
  --jd-white:  #E7E8E9; /* achtergrond */
  --jd-dark:   #2D2E2B; /* tekst */

  /* Bootstrap overrides */
  --bs-body-bg: var(--jd-white);
  --bs-body-color: var(--jd-dark);

  --bs-primary: var(--jd-accent);
  --bs-primary-rgb: 241, 229, 15;

  --bs-link-color: var(--jd-dark);
  --bs-link-hover-color: #000;

  --bs-border-color: rgba(45,46,43,.18);
}

/* Algemene basis */
body{
  font-family: var(--jd-font-body);
  background: var(--jd-white);
  color: var(--jd-dark);
}

.jd-text{ color: var(--jd-dark) !important; }
.jd-muted{ color: rgba(45,46,43,.72) !important; }

/* Links */
.jd-link{
  color: var(--jd-dark);
  text-decoration: none;
}
.jd-link:hover{
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Accent helpers (voor kleine icoontjes) */
.jd-accent{ color: var(--jd-accent) !important; }

/* Topbar / Navbar */
.jd-topbar{
  background: #ffffff;
  border-bottom: 1px solid rgba(45,46,43,.12);
}

.jd-navbar{
  backdrop-filter: blur(8px);
  background: #ffffff !important;
  border-bottom: 1px solid rgba(45,46,43,.12);
}

/* Logo sizing */
.jd-logo{
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.jd-logo-sm{
  width: 34px;
  height: 34px;
}

/* Hero: licht, subtiele gloed met accent */
.jd-hero{
  background:
    radial-gradient(900px 520px at 20% 25%, rgba(241,229,15,.28), transparent 55%),
    radial-gradient(900px 560px at 85% 30%, rgba(241,229,15,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(231,232,233,1));
  border-bottom: 1px solid rgba(45,46,43,.10);
}

.jd-badge{
  background: rgba(241,229,15,.22) !important;
  color: var(--jd-dark) !important;
  border: 1px solid rgba(241,229,15,.55);
}

/* Cards / panels */
.jd-panel{
  background: #ffffff;
  border: 1px solid rgba(45,46,43,.14);
}

.jd-card{
  background: #ffffff;
  border-color: rgba(45,46,43,.14) !important;
}

/* Alternate section background */
.jd-alt{
  background: rgba(255,255,255,.65);
  border-top: 1px solid rgba(45,46,43,.10);
  border-bottom: 1px solid rgba(45,46,43,.10);
}

/* Forms */
.jd-input{
  background: #ffffff;
  color: var(--jd-dark);
  border-color: rgba(45,46,43,.20);
}
.jd-input:focus{
  border-color: rgba(241,229,15,.85);
  box-shadow: 0 0 0 .25rem rgba(241,229,15,.25);
}

/* Accordion / list group */
.jd-acc{
  background: #ffffff;
  border: 1px solid rgba(45,46,43,.14);
}
.jd-acc-btn{
  background: rgba(231,232,233,.45) !important;
  color: var(--jd-dark) !important;
}
.accordion-button::after{
  filter: none; /* niet meer inverteren in light mode */
}

.jd-list{
  background: rgba(231,232,233,.45);
  color: var(--jd-dark);
  border-color: rgba(45,46,43,.14);
}

/* HR */
.jd-hr{
  border-color: rgba(45,46,43,.18);
}

/* ----- Belangrijk: knoppen + navigatie geen blauw meer ----- */

/* btn-primary volledig in accentkleur */
.btn-primary{
  background-color: var(--jd-accent) !important;
  border-color: rgba(45,46,43,.35) !important;
  color: #111 !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: #fff06a !important; /* iets lichter op hover */
  border-color: rgba(45,46,43,.45) !important;
  color: #111 !important;
}
.btn-primary:focus{
  box-shadow: 0 0 0 .25rem rgba(241,229,15,.35) !important;
}

/* outline-primary ook in accent */
.btn-outline-primary{
  color: var(--jd-dark) !important;
  border-color: rgba(241,229,15,.85) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background: var(--jd-accent) !important;
  border-color: rgba(45,46,43,.35) !important;
  color: #111 !important;
  box-shadow: 0 0 0 .25rem rgba(241,229,15,.25) !important;
}

/* Nav links (en actieve) */
.navbar .nav-link{
  color: rgba(45,46,43,.85) !important;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color: #000 !important;
}
.navbar .nav-link.active{
  color: #000 !important;
}

/* Bootstrap iconen: geef ze accent waar je wil met jd-accent,
   maar ook de topbar lightning alvast in accent */
.jd-topbar .bi-lightning-charge-fill{
  color: var(--jd-accent);
}

/* Optioneel: cards iconen iets subtieler accent */
.card .bi{
  color: rgba(45,46,43,.85);
}