/* Olaf Zelfcompassietest 1.2 – afgestemd op de klassieke Divi-stijl van olafhoenson.nl. */
.ohc-zct,
.ohc-zct * { box-sizing: border-box; }

.ohc-zct {
  --ohc-zct-accent: #2ea3f2;
  --ohc-zct-accent-dark: #1685cc;
  --ohc-zct-accent-soft: #eef8fe;
  --ohc-zct-text: #3b3b3b;
  --ohc-zct-muted: #6f6f6f;
  --ohc-zct-border: #e5e5e5;
  --ohc-zct-surface: #ffffff;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  color: var(--ohc-zct-text);
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.ohc-zct h2, .ohc-zct h3, .ohc-zct h4,
.ohc-zct p, .ohc-zct span, .ohc-zct strong,
.ohc-zct label, .ohc-zct legend, .ohc-zct button,
.ohc-zct a, .ohc-zct summary {
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
}

.ohc-zct h2, .ohc-zct h3, .ohc-zct h4, .ohc-zct p { margin-top: 0; }
.ohc-zct h2 { margin-bottom: 14px; color:#333; font-size:clamp(32px,4vw,44px); font-weight:300; line-height:1.22; letter-spacing:-.02em; }
.ohc-zct h3 { margin-bottom:12px; color:#333; font-size:clamp(25px,3vw,32px); font-weight:400; line-height:1.3; }
.ohc-zct h4 { margin-bottom:0; color:#333; font-size:19px; font-weight:600; line-height:1.45; }

.ohc-zct__intro,
.ohc-zct__result-panel {
  position:relative;
  margin-bottom:28px;
  padding:38px 44px 40px;
  border:1px solid #e8e8e8;
  border-radius:4px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.055);
}
.ohc-zct__intro::before,
.ohc-zct__result-panel::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--ohc-zct-accent); border-radius:4px 0 0 4px;
}
.ohc-zct__intro > p:last-child,
.ohc-zct__result-panel > p:last-of-type { max-width:760px; margin-bottom:0; color:var(--ohc-zct-muted); font-size:18px; }
.ohc-zct__eyebrow { margin-bottom:8px; color:var(--ohc-zct-accent); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

.ohc-zct__progress { margin:0 0 24px; padding:16px 20px; border:1px solid var(--ohc-zct-border); border-radius:4px; background:#fff; box-shadow:0 5px 18px rgba(0,0,0,.04); }
.ohc-zct__progress-row { display:flex; justify-content:space-between; gap:16px; margin-bottom:10px; color:var(--ohc-zct-muted); font-size:14px; }
.ohc-zct__progress-row strong { color:var(--ohc-zct-accent); font-weight:600; }
.ohc-zct__progress-track, .ohc-zct__meter, .ohc-zct__mini-meter { overflow:hidden; width:100%; background:#eaeaea; border-radius:999px; }
.ohc-zct__progress-track { height:7px; }
.ohc-zct__progress-track span, .ohc-zct__meter span, .ohc-zct__mini-meter span { display:block; height:100%; background:var(--ohc-zct-accent); transition:width .25s ease; }
.ohc-zct__progress-track span { width:0; }

.ohc-zct__form { margin:0; }
.ohc-zct__hp { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.ohc-zct__question { min-width:0; margin:0 0 20px; padding:27px 28px 24px; border:1px solid var(--ohc-zct-border); border-radius:4px; background:#fff; box-shadow:0 7px 22px rgba(0,0,0,.035); transition:border-color .2s ease, box-shadow .2s ease; }
.ohc-zct__question.is-answered { border-color:#b8ddf6; box-shadow:0 7px 22px rgba(46,163,242,.08); }
.ohc-zct__question.has-error { border-color:#c63b33; box-shadow:0 0 0 2px rgba(198,59,51,.08); }
.ohc-zct__question legend { display:flex; align-items:flex-start; width:100%; margin:0 0 20px; padding:0; color:#333; font-size:18px; font-weight:600; line-height:1.55; }
.ohc-zct__number { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; margin-right:13px; border-radius:50%; background:var(--ohc-zct-accent); color:#fff; font-size:14px; font-weight:700; }
.ohc-zct__scale { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.ohc-zct__choice { position:relative; display:flex; min-width:0; min-height:82px; margin:0; padding:11px 6px; align-items:center; justify-content:center; flex-direction:column; gap:6px; border:2px solid #e3e3e3; border-radius:4px; background:#fff; color:#444; cursor:pointer; text-align:center; transition:all .16s ease; }
.ohc-zct__choice:hover { border-color:var(--ohc-zct-accent); background:var(--ohc-zct-accent-soft); transform:translateY(-1px); }
.ohc-zct__choice input { position:absolute; width:1px; height:1px; opacity:0; }
.ohc-zct__choice:focus-within { outline:3px solid rgba(46,163,242,.25); outline-offset:2px; }
.ohc-zct__choice.is-selected { border-color:var(--ohc-zct-accent); background:var(--ohc-zct-accent); color:#fff; box-shadow:0 5px 14px rgba(46,163,242,.22); }
.ohc-zct__choice-number { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#eaf6fd; color:var(--ohc-zct-accent); font-weight:700; }
.ohc-zct__choice.is-selected .ohc-zct__choice-number { background:#fff; color:var(--ohc-zct-accent); }
.ohc-zct__choice-label { font-size:12px; font-weight:600; line-height:1.25; }
.ohc-zct__error { margin:12px 0 0; color:#a6251e; font-size:14px; font-weight:600; }

.ohc-zct__submit-wrap { margin-top:30px; padding:30px; border-radius:4px; background:#f7f7f7; text-align:center; }
.ohc-zct__submit-wrap p { margin:12px 0 0; color:var(--ohc-zct-muted); font-size:13px; }
.ohc-zct .ohc-zct__button, .ohc-zct button.ohc-zct__button, .ohc-zct a.ohc-zct__button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; margin:0; padding:11px 25px; border:2px solid var(--ohc-zct-accent); border-radius:3px; background:var(--ohc-zct-accent); color:#fff!important; font-size:17px; font-weight:600; line-height:1.4; text-decoration:none!important; cursor:pointer; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.ohc-zct .ohc-zct__button::after { content:"›"; margin-left:9px; font-size:25px; font-weight:400; line-height:.8; }
.ohc-zct .ohc-zct__button:hover, .ohc-zct .ohc-zct__button:focus { border-color:var(--ohc-zct-accent-dark); background:var(--ohc-zct-accent-dark); color:#fff!important; transform:translateY(-1px); }
.ohc-zct .ohc-zct__button--secondary { background:#fff; color:var(--ohc-zct-accent)!important; }
.ohc-zct .ohc-zct__button--secondary:hover, .ohc-zct .ohc-zct__button--secondary:focus { background:var(--ohc-zct-accent); color:#fff!important; }
.ohc-zct__source { max-width:880px; margin:25px auto 0; color:#848484; font-size:12px; line-height:1.6; text-align:center; }
.ohc-zct__source a { color:var(--ohc-zct-accent); text-decoration:underline; }

/* Resultaten */
.ohc-zct__result-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:38px; align-items:center; padding:40px 44px; border:1px solid var(--ohc-zct-border); border-left:5px solid var(--ohc-zct-accent); border-radius:4px; background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.055); }
.ohc-zct__result-hero p:last-child { max-width:680px; margin-bottom:0; color:var(--ohc-zct-muted); font-size:18px; }
.ohc-zct__score { display:flex; align-items:center; justify-content:center; flex-direction:column; width:150px; height:150px; border:7px solid var(--ohc-zct-accent); border-radius:50%; background:#fff; }
.ohc-zct__score strong { color:var(--ohc-zct-accent); font-size:46px; font-weight:400; line-height:1; }
.ohc-zct__score span { margin-top:6px; color:var(--ohc-zct-muted); font-size:14px; font-weight:600; }
.ohc-zct__meter { height:12px; margin-top:27px; }
.ohc-zct__meter-labels { display:flex; justify-content:space-between; margin-top:8px; color:var(--ohc-zct-muted); font-size:12px; }
.ohc-zct__section { margin-top:48px; }
.ohc-zct__section-intro { max-width:780px; color:var(--ohc-zct-muted); }
.ohc-zct__cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:22px; }
.ohc-zct__card { padding:23px; border:1px solid var(--ohc-zct-border); border-radius:4px; background:#fff; box-shadow:0 7px 22px rgba(0,0,0,.035); }
.ohc-zct__card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ohc-zct__card-head strong { color:var(--ohc-zct-accent); font-size:22px; font-weight:600; }
.ohc-zct__mini-meter { height:7px; margin:16px 0; }
.ohc-zct__card p { margin-bottom:0; color:var(--ohc-zct-muted); font-size:14px; line-height:1.65; }
.ohc-zct__exercise { margin-top:36px; padding:30px 32px; border-left:5px solid var(--ohc-zct-accent); border-radius:0 4px 4px 0; background:var(--ohc-zct-accent-soft); }
.ohc-zct__exercise p:last-child { margin-bottom:0; font-size:17px; }
.ohc-zct__details { margin-top:28px; border:1px solid var(--ohc-zct-border); border-radius:4px; background:#fff; }
.ohc-zct__details summary { padding:19px 22px; color:#333; font-weight:600; cursor:pointer; }
.ohc-zct__subscales { padding:0 22px 18px; }
.ohc-zct__subscale-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 0; border-top:1px solid var(--ohc-zct-border); }
.ohc-zct__subscale-row div { display:flex; flex-direction:column; }
.ohc-zct__subscale-row span { color:var(--ohc-zct-muted); font-size:12px; }
.ohc-zct__subscale-row b { color:var(--ohc-zct-accent); font-size:19px; }
.ohc-zct__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.ohc-zct__disclaimer { margin-top:30px; padding:17px 19px; border-left:5px solid var(--ohc-zct-accent); background:#f7f7f7; color:var(--ohc-zct-muted); font-size:13px; }

@media (max-width:760px) {
  .ohc-zct__intro,.ohc-zct__result-panel { padding:28px 24px 30px; }
  .ohc-zct__question { padding:22px 15px 19px; }
  .ohc-zct__question legend { font-size:17px; }
  .ohc-zct__scale { gap:5px; }
  .ohc-zct__choice { min-height:68px; padding:8px 2px; }
  .ohc-zct__choice-label { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .ohc-zct__result-hero { grid-template-columns:1fr; padding:30px 24px; text-align:center; }
  .ohc-zct__score { margin:0 auto; }
  .ohc-zct__cards { grid-template-columns:1fr; }
  .ohc-zct__actions { flex-direction:column; }
  .ohc-zct .ohc-zct__button { width:100%; }
}
@media (max-width:420px) {
  .ohc-zct__progress-row { align-items:flex-start; flex-direction:column; gap:3px; }
  .ohc-zct__number { width:31px; height:31px; margin-right:9px; }
}
@media print {
  .ohc-zct__actions,.ohc-zct__source { display:none!important; }
  .ohc-zct { max-width:none; }
  .ohc-zct__result-hero,.ohc-zct__card { box-shadow:none; }
}