/* ==========================================================================
   VanSpark — Age-band accessibility overrides
   Loads AFTER main.css. main.css is a verbatim upstream port and is frozen;
   every new rule in this project belongs here or in a new file.

   Rule of record: Brain Challenge question text is never smaller than 20px
   for the 3-5 age group. Doc 01 §5.1 B6.

   SECTION 1 below is ported verbatim from the real Doc 05 — Design System
   spec (Task 7), reconciled into this file on 2026-08-26. It is the
   authoritative component contract: `.q-text`, `.q-option`, `.q-hint`,
   `.q-answer`, `.q-media`, `.q-progress`, scoped by `[data-age-group="3-5|
   6-8|9-12"]` on the challenge wrapper. Doc 12 (Brain Challenge player)
   must render that attribute and, ideally, these class names.

   SECTION 2 is the pre-reconciliation accessibility layer that shipped
   before the real Doc 05 was available (`.age-3-5` / `[data-age="3-5"]`
   scoping, `.bc-question-text` / `.bc-option` class names used by the
   current `bc-player.css` / `bc_player.php`). It is kept, unchanged, so the
   in-progress Doc 12 build does not break. It should be retired once Doc 12
   migrates its markup to the Section 1 contract — see docs/DESIGN-TOKENS.md
   and docs/PORT-INTEGRITY.md for the reconciliation note.
   ========================================================================== */

/* ==========================================================================
   SECTION 1 — Doc 05 Task 7 authoritative contract (verbatim)
   ========================================================================== */

/* 1. Age-band type scale. Root font-size is 1rem = 16px. */
:root {
  --q-size-3-5:   1.5rem;    /* 24px */
  --q-size-6-8:   1.25rem;   /* 20px */
  --q-size-9-12:  1.125rem;  /* 18px */
  --q-min-3-5:    1.25rem;   /* 20px — the hard floor for ages 3-5 */

  --opt-size-3-5:  1.25rem;   /* 20px */
  --opt-size-6-8:  1.0625rem; /* 17px */
  --opt-size-9-12: 1rem;      /* 16px */

  --tap-target:      44px;   /* WCAG 2.2 AA minimum */
  --tap-target-3-5:  56px;   /* larger for small, imprecise hands */
}

/* 2. Question text — default (9-12, and any block with no age band set) */
.q-text {
  font-family: var(--font-heading);
  font-size: var(--q-size-9-12);
  font-weight: 700;
  line-height: 1.45;
  color: var(--neutral-dark);
  margin-bottom: 1rem;
}

/* 3. Answer options */
.q-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--tap-target);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--opt-size-9-12);
  font-weight: 600;
  text-align: left;
  color: var(--neutral-body);
  background: var(--neutral-card);
  border: 2px solid var(--neutral-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.q-option:hover {
  border-color: var(--vanspark-purple);
  background: var(--vanspark-purple-soft);
}

/* Option letter chip: A / B / C / D */
.q-option-letter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--vanspark-purple);
  background: var(--vanspark-purple-soft);
  border-radius: var(--radius-pill);
}

/* Image options (Doc 01 §5.1 B3) */
.q-option-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* 4. Result states */
.q-option.is-correct {
  border-color: var(--vanspark-green);
  background: var(--vanspark-green-soft);
  color: var(--neutral-dark);
}
.q-option.is-wrong {
  border-color: var(--vanspark-pink);
  background: var(--vanspark-pink-soft);
  color: var(--neutral-dark);
}
.q-option:disabled {
  cursor: default;
  opacity: 1;
}

/* 5. Hint and answer panels (reuse .collapsible-content from main.css) */
.q-hint,
.q-answer {
  font-family: var(--font-body);
  font-size: var(--opt-size-9-12);
  line-height: 1.6;
  color: var(--neutral-body);
}

/* 6. AGE 3-5 — the 20px floor.
      The plain declaration is the fallback for engines without max();
      the max() line is the enforcement. Never remove either. */
[data-age-group="3-5"] .q-text {
  font-size: 1.5rem;
  font-size: max(var(--q-min-3-5), var(--q-size-3-5));
  line-height: 1.5;
  letter-spacing: 0.01em;
}

[data-age-group="3-5"] .q-option,
[data-age-group="3-5"] .q-hint,
[data-age-group="3-5"] .q-answer {
  font-size: 1.25rem;
  font-size: max(var(--q-min-3-5), var(--opt-size-3-5));
  line-height: 1.5;
}

[data-age-group="3-5"] .q-option {
  min-height: var(--tap-target-3-5);
  padding: 1rem 1.25rem;
  border-width: 3px;
}

[data-age-group="3-5"] .q-option-letter {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.25rem;
}

/* 7. AGE 6-8 */
[data-age-group="6-8"] .q-text {
  font-size: var(--q-size-6-8);
  line-height: 1.5;
}
[data-age-group="6-8"] .q-option,
[data-age-group="6-8"] .q-hint,
[data-age-group="6-8"] .q-answer {
  font-size: var(--opt-size-6-8);
}
[data-age-group="6-8"] .q-option {
  min-height: 48px;
}

/* 8. AGE 9-12 — explicit, so the band is never left to the default by accident */
[data-age-group="9-12"] .q-text {
  font-size: var(--q-size-9-12);
}
[data-age-group="9-12"] .q-option,
[data-age-group="9-12"] .q-hint,
[data-age-group="9-12"] .q-answer {
  font-size: var(--opt-size-9-12);
}

/* 9. Small screens must NOT shrink the 3-5 band below the floor.
      Everything else may step down one notch; 3-5 is re-asserted. */
@media (max-width: 480px) {
  .q-text {
    font-size: 1.0625rem; /* 17px */
  }

  [data-age-group="3-5"] .q-text {
    font-size: 1.375rem;  /* 22px */
    font-size: max(var(--q-min-3-5), 1.375rem);
  }
  [data-age-group="3-5"] .q-option,
  [data-age-group="3-5"] .q-hint,
  [data-age-group="3-5"] .q-answer {
    font-size: max(var(--q-min-3-5), 1.25rem);
  }
  [data-age-group="6-8"] .q-text {
    font-size: 1.125rem;  /* 18px */
  }
}

/* 10. Question media (Doc 01 §5.1 B4) */
.q-media {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1.25rem auto;
  border-radius: var(--radius-md);
  border: 3px solid var(--neutral-card);
  box-shadow: var(--shadow-soft);
}
[data-age-group="3-5"] .q-media {
  max-width: 420px;
}

/* 11. Progress indicator ("Question 3 of 10") */
.q-progress {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vanspark-purple);
}
[data-age-group="3-5"] .q-progress {
  font-size: 1.0625rem;
}

/* ==========================================================================
   SECTION 2 — legacy pre-reconciliation layer (kept for compatibility)
   Consumed today by public_html/assets/css/bc-player.css and
   app/bc_player.php via the `.age-3-5` / `[data-age="3-5"]` wrapper class,
   NOT the `[data-age-group="3-5"]` attribute Section 1 defines. Do not
   delete until Doc 12 migrates its markup — see the reconciliation note in
   docs/PORT-INTEGRITY.md.
   ========================================================================== */

/* 2.1. Age 3-5 scope: minimum 20px text
   Apply .age-3-5 (or data-age="3-5") to any wrapper (page, section, player)
   serving the youngest age group. Text inside never renders below 20px;
   max(1em, 20px) bumps small text up without shrinking anything larger. */
.age-3-5,
[data-age="3-5"] {
  font-size: max(1rem, 20px);
}

.age-3-5 :is(p, span, a, li, dt, dd, label, legend, button, input, select,
             textarea, option, td, th, caption, figcaption, small, blockquote,
             summary),
[data-age="3-5"] :is(p, span, a, li, dt, dd, label, legend, button, input, select,
                     textarea, option, td, th, caption, figcaption, small, blockquote,
                     summary) {
  font-size: max(1em, 20px);
}

/* 2.2. Visible focus indicators (WCAG 2.2 AA)
   Re-asserted here so the guarantee survives even where main.css's
   element list or a Bootstrap reset misses (e.g. [tabindex], summary). */
:focus-visible {
  outline: 3px solid var(--vanspark-purple) !important;
  outline-offset: 3px !important;
}

/* 2.3. Reduced motion: disable transitions/animations entirely.
   Stronger than main.css section 12 (which shortens to 0.01ms). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 2.4. Tap targets: minimum 44x44px for buttons/links inside the
   Brain Challenge player and any age-3-5 scope (WCAG 2.5.5 AAA). */
.bc-player :is(a, button, [role="button"], input[type="submit"],
               input[type="button"], input[type="reset"], .btn),
.age-3-5 :is(a, button, [role="button"], input[type="submit"],
             input[type="button"], input[type="reset"], .btn),
[data-age="3-5"] :is(a, button, [role="button"], input[type="submit"],
                     input[type="button"], input[type="reset"], .btn) {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Checkboxes and radios in the same scopes get the same touch area. */
.bc-player :is(input[type="checkbox"], input[type="radio"]),
.age-3-5 :is(input[type="checkbox"], input[type="radio"]),
[data-age="3-5"] :is(input[type="checkbox"], input[type="radio"]) {
  min-width: 44px;
  min-height: 44px;
}