/* ==========================================================================
   House of Winners — home page

   The hero slideshow is intentionally NOT styled here. Banner text is baked
   into the uploaded artwork, so a slide is just an image — the existing owl
   carousel and .intro-slide markup already do that correctly and are left
   alone. slide_caption / slide_desc / slide_button_name stay unrendered.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Announcement bar
   Same getHomeNotice() content. Replaces <marquee>, which is deprecated and
   non-standard; pause-on-hover is preserved.
   -------------------------------------------------------------------------- */
.hw-announce{
  min-height:40px;
  height:40px;          /* fixed: the bar is one text row, never two */
  display:flex;
  align-items:center;
  background:var(--hw-surface,#121212);
  color:var(--hw-gold-mid,#F3C961);
  overflow:hidden;
}
/* Full-bleed, NOT held to var(--hw-container) like the sections around it.
   The bar is a scrolling marquee: constrained to the content column the text
   appeared and vanished ~95px inside a band that runs the full width, which
   read as a clipping bug. The 20px padding is a margin, not a column — it
   keeps the icon off the window edge while the text still runs the full
   width. */
.hw-announce__inner{
  display:flex;
  align-items:center;      /* icon and text share a vertical centre line */
  gap:13px;
  width:100%;
  height:100%;
  padding:0 20px;          /* height is fixed on .hw-announce, so no y-padding */
}
/* Supplied asset is 21x18 (the Figma frame said 25x25). */
.hw-announce__icon{
  width:21px;
  height:18px;
  flex:0 0 auto;
  display:block;
  object-fit:contain;
}
.hw-announce__viewport{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
}
.hw-announce__track,
.hw-announce__track *{white-space:nowrap;}
.hw-announce__track *{display:inline;margin:0;}
.hw-announce__track{
  display:inline-block;
  padding-left:100%;
  font-family:var(--hw-font);
  font-size:var(--hw-fs-sm,1.2rem);
  line-height:1.4;
  color:var(--hw-gold-mid,#F3C961);
  animation:hw-marquee 22s linear infinite;
  will-change:transform;
}
.hw-announce__viewport:hover .hw-announce__track{animation-play-state:paused;}

@keyframes hw-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-100%);}
}

/* NOTE: no prefers-reduced-motion opt-out here. Normally this animation would
   stop for users who ask their OS to reduce motion, but a permanently scrolling
   notice was requested explicitly. Re-add the opt-out if that changes. */

/* ==========================================================================
   Media placeholder — remove each .hw-ph as its asset lands
   ========================================================================== */
.hw-ph{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  padding:10px;
  border:1px dashed rgba(255,255,255,.16);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02),rgba(255,255,255,.02) 10px,transparent 10px,transparent 20px);
  color:#9A9A9A;font-size:12px;letter-spacing:.04em;text-align:center;
}
.hw-ph--sm{font-size:10px;padding:4px;}

/* ==========================================================================
   Game category bands (Live Casino / Slot Game)
   ========================================================================== */
.hw-cat{
  position:relative;
  /* Match the artwork's own ratio. The supplied files are 1440 x 450 (the
     Figma frame said 806 — the exports are the truth). Equal ratios mean
     background-size:cover has nothing to crop, so the text baked into the
     bottom-right of the image stays whole at any width. */
  aspect-ratio:1440 / 450;
  display:flex;
  align-items:center;
  background:var(--hw-page-bg,#000);
  overflow:hidden;
}
/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio:1/1){
  .hw-cat{min-height:0;height:31.25vw;max-height:450px;}
}
.hw-cat__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
/* The band height is width/3.2, so everything stacked inside is sized in vw and
   capped at its 1440px design value. Content then scales with the band instead
   of being clipped by .hw-cat overflow between 768px and 1440px. */
.hw-cat__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--hw-container);
  margin-inline:auto;padding:min(28px,1.94vw) 20px;
}
/* Grows with the tile list — one column of 5 fits the band height, more games
   wrap into further columns rather than being clipped by .hw-cat overflow. */
.hw-cat__panel{width:auto;max-width:min(620px,58%);}
.hw-cat__title{
  margin:0 0 min(14px,0.97vw);
  font-family:var(--hw-font);
  font-size:min(18px,1.25vw);line-height:1.2;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--hw-on-surface,#fff);
}
/* Six per column, then a new column. Keeps the band's fixed height whatever
   the game count, instead of overflowing past the background. */
.hw-cat__list{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(6,auto);
  justify-content:start;
  gap:min(10px,0.69vw);
  list-style:none;margin:0;padding:0;
}
.hw-cat__empty{color:var(--hw-muted,#B3B3B3);font-size:var(--hw-fs-sm,1.2rem);}

/* Provider tile — a single pre-composed image, no CSS frame.
   Natural size is 191 x 45; --hw-tile-w is the one lever if you want them
   larger or smaller than the artwork. Capped vw so six rows always clear the
   band height. */
.hw-tile{
  --hw-tile-w:min(191px,13.26vw);
  display:block;
  width:var(--hw-tile-w);
  max-width:100%;
  aspect-ratio:191 / 45;
  text-decoration:none;
  transition:transform .15s ease,filter .15s ease;
}
.hw-tile img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:left center;
  display:block;
}
.hw-tile:hover{transform:translateX(3px);filter:brightness(1.1);}

/* ==========================================================================
   How its works
   ========================================================================== */
.hw-how{
  background:var(--hw-page-bg,#000);
  width:100%;
  padding:56px 20px;
  text-align:center;
}
.hw-how__title{
  margin:0 0 40px;
  font-family:var(--hw-font);
  font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--hw-on-surface,#fff);
}
.hw-how__list{
  list-style:none;margin:0 auto;padding:0;
  max-width:var(--hw-container);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(20px,4vw,44px);
}
.hw-how__item{display:flex;flex-direction:column;align-items:center;gap:14px;width:120px;}
.hw-how__tile{
  width:80px;height:80px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--hw-gold-line,#9F853F);
  border-radius:4px;
  overflow:hidden;
}
.hw-how__tile img{max-width:60%;height:auto;}
.hw-how__label{
  font-family:var(--hw-font);
  font-size:var(--hw-fs-sm,1.2rem);font-weight:400;
  color:var(--hw-on-surface,#fff);
}

/* ==========================================================================
   Latest video + live transaction
   ========================================================================== */
/* Full-bleed: the legacy theme sets body{background:#fff}, so a centred
   max-width section leaves white bands either side. */
.hw-lv{
  background:var(--hw-page-bg,#000);
  width:100%;
  padding:20px 0 64px;
}
.hw-lv__inner{
  max-width:var(--hw-container);
  margin-inline:auto;
  padding-inline:20px;
  display:flex;flex-wrap:wrap;
  gap:clamp(20px,3vw,40px);
}
.hw-lv__col{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:14px;}
.hw-lv__title{
  margin:0;
  font-family:var(--hw-font);
  font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--hw-on-surface,#fff);
}
.hw-lv__frame{
  position:relative;
  aspect-ratio:16/10;
  border:2px solid var(--hw-gold-line,#9F853F);
  border-radius:4px;
  overflow:hidden;
  background:#0d0d0d;
}
.hw-lv__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.hw-txn{
  border:1px solid var(--hw-gold-line,#9F853F);
  border-radius:6px;
  padding:12px;
  background:rgba(255,255,255,.02);
  display:flex;flex-direction:column;gap:12px;
}
.hw-txn__tabs{display:flex;gap:10px;}
.hw-txn__tab{
  flex:1 1 0;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:8px 12px;
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  font-family:var(--hw-font);
  font-size:var(--hw-fs-sm,1.2rem);font-weight:700;
  text-transform:uppercase;
  color:var(--hw-muted,#B3B3B3);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.hw-txn__tab svg{width:16px;height:16px;flex:0 0 auto;}
.hw-txn__tab:hover{color:var(--hw-gold,#FACF5A);border-color:var(--hw-gold-line,#9F853F);}
.hw-txn__tab.is-active{
  background:rgba(250,207,90,.10);
  border-color:var(--hw-gold-line,#9F853F);
  color:var(--hw-gold,#FACF5A);
}

/* overflow-y must be explicit: paired with a `visible` axis CSS promotes it to
   auto, and the ticker's translateY adds scrollable overflow -> stray scrollbar. */
.hw-txn__scroll{overflow-x:auto;overflow-y:hidden;}
.hw-txn__table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--hw-font);
  font-size:var(--hw-fs-sm,1.2rem);
  color:var(--hw-on-surface,#fff);
}
.hw-txn__table th{
  padding:8px 10px;
  text-align:center;
  font-weight:700;
  color:var(--hw-on-surface,#fff);
  border-bottom:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
}
.hw-txn__table td{
  padding:7px 10px;
  text-align:center;
  white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.05);
}
/* td.hw-txn__amt, not .hw-txn__amt — a bare class loses to
   `.hw-txn__table td`, which sets its own colour below. */
.hw-txn__table td.hw-txn__amt{color:var(--hw-txn-amt,#8FD18F);font-weight:700;}

/* Ticker rotation. Timings from luckybet777; 16px not 1rem because this theme's
   root is 10px (style.css:2). On the span — transform on a <td> is unreliable. */
@keyframes hwTxnOut{
  0%   {opacity:1;transform:translateY(0);}
  100% {opacity:0;transform:translateY(-16px);}
}
@keyframes hwTxnIn{
  0%   {opacity:0;transform:translateY(16px);}
  100% {opacity:1;transform:translateY(0);}
}
.hw-txn__val{display:inline-block;}
.hw-txn__val.is-in {animation:hwTxnIn .45s cubic-bezier(.22,1,.36,1) both;}
.hw-txn__val.is-out{animation:hwTxnOut .3s ease-in both;}
.hw-txn__time{color:var(--hw-muted,#B3B3B3);}

@media (max-width:768px){
  .hw-cat__panel{width:100%;}
  .hw-how__item{width:96px;}
  .hw-how__tile{width:64px;height:64px;}
}

/* ==========================================================================
   Slideshow seam
   default-style.css:96 gives .intro-slider-container / .intro-slide a fixed
   360px height and a #eee background, which shows as a light band and a gap
   above the notice bar. Match the page instead and close the seam.
   ========================================================================== */
.intro-slider-container,
.intro-slider-container .intro-slide{
  background-color:var(--hw-page-bg,#000);
}
#desktop-view .intro-slider-container{margin-bottom:0;}
#desktop-view .intro-slider-container .owl-carousel{margin-bottom:0;}
.hw-announce{margin-top:0;}

/* ==========================================================================
   Slideshow — show the full banner (no crop)
   Banners are authored at 1440x450 (3.2:1). default-style.css forces the slide
   to a fixed / viewport height (up to 750px) and paints it with
   background-size:cover, so the box is far taller than the art and cover has to
   crop the left/right edges. Drive the height from the banner's own aspect
   ratio instead, so the whole image is always visible.
   ========================================================================== */
#desktop-view .intro-slider-container,
#desktop-view .intro-slider-container .intro-slide{
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:1440 / 450;
}

/* Mobile: main-style.css:1198 pins the slide to 250px !important, so cover
   crops by a different amount at every width. The 480x390 banners only carry
   artwork between y71 and y266; the rest is padding. A 2:1 box at 32% keeps
   the width whole and trims that padding instead of the art. */
#mobile-view .intro-slider-container,
#mobile-view .intro-slider-container .intro-slide{
  height:auto !important;
  min-height:0;
  max-height:none;
}
/* Ratio on the slide only — the container stays auto so the dots below it are
   part of its height rather than overflowing the box. */
#mobile-view .intro-slider-container .intro-slide{
  aspect-ratio:2 / 1;
  background-size:cover;
  background-position:center 32%;
}
/* Dots sat 20px inside the slide, which lands on the banner text now that the
   box is cropped tight. Drop them out of the art instead of over it. */
#mobile-view .intro-slider-container .owl-simple.owl-nav-inside .owl-dots{
  position:static;
  margin:6px 0 2px;
}

/* ==========================================================================
   MOBILE — deliberately not designed yet.
   A separate mobile Figma is coming; these rules only stop the desktop
   layout from breaking outright on a narrow screen. Replace wholesale when
   the mobile frames arrive rather than building on them.
   ========================================================================== */

/* ==========================================================================
   MOBILE — from the mobile Figma (393px frame)
   ========================================================================== */

/* Category icon row + Upcoming Matches are mobile-only components; the two
   big desktop bands are their desktop equivalent. */
.hw-catrow,
.hw-match{display:none;}

@media (max-width:767px){

  /* Desktop bands off, mobile row on */
  .hw-cat{display:none;}
  .hw-catrow{display:block;background:var(--hw-page-bg,#000);padding:16px 10px 4px;}
  .hw-catrow ul{
    display:flex;justify-content:space-between;align-items:flex-start;
    gap:10px;list-style:none;margin:0;padding:0;
    max-width:374px;margin-inline:auto;
  }
  .hw-catrow li{flex:1 1 0;min-width:0;}
  .hw-catrow a{
    display:flex;flex-direction:column;align-items:center;gap:8px;
    text-decoration:none;
  }
  .hw-catrow__icon{width:30px;height:30px;display:block;}
  .hw-catrow__icon img{width:100%;height:100%;object-fit:contain;display:block;}
  .hw-catrow__label{
    font-family:var(--hw-font);
    font-size:10px;line-height:1.2;font-weight:700;
    letter-spacing:-0.05em;text-align:center;
    color:var(--hw-on-surface,#fff);
  }

  /* Upcoming matches */
  .hw-match{
    display:block;background:var(--hw-page-bg,#000);
    padding:20px 10px 0;
  }
  .hw-match__title{
    margin:0 0 16px;
    font-family:var(--hw-font);
    font-size:18px;line-height:21px;font-weight:700;
    text-align:center;text-transform:uppercase;
    color:var(--hw-on-surface,#fff);
  }
  .hw-match__card{
    display:flex;align-items:flex-end;justify-content:center;
    gap:11px;padding:16px;
    max-width:374px;margin-inline:auto;
    border:1px solid #F8CD59;
    border-radius:20px;
  }
  .hw-match__side{
    flex:0 0 108px;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    text-align:center;
  }
  .hw-match__crest{
    width:108px;height:108px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid #949595;border-radius:100px;
    overflow:hidden;
  }
  .hw-match__crest img{width:70px;height:70px;object-fit:contain;display:block;}
  .hw-match__team{
    font-family:var(--hw-font);font-size:12px;line-height:14px;font-weight:700;
    color:var(--hw-on-surface,#fff);
  }
  .hw-match__odds{
    font-family:var(--hw-font);font-size:16px;line-height:23px;font-weight:900;
    color:#FCC12E;
  }
  .hw-match__where{
    font-family:var(--hw-font);font-size:10px;line-height:11px;font-weight:700;
    color:var(--hw-muted,#B3B3B3);
  }
  .hw-match__mid{
    flex:0 0 100px;
    display:flex;flex-direction:column;align-items:center;gap:14px;
    padding:6px 0;
  }
  .hw-match__vs{
    font-family:var(--hw-font);font-size:36px;line-height:41px;font-weight:700;
    color:var(--hw-on-surface,#fff);
  }
  .hw-match__bet{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:30px;padding:8px 18px;
    background:#D7A634;border-radius:20px;
    font-family:var(--hw-font);font-size:10px;line-height:11px;font-weight:700;
    text-transform:uppercase;text-decoration:none;color:#000;
    white-space:nowrap;
  }
  .hw-match__when{
    font-family:var(--hw-font);font-size:10px;line-height:11px;
    font-weight:700;font-style:italic;text-align:center;
    color:var(--hw-muted,#B3B3B3);
  }

  /* Section headings all centre at 18px on mobile */
  .hw-how__title,
  .hw-lv__title{font-size:18px;line-height:21px;text-align:center;}

  .hw-how{padding:20px 10px;}
  .hw-how__list{gap:6px;}
  .hw-how__item{width:70px;gap:12px;}
  .hw-how__tile{width:70px;height:70px;border:0;}
  .hw-how__label{font-size:12px;}

  .hw-lv{padding:20px 0 0;}
  .hw-lv__inner{flex-direction:column;gap:16px;padding-inline:10px;}
  .hw-lv__frame{border:1px solid var(--hw-gold,#FACF5A);border-radius:15px;}
  .hw-txn{border:1px solid var(--hw-gold,#FACF5A);border-radius:15px;padding:10px;gap:15px;}
  .hw-txn__tabs{gap:10px;}
  .hw-txn__tab{border-radius:8px;font-size:10px;min-height:40px;}
  .hw-txn__tab.is-active{background:#000;box-shadow:inset 0 0 80px rgba(240,192,64,.3);}
  .hw-txn__table th{color:var(--hw-gold,#FACF5A);font-size:12px;}
  .hw-txn__table td{font-size:12px;color:#EEEEEE;}
  .hw-txn__table td.hw-txn__amt{color:var(--hw-txn-amt,#8FD18F);}
  .hw-txn__table td.hw-txn__time{color:#EEEEEE;}

  /* Notice bar has no READ ALL on mobile. The mobile frame insets its row by
     6px (381 wide in a 393 frame), unlike the full-bleed desktop bar. */
  .hw-announce{min-height:30px;height:30px;}
  .hw-announce__inner{padding:0 6px;}
}

/* Homepage SEO copy - sits between the home footer banner and the site footer.
   Continues the footer's dark gradient so it doesn't read as a white gap.
   Sizes are px, NOT rem: wonderwin / houseofwinners set html{font-size:62.5%},
   which would shrink this whole band to ~62%.
   Per-brand: override --seo-accent only. */
.home-seo-content {
	--seo-bg-top: #241f1f;
	--seo-bg-bottom: #1b1717;
	--seo-accent: #FACF5A;
	/* 0.62 was too dim to read comfortably at 13px against #1b1717. */
	--seo-text: rgba(255, 255, 255, 0.82);

	background: linear-gradient(180deg, var(--seo-bg-top) 0%, var(--seo-bg-bottom) 100%);
	border-top: 2px solid var(--seo-accent);
	color: var(--seo-text);
	font-size: 13px;
	line-height: 1.75;
	padding: 36px 0 40px;
}

.home-seo-content .container {
	/* The legacy theme sets .container{width:1188px;max-width:100%} in
	   css/style.css. The max-width below overrides that 100% cap, which would
	   otherwise be the only thing holding the fixed 1188px in check - without
	   width:100% here the band renders 1100px wide inside a 390px phone and
	   scrolls the whole homepage sideways. */
	width: 100%;
	max-width: 1100px;
	padding-left: 16px;
	padding-right: 16px;
	/* CKEditor content is user-authored - never let a long word or a pasted URL
	   push the page wider than the viewport. */
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* CKEditor emits h2/h3/p/ul/a/table - style them explicitly or they inherit
   page defaults that were never designed to sit on a dark band. */
.home-seo-content h1,
.home-seo-content h2,
.home-seo-content h3,
.home-seo-content h4 {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	margin: 24px 0 10px;
}

.home-seo-content > .container > :first-child {
	margin-top: 0;
}

/* Colour the descendants EXPLICITLY rather than relying on inheritance from
   .home-seo-content. Any theme rule that matches these elements directly beats
   an inherited value, which is how houseofwinners ended up with dim body copy.
   Inline colours set in CKEditor still win over all of this, as they should. */
.home-seo-content p,
.home-seo-content li,
.home-seo-content td,
.home-seo-content th,
.home-seo-content strong,
.home-seo-content em,
.home-seo-content u,
.home-seo-content s,
.home-seo-content span {
	color: var(--seo-text);
}

.home-seo-content p {
	margin: 0 0 14px;
}

.home-seo-content ul,
.home-seo-content ol {
	margin: 0 0 14px 18px;
	padding: 0;
}

.home-seo-content img {
	max-width: 100%;
	height: auto;
}

.home-seo-content a {
	color: var(--seo-accent);
	filter: brightness(1.4);
	text-decoration: none;
}

.home-seo-content a:hover {
	text-decoration: underline;
}

/* A wide table must scroll inside its own box - otherwise it stretches the
   whole page sideways on a phone. */
.home-seo-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 0 0 16px;
}

.home-seo-content th,
.home-seo-content td {
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 7px 10px;
}

/* Mobile: just tighten the type. Do NOT clamp the height here - an
   overflow:hidden container makes the rest of the copy unreachable, since
   there is no expander and the page cannot scroll inside it. */
@media (max-width: 767.98px) {
	.home-seo-content {
		padding: 24px 0 28px;
		font-size: 12px;
	}

	.home-seo-content h1,
	.home-seo-content h2,
	.home-seo-content h3,
	.home-seo-content h4 {
		font-size: 15px;
	}
}