/* ============================================================
   BetMGM "The Roar" — replica design system
   Hand-written, lean. Tokens extracted from the original CSS.
   ============================================================ */

/* ---------- Fonts (local) ---------- */
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/roboto-condensed-700.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/roboto-300.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/roboto-300italic.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/roboto-400.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/roboto-400italic.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/roboto-500.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/roboto-700.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/roboto-700italic.woff2') format('woff2');}

/* ---------- Tokens ---------- */
:root{
  --gold:#c0aa71; --gold-deep:#baa564; --gold-border:#bda871; --gold-headline:#c0a971;
  --black:#000; --ink:#19191b; --surface:#2a292f; --surface-2:#2a2a2e;
  --paper:#fafafa; --white:#fff; --alert:#dd3737;
  --header-h:112px;
  --c-bg:var(--paper); --c-text:#19191b; --c-muted:#5b5b62; --c-card:#000;
  --c-section:#f1ece1; --c-border:#e3ddcf; --c-input-bg:#fff; --c-input-border:#cfcabb;
  --font-display:'Roboto Condensed',Arial,sans-serif; --font-body:'Roboto',Arial,sans-serif;
  --maxw:1170px;
}
body.night{
  --c-bg:#141416; --c-text:#f3f3f4; --c-muted:#a9a9b2; --c-card:#000;
  --c-section:#2a292f; --c-border:#33333a; --c-input-bg:#1d1d20; --c-input-border:#3a3a42;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--font-body);
  font-size:16px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;transition:background .35s ease,color .35s ease;}
img{max-width:100%;height:auto;display:block;border:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.1;margin:0 0 .4em;}
ul{margin:0;padding:0;list-style:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.gold{color:var(--gold);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:100;background:var(--ink);color:#fff;
  border-bottom:1px solid #000;box-shadow:0 2px 14px rgba(0,0,0,.35);}
.topbar{display:flex;align-items:center;gap:22px;height:64px;}
.brand{display:flex;align-items:center;gap:18px;}
.brand .logo{height:30px;width:auto;}
.brand .roar{height:24px;width:auto;}
.product-nav{display:flex;gap:4px;}
.product-nav a{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:4px;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:14px;
  letter-spacing:.03em;color:#fff;transition:background .2s ease,color .2s ease;}
.product-nav a:hover{background:rgba(192,170,113,.16);color:var(--gold);}
.product-nav img{width:20px;height:20px;filter:brightness(0) invert(1);}
.product-nav a:hover img{filter:none;}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px;}
.icon-btn{background:none;border:0;padding:6px;display:inline-flex;border-radius:50%;}
.icon-btn img{width:22px;height:22px;filter:brightness(0) invert(1);}
.icon-btn:hover{background:rgba(255,255,255,.1);}
.day-icon{display:none;}
body.night .day-icon{display:block;}
body.night .night-icon{display:none;}

/* buttons in header */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  border-radius:3px;border:1px solid transparent;text-align:center;transition:all .2s ease;white-space:nowrap;}
.btn-login{padding:9px 20px;font-size:14px;background:transparent;color:#fff;border-color:rgba(255,255,255,.55);border-radius:30px;}
.btn-login:hover{background:#fff;color:#000;border-color:#fff;}
.btn-offer{padding:9px 20px;font-size:14px;background:var(--gold);color:#000;border-radius:30px;border-color:var(--gold);}
.btn-offer:hover{background:#d4c08e;border-color:#d4c08e;}

/* sports nav */
.sports-nav{background:#222;border-top:1px solid rgba(255,255,255,.06);}
.sports-nav .container{display:flex;align-items:center;gap:2px;overflow-x:auto;}
.sports-nav a{padding:13px 14px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:13.5px;letter-spacing:.04em;color:#dcdce0;white-space:nowrap;border-bottom:3px solid transparent;transition:color .2s,border-color .2s;}
.sports-nav a:hover{color:var(--gold);border-bottom-color:var(--gold);}
.nav-toggle{display:none;}

/* ============================================================
   HERO  (promo header)
   ============================================================ */
.promo-header{position:relative;background:#000 center/cover no-repeat;color:#fff;overflow:hidden;}
.promo-header::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(231,222,202,.92) 0%,rgba(231,222,202,.78) 30%,rgba(231,222,202,0) 56%);}
.promo-header .container{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;min-height:430px;}
.hero-col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:38px 10px;}
.hero-offer{max-width:430px;width:100%;animation:rise .7s .05s both;}
.hero-actions{display:flex;flex-direction:column;align-items:center;gap:18px;animation:rise .7s .18s both;}
.btn-register{background:#000;color:#fff;border:1px solid #fff;border-radius:2px;
  font-size:18px;padding:12px 40px;}
.btn-register:hover{background:#fff;color:#000;}
.store-badges{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;}
.store-badges img{height:46px;width:auto;}
.store-badges a{transition:transform .2s ease;}
.store-badges a:hover{transform:translateY(-3px);}
@keyframes rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.section{padding:46px 0;}
.section-band{background:var(--surface);border-top:2px solid var(--gold-border);border-bottom:2px solid var(--gold-border);}
.h-title{font-size:34px;text-transform:uppercase;text-align:center;color:var(--gold-headline);letter-spacing:.01em;}
.h-sub{text-align:center;color:var(--c-muted);max-width:760px;margin:0 auto 8px;}
.section-band .h-sub{color:#cfc7b3;}

/* ============================================================
   PROMO CARDS
   ============================================================ */
.promo-grid{display:flex;flex-direction:column;gap:26px;margin-top:30px;}
.promo-card{display:flex;flex-wrap:wrap;align-items:center;gap:0;background:var(--black);
  border-radius:6px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .25s ease,box-shadow .25s ease;}
.promo-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.4);}
.promo-card .card-media{flex:0 0 42%;max-width:42%;}
.promo-card .card-media img{width:100%;height:100%;object-fit:cover;}
.promo-card .card-body{flex:1;min-width:280px;padding:30px 34px;color:#fff;}
.promo-card .card-body h2,.promo-card .card-body h3{color:#fff;font-size:26px;margin-bottom:12px;}
.promo-card .card-lead{font-size:18px;line-height:1.5;margin:0 0 8px;}
.promo-card .card-fine{font-size:13px;color:#b9b9c0;margin:0 0 20px;}
.btn-pill{display:flex;width:100%;align-items:center;justify-content:center;text-align:center;
  font-size:18px;padding:15px 20px;border-radius:50px;border:1px solid var(--gold);color:#fff;background:transparent;}
.btn-pill:hover{background:var(--gold);color:#000;}

/* states explore */
.explore{margin-top:34px;text-align:center;}
.state-select{font-family:var(--font-body);font-size:16px;color:var(--c-text);background:var(--c-input-bg);
  border:1px solid var(--gold-border);border-radius:6px;padding:13px 16px;min-width:330px;max-width:100%;
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;background-size:6px 6px,6px 6px;background-repeat:no-repeat;cursor:pointer;}
.state-select:focus{outline:2px solid var(--gold);outline-offset:1px;}

/* team odds */
.odds-list{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:24px 0;}
.odds-list a{display:inline-flex;align-items:center;gap:8px;background:var(--c-card);color:#fff;
  border:1px solid var(--gold-border);border-radius:40px;padding:11px 22px;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.03em;transition:all .2s ease;}
.odds-list a:hover{background:var(--gold);color:#000;border-color:var(--gold);}
.center-cta{text-align:center;margin-top:18px;}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.accordion{max-width:900px;margin:26px auto 0;border:1px solid var(--c-border);border-radius:8px;overflow:hidden;background:var(--c-input-bg);}
.acc-item{border-bottom:2px solid var(--gold-deep);}
.acc-item:last-child{border-bottom:0;}
.acc-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:0;padding:22px 24px;text-align:left;font-family:var(--font-display);
  font-weight:700;font-size:19px;color:var(--c-text);}
.acc-toggle:hover{color:var(--gold-headline);}
.acc-icon{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .3s ease;}
.acc-icon::before,.acc-icon::after{content:"";position:absolute;background:var(--gold);border-radius:2px;}
.acc-icon::before{top:50%;left:0;right:0;height:3px;transform:translateY(-50%);}
.acc-icon::after{left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);transition:opacity .3s ease;}
.acc-item.open .acc-icon::after{opacity:0;}
.acc-item.open .acc-icon{transform:rotate(180deg);}
.acc-content{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.acc-content .inner{padding:0 24px 22px;color:var(--c-muted);}
.acc-item.open .acc-content{max-height:480px;}

/* ============================================================
   PROSE (promo code, how-to, legal pages)
   ============================================================ */
.prose{max-width:860px;margin:0 auto;}
.prose h2{font-size:28px;text-transform:uppercase;color:var(--gold-headline);margin-top:0;}
.prose h3{font-size:20px;text-transform:uppercase;margin:28px 0 10px;}
.prose p{margin:0 0 16px;}
.prose ul{list-style:disc;padding-left:22px;margin:0 0 16px;}
.prose ul li{margin-bottom:8px;}
.prose .code-chip{display:inline-block;font-family:var(--font-display);font-weight:700;letter-spacing:.08em;
  background:var(--gold);color:#000;padding:4px 14px;border-radius:4px;font-size:18px;}
/* prose sitting on the dark band: keep text readable (white) */
.section-band .prose{color:#fff;}
.section-band .prose h3,.section-band .prose strong{color:#fff;}
.section-band .prose p,.section-band .prose li{color:#eceaf0;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:#cfcfd4;border-top:3px solid var(--gold);padding:48px 0 30px;font-size:14px;}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.footer-grid h4{color:var(--gold);font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px;}
.footer-grid a{color:#cfcfd4;line-height:2;transition:color .2s ease;}
.footer-grid a:hover{color:var(--gold);}
.footer-social{display:flex;gap:16px;margin-top:8px;}
.footer-social img{width:24px;height:24px;filter:brightness(0) invert(1);opacity:.85;}
.footer-social a:hover img{opacity:1;}
.footer-logos{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin:34px 0 22px;opacity:.85;}
.footer-logos img{height:54px;width:auto;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;color:#8f8f98;font-size:12.5px;line-height:1.7;}
.footer-bottom .rg{color:var(--gold);font-weight:700;}
.footer-bottom a{color:#b9b9c0;text-decoration:underline;}
.footer-company{margin-top:14px;color:#8f8f98;font-size:12.5px;line-height:1.7;font-style:normal;}
.footer-company strong{color:#cfcfd4;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1023px){
  .product-nav .menu-label{display:none;}
  .promo-header .container{grid-template-columns:1fr;min-height:0;}
  .promo-header::after{background:linear-gradient(180deg,rgba(231,222,202,.92) 0%,rgba(231,222,202,.75) 55%,rgba(231,222,202,.15) 100%);}
  .hero-col.hero-art{display:none;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:639px){
  :root{--header-h:96px;}
  .topbar{height:auto;flex-wrap:wrap;padding:10px 0;gap:12px;}
  .product-nav{display:none;}
  .product-nav.open{display:flex;flex-direction:column;width:100%;order:5;}
  .product-nav.open .menu-label{display:inline;}
  .header-actions{margin-left:auto;}
  .nav-toggle{display:inline-flex;background:none;border:0;padding:6px;}
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:24px;height:2px;background:#fff;position:relative;}
  .nav-toggle span::before{position:absolute;top:-7px;}
  .nav-toggle span::after{position:absolute;top:7px;}
  .h-title{font-size:26px;}
  .promo-card .card-media,.promo-card .card-body{flex:1 1 100%;max-width:100%;}
  .promo-card .card-body{padding:24px;}
  .footer-grid{grid-template-columns:1fr;gap:24px;}
  .state-select{min-width:0;width:100%;}
}