/*!
 * Gambling quiz 2.0.0: "Spot the harm" design, one question at a time, WCAG 2.1 AA
 * No dependencies.
 */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "FK Screamer";
  src: url("fonts/FKScreamer-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Polaris";
  src: url("fonts/Polaris-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Polaris";
  src: url("fonts/Polaris-Heavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

.gq {
  /* Brand (Figma colour variables) */
  --gq-green: #1a5f49;          /* color-2; white text on it: 7.6:1 */
  --gq-red: #aa1833;            /* color-3; white text on it: 7.3:1 */
  --gq-sage: #a8bdb5;           /* display headings on the dark background */
  --gq-yellow: #f6c725;         /* color-6 */
  --gq-yellow-light: #f8e285;   /* color-7 */
  --gq-white: #fff;             /* color-4 */
  --gq-black: #000;             /* color-5 */

  /* Surfaces over the background image */
  --gq-bg: #1b2f21;             /* average of quiz-bg.jpg, shown if it fails to load */
  --gq-scrim: rgba(0, 0, 0, 0.5);
  /* Figma uses 50% white; 75% keeps the green/red verdicts above 4:1 on the darkest part of the image */
  --gq-panel: rgba(255, 255, 255, 0.75);
  /* Darker brand green for small text on the panel: 5:1 at its darkest (the brand green is 4.1:1) */
  --gq-green-text: #15513e;

  /* Focus: yellow ring for the dark background, black inner ring for the light panels */
  --gq-focus: var(--gq-yellow-light);
  --gq-focus-ink: #000;

  --gq-font: "Polaris", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gq-font-display: "FK Screamer", Impact, "Arial Narrow", sans-serif;

  /*
   * Figma trims text boxes to cap height and baseline. Negative margins do the
   * same in every browser: Polaris at line-height 1.5, FK Screamer at 1.1.
   */
  --gq-trim-top: -0.32em;
  --gq-trim-bottom: -0.4em;
  --gq-trim-top-display: -0.164em;
  --gq-trim-bottom-display: -0.182em;

  --gq-radius: 1.25rem;
  --gq-pill: 3.4375rem;
  --gq-gap: 1.875rem;
  --gq-inset: 3.75rem;

  /* Motion (see "Motion" below) */
  --gq-speed: 400ms;
  --gq-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gq-rise: 0.75rem;
  --gq-pop: 0.4;
  --gq-press: 0.97;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gq-gap);
  max-width: 46.6875rem;
  margin: 0 auto;
  padding: var(--gq-gap);
  border-radius: var(--gq-radius);
  /*
   * Sized by width and pinned to the top, so the texture stays put as the card
   * grows between screens. The image is mirrored top to bottom, so it repeats
   * down tall cards without a seam. Narrow cards show its centre at full size.
   */
  background: var(--gq-bg) url("https://gamblingharmsupport.sa.gov.au/pages/assets/quiz-bg.jpg") center top / 100% auto repeat-y;
  background-size: max(100%, 46.6875rem) auto;
  color: var(--gq-white);
  font-family: var(--gq-font);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  text-align: center;
}

.gq,
.gq *,
.gq *::before,
.gq *::after { box-sizing: border-box; }

.gq [hidden] { display: none !important; }

/*
 * Site styles that target bare elements (p, li, h2...) can't recolour or
 * re-font the quiz. :where() keeps this below the quiz's own class rules.
 */
.gq :where(h1, h2, h3, h4, h5, h6, p, ol, ul, li, a, em, strong, b, span, abbr, blockquote, summary, button) {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.gq strong { font-weight: 800; }

/* ---------- Focus ---------- */

.gq :focus-visible,
.gq-skip:focus-visible {
  outline: 3px solid var(--gq-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--gq-focus-ink);
}

/* Headings and panels that receive focus by script are not controls */
.gq [tabindex="-1"]:focus,
.gq:focus { outline: none; box-shadow: none; }

/* ---------- Utilities ---------- */

.gq-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gq-skip {
  position: absolute;
  left: 1rem;
  top: -100vh;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: #ffdd00;
  color: #0b0c0c;
  font-weight: 700;
}
.gq-skip:focus { top: 1rem; }

/* ---------- Header ---------- */

.gq-logo {
  display: block;
  width: 20.125rem;
  max-width: 100%;
  height: auto;
}

.gq-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.gq-title {
  margin: 0;
  color: var(--gq-sage);
  font-family: var(--gq-font-display);
  font-size: clamp(3rem, 1.8rem + 6vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-wrap: balance;
}
/* "harm?" in the logo's yellow, light at the top fading to the deeper yellow */
.gq-title__accent { color: var(--gq-yellow); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gq-title__accent {
    background: linear-gradient(var(--gq-yellow-light) 43%, var(--gq-yellow) 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.gq-lede {
  margin: var(--gq-trim-top) 0 var(--gq-trim-bottom);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
}

/* ---------- Progress ---------- */

.gq-progress {
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: var(--gq-green);
}
.gq-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(to top, var(--gq-yellow) 14%, var(--gq-yellow-light) 43%, var(--gq-yellow-light) 68%);
  transition: width var(--gq-speed) var(--gq-ease);
}

/* ---------- Questions ---------- */

.gq-questions {
  width: 100%;
  margin: 0;
  padding-left: 1.5rem;
  text-align: left;
}

.gq-question { margin: 0 0 var(--gq-gap); }

/* Enhanced: one question at a time, numbering comes from the heading instead */
.gq--enhanced .gq-questions {
  list-style: none;
  padding: 0;
  text-align: center;
}
.gq--enhanced .gq-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.gq-question__heading {
  margin: var(--gq-trim-top) 0 calc(1.25rem + var(--gq-trim-bottom));
  font-family: var(--gq-font);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
}

.gq-question__text {
  margin: 0 0 0.75rem;
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5625rem);
}
.gq--enhanced .gq-question__text {
  margin: var(--gq-trim-top) 0 calc(var(--gq-gap) + var(--gq-trim-bottom));
  padding: 0 var(--gq-inset);
}

/* ---------- "X or Z" choices ---------- */

.gq-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}
.gq:not(.gq--enhanced) .gq-options { display: none; }

.gq-choice {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9375rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.9375rem 1.875rem;
  border: 0;
  border-radius: var(--gq-pill);
  background: var(--gq-scrim);
  color: var(--gq-white);
  font: inherit;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem);
  line-height: 1.5;
  letter-spacing: -0.015em;
  text-align: center;
  cursor: pointer;
  transition: background-color 250ms ease, box-shadow 150ms ease, transform 100ms ease;
}
.gq-choice:active:not([aria-disabled="true"]) { transform: scale(var(--gq-press)); }
.gq-choice__label {
  display: block;
  margin: var(--gq-trim-top) 0 var(--gq-trim-bottom);
}
.gq-choice:hover:not([aria-disabled="true"]) {
  box-shadow: inset 0 0 0 2px var(--gq-white);
}
.gq-choice:focus-visible:hover { box-shadow: 0 0 0 2px var(--gq-focus-ink); }
.gq-choice[aria-disabled="true"] { cursor: default; }
.gq-choice.is-right { background: var(--gq-green); }
.gq-choice.is-wrong { background: var(--gq-red); }

/* A pair of answers stacks when there isn't room side by side */
@media (max-width: 39.99em) {
  .gq-options--pair { flex-direction: column; align-self: stretch; }
  .gq-options--pair .gq-choice { width: 100%; }
}

/* ---------- Icons (exported from Figma) ---------- */

.gq-icon {
  flex: none;
  display: inline-block;
  width: 1.1875rem;
  height: 1.125rem;
  margin: -1px;
  background: center / contain no-repeat;
}
.gq-icon--tick { background-image: url("https://gamblingharmsupport.sa.gov.au/pages/assets/tick.svg"); }
.gq-icon--cross { background-image: url("https://gamblingharmsupport.sa.gov.au/pages/assets/cross.svg"); }

/* ---------- Feedback ---------- */

.gq-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  margin-top: var(--gq-gap);
  padding: 1.25rem var(--gq-inset) 1.875rem;
  border-radius: var(--gq-radius);
  background: var(--gq-panel);
  color: var(--gq-black);
}
.gq-feedback p,
.gq-fact p {
  margin: var(--gq-trim-top) 0 var(--gq-trim-bottom);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  letter-spacing: -0.02em;
}
.gq-fact p + p { margin-top: calc(1em + var(--gq-trim-top)); }

.gq-feedback .gq-verdict {
  margin: var(--gq-trim-top-display) 0 var(--gq-trim-bottom-display);
  color: var(--gq-green);
  font-family: var(--gq-font-display);
  font-size: clamp(2.125rem, 1.8rem + 1.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.gq-feedback--incorrect .gq-verdict { color: var(--gq-red); }

/* ---------- No-JS reveal ---------- */

.gq-reveal summary {
  display: inline-block;
  padding: 0.5rem 0;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}
.gq-reveal[open] {
  padding: 0.25rem 1.25rem 1.25rem;
  border-radius: var(--gq-radius);
  background: var(--gq-panel);
  color: var(--gq-black);
}
.gq-reveal > p { margin: 0 0 0.5rem; }
.gq-reveal .gq-fact p { margin: 0; }

/* ---------- Buttons ---------- */

.gq-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Logo yellow, black text 13:1 */
.gq-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.9375rem;
  margin: 0;
  padding: 1.25rem;
  border: 0;
  border-radius: 1.875rem;
  background: var(--gq-yellow);
  color: var(--gq-black);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
.gq-btn:active { transform: scale(var(--gq-press)); }
.gq-btn__label {
  display: block;
  margin: var(--gq-trim-top) 0 var(--gq-trim-bottom);
}
.gq-btn::after {
  content: "";
  flex: none;
  width: 0.6875rem;
  height: 1.125rem;
  margin: -1px 0 -1px -1px;
  background: url("assets/arrow.svg") center / contain no-repeat;
  /* The exported arrow is white */
  filter: brightness(0);
}
.gq-btn:hover { background: var(--gq-yellow-light); }

/* ---------- Results ---------- */

.gq-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.gq-results__heading {
  margin: var(--gq-trim-top) 0 calc(1.25rem + var(--gq-trim-bottom));
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
}
.gq-score {
  margin: var(--gq-trim-top) 0 calc(var(--gq-gap) + var(--gq-trim-bottom));
  padding: 0 var(--gq-inset);
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5625rem);
}

.gq-summary {
  width: 100%;
  margin: 0;
  padding: 0.5rem 1.875rem 0.5rem 3.25rem;
  border-radius: var(--gq-radius);
  background: var(--gq-panel);
  color: var(--gq-black);
  text-align: left;
}
.gq-summary li { padding: 1rem 0 1rem 0.25rem; }
.gq-summary li + li { border-top: 1px solid rgba(0, 0, 0, 0.25); }
.gq-summary__q {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.4;
}
.gq-summary__a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}
/* The answer they missed */
.gq-summary__right {
  color: var(--gq-green-text);
  font-weight: 800;
}

.gq-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--gq-pill);
  background: var(--gq-green);
  color: var(--gq-white);
}
.gq-badge__label {
  display: block;
  margin: var(--gq-trim-top) 0 var(--gq-trim-bottom);
}
.gq-badge--incorrect { background: var(--gq-red); }
.gq-badge .gq-icon { width: 0.875rem; height: 0.875rem; margin: 0; }

/* ---------- Motion ---------- */

/*
 * Short and only ever started by the person taking the quiz: nothing moves on
 * its own, nothing lasts near 5 seconds, nothing flashes. Content is in place
 * and focusable from the first frame; only its opacity and offset animate.
 * With reduced motion these become plain fades (see Preferences).
 */

@keyframes gq-enter {
  from { opacity: 0; transform: translateY(var(--gq-rise)); }
}
@keyframes gq-pop {
  from { opacity: 0; transform: scale(var(--gq-pop)); }
}
/* The tick or cross opens a space beside its label rather than shoving it */
@keyframes gq-make-room {
  from { width: 0; margin-left: -0.9375rem; }
}

.gq--enhanced .gq-question,
.gq-progress,
.gq-results,
.gq-summary li { animation: gq-enter var(--gq-speed) var(--gq-ease) both; }

.gq-feedback { animation: gq-enter var(--gq-speed) var(--gq-ease) 80ms both; }
.gq-question .gq-actions { animation: gq-enter var(--gq-speed) var(--gq-ease) 160ms both; }
.gq-summary li { animation-delay: calc(100ms + var(--gq-i, 0) * 50ms); }

.gq-choice .gq-icon {
  animation:
    gq-make-room 200ms var(--gq-ease) both,
    gq-pop 300ms cubic-bezier(0.3, 1.5, 0.5, 1) 120ms both;
}

/* The script eases the card between heights; clip the content while it does */
.gq--resizing { overflow: hidden; }

/* ---------- Standalone page shell ---------- */

.gq-page {
  margin: 0;
  background: #fff;
  color: #1b1b1b;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.gq-page__main {
  max-width: 50rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

/* ---------- Small screens ---------- */

@media (max-width: 39.99em) {
  .gq {
    --gq-gap: 1.5rem;
    --gq-inset: 0rem;
    padding: 1.875rem 1.25rem;
  }
  .gq-feedback { padding-inline: 1.25rem; }
  .gq-summary { padding-right: 1.25rem; padding-left: 2.5rem; }
  /* Buttons span the card like the answers */
  .gq > .gq-btn,
  .gq-actions { align-self: stretch; }
  .gq-actions { flex-direction: column; }
  .gq-btn { justify-content: center; }
}

/* ---------- Preferences ---------- */

/* Fades only: nothing slides, scales, grows or resizes (the script skips the card height too) */
@media (prefers-reduced-motion: reduce) {
  .gq { --gq-rise: 0; --gq-pop: 1; --gq-press: 1; }
  .gq-choice .gq-icon { animation: gq-pop 200ms ease both; }
  .gq-progress > span { transition: none; }
}

@media (forced-colors: active) {
  .gq { background: Canvas; border: 2px solid CanvasText; }
  .gq-choice,
  .gq-btn,
  .gq-feedback,
  .gq-summary,
  .gq-badge { border: 2px solid CanvasText; }
  .gq-choice.is-right,
  .gq-choice.is-wrong { border-width: 4px; }
  .gq-progress { border: 1px solid CanvasText; }
  .gq-progress > span { background: Highlight; }
  .gq :focus-visible { outline-color: Highlight; }
  .gq-title__accent { background: none; color: inherit; }
}

@media print {
  .gq { background: none; color: #000; }
  .gq-title__accent { background: none; color: inherit; }
  .gq-progress,
  .gq-actions { display: none !important; }
}