/* Earth Inversion — interactive lesson components
 * Shared stylesheet for teach-style blog posts.
 * All selectors are scoped under `.page__content` (the Minimal Mistakes post body)
 * and use the `.ei-` prefix so nothing here can clobber the theme.
 * Install target: earthinversion.github.io/custom-css/interactive-lesson.css
 * Loaded site-wide via _includes/head/custom.html.
 */

/* The theme shrinks body text to 0.8em; restore a readable size inside our widgets. */
.page__content .ei-quiz,
.page__content .ei-details,
.page__content .ei-keyidea {
  font-size: 1rem;
  line-height: 1.6;
}

/* ---------- Key idea / learning-objectives box ---------- */
.page__content .ei-keyidea {
  border-left: 4px solid #2f7ed8;
  background: #f3f8fd;
  border-radius: 6px;
  padding: 0.9em 1.1em;
  margin: 1.5em 0;
}
.page__content .ei-keyidea > :first-child { margin-top: 0; }
.page__content .ei-keyidea > :last-child { margin-bottom: 0; }
.page__content .ei-keyidea .ei-keyidea__label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f7ed8;
  margin-bottom: 0.4em;
}

/* ---------- Collapsible deep-dive / solution ---------- */
.page__content details.ei-details {
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  padding: 0.4em 1em;
  margin: 1.5em 0;
  background: #fafafa;
}
.page__content details.ei-details[open] {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.page__content details.ei-details > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.4em 0;
  list-style: none;
  outline: none;
}
.page__content details.ei-details > summary::-webkit-details-marker { display: none; }
.page__content details.ei-details > summary::before {
  content: "\25B6";        /* right-pointing triangle */
  display: inline-block;
  margin-right: 0.6em;
  font-size: 0.75em;
  color: #2f7ed8;
  transition: transform 0.15s ease;
}
.page__content details.ei-details[open] > summary::before { transform: rotate(90deg); }

/* ---------- Check-your-understanding quiz ---------- */
.page__content .ei-quiz {
  border: 1px solid #d9e6f2;
  border-radius: 8px;
  background: #f7fafd;
  padding: 1.1em 1.2em;
  margin: 1.8em 0;
}
.page__content .ei-quiz__label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f7ed8;
  margin-bottom: 0.5em;
}
.page__content .ei-quiz__q {
  font-weight: 600;
  margin: 0 0 0.9em 0;
}
.page__content .ei-quiz__options {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.page__content .ei-quiz__option {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #cfd9e2;
  border-radius: 6px;
  padding: 0.6em 0.8em;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.page__content .ei-quiz__option:hover:not([disabled]) {
  background: #eef4fb;
  border-color: #2f7ed8;
}
.page__content .ei-quiz__option[disabled] { cursor: default; }
.page__content .ei-quiz__option.is-correct {
  background: #e7f6ec;
  border-color: #2ea25f;
  color: #1c6b3f;
  font-weight: 600;
}
.page__content .ei-quiz__option.is-wrong {
  background: #fdecec;
  border-color: #d9534f;
  color: #a12b28;
}
.page__content .ei-quiz__feedback {
  margin-top: 0.9em;
  padding: 0.6em 0.8em;
  border-radius: 6px;
  font-size: 0.92rem;
  display: none;
}
.page__content .ei-quiz__feedback.is-visible { display: block; }
.page__content .ei-quiz__feedback.is-correct { background: #e7f6ec; color: #1c6b3f; }
.page__content .ei-quiz__feedback.is-wrong { background: #fdecec; color: #a12b28; }

@media (prefers-color-scheme: dark) {
  .page__content .ei-keyidea { background: #12283a; }
  .page__content .ei-quiz { background: #14202b; border-color: #24384a; }
  .page__content .ei-quiz__option { background: #1b2a36; border-color: #33475a; }
  .page__content details.ei-details { background: #161d24; border-color: #2a3540; }
  .page__content details.ei-details[open] { background: #1b232b; }
}