/* Page-level structure: container, utility strip, header, footer, section rhythm.
 * Numbers come from fig-spec on the mockup's shared blocks (frame homepage /
 * mobile-homepage) — see figma/FRAMES.md. Container: the desktop frame is 1440
 * wide with 40px side padding, so the content band is 1360.
 */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Section rhythm: 80px top/bottom on desktop, 40 on mobile (mockup padding). */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--space-40) var(--space-80); }

/* ── utility strip ────────────────────────────────────────────────────── */
/* Regulatory line above the header. Per the brief: «Think about your choices.»
   dropped, «Set a deposit limit.» added as a live link to /deposit-limits. */
.u-strip {
  background: var(--color-ink);
  color: #fff;
  font-size: var(--fs-2xs);
  line-height: 15.12px;
  font-weight: 600;
}
.u-strip__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 36px;
}
.u-strip__warning { opacity: .85; }
.u-strip__limit {
  color: var(--color-lime); font-weight: 800; text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap;
}
.u-strip__limit:hover { color: #fff; }
.u-strip__links { display: flex; align-items: center; gap: var(--space-16); }
.u-strip__link { color: var(--color-lime); font-weight: 800; text-decoration: none; }
.u-strip__link--phone { color: var(--color-violet-on-dark); }
.u-strip__link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-bg);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
}

/* A sticky header eats the top of whatever an in-page link jumps to: without
   this, «View All Racing →» lands the section heading 17px under the bar. The
   offset is the header plus a little air, and it follows the header's own
   height across breakpoints. */
html { scroll-padding-top: calc(var(--header-h) + var(--space-16)); }

.brand { display: flex; align-items: center; gap: var(--space-16); text-decoration: none; }
.brand__name {
  font-size: var(--fs-h6); line-height: 35.28px; font-weight: 800;
  color: var(--color-ink);
}
.brand__region--short { display: none; }
.brand__region {
  background: var(--color-lime); border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: var(--fs-3xs); line-height: 14px; font-weight: 800;
  color: var(--color-ink); white-space: nowrap;
}
.brand__rule { width: 56px; height: 2px; background: var(--color-violet); }

.nav__list { display: flex; align-items: center; gap: var(--space-24); }
.nav__link {
  font-size: var(--fs-small); line-height: 18px; font-weight: 700;
  color: var(--color-ink); text-decoration: none;
}
.nav__link:hover { color: var(--color-violet); }
.nav__link.is-current { box-shadow: inset 0 -2px 0 var(--color-lime); }

.header__age { font-size: var(--fs-3xs); line-height: 14px; font-weight: 500; color: var(--color-note); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-12); }
.site-header__user { font-size: var(--fs-small); font-weight: 800; }

.burger { display: none; width: 40px; height: 40px; padding: 8px; }
.burger__box { display: block; width: 24px; height: 24px; position: relative; }
.burger__box::before, .burger__box::after, .burger__box span {
  content: ""; position: absolute; left: 2px; width: 20px; height: 2px;
  border-radius: 1px; background: var(--color-ink);
}
.burger__box::before { top: 4px; }
.burger__box span { top: 11px; }
.burger__box::after { top: 18px; }

/* ── footer ───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-ink); color: #fff;
  padding-block: 72px var(--space-40);
}
.site-footer__inner { display: flex; flex-direction: column; gap: var(--space-40); }

.footer-brand { display: flex; flex-direction: column; gap: var(--space-16); }
.footer-brand__mark {
  font-size: var(--fs-watermark); line-height: 86.4px; font-weight: 800;
  color: #fff; opacity: .08; user-select: none;
}
.footer-brand__name {
  font-size: var(--fs-title); line-height: 28px; font-weight: 800; color: var(--color-lime);
}
.footer-brand__tagline { font-size: var(--fs-small); line-height: 21px; }

.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-48); }
.footer-col { display: flex; flex-direction: column; gap: var(--space-12); }
.footer-col__title {
  font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800;
  color: var(--color-lime); text-transform: uppercase;
}
.footer-col__link {
  font-size: var(--fs-small); line-height: 18px; font-weight: 400;
  color: #fff; text-decoration: none;
}
.footer-col__link:hover { color: var(--color-lime); }

.footer-divider { height: 1px; background: #fff; opacity: .2; border: 0; margin: 0; }

.footer-legal { display: flex; flex-direction: column; gap: var(--space-12); }
.footer-legal__age { font-size: var(--fs-xs); line-height: 16.38px; font-weight: 500; }
.footer-legal__entity { font-size: var(--fs-xs); line-height: 20px; }
/* The single responsible-gambling line of the site: deposit limit, support
   phone, BetStop as the National Self-Exclusion Register. Per the brief it
   appears in the footer exactly once — the duplicate bottom row is gone. */
.footer-legal__rg { font-size: var(--fs-xs); line-height: 19.5px; }
.footer-legal__rg a { color: var(--color-lime); font-weight: 700; }
.footer-legal__rg a:hover { text-decoration: none; }

.footer-divider--mobile { display: none; }
.footer-bottom { display: flex; align-items: center; justify-content: flex-end; order: 1; }
.footer-bottom__copy { font-size: var(--fs-2xs); line-height: 15.12px; }

/* height in the mockup is 56 = 16 top padding + 40 content: the bottom padding
   of the frame does not add to it (homepage[3:331]). */
.footer-pay { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-16) 0; gap: var(--space-24); order: 2; }
.footer-pay__left { display: flex; align-items: center; gap: var(--space-16); }
.footer-pay__title { font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800; color: var(--color-lime); }
.footer-pay__logos { display: flex; align-items: center; gap: var(--space-8); }
.footer-pay__logos img { height: 40px; width: auto; }
.footer-pay__right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); }
.footer-pay__badge {
  background: var(--color-lime); color: var(--color-ink); border-radius: var(--radius-sm);
  padding: 4px 10px; font-size: var(--fs-3xs); line-height: 13px; font-weight: 800;
}
.footer-pay__note { font-size: var(--fs-2xs); line-height: 15.12px; text-align: right; }

/* ── back to top ──────────────────────────────────────────────────────── */
.to-top {
  position: fixed; right: var(--space-24); bottom: var(--space-24); z-index: var(--z-header);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-ink); color: var(--color-lime);
  display: grid; place-items: center; font-size: var(--fs-lg); font-weight: 800;
}
.to-top:hover { background: var(--color-violet); color: #fff; }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .container { padding-inline: var(--container-pad-m); }
  .section { padding-block: var(--section-y-m); }
  .section--tight { padding-block: var(--space-24) var(--section-y-m); }

  /* The mockup draws this strip 44, 47, 49 or 51 px high depending on the frame
     (6 frames at 44, 6 at 51, 2 at 49, 1 at 47) — one shared block cannot be all
     four. Taken from the 44 profile (sports-mobile[64:5]): 8 padding, gap 4,
     warning 10/13, links 9/11.34 with gap 8. */
  .u-strip { font-size: var(--fs-micro); line-height: 13px; }
  .u-strip__inner {
    flex-direction: column; align-items: center; gap: var(--space-4);
    padding-block: var(--space-8); min-height: 0;
  }
  .u-strip__warning { text-align: center; }
  .u-strip__links { gap: var(--space-8); font-size: var(--fs-nano); line-height: 11.34px; flex-wrap: wrap; justify-content: center; }

  /* Ниже 1200px шапка ниже — и отступ прокрутки к якорям едет за ней,
     потому что оба читают один токен. */
  :root { --header-h: 64px; }
  .site-header__inner { min-height: var(--header-h); }
  .brand { gap: var(--space-8); }
  .brand__name { font-size: var(--fs-title); line-height: 28px; }
  /* 8px in the mockup — raised to 10px, agreed at F3 (readability on a phone) */
  .brand__region { font-size: var(--fs-micro); line-height: 13px; padding: 4px 6px; }
  .brand__region--full { display: none; }
  .brand__region--short { display: inline-block; }
  .brand__rule { display: none; }
  .header__age {
    font-size: var(--fs-nano); line-height: 11.34px; color: var(--color-note-m);
    white-space: nowrap;
  }
  .site-header__inner { gap: var(--space-8); }

  .nav { display: none; }
  .site-header__actions .btn { display: none; }
  .burger { display: block; }

  /* numbers from mobile-homepage[56:295]: brand 48/48 + 22/28 + 13/18,
     grid two columns with 24 between rows and 16 between them, column gap 10,
     licensing 11/15, payments stacked with gap 12 and 4 inside. */
  .site-footer { padding-block: var(--space-48) var(--space-40); }
  .site-footer__inner { gap: var(--space-32); }
  .footer-divider--mobile { display: block; }
  .footer-bottom, .footer-pay { order: 0; }
  .footer-brand { gap: var(--space-12); }
  .footer-brand__mark { font-size: 48px; line-height: 48px; opacity: .08; }
  .footer-brand__name { font-size: var(--fs-title); line-height: 28px; }
  .footer-brand__tagline { font-size: var(--fs-xs); line-height: 18px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
  .footer-col { gap: var(--space-10); }
  /* 56:303: в мобильном макете 13/16.38 */
  .footer-col__link { font-size: var(--fs-xs); line-height: 16.38px; }
  .footer-legal { gap: var(--space-12); }
  .footer-legal__age { font-size: var(--fs-3xs); line-height: 14px; }
  .footer-legal__entity, .footer-legal__rg { font-size: var(--fs-3xs); line-height: 15px; }
  .footer-bottom { justify-content: flex-start; }
  .footer-pay { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .footer-pay { gap: var(--space-16); }
  .footer-pay__left { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .footer-pay__title { font-size: var(--fs-micro); line-height: 13px; }
  .footer-pay__right { align-items: center; gap: var(--space-4); }
  .footer-pay__note { text-align: left; font-size: var(--fs-3xs); line-height: 14px; }
  .footer-pay__badge { font-size: var(--fs-micro); line-height: 13px; }
}

/* Below the mobile frame width there is no reference to match — the only job
   here is that nothing breaks. Keep these rules out of the block above. */
/* Ниже 560 шапка больше не теснится: короткая форма «VIC / AUS» из макета
   занимает вдвое меньше, и бейдж прятать не нужно. */

/* На 390 шапка макета держится за счёт кеглей 8px, у нас они подняты до 9–10
   (решение F3). Три пикселя добираем сжатием зазора бренда и паддинга бейджа —
   ни одна надпись не исчезает. */
@media (max-width: 420px) {
  .brand { gap: var(--space-6); }
  .brand__region { padding: 4px 5px; }
}

@media (max-width: 389px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-pay__logos { flex-wrap: wrap; }
  /* Ниже макетной ширины всё в одну строку уже не влезает. Регуляторную надпись
     «18+ Australian residents only» ТЗ требует держать в шапке, поэтому она не
     прячется, а переносится на вторую строку — уходит только пустое место. */
  .site-header__inner { flex-wrap: wrap; padding-block: var(--space-8); }
  .header__age {
    order: 3; flex: 1 0 100%; white-space: normal;
    margin-top: var(--space-4);
  }
  .brand { min-width: 0; }
  .brand__name { white-space: nowrap; }
}