/* ==========================================================================
   Questelon design system
   One stylesheet for questelon.com and every product sub-site under it.

   Why this file exists: before 2026-08-19 every page carried its own <style>
   block. The three site copies in this repo had already drifted apart from one
   another, and the Questelon pages had accessibility work (mobile nav toggle,
   focus-visible, reduced-motion) that the Bountrek pages never received. A
   shared stylesheet makes that class of drift structurally impossible - fix a
   contrast ratio once and every page gets it.

   Structure:
     1. Tokens          - colour, type, space, radius, shadow (dark, the only
                           appearance - see the 2026-08-24 note in section 1)
     2. Base            - reset, document defaults, focus, motion
     3. Layout          - page shell, sections, grids
     4. Components      - nav, buttons, cards, notices, footer
     5. Prose           - long-form legal pages
     6. Product themes  - per-product accent overrides
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  /* Questelon's corporate accent. Product sub-sites override --accent and
     --accent-strong only; everything else stays shared so the family
     resemblance holds. See section 6. */
  --accent: #F5B94C;
  --accent-strong: #FBCF7A;
  --accent-contrast: #1C1005;

  /* --- Surfaces ----------------------------------------------------------
     2026-08-24: dark was previously a @media (prefers-color-scheme: dark)
     override on top of a light default. Made permanent and unconditional
     here - the brand (orange-on-black hero, dark nav) is dark-first, and a
     visitor whose OS/browser prefers light was landing on an unstyled-looking
     white page that didn't match anything else about the site. */
  --surface: #0C0C0D;
  --surface-sunken: #000000;
  --surface-raised: #191919;
  --surface-inverted: #FAFAF9;

  /* --- Text ------------------------------------------------------------- */
  /* Every value below is checked against its own background. Primary and
     secondary clear 4.5:1 for body text; tertiary is reserved for >=18px or
     bold text, where 3:1 applies. Never use --text-tertiary for small body
     copy - that is the one rule this palette depends on. */
  --text-primary: #F5F5F4;
  --text-secondary: #C4C0BB;
  --text-tertiary: #A8A29E;
  --text-on-accent: #FFFFFF;
  --text-inverted: #1C1917;

  /* --- Lines and fills -------------------------------------------------- */
  --hairline: rgba(255, 255, 255, 0.14);
  --hairline-strong: rgba(255, 255, 255, 0.26);
  --fill-subtle: rgba(255, 255, 255, 0.05);
  --fill: rgba(255, 255, 255, 0.09);

  /* --- Status ----------------------------------------------------------- */
  /* Status colour is never the only signal - every status element below also
     carries an icon or a text label. HIG Color > Inclusive color. */
  --info: #8FBEF0;
  --info-fill: rgba(143, 190, 240, 0.12);
  --caution: #F0C070;
  --caution-fill: rgba(240, 192, 112, 0.12);

  /* --- Type ------------------------------------------------------------- */
  /* System font stack first. It renders instantly, matches what the reader
     already uses everywhere else on their device, and picks up their own
     text-size setting without a webfont round-trip. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* A modular scale in rem so it tracks browser font-size settings. HIG
     Accessibility: "give people the option to enlarge text by at least 200
     percent" - rem-based type does this for free; px-based type does not. */
  --text-xs: 0.8125rem;   /* 13px - labels, never body copy       */
  --text-sm: 0.9375rem;   /* 15px - secondary copy, captions      */
  --text-base: 1.0625rem; /* 17px - body. HIG mobile default      */
  --text-lg: 1.1875rem;   /* 19px - lead paragraphs               */
  --text-xl: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.5rem + 3.6vw, 3.75rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* --- Space ------------------------------------------------------------ */
  /* 4px base grid. Consistent spacing is most of what reads as "designed". */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Shape ------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  /* --- Metrics ---------------------------------------------------------- */
  --measure: 68ch;   /* readable line length for prose */
  --page-max: 1120px;
  --tap-min: 44px;   /* HIG Accessibility > Mobility minimum control size */
}

/* --- Increased contrast ---------------------------------------------------
   HIG Color: "With the Increase Contrast setting turned on, the color
   differences become far more apparent." Hairlines and secondary text firm up;
   translucency is dropped so text never sits on a moving background. */
@media (prefers-contrast: more) {
  :root {
    --text-secondary: var(--text-primary);
    --text-tertiary: var(--text-primary);
    --hairline: var(--text-primary);
    --hairline-strong: var(--text-primary);
  }
  .u-blur { backdrop-filter: none !important; }
}

/* --- Forced colours -------------------------------------------------------
   When someone turns on a high-contrast accessibility theme, the OS replaces
   our palette with its own: links become LinkText, buttons ButtonText on
   ButtonFace, backgrounds Canvas. That is the point of the setting, and we do
   not fight it. What we do is make sure nothing we drew *only* with colour
   disappears when the colour is taken away.

   Two things need help. Borders we drew with a translucent hairline collapse
   to invisible, so surfaces that were only distinguishable by their fill lose
   their edges. And our status notices carried meaning in their background
   tint, which is flattened. Both get explicit borders in system colours.

   HIG Accessibility > Vision: "Convey information with more than color
   alone." A forced-colours theme is the strictest possible test of that. */
@media (forced-colors: active) {
  .card,
  .tile,
  .notice,
  .toc,
  .nav-toggle,
  .btn,
  .site-header,
  .film {
    border: 1px solid CanvasText;
  }

  /* Keep the left rule on notices meaningful: it is the only thing marking a
     caution block once the tint is gone, so promote it to a full border plus a
     thicker edge rather than letting it flatten into the page. */
  .notice { border-left-width: 4px; }

  .chip { border: 1px solid CanvasText; }

  /* The focus ring must survive: the OS decides the colour, we keep the shape
     and the offset so it stays visible against whatever it lands on. */
  :focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }

  /* Translucency and shadow carry no information here and only muddy the
     result, so drop both. */
  .u-blur { backdrop-filter: none; }
  * { box-shadow: none !important; }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
  /* No font-size override here on purpose. Setting html{font-size:62.5%} is a
     common trick that quietly overrides the reader's own browser text-size
     preference, which is the exact setting HIG asks us to honour. */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h4 { font-size: var(--text-lg); letter-spacing: 0; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

img, video, svg { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.35em; margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-7) 0;
}

/* --- Focus ----------------------------------------------------------------
   HIG Accessibility > Speech: "Let people use the keyboard alone to navigate
   and interact with your app." A visible focus ring is the whole of that
   promise on the web. Applied globally so no component can forget it. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- Motion ---------------------------------------------------------------
   HIG Accessibility > Cognitive: "When this setting is active, ensure your app
   responds by reducing automatic and repetitive animations." */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .u-motion-only { display: none !important; }
}

/* --- Screen-reader and skip link ------------------------------------------
   Every page opens with a skip link so keyboard and screen-reader users are
   not forced through the whole nav on each page. */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: clamp(var(--space-4), 5vw, var(--space-7));
}

.section { padding-block: clamp(var(--space-7), 9vw, var(--space-9)); }
.section + .section { padding-top: 0; }
.section--sunken { background: var(--surface-sunken); }

.section-head {
  max-width: 42rem;
  margin: 0 auto var(--space-7);
  text-align: center;
}
.section-head > * + * { margin-top: var(--space-4); }
.section-head p {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  margin: var(--space-4) 0 0;
}

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- Eyebrow --------------------------------------------------------------
   Sentence case, not ALLCAPS. Screen readers spell out all-capital words
   letter by letter, and letter-spaced capitals are measurably slower to read.
   The visual weight comes from colour and size instead. */
.eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
  margin: 0;
}

/* --- Site header ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid var(--hairline);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header.u-blur { backdrop-filter: saturate(180%) blur(20px); }
}

.site-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-3) clamp(var(--space-4), 5vw, var(--space-7));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
  /* Meets the 44px minimum without extra padding pushing the header taller. */
  min-height: var(--tap-min);
}
.brand:hover { color: var(--text-primary); }
.brand img { width: 30px; height: 30px; border-radius: var(--radius-sm); }

.nav { display: flex; align-items: center; gap: var(--space-1); }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}
.nav a:hover { color: var(--text-primary); background: var(--fill-subtle); }
.nav a[aria-current="page"] {
  color: var(--text-primary);
  font-weight: 600;
  background: var(--fill);
}

/* Menu button. Hidden on wide screens, shown when the nav collapses. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.nav-toggle:hover { background: var(--fill-subtle); }
.nav-toggle__bars { display: block; width: 16px; height: 10px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, top 0.2s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 4px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 4px; transform: rotate(-45deg); }

/* The collapse point is set by content, not by a device width. Below it the
   nav becomes a real disclosure panel - it never simply disappears, which is
   the bug this system was built to eliminate. */
@media (max-width: 60rem) {
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) clamp(var(--space-4), 5vw, var(--space-7)) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { position: relative; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn--primary:hover { background: var(--accent-strong); color: var(--accent-contrast); }
.btn--secondary {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--text-primary);
}
.btn--secondary:hover { background: var(--fill-subtle); color: var(--text-primary); }

/* --- Cards ---------------------------------------------------------------- */
.card {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--text-secondary); font-size: var(--text-sm); }

/* Only cards that are genuinely links get interactive affordances. A card that
   does not navigate must not lift on hover. HIG Color > Best practices warns
   against styling non-interactive elements as interactive. */
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.card__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--fill);
  color: var(--accent);
}
.card__icon svg { width: 22px; height: 22px; }

/* Status chip. Carries a text label, never colour alone. */
.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--fill);
  color: var(--text-secondary);
}
.chip--accent { background: var(--accent); color: var(--accent-contrast); }

/* --- Notice --------------------------------------------------------------- */
/* Paired icon + colour so the meaning survives for colour-blind readers.
   HIG Color > Inclusive color. */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  border-left: 4px solid var(--info);
  background: var(--info-fill);
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.notice--caution { border-left-color: var(--caution); background: var(--caution-fill); }
.notice svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--info); }
.notice--caution svg { color: var(--caution); }
.notice p { margin: 0; }
.notice p + p { margin-top: var(--space-3); }

/* --- Definition rows (support pages, contact details) --------------------- */
.rows { border-top: 1px solid var(--hairline); }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
}
.row__label {
  flex: 0 0 12rem;
  font-weight: 600;
  color: var(--text-primary);
}
.row__value { flex: 1 1 18rem; color: var(--text-secondary); margin: 0; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  margin-top: var(--space-8);
  padding-block: var(--space-7);
  border-top: 1px solid var(--hairline);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: clamp(var(--space-4), 5vw, var(--space-7));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-7);
  justify-content: space-between;
}
.site-footer h2 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0;
  margin-bottom: var(--space-3);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a {
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.site-footer a:hover { color: var(--text-primary); text-decoration: underline; }
.site-footer__legal {
  max-width: var(--page-max);
  margin: var(--space-6) auto 0;
  padding-inline: clamp(var(--space-4), 5vw, var(--space-7));
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

/* ==========================================================================
   5. PROSE - long-form legal and policy pages
   ========================================================================== */

.prose {
  max-width: var(--measure);
  margin-inline: auto;
  line-height: var(--leading-relaxed);
}
.prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}
.prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--space-6); }
.prose h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.prose p, .prose li { color: var(--text-secondary); }
.prose strong { color: var(--text-primary); font-weight: 600; }

/* Document metadata line under the title of a legal page. */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* In-page contents list for the longer policies. */
.toc {
  padding: var(--space-5);
  margin-bottom: var(--space-7);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.toc h2 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
  color: var(--text-primary);
}
.toc ol { margin: 0; padding-left: 1.25em; }
.toc li { margin-bottom: var(--space-1); }
.toc a { color: var(--text-secondary); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   6. PRODUCT THEMES
   Sub-sites keep the shared structure, type scale, spacing and components, and
   change only their accent - the same way a product page differs from its
   parent company's page without becoming a different website.
   ========================================================================== */

/* Bountrek. Lightened from the original #6366F1/indigo so accent-coloured
   text and links clear 4.5:1 on the dark surface tokens above. */
[data-theme="bountrek"] {
  --accent: #A5B4FC;
  --accent-strong: #C7D2FE;
  --accent-contrast: #1E1B4B;
}

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-block: clamp(var(--space-7), 10vw, var(--space-9)); }
.hero__inner { max-width: 46rem; }
.hero h1 { margin-block: var(--space-4); }
.hero__lede {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 38rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Key figures under the hero. Marked up as a description list so the number
   and its meaning stay associated for screen readers. */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-7) 0 0;
}
.stats > div { margin: 0; }
.stats dt {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  order: 2;
}
.stats dd {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.stats > div { display: flex; flex-direction: column; }

/* --- Game list ------------------------------------------------------------
   Presentational tiles. They do not navigate anywhere, so they get no hover
   lift and no pointer cursor - the previous version implied a link that did
   not exist. */
.tiles {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.tile {
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-raised);
  margin: 0;
}
.tile__name { font-weight: 600; font-size: var(--text-sm); }
.tile__kind { color: var(--text-secondary); font-size: var(--text-xs); margin: var(--space-1) 0 0; }