/* ==========================================================================
   me88 Brand Center — Phase 1 design tokens & chrome
   Loaded AFTER the inlined WP-Rocket used-CSS so these override the legacy
   me88.games-shared template. Intentionally diverges from me88.games:
   - accent: deep teal (not orange)
   - headings: Roboto Slab, weight 600 (games uses Roboto sans, weight 700)
   - button radius: 10px (games uses 5px)
   - container: 1240px (games/Bootstrap uses 1170px)
   ========================================================================== */

:root{
  --bc-teal:#0e7c7b;         /* primary accent — unused on me88.games */
  --bc-teal-dark:#0a4d55;    /* headings / hero */
  --bc-teal-hover:#0b6362;
  --bc-ink:#13233a;          /* body ink */
  --bc-radius:10px;
  --bc-container:1240px;
}

/* Self-hosted heading face (already shipped under /assets/fonts) */
@font-face{
  font-family:'Roboto Slab BC';
  src:url('/assets/fonts/gstatic/robotoslab/v36/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2') format('woff2');
  font-weight:100 900; font-display:swap;
}

/* ---- Type scale (distinct from me88.games 36/30/24 @700 Roboto) ---- */
h1,h2,h3,h4,
.bc-scope h1,.bc-scope h2,.bc-scope h3{
  font-family:'Roboto Slab BC',Georgia,'Times New Roman',serif !important;
  font-weight:600 !important;
  color:var(--bc-teal-dark) !important;
  line-height:1.25;
}
h1,.entry-title,.h-text-wrap h1{font-size:40px !important;}
h2,.h-text-wrap h2{font-size:27px !important;}
h3,.h-text-wrap h3{font-size:20px !important;}
@media (max-width:767px){
  h1,.entry-title,.h-text-wrap h1{font-size:30px !important;}
  h2,.h-text-wrap h2{font-size:23px !important;}
}

/* ---- Wider container ---- */
@media (min-width:1200px){ .container{width:var(--bc-container) !important;} }

/* ---- Register CTA / buttons (teal, 10px radius) ---- */
.navbar-btn-wrap a.joinnow-btn,
.joinnow-btn,.bc-cta{
  display:inline-block;
  background:var(--bc-teal) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:var(--bc-radius) !important;
  padding:10px 24px !important;
  font-weight:600 !important;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background .18s ease;
}
.navbar-btn-wrap a.joinnow-btn:hover,
.joinnow-btn:hover,.bc-cta:hover{ background:var(--bc-teal-hover) !important; color:#fff !important; }

/* ---- Header logo sizing keeps parity after re-export ---- */
#logo img{max-height:48px;width:auto;}

/* ---- Static hero (replaces the 6-banner carousel) ---- */
.bc-hero{
  position:relative;
  background:var(--bc-teal-dark) url('/assets/brand/bc-hero.webp') center/cover no-repeat;
  color:#fff;
  padding:64px 20px;
  text-align:center;
}
.bc-hero__inner{max-width:var(--bc-container);margin:0 auto;}
.bc-hero__title{font-family:'Roboto Slab BC',Georgia,serif;font-weight:600;color:#fff;font-size:38px;margin:0 0 14px;line-height:1.2;}
.bc-hero p{max-width:720px;margin:0 auto 26px;font-size:17px;line-height:1.5;color:#eaf5f4;}
@media (max-width:767px){ .bc-hero{padding:44px 16px;} .bc-hero__title{font-size:27px;} }

/* ---- Games dropdown nav ---- */
.bc-menu .bc-has-dropdown{position:relative;}
.bc-menu .bc-dropdown{
  display:none;position:absolute;left:0;top:100%;min-width:210px;z-index:120;
  background:#fff;border:1px solid #e2e6ea;border-radius:var(--bc-radius);
  box-shadow:0 8px 24px rgba(0,0,0,.10);padding:6px 0;
}
.bc-menu .bc-has-dropdown:hover .bc-dropdown,
.bc-menu .bc-has-dropdown:focus-within .bc-dropdown{display:block;}
.bc-menu .bc-dropdown li{display:block;}
.bc-menu .bc-dropdown a{display:block;padding:9px 18px;color:var(--bc-ink);white-space:nowrap;}
.bc-menu .bc-dropdown a:hover{background:#f2f7f7;color:var(--bc-teal-dark);}
.bc-menu .bc-dropbtn{cursor:default;}
@media (max-width:991px){
  .bc-menu .bc-dropdown{position:static;display:block;box-shadow:none;border:0;padding-left:14px;}
}

/* ---- Brand-center footer ---- */
.bc-footer{background:#0c1a24;color:#c9d4d8;padding:40px 0 8px;}
.bc-footer .container{max-width:var(--bc-container);}
.bc-footer h4{color:#fff !important;font-size:15px !important;letter-spacing:.04em;text-transform:uppercase;margin:0 0 14px;}
.bc-footer__grid{display:flex;flex-wrap:wrap;gap:28px;}
.bc-footer__col{flex:1 1 220px;min-width:200px;}
.bc-footer__badges{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.bc-footer__badges img{background:#fff;border-radius:6px;padding:5px;}
.bc-footer__legal{border-top:1px solid #1c2c38;margin-top:26px;padding:16px 0;font-size:13px;line-height:1.55;color:#9fb0b7;}
.bc-footer__legal a{color:#cfe6e5;}
.bc-footer__nav{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 18px;padding:0;list-style:none;}
.bc-footer__nav a{color:#e7eef0;font-weight:600;}
.bc-footer__meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}

/* ==========================================================================
   Client theme (2026-08): DARK PREMIUM — near-black canvas, orange accents,
   light text. Matches the dark homepage banner.
   ========================================================================== */
:root{
  --bc-orange:#f58d01; --bc-orange-2:#ff7a1a;
  --bc-bg:#0e0e11; --bc-panel:#15151a;
  --bc-ink:#d8dade; --bc-ink-dim:#9aa0a8;
}
/* canvas + soft top glow */
html,body,#page,#wrapper,.site{ background:var(--bc-bg) !important; }
body{
  background:
    radial-gradient(1100px 460px at 50% -160px, rgba(245,141,1,.16), transparent 70%),
    var(--bc-bg) !important;
  background-attachment:fixed !important;
}
.site-content,#content,main,.blocks-container,.tp_bfast_row_full,.block-full-html,
.tp_custom_html,.container,.row,article,.entry-content{ background:transparent !important; }

/* body copy = light */
body,p,li,td,th,span,label,strong,em,blockquote,figcaption,
.entry-content,.h-text-wrap p,.bc-footer__legal{ color:var(--bc-ink) !important; }
/* headings = orange (Roboto Slab from base rules) */
h1,h2,h3,h4,h5,h6,.entry-title,
.h-text-wrap h1,.h-text-wrap h2,.h-text-wrap h3,
.bc-scope h1,.bc-scope h2,.bc-scope h3{ color:var(--bc-orange) !important; }
/* bold text inside headings must inherit orange (not the light body colour) */
h1 strong,h2 strong,h3 strong,h4 strong,.entry-title strong,
.h-text-wrap h1 strong,.h-text-wrap h2 strong,.h-text-wrap h3 strong{ color:inherit !important; }
/* links = orange */
a,main a,.entry-content a{ color:var(--bc-orange-2) !important; }
a:hover,main a:hover,.entry-content a:hover{ color:#ffa64d !important; }

/* header: dark bar with subtle orange underline */
.site-header,#header,nav#site-navigation,.inner-header{ background:#0b0b0e !important; border:0 !important; }
#header{ border-bottom:1px solid rgba(245,141,1,.35) !important; }
.bc-menu a,.bc-menu .bc-dropbtn{ color:var(--bc-ink) !important; }
.bc-menu a:hover,.bc-menu .bc-dropbtn:hover{ color:var(--bc-orange) !important; }
.bc-menu .bc-dropdown{ background:var(--bc-panel) !important; border:1px solid rgba(255,255,255,.08) !important; }
.bc-menu .bc-dropdown a{ color:var(--bc-ink) !important; }
.bc-menu .bc-dropdown a:hover{ background:#22222a !important; color:var(--bc-orange) !important; }

/* CTA: solid orange button, dark label */
.bc-cta,.joinnow-btn,.navbar-btn-wrap a.joinnow-btn{
  background:var(--bc-orange) !important; color:#141414 !important; font-weight:700 !important;
  border:0 !important; border-radius:10px !important;
}
.bc-cta:hover,.joinnow-btn:hover,.navbar-btn-wrap a.joinnow-btn:hover{
  background:var(--bc-orange-2) !important; color:#141414 !important;
}
/* CTA sits inside .entry-content/main where the link rule forces orange text;
   raise specificity so the button label stays dark on the orange button */
.entry-content a.bc-cta,main a.bc-cta,.entry-content a.bc-cta:hover,main a.bc-cta:hover{ color:#141414 !important; }

/* footer: black with orange rule, light text */
.bc-footer{ background:#0b0b0d !important; border-top:2px solid var(--bc-orange) !important; color:var(--bc-ink) !important; }
.bc-footer h4{ color:var(--bc-orange) !important; }
.bc-footer__legal{ color:var(--bc-ink-dim) !important; border-top:1px solid rgba(255,255,255,.10) !important; }
.bc-footer__legal a,.bc-footer__nav a{ color:var(--bc-ink) !important; }
.bc-footer__nav a:hover,.bc-footer__legal a:hover{ color:var(--bc-orange) !important; }
.bc-footer__badges img{ background:#fff; border-radius:6px; padding:5px; }
/* white/monochrome logos are invisible on a white plate -> give them a dark chip */
.bc-footer__badges img[src$="bc-cert-godaddy.png"],
.bc-footer__badges img[src$="bc-cert-itech.png"],
.bc-footer__badges img[src$="bc-pay-help2pay.png"],
.bc-footer__badges img[src$="bc-sec-iovation.png"],
.bc-footer__badges img[src$="bc-sec-threatmetrix.png"],
.bc-footer__badges img[src$="bc-rg-gamcare.png"],
.bc-footer__badges img[src$="bc-rg-begambleaware.png"]{
  background:#15151a !important;
  border:1px solid rgba(255,255,255,.14);
}

/* homepage hero = contained banner (height-capped so it isn't oversized) */
.bc-hero{ padding:0 !important; background:var(--bc-bg) !important; text-align:center; }
.bc-hero__link{ display:inline-block; line-height:0; max-width:100%; }
.bc-hero__img{ display:block; width:auto; height:auto; max-width:100%; max-height:440px; margin:0 auto; }
@media (max-width:767px){ .bc-hero__img{ max-height:240px; } }

/* ==========================================================================
   Layout bug fixes (2026-08)
   ========================================================================== */
/* BUG 1a: hero sits inside <header>; kill the header divider on the homepage only */
body.home #header{ border-bottom:0 !important; }
/* BUG 1b: tighten oversized gap between banner and first heading (homepage first row only) */
body.home .home-front > .tp_bfast_row_full:first-child{ padding-top:24px !important; }
body.home .home-front > .tp_bfast_row_full:first-child h1{ margin-top:0 !important; }
/* BUG 2: Games dropdown — theme floats .main-navigation li; force one item per row */
.bc-menu .bc-dropdown li{ float:none !important; display:block !important; width:100% !important; }
.bc-menu .bc-dropdown a{ display:block !important; padding:10px 18px !important; text-align:left !important; white-space:nowrap; }
/* footer company links column */
.bc-footer__links{list-style:none;margin:0;padding:0;column-count:3;column-gap:40px;max-width:680px;font-size:15px;line-height:1.7;}
.bc-footer__links > li{margin:0 0 6px;break-inside:avoid;}
.bc-footer__links a{display:inline-block;padding:2px 0;}
.bc-footer__links a:hover,.bc-footer__links a:focus{color:var(--bc-orange);}
.bc-footer__sublinks{list-style:none;margin:4px 0 0;padding:0 0 0 14px;border-left:1px solid rgba(255,255,255,.18);font-size:14px;}
.bc-footer__sublinks li{margin:0 0 4px;}
.bc-footer__grid + .bc-footer__grid{margin-top:32px;}
@media (max-width:991px){ .bc-footer__links{column-count:2;max-width:none;} }
@media (max-width:767px){ .bc-footer__links{column-count:1;} .bc-footer__links a{display:block;padding:11px 0;} .bc-footer__sublinks a{display:block;padding:12px 0;} }
.bc-jumpnav{font-size:14px;line-height:2;}
.bc-jumpnav a{color:var(--bc-orange-2);}