/* Shared across every page — extracted from the common <style> rules */

/* overflow-x:hidden is required, not defensive: the wave dividers
   (.section-wave-top/-bottom) deliberately bleed edge-to-edge via
   width:100vw, and 100vw includes the scrollbar's own width in most
   browsers — so on any page tall enough to actually show a vertical
   scrollbar, the waves overhang the true viewport by a few pixels and
   trigger a horizontal one too. Clipping that harmless sliver here (the
   waves are aria-hidden decoration, nothing is lost) is simpler and more
   robust than trying to size 100vw around a scrollbar that may or may not
   be there yet when the browser first lays out the page. */
body { margin: 0; background: #F6F6F6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

a { color: #CE0608; text-decoration: none; }

a:hover { color: #9C0406; }

::selection { background: #CE0608; color: #fff; }

a, button { transition: background-color 260ms cubic-bezier(.22,.61,.36,1), color 200ms ease, box-shadow 340ms cubic-bezier(.22,.61,.36,1); }

header a { white-space: nowrap; }

/* .header-inner's own 36px gap (extracted.css) also separates logo/nav, so
   it's too wide once nav collapses and .header-cta-group sits directly next
   to the hamburger — pull it in to match .header-cta-group's own 12px gap
   between Play game/Claim free bets. No-op while display:none. */
.hamburger-button { display: none; align-items: center; justify-content: center; margin-left: -24px; }

@media (min-width: 1241px) { .mobile-menu { display: none !important; } }

.mobile-menu-cta { display: none !important; }

/* Added for the static build: mobile menu visibility (was React conditional rendering) */
.mobile-menu { display: none; }
.mobile-menu.is-open { display: block; }

/* Hamburger icon morphs into an X while the mobile menu is open. The design's
   three-line SVG path can't be animated per-line, so the icon is three bars
   instead; main.js toggles .is-open on the button in step with the menu. */
.hamburger-icon { position: relative; display: block; width: 20px; height: 20px; }
.hamburger-bar {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transition: top 220ms ease, transform 220ms ease, opacity 220ms ease;
}
.hamburger-bar:nth-child(1) { top: 4px; }
.hamburger-bar:nth-child(2) { top: 9px; }
.hamburger-bar:nth-child(3) { top: 14px; }

.hamburger-button.is-open .hamburger-bar:nth-child(1) { top: 9px; transform: rotate(45deg); }
.hamburger-button.is-open .hamburger-bar:nth-child(2) { opacity: 0; }
.hamburger-button.is-open .hamburger-bar:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* Added for the static build: every hover-effect element gets a smooth
   transition for whichever property it animates (background/color/box-shadow
   already covered above for plain a/button, but this also covers transform
   and border-color for the card/TOC hover effects, and covers elements that
   aren't a/button at all, e.g. divs and spans). An element's own inline
   transition (set in the markup) still wins over this. */
[class^="hv"] {
  transition:
    background-color 260ms cubic-bezier(.22,.61,.36,1),
    color 200ms ease,
    box-shadow 340ms cubic-bezier(.22,.61,.36,1),
    border-color 200ms ease,
    transform 340ms cubic-bezier(.22,.61,.36,1);
}

/* Added for the static build: replace the browser's default blue click/focus
   ring with an on-brand yellow one, shown only for keyboard navigation
   (:focus-visible) — not on mouse click, which is what looked wrong. */
a:focus, button:focus, input:focus {
  outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #CE0608;
  outline-offset: 2px;
}

/* Skip-to-content link: off-screen until keyboard-focused, then drops into
   view above everything else so keyboard/screen-reader users can bypass the
   header nav without tabbing through every link first. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: #CE0608;
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  transition: top 160ms ease;
}
.skip-link:focus {
  top: 0;
  color: #fff;
}

/* Fixes a real bug, not a design choice: every full-bleed hero/newsletter
 * section (background must reach the viewport edge) has its own horizontal
 * inset living on a NESTED child — .hero-grid, .page-hero-content(-tall),
 * .about-hero-body, .newsletter-container — while each page's own CSS also
 * has a generic `section { padding-left/right: 20px }` rule for plain
 * sections that have no such child. That generic rule also matches these
 * hero/newsletter <section> elements, which never had padding of their own,
 * so the outer section gained an unwanted extra 20px on top of the child's
 * own inset — e.g. the home hero's text sat 40px from the edge (20+20)
 * instead of 20px, and free-bets'/best-casinos' sat at 52px (20+32, since
 * their child's inset was never reduced for mobile at all). One attempted
 * per-page fix (`section.page-hero-content-tall { padding-left: 0 }`) never
 * matched anything — that class lives on the child <div>, never on a
 * <section> — so it silently did nothing. Fixed once, here, for every page:
 * zero the outer section's padding, and give every child inset the same
 * 20px every other mobile section already uses. */
@media (max-width: 680px) {
  .hero, .about-hero, .legal-hero, .page-hero, .newsletter {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .page-hero-content, .page-hero-content-tall, .about-hero-body, .newsletter-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  nav.mobile-menu-nav {
    padding: 20px 0px;
  }
}

/* .op-list-grid (index/free-bets/best-casinos "offers" grid) had no
 * responsive override at all — its two regular cards stayed in a fixed
 * 1fr 1fr row down to any width, and each card's own min-content (a 96px
 * logo chip + name/rating text) is wider than half of a narrow phone
 * viewport, so the grid was forced wider than the screen and got sliced
 * off at the edge by body's overflow-x:hidden instead of wrapping. */
@media (max-width: 960px) {
  .op-list-grid { grid-template-columns: 1fr !important; }
}