/*
Theme Name: Didibet Australia
Theme URI: https://didibet-australia.com/
Author: Editorial desk
Description: Standalone theme for didibet-australia.com — dark casino-floor layout.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: harbour-asdq
*/

:root{
  --c-bg:#120d0c;
  --c-surface:#1d1413;
  --c-surface-2:#2a1a18;
  --c-surface-alt:#1a1211;
  --c-border:#3a2422;
  --c-text:#e8ddd6;
  --c-head:#ffffff;
  --c-strong:#ffffff;
  --c-muted:#a3918a;
  --c-link:#ffd23f;
  --c-cta:#e01f10;
  --c-cta-text:#ffffff;
  --c-cta-shadow:rgba(224,31,16,.75);
  --c-accent2:#ffd23f;
  --c-accent3:#ff7a1a;
  --c-star:#ffd23f;
  --c-header-bg:#1a0c0a;
  --c-nav-text:#efe2d8;
  --c-footer-bg:#0d0908;
  --r-sm:10px;
  --r-md:16px;
  --s-md:20px;
  --font-head:"Bebas Neue",Oswald,"Arial Narrow",Impact,sans-serif;
  --font-body:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}

h1,h2,h3{text-transform:uppercase;letter-spacing:.02em}
h2{position:relative}
h2::after{content:"";display:block;width:62px;height:4px;background:linear-gradient(90deg,var(--c-cta),var(--c-accent2));margin-top:.4rem;border-radius:2px}
h4{text-transform:none}

/* header brand */
.site-header{background:linear-gradient(180deg,#25100d,#180b09);border-bottom:1px solid #43201a}
.logo{font-family:var(--font-head);font-size:1.5rem;color:var(--c-accent2);letter-spacing:.06em;line-height:1;text-transform:uppercase}
.logo span{display:block;font-family:var(--font-body);font-size:.58rem;letter-spacing:.32em;color:#e0503f;font-weight:700}
.logo:hover{text-decoration:none}

/* buttons: red primary, gold secondary */
.cta-button,.btn{background:linear-gradient(180deg,#ff3b26,#c2150a);border-radius:999px;box-shadow:0 0 0 1px rgba(255,210,63,.35),0 10px 24px -10px rgba(224,31,16,.9)}
.cta-button.btn-ghost{background:linear-gradient(180deg,#ffdc6a,#e0a800);color:#2a1300!important;border:0;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 10px 24px -10px rgba(224,168,0,.9)}
.cta-button.btn-ghost:hover{filter:brightness(1.06)}

/* hero */
.hero{
  position:relative;padding:2.4rem 0 2.2rem;margin-bottom:1.4rem;
  background:
    radial-gradient(900px 420px at 78% 18%,rgba(224,31,16,.42),transparent 62%),
    radial-gradient(700px 380px at 10% 82%,rgba(255,210,63,.18),transparent 60%),
    linear-gradient(180deg,#1d0f0c,#120d0c);
  border-bottom:1px solid var(--c-border);
}
.hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:1.8rem;align-items:center}
.hero-grid>*{min-width:0}
.hero h1{margin-top:.1em}
.kicker{color:var(--c-accent2);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.76rem;margin:0}
.hero .lede{color:#d8c7bd;font-size:1.06rem;margin-bottom:0}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.2rem}
.hero-cta .cta-button{flex:0 1 auto}

.bonus-tile{
  background:linear-gradient(160deg,#2c1512,#1a0f0d);border:1px solid #5a2b1f;
  border-radius:var(--r-md);padding:1.3rem;text-align:center;box-shadow:inset 0 0 40px rgba(255,210,63,.09);
}
.bonus-tile .big{font-family:var(--font-head);font-size:3.2rem;color:var(--c-accent2);line-height:.95;text-shadow:0 0 22px rgba(255,210,63,.4)}
.bonus-tile .sub{font-size:1rem;color:#f0e2d8;font-weight:700;margin:.35rem 0 0}
.bonus-tile .fine{font-size:.79rem;color:var(--c-muted);margin:.5rem 0 .9rem}

/* usp + provider rail */
.usp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin:1.5rem 0 0}
.usp>*{min-width:0}
.usp .usp-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:.9rem 1rem;text-align:center}
.usp .ico{font-size:1.5rem;display:block;margin-bottom:.15rem}
.usp b{display:block;color:var(--c-accent2);font-size:.96rem}
.usp .t{font-size:.82rem;color:var(--c-muted)}
.rail{display:flex;gap:.6rem;overflow-x:auto;padding:.5rem 0 .2rem;margin:.9rem 0 0;-webkit-overflow-scrolling:touch}
.rail span{flex:0 0 auto;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:999px;padding:.38rem .9rem;font-size:.8rem;font-weight:700;color:#e6d6cb;white-space:nowrap}

/* tables tuned for dark */
th{background:#2b1a17;color:var(--c-accent2)}
tbody tr:nth-child(even){background:#1a1211}

/* charts on dark */
.chart-fig svg text{fill:var(--c-text)}
.chart-donut .donut-wrap{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:1.1rem;align-items:center}
.chart-donut .donut-wrap>*{min-width:0}
.chart-legend{list-style:none;padding:0;margin:0;font-size:.88rem;display:grid;gap:.3rem}
.chart-legend .key{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.45rem}
@media(max-width:560px){.chart-donut .donut-wrap{grid-template-columns:1fr}}

/* cta box */
.cta-box{
  background:linear-gradient(120deg,#8c1109,#e0a800);border-radius:var(--r-md);padding:1.4rem 1.5rem;
  display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:2rem 0;color:#fff;
}
.cta-box>*{min-width:0}
.cta-box .cta-box-txt{flex:1 1 320px}
.cta-box p{margin:0;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cta-box .cta-box-title{font-family:var(--font-head);font-size:1.4rem;letter-spacing:.02em;margin-bottom:.2rem;text-transform:uppercase}
.cta-box .cta-button{background:#150a08;box-shadow:0 0 0 1px rgba(255,255,255,.3)}

/* games grid on dark */
.game-card{transition:border-color .15s}
.game-card:hover{border-color:var(--c-accent2)}
.game-card .ph{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:.5rem;
  aspect-ratio:4/3;background:linear-gradient(140deg,#4a120b,#a5190c 45%,#e0a800);
  color:#2a1300;font-weight:900;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;
}
/* faq */
.faq summary{color:var(--c-accent2)}

/* footer */
.footer-title{font-family:var(--font-head);font-size:1.12rem;color:var(--c-accent2);letter-spacing:.03em}
.footer-col a:hover{color:var(--c-accent2)}

/* page body rhythm */
.page-body{padding-bottom:1rem}
.byline-top{color:var(--c-muted)}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .usp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-cta .cta-button{flex:1 1 100%}
}
