/* Quizzes and small SEO additions for zno.if.ua (palette follows the avani theme). */
.zno-updated { margin: 0 0 .25em; font-size: .85em; color: #707070; }
.zno-jump { margin: 0 0 1.25em; font-size: .95em; }
.zno-jump a { color: #0067ac; text-decoration: none; border-bottom: 1px dashed currentColor; }

.zno-quiz {
  margin: 2.5em 0 1.5em;
  padding: 1.25em 1.25em .5em;
  border: 1px solid #d6e3ee;
  border-radius: 8px;
  background: #f6f9fc;
}
.zno-quiz__title { margin: 0 0 .3em; font-size: 1.35em; color: #004d80; }
.zno-quiz__intro { margin: 0 0 1em; color: #555; }
.zno-quiz__list { margin: 0; padding-left: 1.4em; }
.zno-quiz__q { margin: 0 0 1.4em; }
.zno-quiz__text { margin: 0 0 .5em; font-weight: 600; color: #222; }
.zno-quiz__opts { list-style: none; margin: 0 0 .4em; padding: 0; display: grid; gap: .4em; }
.zno-quiz__opts li { margin: 0; }
.zno-quiz__opt {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: .55em .8em;
  border: 1px solid #c9d6e2;
  border-radius: 6px;
  background: #fff;
  color: #222;
  font: inherit;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: none;
}
.zno-quiz__opt:disabled { cursor: default; }
.zno-quiz:not(.is-interactive) .zno-quiz__opt { opacity: 1; }
.zno-quiz.is-interactive .zno-quiz__q:not(.is-done) .zno-quiz__opt:hover,
.zno-quiz__opt:focus-visible { border-color: #0067ac; background: #eef5fb; outline: none; }
.zno-quiz__letter { display: inline-block; min-width: 1.4em; font-weight: 700; color: #0067ac; }
.zno-quiz__opt.is-correct { border-color: #2e8540; background: #e7f4ea; }
.zno-quiz__opt.is-correct .zno-quiz__letter { color: #2e8540; }
.zno-quiz__opt.is-chosen-wrong { border-color: #c0392b; background: #fbeceb; }
.zno-quiz__opt.is-chosen-wrong .zno-quiz__letter { color: #c0392b; }
.zno-quiz__q.is-right .zno-quiz__text::after { content: " ✓"; color: #2e8540; }
.zno-quiz__q.is-wrong .zno-quiz__text::after { content: " ✗"; color: #c0392b; }
.zno-quiz__explain { font-size: .95em; color: #333; }
.zno-quiz__explain summary { cursor: pointer; color: #0067ac; }
.zno-quiz__explain p { margin: .4em 0 0; }
.zno-quiz.is-interactive .zno-quiz__q:not(.is-done) .zno-quiz__explain { display: none; }
.zno-quiz__result {
  margin: 0 0 1em;
  padding: 1em;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #d6e3ee;
}
.zno-quiz__score { font-size: 1.2em; margin: 0 0 .3em; }
.zno-quiz__actions { display: flex; flex-wrap: wrap; gap: .5em; margin: .6em 0 0; }
.zno-quiz__btn {
  display: inline-block;
  padding: .5em .9em;
  border: 1px solid #0067ac;
  border-radius: 6px;
  background: #fff;
  color: #0067ac;
  font: inherit;
  font-size: .95em;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}
.zno-quiz__btn:hover { background: #0067ac; color: #fff; }

.zno-quiz-index { columns: 2 18em; }
.zno-quiz-index li { break-inside: avoid; margin-bottom: .35em; }

@media (max-width: 600px) {
  .zno-quiz { padding: 1em .8em .25em; margin-left: -.25em; margin-right: -.25em; }
  .zno-quiz__list { padding-left: 1.1em; }
}