/* ===========================================================
   Tusk Casino South Africa — shared stylesheet
   Brand: deep emerald green + ivory gold. Mobile-first, no overflow.
   =========================================================== */
:root{
  --green-900:#062b1b;
  --green-800:#073c26;
  --green-700:#0b5c39;   /* primary brand */
  --green-600:#0e6b43;
  --green-500:#13834f;
  --gold:#c9a24b;
  --gold-soft:#e3c887;
  --cream:#f6f2e7;
  --ivory:#fbfaf5;
  --paper:#ffffff;
  --ink:#15241c;
  --ink-soft:#3f5448;
  --line:#e2e8e3;
  --shadow:0 10px 30px rgba(6,43,27,.10);
  --shadow-lg:0 24px 60px rgba(6,43,27,.18);
  --radius:16px;
  --radius-sm:10px;
  --maxw:1180px;
  --font-head:"Georgia","Times New Roman",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--ivory);
  line-height:1.7;
  font-size:clamp(15px,1rem + .15vw,17px);
}
img,svg,video,table{max-width:100%}
img,svg{height:auto}
a{color:var(--green-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.2;color:var(--green-800);font-weight:700}
h1{font-size:clamp(1.8rem,4.5vw,3rem);letter-spacing:-.5px}
h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin-bottom:.5em}
h3{font-size:clamp(1.18rem,2.4vw,1.5rem)}
p{margin-bottom:1rem}
ul,ol{margin:0 0 1rem 1.2rem}
li{margin-bottom:.4rem}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
section{padding-block:clamp(40px,6vw,72px)}
.eyebrow{display:inline-block;font-family:var(--font-body);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:var(--gold);background:var(--green-800);padding:.35em .8em;border-radius:999px;margin-bottom:1rem}
.lead{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.center{text-align:center}

/* ---------- Skip link & a11y ---------- */
.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--green-900);padding:10px 16px;border-radius:0 0 8px 0;z-index:1000;font-weight:700}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;font-family:var(--font-body);padding:.85em 1.6em;border-radius:999px;border:2px solid transparent;cursor:pointer;text-align:center;min-height:48px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--gold);color:var(--green-900);box-shadow:0 8px 22px rgba(201,162,75,.4)}
.btn-primary:hover{background:var(--gold-soft)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--green-700);color:#fff}
.btn-dark:hover{background:var(--green-600)}
.btn-lg{font-size:1.05rem;padding:1em 2em}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:900;background:var(--green-700);color:#fff;box-shadow:0 2px 14px rgba(6,43,27,.25)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand img{height:34px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0}
.nav-links a{color:#eaf3ee;font-weight:600;font-size:.95rem;padding:.55em .7em;border-radius:8px;font-family:var(--font-body)}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.header-cta{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.header-cta .btn{padding:.6em 1.1em;min-height:42px}
.burger{display:none;background:transparent;border:0;cursor:pointer;width:46px;height:46px;border-radius:10px;align-items:center;justify-content:center}
.burger span{display:block;width:24px;height:2px;background:#fff;position:relative;transition:.25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:#fff;transition:.25s}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:1100px){
  .nav-links{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--green-800);padding:1rem clamp(16px,4vw,32px) 1.4rem;gap:.2rem;transform:translateY(-130%);transition:transform .3s ease;max-height:calc(100vh - 64px);overflow-y:auto;box-shadow:var(--shadow-lg)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:.85em .6em;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-links .mobile-cta{display:block;margin-top:.8rem}
  .nav-links .mobile-cta .btn{width:100%}
  .burger{display:inline-flex}
  .header-cta .desktop-cta{display:none}
}
@media(min-width:1101px){.nav-links .mobile-cta{display:none}}
@media(min-width:1101px) and (max-width:1180px){.nav-links a{font-size:.88rem;padding:.5em .5em}}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(105deg,rgba(6,43,27,.82) 0%,rgba(7,60,38,.55) 60%,rgba(6,43,27,.35) 100%),var(--hero-bg,radial-gradient(120% 140% at 80% -10%,var(--green-500) 0%,var(--green-700) 38%,var(--green-900) 100%)) center/cover no-repeat,var(--green-800);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 12% 88%,rgba(201,162,75,.18),transparent 40%);pointer-events:none}
.hero .container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,48px);align-items:center}
.hero h1{color:#fff}
.hero p{color:#dcebe2}
.hero-art{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.8rem}
.hero-stats div{min-width:90px}
.hero-stats b{display:block;font-family:var(--font-head);font-size:clamp(1.5rem,3vw,2rem);color:var(--gold-soft)}
.hero-stats span{font-size:.82rem;color:#cfe0d6;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-art{order:-1;max-width:460px;margin-inline:auto}}

/* ---------- Cards & grids ---------- */
.grid{display:grid;gap:clamp(16px,2.5vw,24px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,3vw,28px);box-shadow:var(--shadow)}
.card h3{margin-bottom:.4rem}
.card .ico{width:46px;height:46px;border-radius:12px;background:var(--cream);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;color:var(--green-700)}
.card.dark{background:var(--green-800);color:#eaf3ee;border-color:var(--green-700)}
.card.dark h3{color:#fff}
.card.gold{background:linear-gradient(160deg,var(--gold) 0%,var(--gold-soft) 100%);color:var(--green-900);border:0}
.card.gold h3{color:var(--green-900)}

.section-alt{background:var(--cream)}
.section-dark{background:var(--green-800);color:#eaf3ee}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark p{color:#cfe0d6}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--line);margin-bottom:1.5rem;box-shadow:var(--shadow)}
table.data{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px;background:var(--paper)}
table.data caption{caption-side:top;text-align:left;padding:.9rem 1rem;font-weight:700;font-family:var(--font-head);color:var(--green-800);background:var(--cream)}
table.data th,table.data td{padding:.8em 1em;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.data thead th{background:var(--green-700);color:#fff;font-family:var(--font-body);font-weight:700;position:sticky;top:0}
table.data tbody tr:nth-child(even){background:#f7faf8}
table.data tbody tr:hover{background:#eef6f1}
table.data td b{color:var(--green-700)}
.tag{display:inline-block;font-size:.74rem;font-weight:700;padding:.2em .6em;border-radius:999px;background:var(--cream);color:var(--green-700)}
.tag.good{background:#e3f6ec;color:#0e6b43}
.tag.warn{background:#fdeede;color:#a9701b}

/* ---------- Charts ---------- */
.chart-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,3vw,26px);box-shadow:var(--shadow);margin-bottom:1.5rem}
.chart-card h3{margin-bottom:.3rem}
.chart-card .cap{font-size:.85rem;color:var(--ink-soft);margin-bottom:1rem}
.chart-card svg{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;margin-top:1rem;font-size:.85rem}
.legend span{display:inline-flex;align-items:center;gap:.4em}
.legend i{width:14px;height:14px;border-radius:4px;display:inline-block}

/* ---------- Steps / timeline ---------- */
.steps{counter-reset:step;list-style:none;margin:0;display:grid;gap:1rem}
.steps li{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.1rem 1.2rem 1.1rem 3.6rem;box-shadow:var(--shadow)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:1rem;top:1.1rem;width:34px;height:34px;border-radius:50%;background:var(--green-700);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-head)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.8rem}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 1.1rem;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:700;font-family:var(--font-head);color:var(--green-800);padding:1rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--gold);flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq details>p{padding-bottom:1rem;margin:0}

/* ---------- Author box ---------- */
.author-box{display:flex;gap:1.2rem;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,3vw,26px);box-shadow:var(--shadow)}
.author-box img{width:84px;height:84px;border-radius:50%;flex-shrink:0;border:3px solid var(--gold)}
.author-box .meta{font-size:.92rem}
.author-box .name{font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:var(--green-800)}
.author-box .role{color:var(--gold);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
@media(max-width:480px){.author-box{flex-direction:column}}

/* ---------- Breadcrumbs ---------- */
.breadcrumb{font-size:.85rem;color:var(--ink-soft);padding-top:1rem}
.breadcrumb ol{list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:.4em}
.breadcrumb li::after{content:"›";margin-left:.4em;color:var(--gold)}
.breadcrumb li:last-child::after{content:""}

/* ---------- Callouts ---------- */
.callout{border-left:4px solid var(--gold);background:var(--cream);padding:1rem 1.2rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:1.2rem 0}
.callout.warn{border-color:#d98c2b;background:#fdf3e7}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:560px){.pros-cons{grid-template-columns:1fr}}
.pros-cons ul{list-style:none;margin:0}
.pros-cons li{padding-left:1.6rem;position:relative}
.pros-cons .pros li::before{content:"✓";position:absolute;left:0;color:#0e6b43;font-weight:700}
.pros-cons .cons li::before{content:"✕";position:absolute;left:0;color:#c0492b;font-weight:700}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(150deg,var(--green-700),var(--green-900));color:#fff;border-radius:var(--radius);padding:clamp(24px,4vw,44px);text-align:center;box-shadow:var(--shadow-lg)}
.cta-band h2{color:#fff}
.cta-band p{color:#dcebe2;max-width:640px;margin-inline:auto}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-900);color:#bcd2c5;padding-block:clamp(36px,5vw,56px) 0;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(20px,3vw,36px)}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-family:var(--font-body);font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.8rem}
.site-footer ul{list-style:none;margin:0}
.site-footer a{color:#bcd2c5}
.site-footer a:hover{color:var(--gold-soft)}
.footer-brand img{height:32px;margin-bottom:.8rem}
.age-badge{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--gold);color:var(--gold-soft);font-weight:700;font-size:.85rem;margin-right:.5rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding:1.4rem 0;font-size:.82rem;color:#9ab3a4}
.footer-bottom .container{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.pay-icons{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.pay-icons span{background:rgba(255,255,255,.08);border-radius:6px;padding:.3em .6em;font-size:.75rem;color:#cfe0d6}

/* ---------- Misc utilities ---------- */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
@media(max-width:680px){.kpi{grid-template-columns:repeat(2,1fr)}}
.kpi .card b{display:block;font-family:var(--font-head);font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--green-700)}
.kpi .card span{font-size:.85rem;color:var(--ink-soft)}
.toc{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.4rem;margin-bottom:1.5rem}
.toc h2{font-size:1.1rem;margin-bottom:.6rem}
.toc ol{margin:0 0 0 1.1rem}
.toc a{font-weight:600}
.ratebar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.ratebar i{display:block;height:100%;background:linear-gradient(90deg,var(--green-600),var(--gold));border-radius:999px}
hr.div{border:0;border-top:1px solid var(--line);margin:2rem 0}
.note-18{font-size:.8rem;color:var(--ink-soft)}