/* Page-level structure: shell, compliance strip, header, mobile menu, the shared
 * dark tail (RG block, support strip, payments, footer).
 * Numbers come from fig-spec on the sports frame (header/footer are identical
 * on all inner frames; the home frame differs by 2px on the strip — F1 note). */

body { background: var(--color-dark); }   /* website-shell: sections paint their own fills */
main { display: block; }

/* ── compliance strip ─────────────────────────────────────────────────── */
.strip {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 0 var(--shell-pad);
  background: var(--color-dark); color: var(--color-cream);
  border-bottom: 1px solid var(--tint-white-15);
  font-family: var(--font-body); font-size: 12px; line-height: 16px;
}
.strip__msg { font-weight: 500; }
.strip__links { display: flex; gap: 20px; }
.strip__link { font-weight: 700; text-decoration: none; position: relative; }
.strip__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 24px; }
.strip__link--phone { color: var(--color-brand); }
.strip__link:hover { text-decoration: underline; text-underline-offset: 2px; }
.strip__link:focus-visible { outline-color: var(--color-brand); }

/* ── header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  height: 92px; padding: 0 var(--shell-pad);
  background: var(--color-brand); color: var(--color-ink);
  box-shadow: inset 0 -2px 0 var(--color-dark-2);
}
.logo {
  font-family: var(--font-display); font-size: 32px; line-height: 48px; letter-spacing: -0.01em;
  text-decoration: none; color: var(--color-ink);
  transition: opacity var(--dur-fast) var(--ease);
}
.logo:hover { opacity: .8; }

.nav__list { display: flex; gap: 24px; align-items: center; }
.nav__item { padding: 8px 0; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow var(--dur-fast) var(--ease); }
.nav__item.is-current { box-shadow: inset 0 -2px 0 var(--color-ink); }
.nav__link {
  display: block; position: relative;
  font-size: 14px; line-height: 18px; font-weight: 700; text-transform: uppercase; text-decoration: none;
  opacity: .65; transition: opacity var(--dur-fast) var(--ease);   /* mockup .6 = 4.41:1 on the yellow header; .65 = 5.2:1 (WCAG AA) */
}
.nav__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 34px; }
.nav__item.is-current .nav__link { opacity: 1; font-weight: 800; }
.nav__link:hover, .nav__link:focus-visible { opacity: 1; }

.site-header__actions { display: flex; align-items: center; gap: 16px; }
.site-header__login {
  position: relative; border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 14px; line-height: 18px; font-weight: 800; text-transform: uppercase; color: var(--color-ink);
  transition: opacity var(--dur-fast) var(--ease);
}
.site-header__login::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 41px; }
.site-header__login:hover { opacity: .7; }
.site-header__user { font-size: 14px; line-height: 18px; font-weight: 800; }
.burger { display: none; }

/* ── mobile menu (frame mobile-nav-open) ──────────────────────────────── */
.overlay--nav { padding: 0; place-items: stretch; background: var(--color-dark); }
.overlay--nav .overlay__panel {
  width: 100%; max-width: none; max-height: none; min-height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0; border-radius: 0; background: var(--color-dark); color: var(--color-bg);
  transform: translateX(16px);
}
.overlay--nav.is-open .overlay__panel { transform: none; }
.mnav__top {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 16px; box-shadow: inset 0 -1px 0 var(--color-dark-2);
}
.mnav__brand { font-family: var(--font-display); font-size: 24px; line-height: 36px; letter-spacing: -0.01em; color: var(--color-brand); }
.mnav__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--color-bg); cursor: pointer; }
.mnav__close-icon { width: 24px; height: 24px; }
.mnav__auth { display: flex; gap: 16px; padding: 16px; box-shadow: inset 0 -1px 0 var(--color-dark-2); }
.mnav__nav { flex: 1; padding: 8px 0; }
.mnav__link {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 16px; box-shadow: inset 0 -1px 0 var(--color-dark-2);
  font-family: var(--font-display); font-size: 20px; line-height: 30px; text-transform: uppercase;
  color: var(--color-bg); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mnav__link:hover, .mnav__link[aria-current] { color: var(--color-brand); }
.mnav__link:hover { background: var(--color-dark-2); }
.mnav__chev { width: 16px; height: 16px; margin-right: 14px; }
.mnav__rg { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--color-dark-2); }
.mnav__warn { display: flex; gap: 8px; align-items: center; font-size: 11px; line-height: 15px; }
.mnav__links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; line-height: 16px; font-weight: 700; }
.mnav__links a { color: var(--color-brand); text-decoration: none; position: relative; }
.mnav__links a::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 24px; }
.mnav__links a:hover { text-decoration: underline; }

/* ── responsible gambling block (shared) ──────────────────────────────── */
.rg {
  display: flex; flex-direction: column; gap: 40px;
  padding: 80px 40px; background: var(--color-brand); color: var(--color-ink);   /* square: the frame has no radius here, and a rounded top would show the dark page behind it */
}
.rg__head { display: flex; flex-direction: column; gap: 12px; }
.rg__title { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rg__line { font-family: var(--font-display); font-size: 64px; line-height: 64px; text-transform: uppercase; }
.rg__line--box { font-size: 56px; line-height: 56px; padding: 4px 16px; border-radius: 4px; background: var(--color-dark); color: var(--color-brand); }
.rg__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rg-card {
  display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
  padding: 32px; border-radius: 24px; background: var(--color-dark); color: var(--color-cream);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.rg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.rg-card__num { font-family: var(--font-display); font-size: 40px; line-height: 60px; color: var(--color-brand); opacity: .3; }
.rg-card__title { font-family: var(--font-display); font-size: 22px; line-height: 33px; text-transform: uppercase; }
.rg-card__text { font-size: 14px; line-height: 21px; color: var(--color-muted); }
.rg-card__link { font-size: 13px; line-height: 17px; font-weight: 800; color: var(--color-brand); text-decoration: underline; text-underline-offset: 2px; }
.rg-card__link:hover { color: var(--color-cream); }

/* ── support strip ────────────────────────────────────────────────────── */
.support {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 40px; background: var(--color-cream); color: var(--color-ink);
  box-shadow: inset 0 1px 0 var(--color-gold), inset 0 -1px 0 var(--color-gold);
  font-size: 14px; line-height: 18px;
}
.support__phone { font-weight: 700; text-decoration: none; }
.support__phone:hover { text-decoration: underline; }
.support__right { display: flex; align-items: center; gap: 16px; font-weight: 800; }
.support__betstop { text-decoration: none; }
.support__betstop:hover, .support__register:hover { color: var(--color-muted-ink); }
.support__register { text-decoration: underline; text-underline-offset: 2px; }

.badge-18 {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: 12px; border: 1px solid var(--color-bg);
  font-size: 10px; line-height: 13px; font-weight: 800; color: var(--color-bg);
}
.badge-18--sq { width: 40px; border: 0; border-radius: 4px; background: var(--color-dark); color: var(--color-brand); font-size: 12px; line-height: 16px; }

/* ── payment methods ──────────────────────────────────────────────────── */
.payments {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 105px; padding: 32px 40px; color: var(--color-cream);
  box-shadow: inset 0 1px 0 var(--color-dark-2);
}
.payments__left { display: flex; align-items: center; gap: 16px; }
.payments__logos img { width: 300px; height: 40px; }
.payments__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.payments__note { font-size: 12px; line-height: 16px; color: var(--color-muted); }

/* ── footer ───────────────────────────────────────────────────────────── */
.site-footer {
  display: flex; flex-direction: column; gap: 48px;
  padding: var(--shell-pad); background: var(--color-dark); color: var(--color-cream);
}
.site-footer__grid { display: grid; grid-template-columns: 400px repeat(4, 1fr); gap: 48px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.site-footer__logo { font-family: var(--font-display); font-size: 22px; line-height: 33px; color: var(--color-brand); }
.site-footer__tagline { font-size: 14px; line-height: 21px; color: var(--color-muted); }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__title { font-size: 12px; line-height: 16px; font-weight: 800; text-transform: uppercase; color: var(--color-brand); }
.site-footer__list { display: flex; flex-direction: column; gap: 12px; }
.site-footer__link { font-size: 14px; line-height: 18px; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.site-footer__link:hover { color: var(--color-brand); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__rule { border: 0; height: 1px; margin: 0; background: var(--color-dark-2); }
.site-footer__legal { display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 20px; color: var(--color-muted); }
.site-footer__legal a { color: var(--color-cream); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__legal a:hover { color: var(--color-brand); }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--color-muted); }
.site-footer__cookies { position: relative; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.site-footer__cookies::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 24px; }
.site-footer__cookies:hover { color: var(--color-brand); }

/* ── back to top ──────────────────────────────────────────────────────── */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: var(--z-header);
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--color-brand); color: var(--color-ink); cursor: pointer;
  font-size: 18px; box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.to-top:hover { background: var(--color-brand-hover); transform: translateY(-2px); }

/* ── mobile (frames at 390) — applies to every width below the desktop frame ── */
@media (max-width: 1199px) {
  .strip { height: 29px; padding: 8px 16px; font-size: 10px; line-height: 13px; font-weight: 700; color: var(--color-bg); }
  .strip__msg { font-weight: 700; }
  .strip__links { display: none; }

  .site-header { height: 72px; padding: 0 16px; }
  .logo { font-size: 22px; line-height: 33px; }
  .nav { display: none; }
  .site-header__actions { gap: 12px; }
  .site-header__login { font-size: 12px; line-height: 16px; }
  .site-header__user { font-size: 12px; line-height: 16px; }
  .site-header__actions .btn--sm { min-height: 30px; padding: 8px 12px; font-size: 11px; line-height: 14px; }
  .burger { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -13px; border: 0; background: none; color: var(--color-ink); cursor: pointer; }
  .burger__icon { width: 18px; height: 18px; }

  .rg { gap: 24px; padding: 32px 16px; }
  .rg__line { font-size: 40px; line-height: 40px; }
  .rg__line--box { font-size: 32px; line-height: 32px; }
  .rg__cards { grid-template-columns: 1fr; gap: 16px; }
  .rg-card { gap: 12px; padding: 20px; border-radius: 16px; }
  .rg-card__num { font-size: 28px; line-height: 42px; }
  .rg-card__title { font-size: 18px; line-height: 27px; }
  .rg-card__text { font-size: 13px; line-height: 18px; }

  .support { flex-direction: column; align-items: flex-start; gap: 12px; height: auto; padding: 20px 16px; font-size: 13px; line-height: 17px; }
  .support__text { line-height: 17px; }

  .payments { flex-direction: column; align-items: flex-start; gap: 16px; min-height: 0; padding: 24px 16px; }
  .payments__left { flex-direction: column; align-items: flex-start; }
  .payments__logos img { width: 180px; height: 24px; }
  .payments__right { align-items: flex-start; }

  .site-footer { gap: 32px; padding: 48px 16px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__brand { gap: 12px; margin-bottom: 8px; }
  .site-footer__logo { font-size: 20px; line-height: 30px; }
  .site-footer__tagline { font-size: 13px; line-height: 20px; }
  .site-footer__col { gap: 8px; }
  .site-footer__list { gap: 8px; }
  .site-footer__link { font-size: 13px; line-height: 17px; }
  .site-footer__legal { gap: 8px; font-size: 11px; line-height: 15px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 11px; line-height: 14px; }
  .to-top { right: 16px; bottom: 16px; }
}

/* tablet: the mobile frame's single column gets some air between 600 and 1199 */
@media (min-width: 600px) and (max-width: 1199px) {
  .rg__cards { grid-template-columns: repeat(3, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__bottom { flex-direction: row; align-items: center; }
  .support { flex-direction: row; align-items: center; }
}

/* below the mobile frame: the header must still fit (logo + log in + join + burger) */
@media (max-width: 389px) {
  .site-header { padding: 0 12px; }
  .logo { font-size: 20px; line-height: 30px; }
  .site-header__actions { gap: 8px; }
  .site-header__actions .btn--sm { padding: 8px 10px; }
  .burger { margin-right: -10px; }
}