:root{
  --header-h: 64px;                  /* iets hoger dan nu */
  --header-logo: #333333;            /* exact jouw kleur (#333333; 6 digits) */
}

/* Header bar */
.site-header{
  height: var(--header-h);
  background:#fff;
  border-bottom:1px solid rgba(15,23,42,.06);
  position: sticky; top:0; z-index:100;
}

/* Inhoud */
.header-inner{
  max-width:1200px; margin:0 auto; padding:0 20px;
  height:100%;
  display:flex; align-items:center; gap:16px; justify-content:space-between;
}

/* LOGO: forceer kleur en bold, nooit blauw/onderlijnd */
.site-header .logo{
  color: var(--header-logo) !important;
  font: 700 22px/1 "Quicksand", ui-sans-serif, system-ui;
  letter-spacing:.2px;
  text-decoration: none !important;
}

/* Navigatie */
.main-nav a{
  color:#0f172a; text-decoration:none; font-weight:600;
  padding:8px 10px; border-radius:10px;
}
.main-nav a:hover{ background:#f1f5f9; }

/* Login badge (gebruik brand kleur) */
.btn.login-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px; border:none;
  background: var(--brand,#2563eb); color:#fff; font-weight:700; text-decoration:none;
}

/* Verberg header wanneer het een les-overzicht is */
.course-overview .site-header { display: none !important; }

/* Login badge styling en positie */
.btn.login-badge {
  background: #3A9AEA;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  margin-left: auto;
}

.btn.login-badge:hover {
  background: #2B8AD6;
}

/* Login badge alleen op homepage tonen */
[data-home-only] { 
  display: none !important; 
}

/* Tonen als de pagina homepage is (beide varianten gedekt) */
.route-home [data-home-only],
.is-home [data-home-only] {
  display: inline-flex !important;
  align-items: center;
}