/* masennustesti.fi – testimoottorin ja testikorttien lisätyylit (style.css:n päälle) */
/* Osioiden tausta on läpinäkyvä; tummassa tilassa selaimen tumma pohja + tumma teksti = lukukelvoton. */
html, body { background-color: #fff; color-scheme: light; }
/* main.css: "h1 {color:#fff}" is overridden later by "h1..h6 {color: rgba(0,0,0,.9)}" -> black title on purple. */
.header .header__title { color: #fff; text-shadow: 0 2px 12px rgba(40, 0, 80, 0.35); }
/* ---- Testin ulkoasu sivuston teemaan (violetti #8f11d2, keltainen #f9ca48, kerma #fffcf5, Playfair + Lato) ---- */
#quiz {
  --color-primary: #8f11d2; --color-primary-hover: #560a7e; --color-primary-active: #4c0074;
  --color-text: #32004c; --color-text-secondary: rgba(50, 0, 76, 0.68);
  --color-surface: #fff; --color-card-border: rgba(143, 17, 210, 0.14); --color-card-border-inner: rgba(143, 17, 210, 0.1);
  --color-btn-primary-text: #fff; --color-secondary: #f5ebfd; --color-border: rgba(143, 17, 210, 0.2);
  --font-family-base: Lato, Arial, sans-serif;
  background: linear-gradient(180deg, #f3e6fb 0, #fffcf5 220px);
  padding: 3rem 0 3.5rem; font-family: Lato, Arial, sans-serif;
}
#quiz .container { max-width: 760px; }
#quiz .app-wrapper { min-height: 0; padding: 0 1rem; }
#quiz .app-wrapper > * { width: 100%; }
#quiz .option-text { font-size: 1.08rem; }
#quiz .option-label { padding: 0.9rem 1rem; gap: 0.25rem; }
#quiz .intro-description { color: rgba(50, 0, 76, 0.75); font-size: 1.05rem; }
@media (max-width: 600px) { #quiz { padding: 1.5rem 0 2rem; } #quiz .question-text { font-size: 1.15rem; } #quiz .intro-content, #quiz .question-content, #quiz .results-content { padding: 1.25rem; } }
#quiz .intro-content, #quiz .question-content, #quiz .results-content {
  background: #fff; border: 1px solid rgba(143, 17, 210, 0.12); border-radius: 18px;
  box-shadow: 0 18px 40px -18px rgba(76, 0, 116, 0.28); border-top: 5px solid #8f11d2;
}
#quiz .intro-title, #quiz .question-title, #quiz .results-title, #quiz .result-level, #quiz .crisis-title { font-family: "Playfair Display", Georgia, serif; color: #3c005c; }
#quiz .question-title { font-size: 1rem; letter-spacing: 0.04em; color: #8f11d2; text-transform: uppercase; font-family: Lato, Arial, sans-serif; font-weight: 700; }
#quiz .question-subtitle { color: rgba(50, 0, 76, 0.65); font-size: 0.95rem; }
#quiz .question-text { font-size: 1.3rem; font-weight: 700; line-height: 1.4; color: #32004c; }
#quiz .progress-bar { background: rgba(143, 17, 210, 0.12); height: 8px; border-radius: 99px; }
#quiz .progress-fill { background: linear-gradient(90deg, #a928ee, #8f11d2); border-radius: 99px; }
#quiz .progress-text { color: #560a7e; font-weight: 700; font-size: 0.85rem; }
#quiz .option-label {
  font-family: Lato, Arial, sans-serif; background: #fff; border: 2px solid rgba(143, 17, 210, 0.14);
  border-radius: 12px; color: #32004c; transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
#quiz .option-label:hover { border-color: #a928ee; background: #faf4fe; }
#quiz .option-label:active { transform: scale(0.99); }
#quiz .option-radio:checked + .option-label { border-color: #8f11d2; background: #f5ebfd; box-shadow: 0 0 0 3px rgba(143, 17, 210, 0.12); }
#quiz .option-letter {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 2rem;
  border-radius: 50%; background: #f5ebfd; color: #8f11d2; font-size: 0.9rem; font-weight: 700;
}
#quiz .option-radio:checked + .option-label .option-letter { background: #8f11d2; color: #fff; }
#quiz .btn { box-sizing: border-box; max-width: 100%; font-family: Lato, Arial, sans-serif; font-weight: 700; border-radius: 10px; letter-spacing: 0.02em; }
#quiz .btn--primary { background: #8f11d2; color: #fff; border: 2px solid #8f11d2; }
#quiz .btn--primary:hover:not(:disabled) { background: #560a7e; border-color: #560a7e; }
#quiz .btn--outline { background: #fff; color: #8f11d2; border: 2px solid rgba(143, 17, 210, 0.35); }
#quiz .btn--outline:hover { border-color: #8f11d2; background: #faf4fe; }
#quiz .btn--secondary { background: #f5ebfd; color: #560a7e; border: 2px solid transparent; }
#quiz .btn--secondary:hover { background: #ecd8fb; }
#quiz .btn:disabled { opacity: 0.35; }
#quiz .start-btn { padding: 0.9rem 2.4rem; font-size: 1.05rem; text-transform: uppercase; box-shadow: 0 10px 22px -10px rgba(143, 17, 210, 0.7); }
#quiz .score-display { background: linear-gradient(135deg, #8f11d2, #560a7e); border: 0; border-radius: 14px; color: #fff; }
#quiz .score-number, #quiz .score-label { color: #fff; }
#quiz .result-interpretation { background: #fffcf5; border: 1px solid rgba(249, 202, 72, 0.6); border-left: 5px solid #f9ca48; border-radius: 12px; }
#quiz .result-description, #quiz .result-recommendations { color: #32004c; }
#quiz .disclaimer { background: #faf4fe; border-color: rgba(143, 17, 210, 0.15); }
.testi-hint { font-size: 0.85rem; opacity: 0.7; margin: 0.75rem 0 0; text-align: center; }
.testi-scale { display: flex; gap: 3px; margin: 0 0 1.5rem; font-size: 0.75rem; text-align: center; }
.testi-scale__band { padding: 0.35rem 0; border-radius: 4px; background: rgba(0, 0, 0, 0.07); white-space: nowrap; overflow: hidden; }
.testi-scale__band { background: #f5ebfd; color: #560a7e; }
.testi-scale__band.is-on { background: #f9ca48; color: #32004c; font-weight: 700; }
.testi-extra { margin-top: 1rem; font-style: italic; }
.testi-answers { margin: 1.5rem 0; text-align: left; }
.testi-answers summary { cursor: pointer; font-weight: 700; }
.testi-answers ol { padding-left: 1.25rem; margin-top: 0.75rem; }
.testi-answers li { margin-bottom: 0.5rem; line-height: 1.4; }
.testi-answers li strong { display: block; font-size: 0.9rem; }
.question-options .option-label { cursor: pointer; }

/* testikortit etusivulla ja testisivuilla */
.testikortit { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.testikortti { display: block; padding: 1.25rem 1.25rem 1.1rem; border-radius: 12px; background: #fff; border: 1px solid rgba(143, 17, 210, 0.14); border-top: 4px solid #8f11d2;
  text-decoration: none; color: inherit; transition: box-shadow 0.15s, transform 0.15s; }
.testikortti:hover, .testikortti:focus { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }
.testikortti h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.testikortti p { margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.45; }
.testikortti span { font-size: 0.85rem; font-weight: 700; color: #8f11d2; }

/* UKK: sama palsta ja tekstikoko kuin sivun muissa kappaleissa */
.testi-faq-q { font-size: 28px; line-height: 1.3; margin-top: 1.4em; margin-bottom: 0.2em; }
@media (max-width: 600px) { .testi-faq-q { font-size: 21px; } }
.testi-faq-q + .ingress { margin-top: 0.3em; }

/* pisteiden tulkintataulukko */
.pistetaulukko { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.95rem; }
.pistetaulukko th, .pistetaulukko td { border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding: 0.55rem 0.5rem; text-align: left; vertical-align: top; }
.pistetaulukko th { font-weight: 700; }

@media print {
  body > *:not(#quiz) { display: none !important; }
  #quiz .screen:not(#tResult), .result-actions, .progress-container { display: none !important; }
  .testi-answers { display: block; }
  .testi-answers[open] summary, .testi-answers summary { display: none; }
  .testi-answers ol { display: block !important; }
}