/* ==========================================================================
   Scaife Guard Card Exam - module stylesheet
   Loads AFTER Bootstrap 3.4.1 (which may or may not be present). Everything
   here is scoped under .sca-exam so it cannot bleed into the DNN skin or
   other modules, and never fights Bootstrap classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand colour tokens
   Change --sca-green here (and the hand-picked shades below) to re-brand
   the whole module in a single, few-line change.
   -------------------------------------------------------------------------- */
.sca-exam {
  --sca-green: #3c7668;
  --sca-green-dark: #2a544a;
  --sca-green-light: #5c9788;
  --sca-green-bg: #eaf3f1;
  --sca-green-border: #bcd8d1;

  --sca-red: #b3261e;
  --sca-red-bg: #fbeceb;
  --sca-red-border: #e3a9a5;

  --sca-text: #24312e;
  --sca-text-muted: #647570;
  --sca-border: #d7dedb;

  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--sca-text);
}

/* Scoped box-sizing reset - never touches elements outside the module. */
.sca-exam * {
  box-sizing: border-box;
}

/* The [hidden] attribute must actually hide things.
   The browser default is [hidden] { display: none } from the UA stylesheet, which ANY
   author rule setting `display` outranks. Several classes below set display: block, so
   without this rule an element hidden in JS via el.hidden = true stays on screen - which
   showed up as "Choose an answer for this question" sitting under every answered
   question. Specificity here (0,1,1) beats the single-class rules that caused it. */
.sca-exam [hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Layout / screens
   -------------------------------------------------------------------------- */
.sca-exam__screen {
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
}

.sca-exam__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--sca-text);
}

.sca-exam__lead {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 16px;
  color: var(--sca-text);
}

.sca-exam__note {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--sca-text-muted);
  background: var(--sca-green-bg);
  border: 1px solid var(--sca-green-border);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 16px;
}

@media (min-width: 768px) {
  .sca-exam__screen {
    padding: 32px;
  }

  .sca-exam__title {
    font-size: 1.875rem;
  }
}

/* --------------------------------------------------------------------------
   Diagnostics readout (scaffold dl)
   -------------------------------------------------------------------------- */
.sca-exam__diag {
  display: grid;
  grid-template-columns: minmax(120px, 40%) 1fr;
  gap: 4px 12px;
  margin: 0 0 16px;
  padding: 12px;
  background: #f7f8f8;
  border: 1px solid var(--sca-border);
  border-radius: 4px;
  font-size: 0.8125rem;
}

.sca-exam__diag dt {
  color: var(--sca-text-muted);
  font-weight: 600;
}

.sca-exam__diag dd {
  margin: 0;
  font-family: "Consolas", "Courier New", monospace;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.sca-exam__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sca-exam__btn--primary {
  background: var(--sca-green);
  border-color: var(--sca-green);
  color: #ffffff;
}

.sca-exam__btn--primary:hover {
  background: var(--sca-green-dark);
  border-color: var(--sca-green-dark);
}

.sca-exam__btn--secondary {
  background: #ffffff;
  border-color: var(--sca-border);
  color: var(--sca-text);
}

.sca-exam__btn--secondary:hover {
  background: var(--sca-green-bg);
  border-color: var(--sca-green-border);
}

/* --------------------------------------------------------------------------
   Progress bar / counter
   -------------------------------------------------------------------------- */
.sca-exam__progress {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
  border-bottom: 1px solid var(--sca-border);
  padding: 10px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sca-text-muted);
}

/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */
.sca-exam__question {
  border: 1px solid var(--sca-border);
  border-left: 4px solid var(--sca-green);
  border-radius: 4px;
  padding: 16px;
  margin: 0 0 16px;
}

.sca-exam__question--unanswered {
  border-left-color: var(--sca-red);
  background: var(--sca-red-bg);
}

.sca-exam__question-number {
  display: inline-block;
  font-weight: 700;
  color: var(--sca-green);
  margin-right: 6px;
}

.sca-exam__question-text {
  display: inline;
  font-size: 1rem;
  line-height: 1.5;
}

.sca-exam__choices {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.sca-exam__choice {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  margin: 0 0 8px;
  border: 1px solid var(--sca-border);
  border-radius: 4px;
  cursor: pointer;
}

.sca-exam__choice:hover {
  background: var(--sca-green-bg);
  border-color: var(--sca-green-border);
}

.sca-exam__choice input[type="radio"] {
  margin: 0 10px 0 0;
  flex-shrink: 0;
}

.sca-exam__choice-letter {
  font-weight: 700;
  color: var(--sca-green);
  margin-right: 6px;
}

/* --------------------------------------------------------------------------
   Validation
   -------------------------------------------------------------------------- */
.sca-exam__error {
  display: block;
  font-size: 0.8125rem;
  color: var(--sca-red);
  margin-top: 4px;
}

/* Supporting text under a field, e.g. "your certificate will be emailed to this
   address". Muted so it reads as guidance rather than as an error. */
.sca-exam__hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--sca-text-muted);
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Focus
   Answers are selected with radios inside labels, so keyboard users need a
   visible focus ring on the row, not just the (small) native radio.
   -------------------------------------------------------------------------- */
.sca-exam__btn:focus-visible,
.sca-exam__choice:focus-within {
  outline: 2px solid var(--sca-green);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sca-exam__btn {
    transition: none;
  }

  .sca-exam__input {
    transition: none;
  }

  .sca-exam__progress-fill {
    transition: none;
  }
}

/* Choices deliberately stay in a single column at every width. Options run
   2 to 5 per question and vary in length; a two-column grid makes the a/b/c/d
   reading order ambiguous, which is not a thing to get wrong on an exam. */

/* --------------------------------------------------------------------------
   Intro copy (screen 1)
   Operator-authored HTML from the database, rendered as-is. Rules target
   descendants only so nothing here leaks onto elements outside .sca-exam__intro.
   -------------------------------------------------------------------------- */
.sca-exam__intro {
  max-width: 60ch;
  margin: 0 0 24px;
}

.sca-exam__intro p,
.sca-exam__intro ul,
.sca-exam__intro ol {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 12px;
  color: var(--sca-text);
}

.sca-exam__intro h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 20px 0 8px;
  color: var(--sca-text);
}

.sca-exam__intro ul,
.sca-exam__intro ol {
  padding-left: 1.25em;
}

.sca-exam__intro li {
  margin: 0 0 6px;
}

.sca-exam__intro strong {
  font-weight: 700;
}

.sca-exam__intro em {
  font-style: italic;
}

.sca-exam__intro a {
  color: var(--sca-green);
}

.sca-exam__intro a:hover {
  color: var(--sca-green-dark);
}

/* --------------------------------------------------------------------------
   Identity form (screen 1)
   -------------------------------------------------------------------------- */
.sca-exam__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 16px;
}

.sca-exam__field {
  display: flex;
  flex-direction: column;
}

.sca-exam__label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--sca-text);
}

.sca-exam__label--required::after {
  content: " *";
  color: var(--sca-red);
}

.sca-exam__input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  /* 16px minimum keeps iOS Safari from auto-zooming the viewport on focus. */
  font-size: 16px;
  font-family: inherit;
  color: var(--sca-text);
  background: #ffffff;
  border: 1px solid var(--sca-border);
  border-radius: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sca-exam__input:focus {
  outline: none;
  border-color: var(--sca-green);
  box-shadow: 0 0 0 3px var(--sca-green-bg);
}

.sca-exam__input--invalid {
  border-color: var(--sca-red);
  background: var(--sca-red-bg);
}

.sca-exam__actions {
  display: flex;
}

.sca-exam__actions .sca-exam__btn {
  width: 100%;
}

@media (min-width: 768px) {
  .sca-exam__actions .sca-exam__btn {
    width: auto;
  }
}

.sca-exam__formerror {
  color: var(--sca-red);
  background: var(--sca-red-bg);
  border: 1px solid var(--sca-red-border);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 16px;
}

.sca-exam__busy {
  opacity: 0.65;
  cursor: progress;
}

/* --------------------------------------------------------------------------
   Exam screen (screen 2)
   -------------------------------------------------------------------------- */
.sca-exam__questions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sca-exam__question-head {
  margin: 0 0 12px;
  line-height: 1.5;
}

.sca-exam__choice-text {
  flex: 1;
  line-height: 1.4;
}

.sca-exam__choice--selected {
  border-color: var(--sca-green);
  background: var(--sca-green-bg);
}

.sca-exam__progress-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--sca-border);
  overflow: hidden;
}

.sca-exam__progress-fill {
  height: 100%;
  width: 0;
  background: var(--sca-green);
  transition: width 0.2s ease;
}

.sca-exam__progress-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sca-text-muted);
}

.sca-exam__question-anchor {
  scroll-margin-top: 80px;
}