/* Project stylesheet, loaded after mdb.css. All site-wide custom CSS goes
   here — component styles and runtime overrides of the CSS custom properties
   that Bootstrap/MDB expose.

   mdb.css is built from static/scss/mdb.scss, but that build is not
   currently reproducible (the committed css was compiled with an older
   sass than what is available), so it is treated as frozen. When changing
   a value that also exists in the scss (like the navbar padding below),
   keep static/scss/custom/_variables.scss in sync so a future rebuild of
   mdb.css produces the same result.

   CSS belongs in a template only when it depends on template data
   (e.g. the banner background image). */

/* ---- Navbar ---- */

.navbar {
  --mdb-navbar-nav-link-padding-x: 0.75rem;
}

/* ---- Footer ---- */

/* The banner is clipped to an ellipse (see .footer-banner in mdb.css), so
   content near the bottom of the box is cut away by the curve. The link row
   therefore sits directly under the heading, high inside the ellipse. */
.footer-links a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}
.footer-links a:hover,
.footer-links a:focus {
  color: #fff;
  text-decoration: underline;
}
.footer-links .footer-link-sep {
  color: #8FB0CB;
  padding: 0 10px;
}

/* ---- Needs quiz (NeedsQuizPlugin) ---- */

/* No JavaScript: the radio buttons hold the state and :has() decides what
   is visible. A row is "upcoming" by default, "current" when it is the
   first row or directly follows an answered row, and "answered" once one
   of its radios is checked (or, after the post, when the server marks it
   .quiz-answered). The options are Bootstrap toggle buttons (.btn-check +
   .btn); the answered state shrinks them to pills, so an answer is changed
   by picking the other pill. The last question uses submit buttons, so
   answering it posts the form and shows the result right away. */
.quiz-list {
  display: none;
}
.quiz-list:target,
[data-quiz-complete] .quiz-list {
  display: block;
}
.needs-quiz:has(.quiz-list:target) .quiz-intro,
[data-quiz-complete] .quiz-intro {
  display: none;
}
/* Small uppercase label: the progress text and the result heading. */
.quiz-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Upcoming (default): a dashed placeholder with the question number. */
.quiz-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px dashed #e6e6e6;
  color: #aaa;
}
/* The legend is the question. Browsers place a legend outside the normal
   flow unless it floats (the trick Bootstrap's reboot uses); as a float it
   becomes an ordinary flex item. Undo the reboot's heading-like sizing. */
.quiz-question {
  float: left;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
.quiz-num {
  order: -1;
  flex: 0 0 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #ddd;
  color: #777;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}
.quiz-question,
.quiz-options {
  display: none;
}

/* Current: the open question card with two large buttons. */
.quiz-row:is(:first-child, .quiz-row:has(:checked) + *):not(:has(:checked), .quiz-answered) {
  .quiz-group {
    /* A column: label, then the question (legend), then the buttons. */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem;
    border-radius: 12px;
    border: 2px solid var(--mdb-secondary);
    background: #fff;
    color: inherit;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.06);
    margin: 0.5rem 0 0.75rem;
  }
  .quiz-num {
    display: none;
  }
  .quiz-label {
    display: block;
    order: -1;
    margin-bottom: 0.5rem;
    color: var(--mdb-secondary);
  }
  .quiz-question {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .quiz-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  /* Large enough to hit with a thumb. */
  .btn {
    min-height: 60px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Answered: a compact row with the question and the two options as pills. */
.quiz-row:is(:has(:checked), .quiz-answered) {
  .quiz-group {
    border-style: solid;
    background: #fff;
    color: inherit;
  }
  .quiz-num {
    background: var(--mdb-secondary);
    color: #fff;
  }
  .quiz-label {
    display: none;
  }
  .quiz-question {
    display: block;
    flex: 1 1 12rem;
  }
  .quiz-options {
    display: flex;
    gap: 0.35rem;
    margin-left: auto;
  }
  .btn {
    --mdb-btn-color: #555;
    --mdb-btn-bg: #fff;
    --mdb-btn-border-color: #ccc;
    --mdb-btn-hover-color: #333;
    --mdb-btn-hover-bg: #f2f2f2;
    --mdb-btn-hover-border-color: #bbb;
    --mdb-btn-active-color: #fff;
    --mdb-btn-active-bg: var(--mdb-secondary);
    --mdb-btn-active-border-color: var(--mdb-secondary);
    padding: 0.3em 0.9em;
    font-size: 0.85rem;
    /* MDB's filled buttons are borderless; pills need one to read as options. */
    border: 1px solid var(--mdb-btn-border-color);
    border-radius: 999px;
    box-shadow: none;
    text-transform: none;
  }
  .btn .fa-solid {
    display: none;
  }
  /* Explicit colours for focus and checked, so MDB's per-variant focus and
     active rules for .btn-primary cannot bleed through on a pill. */
  .btn-check:focus + .btn,
  .btn:focus {
    color: var(--mdb-btn-hover-color);
    background-color: var(--mdb-btn-hover-bg);
    border-color: var(--mdb-btn-hover-border-color);
    box-shadow: 0 0 0 3px rgba(44, 93, 136, 0.25);
  }
  .btn-check:checked + .btn,
  .btn-check:checked + .btn:focus,
  .btn.active,
  .btn.active:focus {
    color: #fff;
    background-color: var(--mdb-secondary);
    border-color: var(--mdb-secondary);
  }
}

.quiz-result {
  border-radius: 12px;
  border-left: 6px solid var(--mdb-info, #6cc4ac);
  background: #f4faf8;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.quiz-form .form-label {
  font-weight: 600;
}
.quiz-form .errorlist {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  color: var(--mdb-danger, #f31068);
  font-size: 0.9rem;
}

/* ---- Blog cards ---- */

.blog-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
@media (prefers-reduced-motion: reduce) {
  .blog-card {
    transition: none;
  }
  .blog-card:hover,
  .blog-card:focus-within {
    transform: none;
  }
}