/* Team Thermometer: opmaak gelijk aan de Denkkrachtscan, fonts lokaal. Staat na de inline stijl in index.php en gaat daarvoor. */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/open-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/open-sans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/open-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/open-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'BebasNeueRegular'; font-style: normal; font-weight: normal; font-display: swap; src: url('fonts/BebasNeue-webfont.woff') format('woff'); }

[hidden] { display: none !important; }
html, body { background: #fff; color: #222; }
body { font-size: 14px; line-height: 1.5; }
.container { padding: 0 16px 120px; }
.page-head { height: 40px; margin: 12px 0 8px; }
h1 { margin: 0.6em 0 0.3em; }
h1.header { line-height: 1.1; clear: both; }
h2 { font-size: 1.25em; margin: 0.8em 0 0.4em; }
h3 { font-size: 1.1em; margin: 0.6em 0 0.3em; }
.item { padding: 6px 0 0; }
.statement { font-size: 1.15em; text-align: left; }
.item-nr { color: #00aeef; }
.image-container img { display: inline-block; width: 90px; height: auto; margin-bottom: 2px; }
.end-tag { display: block; font-size: 0.8em; font-weight: 700; color: #00aeef; text-transform: uppercase; letter-spacing: 0.04em; }
button { display: inline-block; padding: 16px 32px; border: 2px solid #00aeef; box-shadow: 0 2px 2px #888; font: inherit; font-size: 1.2em; line-height: 1.3; }
#submit-btn { font-size: x-large; padding: 20px 40px; }
#submit-btn.is-disabled { border-color: #9adff8; }
a:focus-visible { outline: 3px solid #005dff; outline-offset: 2px; }
#tt-meta .meta { text-align: center; }
.chart-wrap { position: relative; height: 320px; }
.results-container { padding: 5px 20px 10px; }
.results-container > img { margin: 0 0 8px 16px; }
.form-container { color: #222; }
input[type=text], input[type=email], .reflection-box textarea, .reflection-box select { color: #222; }
input[type=text], input[type=email] { font: inherit; }
input[type=submit] { font: inherit; font-size: 1.2em; padding: 12px 28px; border-radius: 5px; }
.result-link { color: #007cab; }
.intro a { color: #fff; font-weight: 700; text-decoration: underline; }
.meta { color: #555; margin-top: 0; }
.small { font-size: 0.9em; color: #555; font-weight: 400; }
.scale-legend { text-align: left; margin: 0 0 24px; padding: 8px 16px; border: 1px solid rgba(0, 174, 239, 0.35); border-radius: 5px; background: #f2f2f2; }
.scale-legend ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; list-style: none; padding: 0; margin: 6px 0; font-weight: 700; }
.baseline-banner { text-align: left; border: 2px solid #00aeef; border-radius: 5px; padding: 4px 20px 12px; margin-bottom: 20px; }
.mode-pill { display: inline-block; background: #00aeef; color: #fff; font-weight: 700; border-radius: 999px; padding: 2px 14px; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 24px 0 12px; }
.baseline-banner .actions { justify-content: flex-start; }
button.secondary { background: #fff; color: #007cab; font-size: 1em; padding: 10px 18px; }
button.link-button { background: none; border: none; box-shadow: none; color: #007cab; padding: 0; font-size: 1em; text-decoration: underline; }
#tt-oefeningen, #tt-uitslag, #tt-acties, #tt-meta { text-align: left; }
#tt-meta .intro { text-align: center; }
.summary { margin: 20px 0; font-size: 1.1em; }
.overall { color: #555; font-size: 0.9em; }
.area-kop { margin: 24px 0 12px; }
.later-info, .storage-note { background: #f2f2f2; border-radius: 5px; padding: 4px 16px; margin: 12px 0; }
.status-msg { font-weight: 700; color: #2e7d32; }
.status-msg:empty { display: none; }
.compare-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; }
.compare-table caption { text-align: left; font-weight: 700; font-size: 1.1em; padding-bottom: 6px; }
.compare-table th, .compare-table td { border-bottom: 1px solid #ddd; padding: 8px; text-align: left; vertical-align: top; }
.compare-table td.diff { font-weight: 700; white-space: nowrap; }
.band { display: inline-block; font-weight: 600; color: #007cab; background: #e6f7fd; border-radius: 4px; padding: 0 8px; }
.theme-score { margin: 0 0 8px; }
.theme-score .score { font-size: 1.8em; font-weight: 700; }
.diff.up, .change.up { color: #2e7d32; }
.diff.down, .change.down { color: #b23c17; }
.change { font-weight: 700; white-space: nowrap; }
.item-changes li, .low-points li { margin-bottom: 8px; }
.reflection-box { border-radius: 5px; background: #f2f2f2; padding: 4px 20px 12px; margin: 20px 0; }
.reflection-box label { display: block; font-weight: 600; margin-top: 10px; }
.reflection-box textarea, .reflection-box select { width: 100%; padding: 10px; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; margin-top: 6px; font: inherit; resize: vertical; }
.tip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tip { border: 1px solid #00aeef; border-left-width: 6px; border-radius: 5px; padding: 4px 16px 12px; margin-bottom: 12px; }
.tip h3 { margin: 10px 0 6px; }
.tip-basis { color: #555; font-size: 0.9em; }
.all-tips { margin: 12px 0 24px; text-align: left; }
.print-only { display: none; }

/* "Zo ga je verder" en "Meer oefeningen? Bekijk alle tien": zoals de Denkkrachtscan. */
.plan { text-align: left; margin: 20px 0 12px; }
.plan h2 { color: #fff; margin: 12px 0 4px; }
.all-tips-intro { margin: 0 0 12px; }
.all-tips { border: 1px solid #ccc; border-radius: 5px; padding: 10px 16px; }
.all-tips h2 { margin-top: 4px; }

/* ---- Bouwopdracht v5: inklapbare delen (standaard dicht) en hulpregels, zoals de Denkkrachtscan */
details.fold { text-align: left; margin: 16px 0; border: 1px solid #ccc; border-radius: 5px; padding: 8px 16px; }
details.fold > summary { cursor: pointer; font-weight: 700; color: #007cab; padding: 4px 0; min-height: 32px; display: list-item; }
details.fold[open] > summary { margin-bottom: 8px; }
#tt-vouw, #tt-hulp { text-align: left; }
.helpers ul { list-style: none; margin: 16px 0 8px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; font-size: 0.95em; }
.helpers li { display: flex; align-items: center; }
/* Geen scheidingspunt: bij afbreken zou een regel met een los punt beginnen. */
.helpers li[hidden] { display: none; }
.helpers .link-button { min-height: 32px; display: inline-flex; align-items: center; color: #007cab; text-decoration: underline; font-size: 1em; }
.niveau-uitleg { text-align: left; color: #444; font-size: 0.95em; margin: 20px 0 8px; }

/* Feedbackformulier, zoals in de Denkkrachtscan. Eigen regels, zodat de stijl van het contactformulier niet doorwerkt. */
.feedback-form { text-align: left; border-radius: 5px; background: #f2f2f2; padding: 4px 20px 16px; margin: 20px 0 28px; }
.feedback-form h2 { margin-top: 12px; }
.feedback-form label { display: block; font-weight: 600; margin-top: 10px; }
.feedback-form textarea, .feedback-form input[type=email] { width: 100%; padding: 10px; border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; margin: 6px 0 0; font: inherit; color: #222; resize: vertical; }
.fb-group { border: 0; padding: 0; margin: 16px 0 0; }
.fb-group legend { font-weight: 600; padding: 0; }
.fb-options { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 4px; }
.feedback-form .fb-options label, .feedback-form label.fb-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-weight: 400; cursor: pointer; }
.feedback-form label.fb-check { display: flex; }
.feedback-form input[type=radio], .feedback-form input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: #007cab; }
.feedback-form .fb-privacy { margin: 6px 0 4px; }
.feedback-form .fb-help { margin: 0 0 8px 28px; }
.feedback-form a, .contact-privacy a { color: #006a94; }
.contact-privacy { margin: -10px 0 16px; }
.fb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fb-only { margin: 16px 0 8px; }
.fb-msg { font-weight: 700; color: #2e7d32; }
.fb-msg:empty { display: none; }
.fb-msg.is-error { color: #b23c17; }
.feedback-form button[disabled] { background-color: #9adff8; border-color: #9adff8; box-shadow: none; cursor: wait; }


/* Links naar de werkboeken op academyofminds.com. #007cab: voldoende contrast op wit (AA). */
.werkboek-regel { margin: 0 0 20px; }
.werkboek-regel a, .cta-link { color: #007cab; font-weight: 700; text-decoration: underline; }
.werkboek-cta { text-align: left; border: 2px solid #00aeef; border-radius: 5px; padding: 4px 20px 12px; margin: 24px 0; }
.werkboek-cta h2 { font-family: 'BebasNeueRegular', sans-serif; font-weight: 400; font-size: 1.7em; color: #007cab; }
.werkboek-cta .actions { justify-content: flex-start; align-items: center; gap: 12px 20px; margin: 16px 0 8px; }
.werkboek-cta .button-link { display: inline-block; background: #007cab; color: #fff; border: 2px solid #007cab; border-radius: 5px; padding: 12px 24px; font-size: 1.1em; font-weight: 700; text-decoration: none; box-shadow: 0 2px 2px #888; }
/* Twee opties (C1): opvallend = gevulde knop, rustig = omlijnde knop. */
.werkboek-cta .opties p { margin: 12px 0; }
.werkboek-cta .optie-rustig { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.werkboek-cta .button-link.rustig { background: #fff; color: #007cab; box-shadow: none; padding: 10px 20px; font-size: 1em; }

/* ---- Startpagina */
.subtitle { font-size: 1.1em; margin: 0 0 16px; }
.start-tip { margin: 0 0 12px; }

/* ---- Gebieden compact (variant A): titel, score en band zichtbaar; uitleg en tip uitklapbaar. */
.results-container { margin-bottom: 12px; min-height: 0; } /* de oude min-height (220 px) was voor het plaatje dat nu in de uitleg staat */
.uitleg { margin: 0 0 6px; }
.uitleg summary { cursor: pointer; font-weight: 700; color: #007cab; padding: 6px 0; }
.uitleg[open] summary { margin-bottom: 6px; }
.uitleg-img { float: right; width: 60px; height: auto; margin: 0 0 8px 16px; }
.uitleg::after { content: ""; display: block; clear: both; }

@media (max-width: 720px) {
	/* Compacter: plaatje van 56 px naast de tekst in plaats van erboven. */
	.image-container { display: flex; align-items: center; gap: 12px; text-align: left; padding: 2px 0; }
	.image-container.side-right { text-align: left; }
	.image-container img { width: 56px; max-height: none; flex: 0 0 56px; margin: 0; }
	.image-container p { margin: 0; }
	.slider { padding: 12px 6px; }
	.item { padding-top: 0; }
	.uitleg-img { width: 48px; }
	.scale-legend ul { flex-direction: column; }
	button, #submit-btn { width: 100%; box-sizing: border-box; font-size: large; padding: 14px 18px; text-align: center; }
	button.link-button { width: auto; padding: 0; font-size: 1em; text-align: left; }
	.chart-wrap { height: 380px; }
	.results-container > img { margin: 8px auto 12px; }
	.compare-table th, .compare-table td { padding: 6px 4px; font-size: 0.95em; }
	.change { white-space: normal; }
	.tip-grid { grid-template-columns: 1fr; gap: 0; }
	.werkboek-cta .button-link { width: 100%; box-sizing: border-box; text-align: center; }
	.helpers ul { flex-direction: column; align-items: center; gap: 2px; }
	.helpers li + li::before { content: none; }
}

@media print {
	.no-print, .reflection-box textarea, .reflection-box select, .reflection-box label, .reflection-box .small { display: none !important; }
	.print-only { display: block; }
	.intro { background: #fff; color: #000; border: 2px solid #00aeef; }
	.chart-wrap { height: auto; }
	.chart-wrap canvas { max-width: 100% !important; height: auto !important; }
	.results-container, .compare-table, .change-group, .tip { break-inside: avoid; }
	.print-footer { margin-top: 24px; font-size: 0.9em; color: #555; }
}
details.fold.reflection-box { background: #fff; }

/* ---- Contrast (10 november 2026): overal minimaal 4,5:1, zoals op 9 november om 14:20 UTC. Tekst en vlakken met
   witte tekst #007cab (4,7:1). Uitgeschakelde knoppen: donkere tekst op lichtblauw (6,1:1).
   Lichtblauwe randen, schuifjes en grafiek blijven #00aeef: die dragen geen tekst. */
h1 { color: #007cab; }
.intro { background-color: #007cab; border-color: #007cab; }
button { background-color: #007cab; border-color: #007cab; }
button.secondary { background-color: #fff; }
button.link-button { background: none; }
.item-nr, .end-tag { color: #007cab; }
.mode-pill { background: #007cab; }
#submit-btn.is-disabled, .feedback-form button[disabled] { background-color: #e3eef3; border-color: #e3eef3; color: #335b6b; }
/* Niveaulabels op lichtblauw (#e6f7fd) en links op grijs (#f2f2f2): #006a94 (5,5:1 en 5,3:1). */
.band { color: #006a94; }

/* Terug-link bovenaan de uitslag: zelfde actie als "Terug naar …" onderaan, maar direct zichtbaar. */
.terug-boven { margin: 0 0 8px; text-align: left; }
.terug-boven a,
.terug-boven .link-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #007cab; font-weight: 700; text-decoration: none; font-size: 1em; }
.terug-boven a:hover, .terug-boven a:focus-visible,
.terug-boven .link-button:hover, .terug-boven .link-button:focus-visible { text-decoration: underline; }
@media print { .terug-boven { display: none; } }