/* ==========================================================================
   House of Winners — header
   Loaded LAST, after all legacy stylesheets. Everything is scoped under
   .hw-nav so it cannot leak into pages that still use the old skin.

   Deliberately depends on NO new JavaScript. Dropdowns reuse Bootstrap's
   existing data-toggle, the burger reuses .mobile-menu-toggler from main.js,
   and the megamenu markup from headerMenu() is left untouched.
   ========================================================================== */

.hw-nav{
  /* Side padding on each nav link. The active underline is the link's bottom
     border, so this is also how far the underline extends past its label on
     each side. The <ul> offsets itself by the same amount (see .hw-nav .menu)
     so the first label still lines up with the logo. */
  --hw-nav-item-pad:10px;
  background:var(--hw-surface);
  font-family:var(--hw-font);
  font-size:var(--hw-fs);
  line-height:var(--hw-lh);
  font-weight:var(--hw-fw);
  color:var(--hw-on-surface);
  position:sticky;      /* replaces the legacy .sticky-header + Waypoints    */
  top:0;
  z-index:var(--hw-z-nav);
}
.hw-nav *,
.hw-nav *::before,
.hw-nav *::after{box-sizing:border-box;}
.hw-nav a{text-decoration:none;color:inherit;}
.hw-nav a:hover{text-decoration:none;}
.hw-nav ul{list-style:none;margin:0;padding:0;}
.hw-nav button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
.hw-nav img{max-width:100%;}

.hw-container{
  max-width:var(--hw-container);
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
  width:100%;
}

/* --------------------------------------------------------------------------
   Top band — logo + account cluster
   -------------------------------------------------------------------------- */
.hw-nav__top{
  min-height:var(--hw-band-top);
  display:flex;
  align-items:center;
}
.hw-nav__top > .hw-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--hw-gap-lg);
}

/* Logo — height-driven, width free: $logoUrl is admin-uploadable so the
   aspect ratio is unknown at build time. */
.hw-nav .hw-logo{
  flex:0 0 auto;
  display:block;
  height:70px;
  width:auto;
  max-width:180px;
}
.hw-nav .hw-logo img{
  height:100%;
  width:auto;
  max-width:180px;
  object-fit:contain;
  object-position:left center;
  display:block;
}

.hw-account{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--hw-gap-sm);
  min-width:0;
}
.hw-account__meta{
  display:flex;
  align-items:center;
  gap:var(--hw-gap-md);
}
.hw-account__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--hw-gap-lg);
}
.hw-account__cluster{
  display:flex;
  align-items:center;
  gap:var(--hw-gap-md);
}

.hw-welcome{color:var(--hw-gold);text-transform:capitalize;white-space:nowrap;}
.hw-clock{color:var(--hw-on-surface);white-space:nowrap;}
.hw-clock p{margin:0;display:inline;}

/* Divider — Figma drew a 15px line rotated 90deg; that's just a vrule. */
.hw-rule{
  display:block;
  width:1px;
  height:16px;
  background:var(--hw-rule);
  flex:0 0 auto;
}

.hw-action{
  color:var(--hw-on-surface);
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .15s ease;
}
.hw-action:hover,
.hw-action:focus-visible{color:var(--hw-gold);}

/* Wallet pill. The total is only collected when tapped — it takes a round trip to
   each kiosk provider — so the wallet icon swaps to a spinner while that runs. */
.hw-wallet{
  display:inline-flex;
  align-items:center;
  gap:var(--hw-gap-sm);
  min-width:132px;
  min-height:30px;
  padding:4px var(--hw-gap-sm);
  border:1px solid var(--hw-gold-line);
  border-radius:var(--hw-radius);
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.hw-wallet:hover,
.hw-wallet:focus-visible{border-color:var(--hw-gold);background:rgba(250,207,90,.06);}
.hw-wallet .hw-icon{width:25px;height:25px;color:var(--hw-gold);flex:0 0 auto;}

/* Matches the i-Point value, so the two pills read as a pair. */
#hw-wallet-amount{font-weight:700;color:var(--hw-gold);}

/* Unknown balance. Masked dots plus the refresh glyph say "hidden, tap to
   check" — a bare dash just read as broken. */
.hw-wallet__dots{font-style:normal;letter-spacing:.16em;opacity:.85;}
.hw-wallet:hover .hw-wallet__dots{opacity:1;}

.hw-wallet__refresh{
  width:14px;
  height:14px;
  margin-left:auto;      /* sits on the right edge whatever the value's width */
  flex:0 0 auto;
  color:var(--hw-gold);
  opacity:.7;
  transition:opacity .15s ease;
}
.hw-wallet:hover .hw-wallet__refresh{opacity:1;}

/* Spinner sits in the icon's place, so the pill never changes width mid-load. */
.hw-wallet__spinner{
  display:none;
  width:25px;
  height:25px;
  flex:0 0 auto;
  border:2px solid var(--hw-gold-line);
  border-top-color:var(--hw-gold);
  border-radius:50%;
  animation:hw-wallet-spin .7s linear infinite;
}
.hw-wallet.is-loading{cursor:progress;}
.hw-wallet.is-loading .hw-icon{display:none;}
.hw-wallet.is-loading .hw-wallet__spinner{display:block;}
.hw-wallet.is-loading #hw-wallet-amount{opacity:.55;}
/* visibility, not display — the pill must not resize mid-load. */
.hw-wallet.is-loading .hw-wallet__refresh{visibility:hidden;}

@keyframes hw-wallet-spin{to{transform:rotate(360deg);}}

/* i-Point pill — same shell as .hw-wallet so the two read as a pair. No
   min-width: the wallet reserves space for a figure it loads later, this one
   is already rendered and should hug its value. */
.hw-ipoint{
  display:inline-flex;
  align-items:center;
  gap:var(--hw-gap-sm);
  min-height:30px;
  padding:4px var(--hw-gap-sm);
  border:1px solid var(--hw-gold-line);
  border-radius:var(--hw-radius);
  white-space:nowrap;
  color:var(--hw-on-surface);
  text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease;
}
.hw-ipoint:hover,
.hw-ipoint:focus-visible{
  background:rgba(250,207,90,.10);
  border-color:var(--hw-gold);
  color:var(--hw-on-surface);
  text-decoration:none;
}
.hw-ipoint:focus-visible{outline:2px solid var(--hw-focus);outline-offset:2px;}
/* 25px to match .hw-wallet — its icon is what sets the pill's 35px height, so
   a smaller glyph here would leave this pill shorter. */
.hw-ipoint .hw-icon{width:25px;height:25px;color:var(--hw-gold);flex:0 0 auto;}
.hw-ipoint #hw-ipoint-amount{font-weight:700;color:var(--hw-gold);}
.hw-ipoint__unit{color:var(--hw-on-surface);}

.hw-icon{display:block;flex:0 0 auto;}
/* Sized against the 14px base (Figma drew 15px against 12px). */
.hw-icon--sm{width:16px;height:16px;}

/* --------------------------------------------------------------------------
   Dropdowns — restyling Bootstrap's, not replacing it
   -------------------------------------------------------------------------- */
.hw-nav .dropdown{position:relative;}

.hw-nav .hw-avatar{
  width:32px;height:32px;
  color:var(--hw-gold);
  display:block;
  border-radius:50%;
  transition:opacity .15s ease;
}
.hw-nav .hw-avatar:hover{opacity:.8;}
.hw-nav .hw-avatar .hw-icon{width:32px;height:32px;}
.hw-nav .hw-avatar::after{display:none;}   /* kill Bootstrap's caret */

.hw-lang__toggle{
  display:inline-flex;
  align-items:center;
  gap:var(--hw-gap-xs);
  color:var(--hw-on-surface);
  text-transform:uppercase;
  white-space:nowrap;
}
.hw-lang__toggle::after{display:none;}     /* kill Bootstrap's caret */
.hw-lang__toggle .hw-icon--globe{color:var(--hw-gold);}
.hw-lang__caret{
  width:16px;height:16px;color:var(--hw-gold);
  transition:transform .15s ease;
}
.hw-nav .show > .hw-lang__toggle .hw-lang__caret{transform:rotate(180deg);}

.hw-nav .dropdown-menu{
  background:var(--hw-surface-raised);
  border:1px solid var(--hw-gold-line);
  border-radius:var(--hw-radius);
  padding:6px;
  margin-top:10px;
  min-width:180px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  font-size:var(--hw-fs);
}
.hw-nav .dropdown-menu a,
.hw-nav .dropdown-menu .btn{
  display:block;
  width:100%;
  padding:8px 10px;
  border:0;
  border-radius:3px;
  background:none;
  color:var(--hw-on-surface);
  font-size:var(--hw-fs);
  font-weight:var(--hw-fw);
  text-align:left;
  white-space:nowrap;
  transition:background .12s ease,color .12s ease;
}
.hw-nav .dropdown-menu a:hover,
.hw-nav .dropdown-menu .btn:hover{
  background:rgba(250,207,90,.12);
  color:var(--hw-gold);
}
.hw-nav .dropdown-menu .btn-danger{color:var(--hw-on-surface);}
.hw-nav .dropdown-menu .btn-danger:hover{background:rgba(220,53,69,.18);color:var(--hw-danger);}
.hw-nav .dropdown-menu i{margin-right:8px;}
.hw-dropdown__sep{height:1px;background:var(--hw-rule);margin:6px 4px;}

/* --------------------------------------------------------------------------
   Logged-out auth buttons — now from the real Figma frame
   -------------------------------------------------------------------------- */
.hw-account__actions--auth{gap:var(--hw-gap-btn);}   /* 10px, not the 30px used logged-in */

.hw-nav .hw-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:100px;
  min-height:30px;
  padding:6px 18px;
  border-radius:var(--hw-radius-pill);
  font-size:var(--hw-fs-btn);
  font-weight:900;                 /* heavier than the 700 used elsewhere */
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
  transition:filter .15s ease,box-shadow .15s ease;
}
/* Figma stacked a solid #3B4461 over an older dark gradient; the top layer
   is fully opaque, so the gradient beneath never shows. Solid fill it is. */
.hw-nav .hw-btn--login{
  background:var(--hw-btn-login-bg);
  color:var(--hw-on-surface);
}
.hw-nav .hw-btn--join{
  background:var(--hw-gold-gradient);
  color:var(--hw-surface);
}
/* Hover states are invented — the frame supplies rest state only. */
.hw-nav .hw-btn:hover{filter:brightness(1.12);}
.hw-nav .hw-btn--join:hover{box-shadow:0 0 12px rgba(243,201,97,.35);}

/* --------------------------------------------------------------------------
   Bottom band — primary nav.
   The <ul class="menu sf-arrows"> markup and headerMenu() output are
   untouched so superfish and the megamenu keep working; these rules just
   override the legacy skin. No overflow clipping — the megamenu escapes.
   -------------------------------------------------------------------------- */
.hw-nav__bottom{
  min-height:var(--hw-band-bottom);
  display:flex;
  align-items:center;
}
/* Both resets undo style.css:1801 — `.main-nav{margin-left:2rem;display:none}`.
   The margin (2rem = 20px, html is 62.5%) offset the whole bar so the centred
   <ul> sat 20px right of true page centre. The display:none is only lifted at
   min-width:992px there, which would blank this band between 768–991px; the
   redesign switches to the off-canvas panel at 767px instead. */
.hw-nav .main-nav{width:100%;margin:0;display:block;}

.hw-nav .menu{
  display:flex;
  align-items:center;
  justify-content:flex-start;  /* left-aligned, not centred across the bar */
  /* Figma says a flat 50px for exactly 7 items, but the menu is built from
     $pageQuery — admins add and remove pages. This compresses instead.
     Measured label-to-label: the -20px cancels the side padding the two
     neighbouring links now carry, so this stays a gap between LABELS rather
     than between padding boxes and the rhythm is unchanged. */
  gap:clamp(8px, calc(3.4vw - 2 * var(--hw-nav-item-pad)), var(--hw-gap-lg));
  padding:0;
  /* Pull the row left by one link's side padding so the first LABEL — not its
     padding box — sits on the container content edge, flush with the logo. */
  margin:0 0 0 calc(-1 * var(--hw-nav-item-pad));
  min-width:0;
}
.hw-nav .menu > li{
  margin:0;
  padding:0;
  float:none;          /* legacy .menu floats its items */
  position:relative;
}
.hw-nav .menu > li > a{
  display:block;
  /* Vertically asymmetric on purpose: the 2px border-bottom below is part of
     the box, so 5px + 2px under balances the 7px above and the label lands on
     the band's optical centre. An even 6px/6px sits it 1px high. */
  padding:7px var(--hw-nav-item-pad) 5px;
  color:var(--hw-on-surface);
  font-family:var(--hw-font);
  font-size:var(--hw-fs);
  font-weight:var(--hw-fw);
  line-height:var(--hw-lh);
  text-transform:uppercase;
  letter-spacing:0;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.hw-nav .menu > li > a:hover,
.hw-nav .menu > li > a:focus-visible{color:var(--hw-gold);}
.hw-nav .menu > li.active > a,
.hw-nav .menu > li > a.active{
  color:var(--hw-gold);
  border-bottom-color:var(--hw-gold);
}
/* Superfish injects its own arrow markup; the new bar has no room for it. */
.hw-nav .menu .sf-with-ul::after{display:none;}
/* ...and the space style.css:1944 reserves for that arrow —
   `.menu.sf-arrows>li>.sf-with-ul{padding-right:2rem}` — which at (0,3,1)
   outranks the padding shorthand above (0,2,2) and so overrode its right side.
   headerMenu() no longer emits .sf-with-ul so nothing should match, but
   superfish re-adds both that class and .sf-arrows on its own if a submenu ever
   reappears; this keeps the label centred in its box and the underline
   symmetrical about it. */
.hw-nav .menu.sf-arrows > li > a{padding-right:var(--hw-nav-item-pad);}

/* Defensive only — headerMenu() no longer emits the legacy .megamenu .demo
   thumbnail panel for livecasino/slot/sportbook (see general_helper.php). It was
   never restyled for the dark header and read as a stray white panel on hover.
   Hiding it here was not enough on its own: superfish cancels the click on any
   <a> that has a hidden popUpSelector sibling, so a permanently-hidden panel
   made Slot Game / Live Casino / Sportsbook unclickable. The panel is gone at
   the source now; this rule stays as a guard. !important beats
   `.menu li:hover>.megamenu{display:block}` (style.css:1823). Scoped to .hw-nav
   — the mobile off-canvas menu in footer.php is unaffected. */
.hw-nav .menu .megamenu{display:none !important;}

/* --------------------------------------------------------------------------
   Burger — reuses .mobile-menu-toggler, which main.js already binds to the
   off-canvas panel in footer.php. No new JS.
   -------------------------------------------------------------------------- */
.hw-nav .mobile-menu-toggler{
  display:none;
  width:30px;height:30px;
  color:var(--hw-on-surface);
  flex:0 0 auto;
}
.hw-nav .mobile-menu-toggler .hw-icon{width:30px;height:30px;}

/* Mobile-only language trigger (opens the existing #language-modal) */
.hw-lang-mobile{display:none;color:var(--hw-gold);}
.hw-lang-mobile .hw-icon{width:24px;height:24px;}

/* --------------------------------------------------------------------------
   Accessibility — concerns the Figma has no opinion on
   -------------------------------------------------------------------------- */
.hw-nav a:focus-visible,
.hw-nav button:focus-visible{
  outline:2px solid var(--hw-focus);
  outline-offset:3px;
  border-radius:2px;
}
@media (pointer:coarse){
  .hw-nav .menu > li > a,
  .hw-lang__toggle,
  .hw-action,
  .hw-nav .hw-avatar{min-height:44px;display:flex;align-items:center;}
  .hw-nav .hw-avatar{min-width:44px;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .hw-nav *{transition:none !important;}
}

/* --------------------------------------------------------------------------
   Responsive — INVENTED. No mobile frame was supplied; this is a sensible
   fallback, not the design. Replace once a mobile frame exists.
   -------------------------------------------------------------------------- */
@media (max-width:991px){
  .hw-nav .hw-clock,
  .hw-account__meta .hw-rule{display:none;}
}
@media (max-width:767px){
  .hw-nav{position:static;}                 /* don't eat scarce vertical space */
  .hw-nav .mobile-menu-toggler{display:block;}
  .hw-lang-mobile{display:block;}
  .hw-nav__top > .hw-container{gap:var(--hw-gap-md);}
  .hw-account__meta{display:none;}
  .hw-action{display:none;}
  .hw-nav .hw-logo{height:52px;}
  .hw-nav__bottom{display:none;}            /* off-canvas panel takes over */
  .hw-account__actions{gap:var(--hw-gap-md);}
}

/* ==========================================================================
   MOBILE HEADER — from the mobile Figma
   Hamburger left, logo centred, notification bell right.
   ========================================================================== */
.hw-bell{display:none;position:relative;flex:0 0 auto;}
.hw-bell img{width:18px;height:18px;display:block;}
.hw-bell__dot{
  position:absolute;top:-2px;right:-2px;
  width:7px;height:7px;border-radius:50%;
  background:#E53E3E;
}

@media (max-width:767px){
  .hw-bell{display:block;}

  /* Three-up: burger | logo | bell, logo optically centred */
  .hw-nav__top > .hw-container{
    display:grid;
    grid-template-columns:34px 1fr 34px;
    align-items:center;
    gap:10px;
    padding-inline:14px;
  }
  .hw-nav .mobile-menu-toggler{grid-column:1;justify-self:start;}
  .hw-nav .hw-logo{grid-column:2;justify-self:center;height:44px;}
  .hw-nav .hw-logo img{max-width:140px;object-position:center;}
  .hw-bell{grid-column:3;justify-self:end;}

  /* The account cluster / auth buttons live in the side menu on mobile.
     Scoped to .hw-nav: .hw-auth is the ROOT class of the login and register
     pages (member_login_view / member_register_view), so an unscoped rule here
     blanked both of them on mobile. The header itself renders its logged-out
     buttons as .hw-account__actions--auth and never used .hw-auth. */
  .hw-nav .hw-account,
  .hw-nav .hw-account__actions{display:none;}
}