/* ------------------------------------------------------------------
   Standalone-page glue.

   Everything else in assets/css/ is the live site's own CSS. This file
   holds only what the static page needs in place of the Vue app:

   1. desktop / mobile header swap (the SPA does this in JS)
   2. page shell sizing, since there is no router view
   3. the landing body: the four CTA tiles

   Put your own landing styles here or in a new file loaded after this one.
   ------------------------------------------------------------------ */

/* -- 1. header swap ------------------------------------------------
   The live app mounts either HeaderComp's desktop or mobile variant
   based on a JS width check. Measured on worldofsport.net: mobile at
   <=1001px, desktop at >=1023px. 1024px is used as the line here.
   ------------------------------------------------------------------ */
#header-mobile { display: none; }

@media screen and (max-width: 1023px) {
  #header { display: none; }
  #header-mobile { display: block; }
}

/* -- 2. page shell -------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--main-font-family);
  background: var(--main-first-background);
  color: var(--main-first-background-text);
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* the SPA sets this from a JS-measured footer height; not needed here */
  padding-bottom: 0;
}

#app > .content-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100vh;
}

/* footer sits at the bottom even on a short page */
#footer { margin-top: auto; }

/* -- 3. landing body: the four CTA tiles -----------------------------
   4 across at >=1024px, 2x2 below. The 1024px line is the site's own
   header swap breakpoint (see block 1), so the page changes shape in
   one place rather than two.

   Grid, not flex: `repeat(2, 1fr)` gives the 2x2 wrap for free, and
   1fr columns keep all four tiles exactly equal regardless of the
   image's intrinsic width.

   --cta-ratio is the single source of truth for tile shape. It is 3:2,
   the delivered creatives' own ratio (1536x1024); it also reserves the
   box before the image loads, so there is no layout shift.

   4 across, i.e. the placeholder footprint, by James's call on 21 Sep.
   Tile is 275x183: same width as the old placeholders, 23px shorter
   because 3:2 is a shallower box than the 4:3 they were drawn at.

   ⚠ Read before changing either number.

   The ratio stays 3:2 and does NOT go back to 4:3 to recover those 23px.
   The art is 3:2, `object-fit: cover` would crop a 4:3 box out of it by
   eating ~25% of the WIDTH, and the headline and button are burned into
   the left third. 4:3 cuts the copy off. The 23px is the cheaper loss.

   The known cost of 4 across: at 275px the tile is 18% of the 1536px
   source, so the burned-in button text lands around 7px. 2 across (570px,
   37%) is the width at which it reads. That trade was made deliberately
   with the numbers on the table, not overlooked. If the copy is ever
   judged too small to read, the fix is a re-cut with bigger type, not a
   ratio change.
   ------------------------------------------------------------------ */
.landing-main {
  flex: 1 1 auto;
  background: var(--main-first-background);
}

.cta-grid {
  --cta-ratio: 3 / 2;
  --cta-gap: 20px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cta-gap);
  max-width: var(--footer-max-width);   /* lines the row up with the footer */
  margin: 0 auto;
  padding: 40px 20px;
}

/* 2x2 below 1024, as the placeholders were. Note this is the tighter of
   the two cases for the burned-in copy, not the looser one: a 390px phone
   gives a 177px tile, smaller than the desktop 275px. Same call as above
   applies; a re-cut with bigger type is the lever, not the column count. */
@media screen and (max-width: 1023px) {
  .cta-grid {
    --cta-gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    padding: 20px 12px;
  }

  /* The mobile header is `position:fixed; height:50px` (site.css,
     `.header.mobile`), so it is out of flow and the first row of tiles
     slides underneath it. The desktop header is static and needs none of
     this. Clear the header, then add the normal 20px breathing room.
     Derived from the header's own height so the two stay in step. */
  .landing-main {
    --mobile-header-h: 50px;
    padding-top: var(--mobile-header-h);
  }
}

/* The radius is NOT decoration, it is a repair. Each delivered JPEG has
   its own ~34px corner radius baked in, and JPEG has no alpha, so what
   sits outside that curve is solid BLACK. Against the page's #FAFAFA
   those are four black wedges on every tile. Clipping the tile to the
   same curve throws them away.

   Percentages, not px, so it tracks the tile at any width: a border-radius
   percentage resolves against the box's own width horizontally and its
   height vertically, so an X/Y pair is needed to stay circular. At the
   3:2 ratio, 2.6% of width == 3.9% of height == ~40px at the source's
   1536px scale. 40 is deliberately a touch over the artwork's ~34 so the
   cut lands INSIDE the black arc; under-cutting leaves a dark sliver. */
.cta-tile {
  display: block;
  aspect-ratio: var(--cta-ratio);
  overflow: hidden;
  border-radius: 2.6% / 3.9%;
  /* the tile is the link, so give it the whole box */
  line-height: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}

.cta-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}

/* cover, so a cut delivered at a slightly different ratio still fills
   the tile instead of letterboxing */
.cta-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -- tile 4, the odd one out ----------------------------------------
   It is the only tile that leaves the .net platform (it goes to the old
   site), so it should not read as one of a matched set of four. That job
   used to be done here, by a yellow ring on .cta-tile--feature, because
   the placeholder art could not do it.

   The delivered cut can. "Legacy Website" is the only one of the four on
   a gold field with dark green type, i.e. the palette inverted; the other
   three are all white-and-gold on dark. So the ring is gone, and so is
   the class on the tile in index.html. The distinction now lives entirely
   in the artwork, which is where it belongs: nothing in CSS has to stay
   in step with a design decision made in Photoshop.

   Put it back only if a future re-cut makes tile 4 match the set.
   ------------------------------------------------------------------ */

/* keyboard focus has to stay visible: these are the page's main CTAs */
.cta-tile:focus-visible {
  outline: 3px solid var(--main-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cta-tile { transition: none; }
  .cta-tile:hover { transform: none; }
}

/* -- desktop nav flyout ---------------------------------------------
   On the live site the Virtual Games flyout opens on hover via a JS
   class. Reproduced here as a plain CSS hover so it works statically.
   ------------------------------------------------------------------ */
#header .link-holder .group .group-holder { display: none; }
#header .link-holder .group:hover .group-holder { display: block; }

/* -- desktop Login / Join --------------------------------------------
   On the live SPA these are <div>s that open a modal. Off-site there is
   no modal, so they are real <a>s pointing at .net's full-page /sign-in
   and /sign-up. That makes them inherit `.header a{color:#42b983}` from
   the site stylesheet, which turns Login green.

   Join is safe: its own colour rule is id-qualified (#signup-block) and
   already outranks `.header a`. Login has no colour rule of its own, so
   put it back to the header's text colour explicitly.

   Mobile needs nothing: `.login-register-holder .action` already sets
   --header-text-color and outranks `.header a`.
   -------------------------------------------------------------------- */
#header #signup-block .sign-in-btn { color: var(--header-text-color); }

/* -- mobile drawer: kill the shared Link component's inline padding ---
   The main bundle carries an UNSCOPED `.link{padding:0 .8vw}`. On the live
   site it is `.link[data-v-157e57f9]`, the shared Link component the top-bar
   CMS links are built from, so it never reaches the drawer. Stripped, it
   does: 0.8vw is 3.12px at 390px, which pushed every drawer icon 3px right
   of where live puts it (live measures 20, we measured 23).

   Unlike the `li` and `.line .link` leaks, this one is NOT dropped in
   build-css.py, because it has 18 legitimate targets on desktop (the top-bar
   links and the header nav). Dropping it would break those. So it is
   anchored away from the drawer instead, which is defence 3 of the scoped-CSS
   playbook: where a class name is genuinely shared, scope the loser.
   -------------------------------------------------------------------- */
#header-mobile .left-side-navigation .games-list-inner .link {
  padding-left: 0;
  padding-right: 0;
}

/* -- CMS page chrome: h1.page-header + .content-holder -----------------
   Aardvark's CMS wraps a content page as
     .full-page > h1.page-header + .content-holder.contents > <content>
   and `.page-header` lives in a CMS chunk we never captured, so it is not
   in site.css. These values are MEASURED off the live page
   /page/test-landing-page, not guessed:
     28px / 36px / 700, din-2014, #fff on rgb(3,72,39) = --main-primary,
     padding 0 15px, margin 0 0 14px, left aligned, full width.

   Matching the class names (not inventing our own) is the point: this local
   copy is meant to predict what the CMS renders.

   ⚠️ The H1 text width will differ locally because din-2014 is a
   domain-locked Adobe kit and falls back to sans-serif off worldofsport.net.
   The BOX geometry still matches; only the glyphs differ.
   -------------------------------------------------------------------- */
.landing-main .full-page {
  /* On live, `.full-page` is `width:100%` yet renders 3px narrower than the
     viewport, at every width. Cause: its parent `div.desktop` in Aardvark's
     app shell reserves a 3px scrollbar gutter (offsetWidth 1440 vs
     clientWidth 1437) even though it is not scrolling. That 3px is what
     shifted every tile by 1px and made the mobile tiles 2px taller here.
     Reproduced so the local geometry matches live exactly.
     ⚠️ It emulates a Chromium styled-scrollbar quirk, not a design decision.
     If Aardvark ever drops it, delete this line rather than compensating. */
  width: calc(100% - 3px);
}

.landing-main .page-header {
  margin: 0 0 14px;
  padding: 0 15px;
  background: var(--main-primary);
  color: #fff;
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  text-align: start;
}

.landing-main .content-holder.contents {
  padding: 0 15px 10px;
}

/* -- mobile games bar + betslip ---------------------------------------
   The games bar is mobile-only chrome; the SPA simply does not render it
   on desktop, so hide it above the same 1024px line the header swap uses.
   -------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  .mobile-nav-wrapper { display: none; }
}

/* Live renders the mobile betslip toggle on betting pages (the homepage
   shows it, 50x50) but NOT on CMS content pages - on /page/* it is absent
   from the header entirely. This landing page is destined to be a CMS
   page, so match that. `display:none`, not `visibility:hidden`: on live
   the element is not in the DOM at all, so it must not reserve space.
   Delete this rule if the page ever becomes a betting page. */
#header-mobile .slip-toggle-wrapper { display: none; }

/* -- footer: mobile padding -------------------------------------------
   The SPA adds class `mobile` to #footer below its JS width check, which
   swaps `padding-top:5vh` for `#footer.mobile{padding-top:1.5vh;
   padding-bottom:2vh}`. A static page cannot add that class conditionally,
   so the rule is restated as a media query on the same 1024px line the
   header swap uses.

   Without it the footer keeps the desktop 5vh (42.2px at an 844px-tall
   viewport) against live's 1.5vh (12.66px), which pushed "Back to top"
   ~30px lower than live.
   -------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  #footer {
    flex-direction: column;
    padding-top: 1.5vh;
    padding-bottom: 2vh;
  }
}

/* -- Telviva chat launcher --------------------------------------------
   Live hand-rolls this: a fixed pill button plus a hidden popup holding
   Telviva's widget in an iframe. All values MEASURED off the live page at
   1440 and 390.
     button  desktop 79.1x40.1 @ bottom/right 30    mobile 71.1x36.1 @ 20
     popup   desktop 380x600, radius 20             mobile calc(100%-20px)
                                                     x 70vh, radius 16
     close   container 50px tall, button #059669
   ⚠️ The live breakpoint between the two sets was not determined; 1024px
   is used to stay on the same line as everything else here. Both measured
   widths land on the correct values.
   -------------------------------------------------------------------- */
.open-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  padding: 10px 20px;
  border: 0;
  border-radius: 50px;
  background: #f73544;
  color: #fff;
  font-family: Calibri, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.chat-popup {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 1001;
  width: calc(100% - 20px);
  height: 70vh;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

/* site.js toggles this class */
.chat-popup.is-open { display: block; }

.chat-popup .form-container {
  display: block;
  width: 100%;
  height: calc(100% - 50px);
  border: 0;
}

.chat-popup .close-container { height: 50px; }

.chat-popup .close-container .cancel {
  width: 100%;
  height: 100%;
  padding: 1px 6px;
  border: 0;
  border-radius: 0;
  background: #059669;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

@media screen and (min-width: 1024px) {
  .open-button { bottom: 30px; right: 30px; padding: 12px 24px; }
  .chat-popup {
    bottom: 30px;
    right: 30px;
    width: 380px;
    height: 600px;
    border-radius: 20px;
  }
}

/* -- desktop nav: the two-layout switch --------------------------------
   Live does NOT have one desktop nav, it has two and swaps between them
   on width. Measured on worldofsport.net (the switch lands between 1600
   and 1680):

     <= 1600px   inline nav gets class `hidden` -> visibility:hidden, but
                 it STILL occupies its wrapped rows, and the .second-line
                 nav (32px) shows.          header = 138px
     >= 1680px   inline nav visible on one row, .second-line collapses
                 to zero.                   header = 106px

   Live toggles that class in JS by measuring whether the nav fits. A
   static page cannot, so the breakpoint is pinned at 1680px.

   ⚠️ `visibility:hidden`, NOT `display:none`. The hidden inline nav is
   load-bearing: it reserves the height that makes the header 138px. Hiding
   it properly would collapse the header to ~106px and everything below
   would shift up 32px.

   ⚠️ Our nav wraps at a different width from live's because the
   domain-locked din-2014 falls back to a wider sans-serif here. Row counts
   can therefore differ near the boundary even though the rule is right.
   ---------------------------------------------------------------------- */
@media screen and (min-width: 1024px) and (max-width: 1679px) {
  #header .main-line .header-line .left nav { visibility: hidden; }
  #header .main-line .second-line { display: block; }
}

@media screen and (min-width: 1680px) {
  #header .main-line .second-line { display: none; }
}