/* Long-form document pages: Terms, Privacy, Cookie Policy, Deposit Limits,
 * Responsible Gambling.
 * Frames: 0:1952 / 0:1957 (terms), 0:2443 / 0:2448 (privacy),
 *         0:2714 / 0:2719 (cookie), 0:1549 / 0:1554 (deposit limits).
 * Numbers from fig-spec: intro pad 50, headline 120/108 + 80/72 gap 12, lead 16/24;
 * article pad 50 top / 80 bottom, sections gap 20, 1px rules, number 48/72.26,
 * title 72/108.39, body 15/24, bullets gap 12.
 */

.doc-intro {
  background: var(--grad-brand);
  padding-block: 50px;
}
.doc-intro__headline { display: flex; flex-direction: column; gap: var(--space-12); }
.doc-intro__headline span {
  font-family: var(--font-display);
  font-size: 120px; line-height: 108px;
  text-transform: uppercase; color: var(--color-text);
}
/* Specificity has to beat `.doc-intro__headline span`, or the brand line keeps
   the 120px size and the intro comes out 36px too tall. */
.doc-intro__headline .doc-intro__brand { font-size: 80px; line-height: 72px; color: var(--color-brand); }
.doc-intro--xl .doc-intro__headline .doc-intro__brand { font-size: 120px; line-height: 108px; }
.doc-intro__lead {
  margin-top: 40px;
  font-size: var(--fs-body); line-height: 24px; color: var(--color-muted);
}

.doc { background: var(--color-light); color: var(--color-text-dark); padding-bottom: 80px; }
.doc__content { display: flex; flex-direction: column; gap: var(--space-20); padding-top: 50px; }
.doc__section {
  display: flex; flex-direction: column; gap: var(--space-20);
  padding-top: var(--space-20);            /* 20 gap + the 1px rule above = the mockup pitch */
  border-top: 1px solid var(--color-border-light);
}
/* Deposit Limits opens straight on section 01 — no rule above it — and the frame
   pads the document 56 from the intro (0:1554/0:1556). */
.doc--nolead .doc__content { padding-top: 56px; }
.doc--nolead .doc__content > .doc__section:first-child { padding-top: 0; border-top: 0; }

/* Figma renders these two lines at whole pixels (72 and 108) while Anton's own
   metric is 72.26/108.39. Over a 25-section document the fraction accumulates into
   a visible drift, so the document headings carry the mockup's rounded step. */
.doc__num {
  font-family: var(--font-display);
  font-size: var(--fs-h2); line-height: 72px;
  color: rgb(239 68 68 / .2);
}
.doc__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1); line-height: 108px;
  text-transform: uppercase; color: var(--color-text-dark);
}
/* Terms merges the number into a single 48px title line. */
.doc--flat .doc__title { font-size: var(--fs-h2); line-height: 72px; }

/* The mockup keeps one pitch inside a section — 20 between every block (0:1624) —
   and tightens only the bullet and definition runs (0:1586). */
.doc__body { display: flex; flex-direction: column; gap: var(--space-20); }
.doc__text { font-size: var(--fs-body-sm); line-height: 24px; color: var(--color-body-dark); }
.doc__list { display: flex; flex-direction: column; gap: var(--space-12); }
/* Terms is the one document whose body lines live in a list frame at 12 (0:1966);
   Deposit Limits tightens its bullet runs to 10 (0:1561). */
.doc--flat .doc__body { gap: var(--space-12); }
.doc--nolead .doc__list { gap: var(--space-10); }

/* Definition runs: a term in Anton 17 over its description (0:1587). */
.doc__defs { display: flex; flex-direction: column; gap: var(--space-20); }
.doc__def { display: flex; flex-direction: column; gap: var(--space-8); }
/* Deposit Limits draws the same pattern tighter — 10 between, 6 inside (0:1586). */
.doc--nolead .doc__defs { gap: var(--space-10); }
.doc--nolead .doc__def { gap: var(--space-6); }
.doc__def dt {
  font-family: var(--font-display); font-size: 17px; line-height: 26px;
  color: var(--color-text-dark);
}
.doc__def dd { margin: 0; font-size: var(--fs-body-sm); line-height: 24px; color: var(--color-body-dark); }
.doc__def dd.doc__def-eg { font-size: var(--fs-small); line-height: 19.12px; }

/* Two cross-links the mockup draws side by side, 24 apart (0:1635). */
.doc__text--link { display: flex; flex-wrap: wrap; gap: var(--space-24); line-height: 20.49px; }
.doc__link { font-weight: 700; }
.doc__list li {
  position: relative; padding-left: 22px;
  font-size: var(--fs-body-sm); line-height: 24px; color: var(--color-body-dark);
}
.doc__list li::before {
  content: "•"; position: absolute; left: 0; top: 0;
  color: var(--color-brand);
}
.doc a { color: var(--color-brand); }

@media (max-width: 1199px) {
  .doc-intro { padding-block: 40px; }
  .doc-intro__headline span,
  .doc-intro__headline .doc-intro__brand,
  .doc-intro--xl .doc-intro__headline .doc-intro__brand { font-size: 42px; line-height: 42px; }
  .doc-intro__lead { margin-top: var(--space-24); font-size: var(--fs-small); line-height: 21px; }
  .doc { padding-bottom: 48px; }
  .doc__content { padding-top: 40px; gap: var(--space-16); }
  .doc__section { gap: var(--space-12); padding-top: var(--space-16); }
  .doc__num { font-size: 24px; line-height: 32px; }
  .doc__title, .doc--flat .doc__title { font-size: 24px; line-height: 32px; }
  .doc__body { gap: var(--space-8); }
  .doc__text, .doc__list li { font-size: var(--fs-xs); line-height: 20px; }
}

/* Working limit form — ours, not in the mockup (see deposit-limits.php). */
.limit-form__form { max-width: 672px; margin-top: var(--space-8); align-items: flex-start; }
.limit-form__form .form__row { align-self: stretch; }
.limit-form .field__label { color: var(--color-muted-dark); }
.limit-form input, .limit-form select {
  background: var(--color-text); color: var(--color-text-dark);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
}
.limit-form input:hover, .limit-form select:hover { box-shadow: inset 0 0 0 1px var(--color-muted-dark); }
.limit-form input:focus, .limit-form select:focus {
  box-shadow: inset 0 0 0 1px var(--color-brand), var(--focus-ring-light);
}
.limit-form__result:empty { display: none; }
.limit-form__result {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-16);
  background: var(--color-text);
  box-shadow: inset 4px 0 0 0 var(--color-brand);
  font-size: var(--fs-small); line-height: 21px; color: var(--color-body-dark);
}
/* What is in force now, and what is still waiting out its cooling-off period. */
.limit-form__state { font-weight: 800; font-size: var(--fs-body); line-height: 22px; color: var(--color-text-dark); }
.limit-form__cancel { min-height: 40px; padding: 0 var(--space-20); }
.doc__action { padding-top: var(--space-8); }
/* The limit form is our own section under the document, not part of it. */
.doc--form { padding-block: 0 80px; }
.doc--form .doc__content { padding-top: 0; }
.doc--form .doc__section { padding-top: var(--space-20); }

/* Cross-links between the documents — brand red, as the mockup paints them. */
.doc__text--link { color: var(--color-brand); font-weight: 700; }
.doc__link { color: var(--color-brand); font-weight: 700; text-decoration: none; position: relative; }
.doc__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }
.doc__link:hover { text-decoration: underline; }