/* =========================================================================
   BALANCE studie — warm thema voor TailorBuilder
   Palet (huisstijl / logo):
     Achtergrond    #F3EEE9
     Koppen         #7A3A35
     Buttons        #D7A48F
     Hover buttons  #B87C67
     Illustraties   #8A8B73  (gebruikt voor menu + aangevinkte radio's)
     Lettertype     Aptos
   Plaatsing: opnemen in de stylesheet van TailorBuilder, of als laatste
   <link>/<style> zodat het na het Inspinia-thema laadt. !important is nodig
   om de thema-stijlen te overschrijven.
   ========================================================================= */

:root{
  --bg:#F3EEE9;
  --heading:#7A3A35;
  --btn:#D7A48F;
  --btn-hover:#B87C67;
  --accent:#8A8B73;
  --card:#FFFFFF;
  --text:#5C4B45;
  --line:#E4DAD1;
}

/* --- Optioneel: Aptos zelf hosten -----------------------------------------
   Aptos staat niet op publieke CDN's. Heb je de fontbestanden, plaats ze
   en haal het commentaar hieronder weg (pas de paden aan).
@font-face{
  font-family:'Aptos';
  src:url('/fonts/Aptos.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Aptos';
  src:url('/fonts/Aptos-Bold.woff2') format('woff2');
  font-weight:600 700; font-style:normal; font-display:swap;
}
--------------------------------------------------------------------------- */

/* --- Basis ---------------------------------------------------------------- */
body, .gray-bg, .white-bg{
  background-color:var(--bg) !important;
  font-family:'Aptos','Segoe UI Variable Text','Segoe UI',-apple-system,Helvetica,Arial,sans-serif !important;
  color:var(--text);
}
#page-wrapper, .wrapper-content, .content{ background:transparent !important; }

/* --- Bovenbalk: hele header in crème -------------------------------------- */
.navbar-fixed-top, .navbar-default,
.navbar-header, .navbar-block,
#contentblock-naam-wrapper, #userUl{
  background:var(--bg) !important;
}
.navbar-fixed-top, .navbar-default{
  border-bottom:1px solid var(--line) !important;
  min-height:78px;
}
.navbar-block{ display:flex !important; align-items:center; }

/* Merk: logo-embleem links + losse tekst-wordmark ernaast (beide gehost op
   de TailorBuilder-server). De originele merktekst wordt verborgen met
   font-size:0. */
.navbar-brand{
  background:var(--bg) !important;
  display:flex !important;
  align-items:center;
  gap:12px;
  height:auto !important;
  padding:6px 18px !important;
  font-size:0 !important;
}
.navbar-brand::before{      /* embleem (de twee cirkels) — iets omlaag */
  content:"";
  flex:0 0 auto;
  width:66px;
  height:51px;
  position:relative;
  top:6px;
  background:url('https://tailorbuilder.ose.nl/klanten/tb3_uni_heerlen/projects/88/LOGO%20BALANCE%20-%20logo.png') no-repeat center/contain;
}
.navbar-brand::after{       /* BALANCE-wordmark — nog wat lager dan het embleem */
  content:"";
  flex:0 0 auto;
  width:200px;
  height:22px;
  position:relative;
  top:13px;
  background:url('https://tailorbuilder.ose.nl/klanten/tb3_uni_heerlen/projects/88/LOGO%20BALANCE%20-%20tekst.png') no-repeat left center/contain;
}
.navbar-nav > li > a, .nav > li > a{ color:var(--heading) !important; }

/* Paginatitel (bv. "Vragenlijst t0") groter, in Aptos */
#contentblock-naam, #contentblock-naam-wrapper{ background:transparent !important; }
#contentblock-naam{
  font-family:'Aptos','Segoe UI','Helvetica Neue',Arial,sans-serif !important;
  font-size:22px !important;
  font-weight:600 !important;
  letter-spacing:.3px !important;
  color:var(--heading) !important;
  position:relative;
  top:16px;                /* gelijk met logo/wordmark */
}

/* Uitloggen rechtsboven als knop */
#logoutLi > a{
  display:inline-flex !important;
  align-items:center;
  gap:7px;
  background:var(--btn) !important;
  color:#4A2A26 !important;
  padding:6px 17px !important;       /* platter */
  border-radius:7px !important;
  font-weight:600 !important;
  margin:20px 8px 0 0;
  line-height:1;
  transition:background .15s;
}
#logoutLi > a:hover, #logoutLi > a:focus{
  background:var(--btn-hover) !important;
  color:#fff !important;
}
#logoutLi > a i, #logoutLi > a .fa{ color:inherit !important; }

/* --- Linker menu (aside) -------------------------------------------------- */
aside a{
  background:var(--accent) !important;
  color:#fff !important;
  border-radius:4px;
  font-weight:600;
  transition:background .15s;
}
aside a:hover{ background:#74755f !important; color:#fff !important; }

/* --- Koppen & vraagteksten ------------------------------------------------ */
h1, h2, h3, h4{ color:var(--heading) !important; font-weight:600; }
.vraagContainer > label,
.vraagContainer > label p{
  color:var(--heading) !important;
  font-weight:600;
  font-size:15px;
  line-height:1.5;
}
.vraagContainer{ margin-bottom:26px; }
.mcOptionsWrapper .checkbox{ margin:6px 0; }
.mcOptionsWrapper .checkbox label span{ color:var(--text); }

/* --- Invoervelden --------------------------------------------------------- */
.form-control{
  border:1px solid var(--line) !important;
  border-radius:6px !important;
  background:#fff !important;
  color:var(--text) !important;
  box-shadow:none !important;
  height:42px;
  padding:8px 12px;
}
.form-control:focus{
  border-color:var(--btn-hover) !important;
  box-shadow:0 0 0 3px rgba(184,124,103,.18) !important;
}

/* --- Knoppen -------------------------------------------------------------- */
.btn-primary, .btn-success, .btn-default{
  background:var(--btn) !important;
  border-color:var(--btn) !important;
  color:#4A2A26 !important;
  font-weight:600;
  border-radius:6px !important;
  padding:9px 20px;
  box-shadow:none !important;
  transition:background .15s, transform .05s;
}
.btn-primary:hover, .btn-success:hover, .btn-default:hover,
.btn-primary:focus{
  background:var(--btn-hover) !important;
  border-color:var(--btn-hover) !important;
  color:#fff !important;
}
.btn-primary:active{ transform:translateY(1px); }

/* --- Footer --------------------------------------------------------------- */
footer{
  background:var(--heading) !important;
  color:#F3EEE9 !important;
}

/* --- iCheck radio's / checkboxes -----------------------------------------
   Het Inspinia-thema gebruikt een sprite-afbeelding (blauw/grijs). Met een
   CSS-filter wordt de tint warm gemaakt; de aangevinkte staat wordt olijf-
   groen (#8A8B73-achtig) en sluit aan op het menu.
   ------------------------------------------------------------------------- */
.iradio_square, .icheckbox_square{
  filter: sepia(.5) saturate(1.6) hue-rotate(-30deg) brightness(.95);
}