/* ============================================================
   Custom styles - loaded after Bootstrap 5.3.8, so anything
   here overrides it.

   Only the handful of things Bootstrap has no component for.

   Note: avoid reusing Bootstrap's class names (.card, .progress,
   .progress-bar) unless you mean to extend them - a partial
   override leaks Bootstrap's other properties through.
   ============================================================ */

/* ---------- site header ----------
   Mirrors the main GoDaddy site: dark bar, centred, letter-spaced caps.
   Hand-rolled rather than Bootstrap's .navbar - two links never need to
   collapse, so the component brings nothing but markup to fight. */
.site-nav {
  background-color: #0f1214;
}

.site-nav-list {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin: 0;
  padding: 1.5rem 1rem;
  list-style: none;
}

.site-nav-list a {
  color: rgba(255, 255, 255, .72);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav-list a:hover,
.site-nav-list a:focus-visible {
  color: #fff;
}

/* Current page. On this site that is always Practice Tests. */
.site-nav-list .is-active {
  color: #fff;
  font-weight: 700;
}

/* ---------- ServSafe credential badge ----------
   Change the one width below to resize it; height follows automatically.
   Native size is 197x121, so going much past that will look soft. */
.site-logo {
  width: 196px;
  max-width: 100%;
  height: auto;
}

/* ---------- answer choices ---------- */

/* The A/B/C/D letter in front of each choice. */
.quiz-key {
  display: inline-block;
  width: 1.75rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

/* The :hover/:focus/:active variants are not decoration - they are needed to
   win a specificity fight. Bootstrap styles these buttons with
   .list-group-item-action:not(.active):hover, which scores (0,3,0), so a plain
   .quiz-choices .quiz-correct at (0,2,0) loses and the answer stays grey until
   you move the pointer off it. Matching its specificity and coming later in
   the file is what makes the colour land on click. */
.quiz-choices .quiz-correct,
.quiz-choices .quiz-correct:hover,
.quiz-choices .quiz-correct:focus,
.quiz-choices .quiz-correct:active {
  background-color: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
  font-weight: 600;
}

.quiz-choices .quiz-wrong,
.quiz-choices .quiz-wrong:hover,
.quiz-choices .quiz-wrong:focus,
.quiz-choices .quiz-wrong:active {
  background-color: var(--bs-danger-bg-subtle);
  border-color: var(--bs-danger-border-subtle);
}

.quiz-choices .quiz-correct .quiz-key,
.quiz-choices .quiz-wrong .quiz-key {
  color: inherit;
}

/* ---------- compact grid of tests ----------
   Six across on desktop, stepping down on narrow screens so the names
   stay readable. */
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}

@media (min-width: 576px) {
  .quiz-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .quiz-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.quiz-grid .btn {
  --bs-btn-padding-x: .5rem;
  --bs-btn-padding-y: .5rem;
  font-size: .8125rem;
  min-width: 0;            /* lets the name truncate instead of overflowing */
  text-align: left;
}

/* Finished tests, marked without adding anything to the label. */
.quiz-grid .quiz-grid-done {
  background-color: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
  color: var(--bs-success-text-emphasis);
}

/* Started but not finished - picks up where they left off. */
.quiz-grid .quiz-grid-started {
  background-color: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning-border-subtle);
  color: var(--bs-warning-text-emphasis);
}

/* ---------- where you are in the test ----------
   Only the current number is coloured. Tinting the whole line would just make
   a quiet caption louder; picking out the one figure that changes is what
   makes it readable at a glance. */
.quiz-count-now {
  color: var(--bs-primary);
  font-weight: 700;
}

/* ---------- back to the test list ----------
   The one way out of a running test, so it needs to be findable. 44px is the
   usual minimum for a comfortable touch target; Bootstrap's default button is
   a few pixels under that. */
.quiz-back {
  min-height: 44px;
  font-weight: 500;
}

/* ---------- steady question area ----------
   Question text, the four choices and the feedback box all change height, and
   without a floor everything below them slides on every move - worst when the
   feedback box appears out of nowhere the moment you answer.

   A min-height on the region they share absorbs the variation instead. Sized
   to a two-line question with four one-line choices and a one-line feedback
   box, which covers the common case; a genuinely long question still grows
   past it rather than being clipped. Raise this if the jumping comes back. */
.quiz-body {
  min-height: 22rem;
}

/* ---------- the question strip ----------
   Ten cells at a time, laid out as three columns: chevron, cells, chevron.
   Only the middle column wraps. Keeping the chevrons out of the wrapping
   container is what makes them impossible to strand on a row of their own -
   on a narrow phone the numbers reflow to 5 + 5 and the arrows stay put,
   centred against the block. */
.quiz-qnav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  padding: .625rem;
  background-color: var(--bs-secondary-bg-subtle);
  border-radius: var(--bs-border-radius-lg);
}

/* Chevron columns: natural width, never squeezed. */
.quiz-qnav-side {
  flex: 0 0 auto;
}

/* The only part that wraps. */
.quiz-qnav-cells {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .375rem;
}

.quiz-qnav-btn {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.quiz-qnav-btn:hover:not(:disabled) {
  border-color: var(--bs-secondary-color);
}

/* The two chevrons. Greyed at the ends rather than removed, so the strip
   keeps the same width and the cells do not shift under the cursor. */
.quiz-qnav-step {
  font-size: 1.125rem;
  line-height: 1;
  color: var(--bs-secondary-color);
}

.quiz-qnav-step:disabled {
  opacity: .35;
}

/* Tighter on a phone so the ten cells reflow to two rows of five rather than
   an uneven 4 + 4 + 2. */
@media (max-width: 575.98px) {
  .quiz-qnav {
    gap: .375rem;
    padding: .5rem;
  }

  .quiz-qnav-cells {
    gap: .25rem;
  }

  .quiz-qnav-btn {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;        /* stops flex from squashing cells out of square */
  }
}

.quiz-qnav-btn.is-correct {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  color: #fff;
}

.quiz-qnav-btn.is-wrong {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: #fff;
}

/* Where you are now. A ring rather than a fill, so it stays legible on top
   of any of the three states underneath it. */
.quiz-qnav-btn.is-current {
  box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--bs-primary);
}

.quiz-qnav-legend {
  display: flex;
  gap: 1rem;
}

.quiz-qnav-swatch {
  display: inline-block;
  width: .75rem;
  height: .75rem;
  margin-right: .375rem;
  border-radius: 2px;
  vertical-align: -1px;
}

.quiz-qnav-swatch.is-correct {
  background-color: var(--bs-success);
}

.quiz-qnav-swatch.is-wrong {
  background-color: var(--bs-danger);
}

/* ---------- question navigation ---------- */

/* Equal halves whatever the labels say. Bootstrap's .flex-fill is
   flex: 1 1 auto, which sizes to the text and makes them uneven. */
.quiz-nav .btn {
  flex: 1 1 0;
}

/* Both buttons share size and weight; only the colour differs. Built from
   Bootstrap's own subtle tokens - it has no btn-*-subtle variants. */
.quiz-nav .btn-quiz-prev {
  background-color: var(--bs-secondary-bg-subtle);
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}

.quiz-nav .btn-quiz-prev:hover:not(:disabled) {
  background-color: var(--bs-secondary-border-subtle);
  color: var(--bs-body-color);
}

.quiz-nav .btn-quiz-next {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
  color: var(--bs-primary-text-emphasis);
}

.quiz-nav .btn-quiz-next:hover {
  background-color: var(--bs-primary-border-subtle);
}

/* ---------- results ---------- */
.quiz-final-score {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
}