/*
 * Local CSS fixes for factory pages on the LuckyStar theme.
 *
 * Originally content-only (the theme resets every list to list-style:none
 * and padding-left:0 so its navigation renders as bare rows, and never
 * restores list styling inside post content -- an ordered list of steps
 * otherwise renders with no numbers at all, invisible in the HTML and only
 * visible in a browser). Most of what's below is still scoped to the content
 * column for exactly that reason.
 *
 * The "header" section near the end is the one deliberate exception: a
 * theme-chrome layout bug (see its own comment) that isn't specific to any
 * one page's content, so it can't be fixed by scoping to the content column.
 */

/* --- lists: give content lists their markers and indent back -------------- */

.games-info__cnt ul.wp-block-list,
.games-info__cnt ol.wp-block-list {
  padding-left: 1.5em;
  margin: 0 0 18px;
}

.games-info__cnt ul.wp-block-list {
  list-style: disc outside;
}

.games-info__cnt ol.wp-block-list {
  list-style: decimal outside;
}

.games-info__cnt ul.wp-block-list > li,
.games-info__cnt ol.wp-block-list > li {
  display: list-item;
  list-style: inherit;
  margin-bottom: 0.45em;
  padding: 0;
}

.games-info__cnt ul.wp-block-list > li::before,
.games-info__cnt ol.wp-block-list > li::before {
  content: none; /* the theme adds pseudo-element bullets for nav rows */
}

/* --- tables: scroll inside the figure instead of pushing the column ------- */

.games-info__cnt figure.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 18px;
  -webkit-overflow-scrolling: touch;
}

.games-info__cnt figure.wp-block-table table {
  width: 100%;
  margin: 0;
}

.games-info__cnt figure.wp-block-table th,
.games-info__cnt figure.wp-block-table td {
  text-align: left;
  vertical-align: top;
}

/* --- headings: a little more air above a new section ---------------------- */

.games-info__cnt h2.wp-block-heading {
  margin-top: 32px;
}

.games-info__cnt h3.wp-block-heading,
.games-info__cnt h4.wp-block-heading {
  margin-top: 24px;
}

/* --- links in body copy should look like links ---------------------------- */

.games-info__cnt p a,
.games-info__cnt li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- the plugin's own heading overshoots its container by a few pixels ---- */

.ez-toc-title-container {
  max-width: 100%;
}

/* --- narrow screens: scroll inside the wrapper instead of stacking --------
 * The desktop rules above already set figure.wp-block-table to
 * max-width:100%; overflow-x:auto -- a scrollable wrapper -- but the
 * table itself is forced to width:100% (line ~55), which means it can
 * never exceed the wrapper's width and therefore never actually needs to
 * scroll: the wrapper's overflow-x:auto was live at every viewport width
 * but had nothing to do. A previous stacked "label: value" per-row design
 * lived in this media query instead; replaced here because it no longer
 * matches the intended mobile behavior (the table's own natural column
 * widths, horizontally scrollable within its own wrapper, page never
 * scrolls).
 *
 * table { width:auto } alone was not enough, confirmed by measuring actual
 * rendered column widths, not just scrollWidth: with table-layout:auto (the
 * theme's own wp-blocks-custom.css already overrides core's
 * .has-fixed-layout{table-layout:fixed} back to auto -- that part was never
 * the problem), a browser given a `width:auto` table will still happily
 * shrink-to-fit and wrap every cell aggressively rather than overflow,
 * whenever the content's min-content width technically allows it -- which
 * ordinary English prose almost always does, since individual words are
 * short. That produced exactly the reported symptom: a 3-column table's
 * third column ("Where it applies") crushed to ~65-94px while the other two
 * held a generous 144px each, table width == wrapper width (no overflow, no
 * scroll happening at all despite the earlier fix). A per-cell min-width
 * forces the browser to give every column real breathing room, which is
 * what actually makes a wide table wider than its wrapper (triggering the
 * scroll above) instead of cramming: 130px keeps three- and four-column
 * tables comfortably readable without hardcoding any specific table's
 * column count. Desktop is untouched: this whole block is gated below the
 * same 640px breakpoint as the rest of this section.
 */
@media (max-width: 640px) {
  .games-info__cnt figure.wp-block-table table {
    width: auto;
    min-width: 100%;
  }

  .games-info__cnt figure.wp-block-table th,
  .games-info__cnt figure.wp-block-table td {
    min-width: 130px;
  }
}

/* --- the TOC plugin's header box ignores its own padding ------------------ */

.ez-toc-title-container,
.ez-toc-title-container * {
  box-sizing: border-box;
}

/* --- header: the nav row must not push the page wider than the viewport --- */
/*
 * Confirmed by measuring the live DOM, not guessed from the stylesheet:
 * header, .header__wrap, .header__main and .menu-cnt (#menu-100cuci) are
 * all flex containers with flex-wrap: nowrap, and their flex children default to
 * min-width: auto, which stops flex-shrink from ever engaging below the
 * children's own intrinsic width -- the standard flexbox overflow trap. At
 * ordinary desktop widths the nav items plus the Login/Register buttons
 * together want more width than the viewport has, so the buttons get pushed
 * past the right edge and the whole page gains a horizontal scrollbar.
 *
 * Letting the row wrap onto a second line, instead of trying to make every
 * item shrink, is the minimal fix: it needs no font-size change, no JS, and
 * no restructuring of the theme's own flex/min-width chain, which would risk
 * side effects this file can't verify without a live browser.
 */
header .header__wrap,
header .header__main,
header .menu-cnt {
  flex-wrap: wrap;
}

/* --- factory image pipeline ------------------------------------------------
 * wp-page.php expands manifest-driven <!-- wp:factory/image --> placeholders
 * into real Gutenberg <figure class="wp-block-image ... factory-image ..."/>
 * markup. Kept deliberately small and scoped to the same content container
 * as everything else in this file, instead of touching the theme.
 *
 *   factory-image--wide    a standalone image, centered, capped to a
 *                          readable width rather than running full bleed.
 *
 * A "side" image is never a bare float: md2blocks.py always pairs it with
 * one real paragraph inside a two-column .factory-media-text flex block
 * (image + text as a single unit), because a float with no guaranteed
 * trailing text to wrap looked like an orphaned box shoved to one side with
 * a blank gap under it. Both columns are a fixed, matching size regardless
 * of which side the image sits on, so image sizing reads as one consistent
 * size across the page rather than varying per placement.
 */
.games-info__cnt .factory-image {
  margin: 24px 0;
}

.games-info__cnt .factory-image img {
  display: block;
  height: auto;
  max-width: 100%;
}

.games-info__cnt .factory-image--wide {
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Fallback only: a side-layout image that found no paragraph to pair with
 * (a section made entirely of lists/tables) falls back to a standalone
 * placeholder from wp-page.php -- rare, but still capped so it can't render
 * at full bleed width. */
.games-info__cnt .factory-image--side {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.games-info__cnt .factory-media-text {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 28px 0;
}

.games-info__cnt .factory-media-text--right {
  flex-direction: row-reverse;
}

.games-info__cnt .factory-media-text__media {
  flex: 0 0 380px;
  max-width: 380px;
}

.games-info__cnt .factory-media-text__media .factory-image {
  margin: 0;
}

.games-info__cnt .factory-media-text__media img {
  border-radius: 4px;
  /* Portrait images (phone mockups) at the fixed 380px column width ran
     ~520px tall beside a short paragraph and left a large empty gap (bp9).
     Cap the height; landscape images sit below the cap and are unaffected. */
  max-height: 380px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

.games-info__cnt .factory-media-text__text {
  flex: 1 1 0;
  min-width: 0;
}

.games-info__cnt .factory-media-text__text p {
  margin: 0;
}

.games-info__cnt .factory-media-text__text p + p {
  margin-top: 14px;
}

@media (max-width: 782px) {
  .games-info__cnt .factory-media-text,
  .games-info__cnt .factory-media-text--right {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .games-info__cnt .factory-media-text__media {
    flex-basis: auto;
    max-width: 100%;
  }

  .games-info__cnt .factory-image--wide {
    max-width: 100%;
  }
}

/* --- footer/theme demo-content removal ---------------------------------
 * The base theme ships with unsupported demo content baked directly into
 * footer.php, unconditionally (not driven by any Carbon Fields option, so
 * it renders regardless of what's configured): fabricated support emails
 * built from the site's own domain, sports-federation badges (UEFA, UFC,
 * WTA, FIBA, NHL, ATP, ITF, FIFA) with no actual sponsorship, crypto/
 * unsupported payment icons that don't match this project's documented
 * cashier channels, a Windows app download badge with no real app, and a
 * PWA promo banner promising "$100 to the bonus account" that no reviewed
 * page content supports. None of this is approved 100CUCI content, and
 * there is no legitimate replacement to invent, so it is hidden rather
 * than edited into the shared theme file (footer.php is used by other
 * site-factory projects on this same theme copy) -- reversible, scoped to
 * this project only via the same host-gated project.css this file already
 * is, and leaves the approved footer navigation (Customer Service,
 * Responsible Gaming, Privacy, Terms) untouched.
 */
footer .footer__suporte,
footer .footer__cnt_info,
footer .wt-partner-badges,
footer .footer__for_windows,
footer .v-abs {
  display: none !important;
}

footer svg[icon="payment-full/btc"],
footer svg[icon="payment-full/qiwi"],
footer svg[icon="payment-full/ethereum"],
footer svg[icon="payment-full/tether"] {
  display: none !important;
}

/* Reading width -- REMOVED. This used to cap .casino__right_info at 1100px
 * once the inherited sidebar was disabled, on the assumption that the
 * theme's own "working" (with-sidebar) layout was meaningfully narrower.
 * Checked directly against the actual working reference theme instead of
 * assuming: with its real sidebar present, .casino__right_info there has
 * max-width:none and simply fills whatever space is left after the sidebar
 * (measured 1066px at 1440px viewport, sidebar 274px + gap) -- i.e. the
 * reference was NEVER capped at ~1100px; it just happened to end up near
 * that width because a sidebar was eating the rest of the row. Every
 * site-factory project disables that sidebar (neutralize-theme-demo.py),
 * so this cap was silently making every project's subpages narrower than
 * the theme's own uncapped behavior, not preserving it -- confirmed as a
 * generic bug, not a per-project design choice. */

/* --- homepage hero slider on mobile ------------------------------------
 * The theme fixes .banners__photo at 200px tall with object-fit: cover on
 * phones, so a ~3:1 hero banner (bp9) lost its headline and CTA to the side
 * crop. Let the banner keep its own proportions below 782px instead.
 */
@media (max-width: 782px) {
  #banners .banners__photo,
  #banners .banners__sliders,
  #banners .swiper-slide,
  #banners .banners__photo a,
  #banners .swiper-slide img {
    height: auto !important;
  }
  #banners .banners__photo a {
    display: block;
  }
  #banners .swiper-slide img {
    object-fit: contain;
    width: 100%;
  }
}