/* ===========================
   BASIS & TYPOGRAFIE
   =========================== */
html, body { overflow-x: hidden; }
body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; }
h2 { font-weight: 600; }
img, svg, video { max-width: 100%; height: auto; display: block; }

/* ===========================
   KLEUREN / UTILITIES
   =========================== */
.text-orange { color: #c24e00; }
.border-warning { border-color: #f8b14d !important; }
.border-secondary { border-color: #8b4513 !important; }
.border-dark { border-color: #343a40 !important; }

/* ===========================
   LOGO
   =========================== */
.site-logo {
  max-width: clamp(180px, 50vw, 560px);
  height: auto;
  margin: 0 auto;
}
@media (max-width: 576px) {
  .site-logo { max-width: min(76vw, 360px); }
}

/* ===========================
   NAVIGATIE
   =========================== */
.menu-bar { background-color: #f2f2f2; padding: 0.5rem 0; }
.menu-bar .container { display: flex; justify-content: space-between; align-items: center; position: relative; }

.menu-toggle {
  appearance: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 8px;
  padding: .45rem .55rem;
  display: none;
  flex-direction: column;
  gap: 4px;
}
.menu-toggle-bar { width: 22px; height: 2px; background: #8b4513; display: block; }

.menu-links { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }

.menu-item {
  color: #8b4513;
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-weight: 500;
  border-radius: .25rem;
}
.menu-item:hover, .menu-item.active { background-color: #f8b14d; color: #fff; }

@media (max-width: 768px) {
  .menu-toggle { display: flex; }
  .menu-links {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
    border-radius: 10px; margin-top: .35rem; padding: .25rem;
    display: none; flex-direction: column; z-index: 1000;
  }
  .menu-links.is-open { display: flex; }
}

/* ===========================
   FOOTER & BUTTON
   =========================== */
footer a { color: #8b4513; text-decoration: none; }
footer a:hover { color: #b5612a; }

.btn-secondary { background-color: #8b4513; border-color: #8b4513; }
.btn-secondary:hover { background-color: #a65d2a; border-color: #a65d2a; }

/* ===========================
   HOLISTISCHE WERKWIJZE (KWADRANT)
   =========================== */
.kwadrant-grid { position: relative; min-height: 700px; background-color: #f8f9fa; overflow: visible; }
.kwadrant-grid::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 800px; height: 800px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(150,40,0,0.35) 0%,
    rgba(194,78,0,0.20) 30%,
    rgba(194,78,0,0.10) 50%,
    rgba(248,249,250,0) 60%);
  pointer-events: none; z-index: 0;
}

.client-circle{
  width:160px; height:160px; border:3px solid #c24e00; border-radius:50%;
  background:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:1.4rem; z-index:2; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 10px rgba(0,0,0,0.15);
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.kwadrant { position:absolute; z-index:2; }
.kwadrant.linksboven  { top:45%; left:47%; transform:translate(-140%, -140%); }
.kwadrant.rechtsboven { top:45%; left:53%; transform:translate(40%, -140%); }
.kwadrant.linksonder  { top:55%; left:47%; transform:translate(-140%, 40%); }
.kwadrant.rechtsonder { top:55%; left:53%; transform:translate(40%, 40%); }

.kwadrant-btn{
  width:130px; min-width:130px; max-width:130px;
  height:110px; min-height:110px; max-height:110px;
  padding:.5rem; font-size:.8rem; line-height:1.2;
  background:#fdf5f0; border:none; border-left:5px solid #8b4513; border-radius:.5rem; color:#4a2f1b;
  box-shadow:0 2px 6px rgba(0,0,0,.1); cursor:pointer; transition:background-color .3s ease;
  text-align:center; display:flex; align-items:center; justify-content:center; white-space:normal; word-break:break-word;
}
.kwadrant-btn:hover { background:#fae8dc; }

/* Overlay */
#kwadrant-blok .kw-overlay-backdrop { position:absolute; inset:0; display:none; z-index:20; background: rgba(0,0,0,0.35); }
#kwadrant-blok .kw-overlay-backdrop.is-open { display:block; }
#kwadrant-blok .kw-overlay {
  position:absolute; inset:0; background:#fff; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  display:flex; flex-direction:column; overflow:hidden;
}
#kwadrant-blok .kw-overlay-body { padding:18px; overflow:auto; }
#kwadrant-blok .kw-overlay-close { position:absolute; right:8px; top:6px; appearance:none; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer; padding:6px 10px; z-index:1; }

/* Overlay – mobiel fullscreen-ish */
@media (max-width: 576px) {
  #kwadrant-blok .kw-overlay-backdrop { position: fixed; inset: 0; }
  #kwadrant-blok .kw-overlay { position: fixed; left: 4vw; right: 4vw; top: 2.5vh; bottom: auto; max-height: 95vh; }
  #kwadrant-blok .kw-overlay-body { padding: 20px 16px; }
}

/* Collapses als content-bron verbergen */
#kwadrant-blok .container.mt-4 > .collapse { display: none !important; }

/* ===========================
   FORMULIER (INSCHRIJVING)
   =========================== */

/* Form zo breed als de kaart */
#inschrijving-en-aanmelding .form-layout { max-width: 100% !important; margin: 0 auto; }

/* Rij: label rechts uitlijnen, veld vult de rest */
.form-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 1rem;
}

/* Label: vaste kolombreedte, RECHTS uitlijnen */
.form-group label {
  flex: 0 0 200px;               /* kolombreedte desktop */
  max-width: 200px;
  text-align: right;             /* rechts uitlijnen */
  padding-top: .375rem;          /* verticale align met input (Bootstrap hoogte) */
  font-weight: 500;
}

/* Velden: nemen de rest van de rij */
.form-group input,
.form-group select,
.form-group textarea {
  flex: 1 1 auto;
  width: 100%;
}

/* Foutmelding: houdt hoogte vrij */
.form-group .invalid-feedback { display: block; min-height: 1.25rem; }

/* Mobile: stacken, label links */
@media (max-width: 768px) {
  .form-group { flex-direction: column; align-items: stretch; }
  .form-group label {
    flex: none; max-width: none; width: auto;
    text-align: left; padding-top: 0;
  }
}

/* Optioneel: form iets breder op extreem grote schermen */
@media (min-width: 1400px) {
  #inschrijving-en-aanmelding .form-layout { max-width: 1140px; }
}

/* ===========================
   TYPO ACCENTEN
   =========================== */
.training-intro-title { color: #a26533; }

/* ===========================
   EIND
   =========================== */
/* Sterretje voor verplichte velden */
.req {
  color: #c24e00;           /* jouw HOLO-oranje */
  margin-left: 4px;
  font-weight: 700;
}
.photo-frame { overflow: hidden; border-radius: 0.75rem; box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.08); }
.trainer-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; }