/* ==========================================================================
   Cyber Awareness Quiz (/free-cyber-awareness-quiz)
   The page's own parts on top of the shared Toybox Calm look (assets/css/toybox-calm.css, loaded first by
   _ToyboxCalmHead): the quiz card in the header (progress, question, answer rows with their right and wrong states,
   feedback, score and the result) and the two promo cards (the posters and the training video). Every class starts
   with caq-. Views/SEO/CyberAwarenessQuiz.cshtml links it in its FinalHeader section with a ?v= cache buster from
   StaticAssetVersion; Scripts/cyber-awareness-quiz/cyber-awareness-quiz.js runs the quiz.
   ========================================================================== */

/* ---------- The quiz card ---------- */
/* The card sits in the dark header, where the base gives focus a white ring: inside the white card, the ink ring and
   yellow halo instead (script-moved focus on tabindex=-1 targets still shows none) */
.caq-root .tc-hero .caq-quiz :focus-visible:not([tabindex="-1"]) { outline: 3px solid var(--tc-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--tc-yellow); }

.caq-quiz__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.tc-root .caq-quiz__title { margin: 0; }
/* "Question: 1 / 10" and "Score: 0 / 10" */
.caq-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 14px 5px; border: 2px solid var(--tc-ink); border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); font: 600 1rem/1.2 var(--tc-display); color: var(--tc-ink-2); white-space: nowrap; }
.caq-pill b { color: var(--tc-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.caq-pill__label { color: var(--tc-muted); }
/* A bar under the head that fills as the questions go by (decorative: the pill says the same) */
.caq-bar { flex: 1 0 100%; height: 12px; overflow: hidden; border: 2px solid var(--tc-ink); border-radius: 999px; background: #fff; }
.caq-bar__fill { display: block; height: 100%; border-right: 2px solid var(--tc-ink); background: var(--tc-yellow); transition: width .3s ease; }

.caq-question { margin: 0 0 20px; font: 600 clamp(1.25rem, 1.1rem + .65vw, 1.625rem)/1.3 var(--tc-display); color: var(--tc-ink); text-wrap: balance; }
.caq-question:focus { outline: none; }

/* The answers: one button per row, the letter on a yellow tile */
/* 16px apart, so a row's tick or cross badge (below) clears the shadow of the row above */
.caq-choices { display: grid; gap: 16px; }
@media (min-width: 768px) { .caq-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.caq-choices > li { display: flex; min-width: 0; }
.caq-choice { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin: 0; padding: 10px 14px 10px 10px; border: 3px solid var(--tc-ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--tc-ink); font: 500 1.0625rem/1.35 var(--tc-display); color: var(--tc-ink); text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; }
/* Hover only where there is a pointer that hovers: on touch screens a tapped row would keep the hover look */
@media (hover: hover) { .caq-choice:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--tc-ink); background: var(--tc-butter); } }
.caq-choice:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--tc-ink); }
.caq-choice__key { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--tc-ink); border-radius: 12px; background: var(--tc-yellow); font: 700 1.125rem/1 var(--tc-display); color: var(--tc-ink); }
.caq-choice__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* The tick or cross after an answer: hidden until the row is marked, then a badge on the row's top right corner. Out of
   the flow (it sits over the border and the padding, clear of the text), so the choice text keeps its width and the row
   its height when the row is marked */
.caq-root .caq-choice i.caq-choice__mark { display: none; position: absolute; top: -11px; right: -11px; place-items: center; width: 28px; height: 28px; border: 2px solid var(--tc-ink); border-radius: 50%; font-size: 1.2rem; line-height: 1; color: var(--tc-ink); }
/* Answered: every row is disabled; the ones not marked step back (the text stays well above AA) */
.caq-choice:disabled { cursor: default; color: var(--tc-ink-2); border-color: rgba(47, 42, 79, .45); box-shadow: 0 3px 0 rgba(47, 42, 79, .25); }
.caq-choice:disabled .caq-choice__key { border-color: rgba(47, 42, 79, .45); background: var(--tc-sky-0); color: var(--tc-ink-2); }
.caq-choice.caq-choice--right { color: var(--tc-ink); border-color: var(--tc-ink); background: var(--tc-mint); box-shadow: 0 4px 0 var(--tc-ink); }
.caq-choice.caq-choice--right .caq-choice__key { border-color: var(--tc-ink); background: var(--tc-green); color: var(--tc-ink); }
.caq-root .caq-choice--right i.caq-choice__mark--right { display: grid; background: var(--tc-green); }
.caq-choice.caq-choice--wrong { color: var(--tc-ink); border-color: var(--tc-ink); background: var(--tc-blush); box-shadow: 0 4px 0 var(--tc-ink); }
.caq-choice.caq-choice--wrong .caq-choice__key { border-color: var(--tc-ink); background: var(--tc-coral); color: var(--tc-ink); }
.caq-root .caq-choice--wrong i.caq-choice__mark--wrong { display: grid; background: var(--tc-coral); }

/* The answer's feedback: empty (and no box) until an answer, so it stays in the page as a live region */
.caq-feedback { color: var(--tc-ink); }
.caq-feedback--right, .caq-feedback--wrong { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 14px 16px; border: 2px solid var(--tc-ink); border-radius: 16px; }
.caq-feedback--right { background: var(--tc-mint); }
.caq-feedback--wrong { background: var(--tc-blush); }
.caq-root i.caq-feedback__icon { font-size: 1.6rem; line-height: 1.6rem; margin-top: -1px; }
.caq-feedback__text { margin: 0; line-height: 1.55; }

.caq-quiz__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 22px; min-height: 52px; }
.caq-score { margin-left: auto; }
@media (max-width: 575.98px) {
  .caq-next { flex: 1 1 100%; }
  .caq-score { margin-left: 0; }
}

/* The result */
.caq-results { padding: 4px 0 6px; text-align: center; }
.tc-root .caq-results__title { margin: 0 0 8px; font: 700 clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem)/1.1 var(--tc-display); color: var(--tc-ink); }
.caq-results__title:focus { outline: none; }
.caq-results__score { margin: 0 0 20px; font-size: 1.1875rem; color: var(--tc-ink-2); }
.caq-results__score b { color: var(--tc-ink); font-variant-numeric: tabular-nums; }
.caq-results__card { max-width: 46rem; margin: 0 auto 26px; padding: 20px 22px; border: 3px solid var(--tc-ink); border-radius: 20px; background: var(--tc-cream); box-shadow: 0 4px 0 var(--tc-ink); }
.caq-results__message { margin: 0 0 8px; font: 700 clamp(1.2rem, 1.1rem + .45vw, 1.4rem)/1.3 var(--tc-display); color: var(--tc-ink); text-wrap: balance; }
.caq-results__tip { margin: 0; color: var(--tc-ink-2); }
/* A long tip in a narrow column reads better ragged-right than centred */
@media (max-width: 575.98px) { .caq-results__card { text-align: left; } }

/* ---------- Promo cards: the posters and the training video ---------- */
.caq-promo { display: grid; gap: 18px; max-width: 64rem; margin: 0 auto; padding: 12px 12px 22px; }
@media (min-width: 880px) {
  .caq-promo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 30px; padding: 14px 30px 14px 14px; }
  .caq-promo--video { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.caq-promo--video { margin-top: 64px; }
.caq-promo__shot { display: block; overflow: hidden; border: 3px solid var(--tc-ink); border-radius: 16px; background: #fff; }
.tc-root .caq-promo__shot img { display: block; width: 100%; height: auto; }
.caq-promo__shot:hover img { transform: scale(1.02); }
.caq-promo__shot img { transition: transform .3s ease; }
.tc-root .caq-promo .caq-promo__video { border-radius: 16px; box-shadow: none; }
.caq-promo__body { min-width: 0; padding: 0 8px; }
.caq-promo__body > :last-child { margin-bottom: 0; }
/* A long button label wraps inside the narrow column instead of running past the card */
.caq-promo__body .tc-btn { max-width: 100%; white-space: normal; text-align: center; }
.caq-promo__body p:not([class]) { color: var(--tc-ink-2); font-size: 1.0625rem; }
.tc-root .caq-promo__title { margin: 0 0 10px; font: 700 clamp(1.4rem, 1.2rem + .7vw, 1.75rem)/1.2 var(--tc-display); color: var(--tc-ink); text-wrap: balance; }
.caq-promo__link { color: var(--tc-ink); text-decoration: underline; text-decoration-color: var(--tc-yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.caq-promo__link:hover, .caq-promo__link:focus { color: var(--tc-ink); text-decoration-color: var(--tc-coral); }

.caq-related { max-width: 64rem; margin-left: auto; margin-right: auto; margin-top: 48px; }

@media (prefers-reduced-motion: reduce) {
  .caq-choice:hover:not(:disabled), .caq-choice:active:not(:disabled), .caq-promo__shot:hover img { transform: none; }
}