/* ==========================================================================
   Responsible Gambling page (responsible-gambling.php)
   Desktop: hero (453) + main-body-layout (side rail 240 + document flow 880)
   Mobile:  hero (825) + chapters 01…06 separated by 1px lines
   Also: desktop bottom-block variant used only on this page (rgf-*)
   ========================================================================== */

.page-rg {
  --rg-gray: #5c5652;
  --rg-line: #e0d7cd;
  --rg-active: #a8d5e2;
}

/* --------------------------------------------------------------------------
   Shared text primitives
   -------------------------------------------------------------------------- */
.rg-label { font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; letter-spacing: 1px; color: var(--rg-gray); white-space: nowrap; }
.rg-label--xs { font-size: 12px; line-height: 16px; letter-spacing: .5px; }
.rg-action { font-family: var(--f-body); font-weight: 700; font-size: 13px; line-height: 17px; color: var(--orange); white-space: nowrap; align-self: flex-start; }
.rg-action:hover { text-decoration: underline; }

.rg-h3 { font-family: var(--f-head); font-weight: 700; font-size: 22px; line-height: 30px; color: var(--ink); }
.rg-h3--sm { font-size: 18px; line-height: 24px; }
.rg-h4 { font-family: var(--f-head); font-weight: 700; font-size: 16px; line-height: 22px; color: var(--ink); }
.rg-p { font-family: var(--f-body); font-weight: 400; font-size: 15px; line-height: 26px; color: var(--ink); }
.rg-p--24 { line-height: 24px; }
.rg-p--med { font-weight: 500; }
.rg-p b { font-weight: 700; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.rg-hero {
  background: var(--sand); box-shadow: inset 0 -1px 0 var(--rg-line);
  padding: 80px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.rg-hero__wrap { width: 100%; max-width: 880px; display: flex; flex-direction: column; gap: 24px; }
.rg-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; letter-spacing: 1px; text-transform: uppercase; color: var(--orange);
}
.rg-eyebrow::before { content: ""; width: 16px; height: 2px; background: var(--orange); flex: 0 0 auto; }
.rg-hero__title { font-family: var(--f-head); font-weight: 700; font-size: 56px; line-height: 75px; letter-spacing: -1px; color: var(--ink); }
.rg-hero__lead { font-family: var(--f-body); font-weight: 500; font-size: 15px; line-height: 24px; color: var(--ink); }
.rg-operator {
  width: 100%; max-width: 880px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rg-line); border-radius: 8px;
  padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.rg-operator__grid { display: flex; gap: 40px; margin: 0; }
.rg-operator__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rg-operator__label { font-family: var(--f-body); font-weight: 600; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--rg-gray); }
.rg-operator__value { margin: 0; font-family: var(--f-body); font-size: 14px; line-height: 20px; color: var(--ink); }
.rg-hero__mnav { flex-direction: column; gap: 24px; }

/* --------------------------------------------------------------------------
   Body layout: sticky rail + flow
   -------------------------------------------------------------------------- */
.rg-body { display: flex; align-items: flex-start; gap: 40px; padding: 80px 80px 100px; }
.rg-rail {
  flex: 0 0 240px; width: 240px; position: sticky; top: 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.rg-rail__nav { display: flex; flex-direction: column; gap: 10px; }
.rg-rail__item {
  display: block; padding: 8px 0 8px 12px; border-radius: 4px;
  font-family: var(--f-body); font-weight: 500; font-size: 13px; line-height: 17px; color: var(--ink); white-space: nowrap;
  transition: background-color .15s ease;
}
.rg-rail__item:hover { background: var(--sand); }
.rg-rail__item.is-active { background: var(--rg-active); font-weight: 700; }
.rg-rail__actions { box-shadow: inset 0 1px 0 var(--rg-line); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }

.rg-flow { flex: 1 1 0; min-width: 0; max-width: 880px; display: flex; flex-direction: column; gap: 64px; }
.rg-sep { height: 0; border-top: 1px solid var(--rg-line); margin-bottom: -1px; }

/* --------------------------------------------------------------------------
   Chapters
   -------------------------------------------------------------------------- */
.rg-chapter { display: flex; flex-direction: column; gap: 32px; scroll-margin-top: 24px; }
.rg-chapter__head { display: flex; align-items: center; gap: 16px; }
.rg-chapter__num { font-family: var(--f-head); font-weight: 700; font-size: 40px; line-height: 54px; color: var(--orange); }
.rg-chapter__title { font-family: var(--f-head); font-weight: 700; font-size: 28px; line-height: 38px; color: var(--ink); }

.rg-sec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 24px; }
.rg-sec--16 { gap: 16px; }
.rg-sec--24 { gap: 24px; }
.rg-sub { display: flex; flex-direction: column; gap: 8px; }

/* bullet lists */
.rg-bullets { display: flex; flex-direction: column; gap: 12px; }
.rg-bullets li { display: flex; gap: 12px; font-family: var(--f-body); font-size: 15px; line-height: 22px; color: var(--ink); }
.rg-bullets li::before { content: "•"; color: var(--orange); flex: 0 0 auto; }
.rg-bullets--tight { gap: 8px; }
.rg-bullets--tight li { line-height: 20px; }

/* numbered guidelines */
.rg-num { display: flex; flex-direction: column; gap: 14px; counter-reset: rg-guide; }
.rg-num li { display: flex; gap: 16px; font-family: var(--f-body); font-size: 15px; line-height: 22px; color: var(--ink); counter-increment: rg-guide; }
.rg-num li::before { content: counter(rg-guide) "."; font-family: var(--f-head); font-weight: 700; font-size: 16px; line-height: 22px; color: var(--orange); flex: 0 0 auto; }

/* tools (chapter 02) */
.rg-tools { display: flex; flex-direction: column; gap: 24px; }
.rg-tool { display: flex; flex-direction: column; gap: 12px; }
.rg-tool--deposit { flex-direction: row; align-items: flex-start; gap: 24px; }
.rg-tool__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rg-limit {
  flex: 0 0 300px; width: 300px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rg-line); border-radius: 6px;
  padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s ease;
}
.rg-limit:hover { box-shadow: inset 0 0 0 1px var(--orange); }
.rg-limit__label { font-family: var(--f-head); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: .5px; color: var(--rg-gray); }
.rg-limit__row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; box-shadow: inset 0 -1px 0 var(--rg-line); }
.rg-limit__amt { font-family: var(--f-body); font-weight: 600; font-size: 14px; line-height: 18px; color: var(--ink); }
.rg-limit__period { font-family: var(--f-body); font-weight: 700; font-size: 12px; line-height: 16px; color: var(--orange); }
.rg-limit__note { font-family: var(--f-body); font-size: 11px; line-height: 14px; color: var(--rg-gray); }

/* editorial break (yellow) */
.rg-editorial {
  margin-top: 32px; background: #f2c94c; border-radius: 8px; padding: 48px;
  display: flex; flex-direction: column; align-items: stretch; gap: 16px; text-align: center;
}
.rg-editorial__title { font-family: var(--f-head); font-weight: 700; font-size: 32px; line-height: 43px; letter-spacing: 1px; color: var(--ink); }
.rg-editorial__sub { font-family: var(--f-body); font-weight: 600; font-size: 14px; line-height: 18px; color: var(--ink); }

/* orange-outlined highlight (chapter 03) */
.rg-highlight { background: var(--bg); box-shadow: inset 0 0 0 1px var(--orange); padding: 20px; font-family: var(--f-body); font-weight: 700; font-size: 15px; line-height: 24px; color: var(--ink); }

/* BetStop card (chapter 04) */
.rg-bs { background: var(--bg); box-shadow: inset 0 0 0 1px var(--rg-line); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; }
.rg-bs__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.rg-bs__head a:hover { color: var(--orange); }
.rg-tag { background: var(--orange); color: var(--bg); border-radius: 3px; padding: 4px 10px; font-family: var(--f-head); font-weight: 700; font-size: 11px; line-height: 15px; white-space: nowrap; flex: 0 0 auto; }

/* minors + 18+ badge (chapter 05) */
.rg-minors { display: flex; align-items: center; gap: 32px; }
.rg-minors__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rg-badge18 { flex: 0 0 180px; width: 180px; background: var(--ink); border-radius: 12px; padding: 40px 0; display: flex; justify-content: center; align-items: center; }
.rg-badge18__num { font-family: var(--f-head); font-weight: 700; font-size: 48px; line-height: 65px; color: var(--bg); }
.rg-badge18__txt { font-family: var(--f-body); font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: .5px; color: var(--orange); white-space: nowrap; }

/* support card (chapter 06) */
.rg-help { background: var(--sky); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.rg-help__intro { font-family: var(--f-body); font-weight: 600; font-size: 15px; line-height: 20px; color: var(--ink); }
.rg-help__line { height: 0; border-top: 1px solid var(--ink); margin-bottom: -1px; }
.rg-help__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.rg-help__left { display: flex; flex-direction: column; gap: 4px; }
.rg-help__name { font-family: var(--f-head); font-weight: 700; font-size: 24px; line-height: 32px; color: var(--ink); }
.rg-help__name a:hover { text-decoration: underline; }
.rg-help__sub { font-family: var(--f-body); font-size: 13px; line-height: 17px; color: var(--rg-gray); }
.rg-help__sub a:hover { text-decoration: underline; }
.rg-help__phone { font-family: var(--f-head); font-weight: 700; font-size: 32px; line-height: 43px; color: var(--orange); white-space: nowrap; }
.rg-help__note { font-family: var(--f-body); font-size: 13px; line-height: 17px; color: var(--ink); }
/* Figma keeps this note on one line (825px in an 816px box); only force it while the column is its full 880px */
@media (min-width: 1240px) { .rg-help__note { white-space: nowrap; } }

/* mobile-only navigation blocks (hidden on desktop via .only-m) */
.rg-jump { display: flex; flex-direction: column; gap: 12px; }
.rg-jump__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-pill {
  display: inline-flex; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rg-line); border-radius: 4px; padding: 6px 10px;
  font-family: var(--f-body); font-weight: 500; font-size: 12px; line-height: 16px; color: var(--ink); white-space: nowrap;
}
.rg-pill.is-active { background: var(--sky); font-weight: 700; }
.rg-quick { box-shadow: inset 0 1px 0 var(--rg-line); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.rg-quick__links { display: flex; flex-direction: column; gap: 8px; }

/* --------------------------------------------------------------------------
   Desktop bottom blocks — Responsible Gambling variant (footer.php, $page['footer'] = 'rg')
   -------------------------------------------------------------------------- */
.rgf-support {
  min-height: 73px; background: var(--bg); box-shadow: inset 0 1px 0 #e0d7cd;
  padding: 24px 80px; display: flex; justify-content: space-between; align-items: center;
}
.rgf-support__left { display: flex; align-items: center; gap: 24px; }
.rgf-support__badge { background: var(--ink); color: var(--bg); border-radius: 3px; padding: 4px 8px; font-family: var(--f-body); font-weight: 800; font-size: 13px; line-height: 17px; }
.rgf-support__title { font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; letter-spacing: .5px; color: var(--ink); white-space: nowrap; }
.rgf-support__phone { font-family: var(--f-head); font-weight: 700; font-size: 16px; line-height: 22px; color: var(--orange); white-space: nowrap; }
.rgf-support__text { font-family: var(--f-body); font-size: 13px; line-height: 17px; color: #5c5652; white-space: nowrap; }

.rgf-betstop {
  min-height: 71px; background: var(--ink); box-shadow: inset 0 1px 0 #2d2622;
  padding: 24px 80px; display: flex; justify-content: space-between; align-items: center;
}
.rgf-betstop__left { display: flex; align-items: center; gap: 16px; }
.rgf-betstop__badge { background: var(--orange); color: var(--bg); border-radius: 4px; padding: 4px 8px; font-family: var(--f-head); font-weight: 700; font-size: 11px; line-height: 15px; letter-spacing: .5px; }
.rgf-betstop__title { font-family: var(--f-body); font-weight: 600; font-size: 14px; line-height: 18px; color: var(--bg); white-space: nowrap; }
.rgf-betstop__text { font-family: var(--f-body); font-size: 13px; line-height: 17px; color: #a39992; white-space: nowrap; }
.rgf-betstop__link { font-family: var(--f-body); font-weight: 700; font-size: 13px; line-height: 17px; color: var(--orange); white-space: nowrap; }
.rgf-betstop__link:hover { text-decoration: underline; }

.rgf-payments {
  min-height: 91px; background: var(--bg); box-shadow: inset 0 1px 0 #2d2622;
  padding: 32px 80px; display: flex; justify-content: space-between; align-items: center;
}
.rgf-payments__left { display: flex; align-items: center; gap: 24px; }
.rgf-payments__label { font-family: var(--f-head); font-weight: 700; font-size: 11px; line-height: 15px; letter-spacing: 1px; color: #a39992; white-space: nowrap; }
.rgf-payments__list { display: flex; gap: 12px; }
.rgf-payments__list li { background: #2d2622; color: #a39992; border-radius: 4px; padding: 6px 12px; font-family: var(--f-head); font-weight: 700; font-size: 11px; line-height: 15px; white-space: nowrap; }
.rgf-payments__right { display: flex; align-items: center; gap: 8px; }
.rgf-payments__badge { background: rgba(217, 38, 38, .13); box-shadow: inset 0 0 0 1px var(--orange); border-radius: 4px; padding: 4px 8px; font-family: var(--f-body); font-weight: 800; font-size: 10px; line-height: 13px; letter-spacing: .5px; color: var(--orange); white-space: nowrap; }
.rgf-payments__text { font-family: var(--f-body); font-size: 13px; line-height: 17px; color: #a39992; white-space: nowrap; }
@media (max-width: 1299px) { .rgf-payments__right { flex: 1 1 260px; justify-content: flex-end; } .rgf-payments__text { white-space: normal; } }

.rgf-footer { background: var(--ink); padding: 64px 80px 40px; display: flex; flex-direction: column; gap: 48px; }
.rgf-footer__cols { display: flex; align-items: flex-start; gap: 48px; }
.rgf-footer__brand { flex: 0 0 300px; width: 300px; display: flex; flex-direction: column; gap: 16px; }
.rgf-footer__logo { font-family: var(--f-head); font-weight: 700; font-size: 22px; line-height: 30px; letter-spacing: -.5px; color: var(--bg); white-space: nowrap; align-self: flex-start; }
.rgf-footer__desc { font-family: var(--f-body); font-size: 13px; line-height: 20px; color: #a39992; }
.rgf-footer__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rgf-footer__heading { font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; letter-spacing: .5px; color: var(--bg); }
.rgf-footer__col a { font-family: var(--f-body); font-size: 13px; line-height: 17px; color: #a39992; white-space: nowrap; }
.rgf-footer__col a:hover { color: var(--bg); }
.rgf-footer__line { height: 0; border-top: 1px solid #2d2622; margin-bottom: -1px; }
.rgf-footer__meta { display: flex; flex-direction: column; gap: 8px; }
.rgf-footer__legal { font-family: var(--f-body); font-size: 11px; line-height: 18px; color: #a39992; }
.rgf-footer__copy { font-family: var(--f-body); font-size: 11px; line-height: 14px; color: #a39992; }

/* ==========================================================================
   Mobile (≤ 767px) — reference 390px
   ========================================================================== */
@media (max-width: 767px) {
  .rgf-support, .rgf-betstop, .rgf-payments, .rgf-footer { display: none; }

  .rg-label { font-size: 13px; line-height: 18px; }
  .rg-label--sm { letter-spacing: .5px; }
  .rg-h3 { font-size: 20px; line-height: 27px; }
  .rg-h3--sm, .rg-h3--m18 { font-size: 18px; line-height: 24px; }
  .rg-h4 { font-size: 15px; line-height: 20px; }
  .rg-p { line-height: 24px; }
  .rg-p--med { font-weight: 400; }
  .rg-p--addr { font-size: 14px; line-height: 20px; }
  .rg-p--card { font-size: 14px; line-height: 22px; }

  /* hero */
  .rg-hero { padding: 32px var(--mobile-gutter); align-items: stretch; gap: 24px; }
  .rg-hero__wrap { max-width: none; gap: 12px; }
  .rg-eyebrow { font-size: 12px; line-height: 16px; }
  .rg-hero__title { font-size: 40px; line-height: 54px; }
  .rg-hero__lead { font-size: 14px; line-height: 22px; }
  .rg-operator { max-width: none; padding: 16px; gap: 16px; }
  .rg-operator__grid { flex-direction: column; gap: 16px; }
  .rg-operator__col { gap: 4px; }
  .rg-operator__label { font-size: 11px; line-height: 14px; }
  .rg-operator__value { font-size: 13px; line-height: 18px; }

  /* body / flow */
  .rg-body { display: block; padding: 0; }
  .rg-flow { gap: 0; }
  .rg-chapter { padding: 40px var(--mobile-gutter); gap: 24px; scroll-margin-top: 0; }
  .rg-chapter--06 { background: var(--sky); padding: 32px var(--mobile-gutter); }
  .rg-chapter__head { gap: 12px; }
  .rg-chapter__num { font-size: 34px; line-height: 46px; }
  .rg-chapter__title { font-size: 26px; line-height: 35px; flex: 1 1 0; min-width: 0; }

  .rg-sec { gap: 8px; }
  .rg-sec--16, .rg-sec--24, .rg-sec--12 { gap: 12px; }
  .rg-sub { gap: 4px; }

  .rg-bullets { gap: 8px; }
  .rg-bullets--10 { gap: 10px; }
  .rg-bullets li { gap: 8px; }
  .rg-bullets--tight { gap: 6px; }
  .rg-bullets--tight li { line-height: 22px; }
  .rg-num { gap: 10px; }
  .rg-num li { gap: 12px; }
  .rg-num li::before { width: 16px; }

  .rg-tools { gap: 20px; }
  .rg-tool { gap: 8px; }
  .rg-tool--deposit { flex-direction: column; align-items: stretch; gap: 12px; }
  .rg-limit { flex: 0 0 auto; width: auto; padding: 16px; border-radius: 8px; }
  .rg-limit__row { padding: 6px 0; }
  .rg-limit__period { font-size: 14px; line-height: 18px; }

  .rg-editorial { margin-top: 0; background: var(--yellow); padding: 20px; gap: 12px; }
  .rg-editorial__title { font-size: 20px; line-height: 27px; letter-spacing: .5px; }
  .rg-editorial__sub { font-size: 13px; line-height: 17px; }

  .rg-highlight { border-radius: 6px; padding: 16px; font-size: 14px; line-height: 22px; }

  .rg-bs { padding: 16px; gap: 12px; }
  .rg-bs__head { display: contents; }
  .rg-tag { align-self: flex-start; padding: 2px 6px; font-size: 10px; line-height: 13px; }

  .rg-minors { flex-direction: column; align-items: stretch; gap: 16px; }
  .rg-minors__text { display: contents; }
  .rg-badge18 { flex: 0 0 auto; width: auto; flex-direction: column; gap: 4px; padding: 20px; border-radius: 8px; }
  .rg-badge18__num { font-size: 40px; line-height: 54px; }

  .rg-chapter--06 .rg-p { line-height: 22px; }
  .rg-help { background: var(--bg); box-shadow: inset 0 0 0 1px var(--rg-line); padding: 16px; gap: 16px; }
  .rg-help__row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rg-help__left { display: contents; }
  .rg-help__name { font-size: 20px; line-height: 27px; }
  .rg-help__sub { color: var(--muted); }
  .rg-help__phone { font-size: 28px; line-height: 38px; }
}