/* ============================================================
   BonusVrij.nl — stylesheet
   Casino-thema: nidobeige achtergrond, groene koppen,
   goud-oranje accenten. Mobiel-geoptimaliseerd.
   ============================================================ */

:root{
  --paper:#faf7f0;
  --paper-2:#f3eede;
  --card:#ffffff;
  --ink:#16241f;
  --muted:#56655c;
  --emerald:#0e5c43;
  --emerald-d:#0a3b2c;
  --emerald-l:#13724f;
  --gold:#cf8f26;
  --gold-l:#e9c46a;
  --gold-d:#b3751b;
  --line:#e3ddd0;
  --warn-bg:#fbf3e2;
  --warn-line:#d9a441;
  --warn-ink:#6b4a12;
  --shadow:0 10px 30px rgba(10,59,44,.10);
  --shadow-sm:0 3px 10px rgba(10,59,44,.08);
  --radius:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  background-image:
    radial-gradient(circle at 12% -5%, rgba(19,114,79,.06), transparent 40%),
    radial-gradient(circle at 95% 0%, rgba(207,143,38,.07), transparent 38%);
  color:var(--ink);
  font-family:'Mulish',system-ui,sans-serif;
  font-size:18px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--emerald);}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,240,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(207,143,38,.25);
}
.site-header .bar{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 20px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand img{width:46px;height:46px;}
.brand .word{
  font-family:'Fraunces',serif;font-weight:900;font-size:1.5rem;
  color:var(--emerald);line-height:1;letter-spacing:-.01em;
}
.brand .word b{color:var(--gold);font-weight:900;}
.brand .word span{color:#9a8f78;font-weight:600;font-size:.78em;}
.brand .tag{display:block;font-family:'Mulish';font-size:.66rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:3px;}
.main-nav{display:flex;align-items:center;gap:8px;}
.main-nav a{
  text-decoration:none;color:var(--emerald-d);font-weight:700;font-size:.92rem;
  padding:8px 12px;border-radius:8px;white-space:nowrap;
}
.main-nav a:hover{background:var(--paper-2);}
.badge18{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#a32a23;color:#fff;font-weight:800;font-size:.8rem;border:2px solid #fff;
  box-shadow:var(--shadow-sm);flex:none;
}

/* ---------- Layout ---------- */
.wrap{max-width:820px;margin:0 auto;padding:34px 20px 70px;}

/* ---------- Hero ---------- */
.hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;
  margin-bottom:8px;
}
.hero .copy{min-width:0;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-d);background:#fbf1d9;border:1px solid #ecd49b;
  padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
h1{
  font-family:'Fraunces',serif;font-weight:900;font-size:2.6rem;line-height:1.08;
  letter-spacing:-.015em;margin:0 0 14px;color:var(--emerald-d);
}
.byline{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
  font-size:.9rem;color:var(--muted);border-left:3px solid var(--gold);
  padding:10px 16px;background:var(--card);border-radius:0 10px 10px 0;
  margin:0 0 18px;box-shadow:var(--shadow-sm);
}
.byline strong{color:var(--ink);}
.lead{font-size:1.16rem;color:#26352d;margin:0 0 16px;}
.hero .art img{border-radius:18px;box-shadow:var(--shadow);}

/* ---------- Typography ---------- */
h2{
  font-family:'Fraunces',serif;font-weight:600;font-size:1.72rem;line-height:1.2;
  margin:52px 0 14px;color:var(--emerald-d);padding-bottom:9px;
  border-bottom:2px solid var(--line);position:relative;
}
h2::after{content:"";position:absolute;left:0;bottom:-2px;width:64px;height:2px;background:var(--gold);}
h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.24rem;margin:30px 0 8px;color:var(--ink);}
p{margin:0 0 16px;}
strong{color:var(--ink);}

/* lists with custom markers */
.wrap ul,.wrap ol{margin:0 0 18px;padding-left:0;list-style:none;}
.wrap ul li,.wrap ol li{position:relative;padding-left:32px;margin:0 0 10px;}
.wrap ul li::before{
  content:"";position:absolute;left:4px;top:.62em;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--gold-l),var(--gold-d));
  box-shadow:0 0 0 3px rgba(207,143,38,.18);
}
.wrap ol{counter-reset:step;}
.wrap ol li{counter-increment:step;}
.wrap ol li::before{
  content:counter(step);position:absolute;left:0;top:.05em;
  width:23px;height:23px;border-radius:50%;background:var(--emerald);color:#fff;
  font-family:'Mulish';font-weight:800;font-size:.8rem;display:grid;place-items:center;
}

/* ---------- Figures (in-text images) ---------- */
figure.illu{margin:22px 0;text-align:center;}
figure.illu img{border-radius:16px;box-shadow:var(--shadow-sm);margin:0 auto;width:100%;max-width:560px;}
figure.illu figcaption{font-size:.82rem;color:var(--muted);margin-top:8px;font-style:italic;}

/* ---------- Featured comparison ---------- */
.compare{
  background:linear-gradient(180deg,#ffffff,#fdfbf6);
  border:1px solid #ece3cf;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 20px 8px;margin:8px 0 14px;position:relative;
}
.compare::before{
  content:"♠ ♥ ♦ ♣";position:absolute;top:14px;right:18px;
  color:var(--gold);opacity:.4;font-size:.9rem;letter-spacing:3px;
}
.compare .ttl{
  font-family:'Fraunces',serif;font-weight:600;font-size:1.18rem;color:var(--emerald-d);margin:0 0 4px;
}
.compare .sub{font-size:.86rem;color:var(--muted);margin:0 0 14px;}

table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:.96rem;
  border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card);
}
caption{caption-side:bottom;text-align:left;font-size:.78rem;color:var(--muted);margin-top:10px;}
thead th{
  background:linear-gradient(180deg,var(--emerald-l),var(--emerald));
  color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.02em;
  padding:12px;text-align:left;text-transform:uppercase;
}
tbody td{padding:13px 12px;border-top:1px solid var(--line);vertical-align:middle;}
tbody tr:nth-child(even){background:#fbf9f3;}
tbody td:first-child{font-weight:800;color:var(--emerald-d);font-size:1.02rem;}
.tag-type{display:inline-block;background:#eef5f1;color:var(--emerald);border:1px solid #cfe4da;
  border-radius:6px;padding:2px 8px;font-size:.82rem;font-weight:700;}
.wager{font-weight:800;color:var(--gold-d);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:800;letter-spacing:.02em;
  font-size:.84rem;padding:9px 18px;border-radius:8px;white-space:nowrap;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#3a2a06;
  box-shadow:0 2px 0 var(--gold-d);transition:transform .08s ease,filter .15s ease;
}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px);}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--gold-d);}

/* ---------- Casino CTA card (in-text) ---------- */
.casino-cta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--card);border:1px solid #ece3cf;border-radius:14px;
  padding:15px 20px;margin:14px 0;box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.casino-cta::before{content:"";position:absolute;left:0;top:0;height:100%;width:5px;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));}
.casino-cta .name{
  font-family:'Fraunces',serif;font-weight:600;font-size:1.34rem;
  color:var(--emerald-d);line-height:1.1;padding-left:6px;
}
.casino-cta .btn{padding:11px 22px;font-size:.9rem;}
@media (max-width:480px){
  .casino-cta{flex-wrap:wrap;}
  .casino-cta .btn{width:100%;text-align:center;}
}

/* ---------- Responsible block ---------- */
.responsible{
  background:var(--warn-bg);border:2px solid var(--warn-line);border-radius:var(--radius);
  padding:20px 22px;margin:26px 0 8px;color:var(--warn-ink);box-shadow:var(--shadow-sm);
}
.responsible h4{
  font-family:'Fraunces',serif;margin:0 0 8px;font-size:1.18rem;color:var(--warn-ink);
  display:flex;align-items:center;gap:8px;
}
.responsible p{margin:0 0 8px;font-size:.97rem;}
.responsible p:last-child{margin-bottom:0;}

/* ---------- FAQ ---------- */
.faq-q{font-weight:800;color:var(--emerald-d);margin:18px 0 4px;font-size:1.03rem;}
.faq-q::before{content:"♦ ";color:var(--gold);}
.meta-foot{font-size:.84rem;color:var(--muted);border-top:1px solid var(--line);
  margin-top:40px;padding-top:16px;}

/* ---------- Footer ---------- */
.site-footer{
  background:linear-gradient(180deg,var(--emerald),var(--emerald-d));
  color:#cfe0d7;margin-top:30px;border-top:4px solid var(--gold);
}
.site-footer .cols{
  max-width:1100px;margin:0 auto;padding:46px 22px 26px;
  display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:34px;
}
.site-footer h5{font-family:'Fraunces',serif;color:#fff;font-size:1.05rem;margin:0 0 12px;font-weight:600;}
.site-footer p{font-size:.9rem;line-height:1.6;color:#bcd2c8;margin:0 0 10px;}
.site-footer a{color:#f3da90;text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin:0 0 8px;font-size:.9rem;}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.foot-brand img{width:44px;height:44px;}
.foot-brand .word{font-family:'Fraunces',serif;font-weight:900;font-size:1.3rem;color:#fff;}
.foot-brand .word b{color:var(--gold-l);}
.foot-badges{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;}
.foot-badges .chip{background:rgba(255,255,255,.08);border:1px solid rgba(243,218,144,.3);
  color:#f3da90;font-weight:800;font-size:.8rem;padding:5px 11px;border-radius:999px;}
.legalbar{
  border-top:1px solid rgba(255,255,255,.12);
  max-width:1100px;margin:0 auto;padding:16px 22px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.8rem;color:#9fbab0;
}

/* ============================================================
   MOBIEL — tabel wordt verticale casino-kaarten
   ============================================================ */
@media (max-width:760px){
  body{font-size:17px;}
  .wrap{padding:24px 16px 56px;}
  .main-nav{display:none;}
  .hero{grid-template-columns:1fr;gap:18px;}
  .hero .art{order:-1;max-width:420px;margin:0 auto;}
  h1{font-size:2.05rem;}
  h2{font-size:1.5rem;}
  .site-footer .cols{grid-template-columns:1fr;gap:26px;}
}

@media (max-width:620px){
  .compare{padding:16px 14px 6px;}
  .compare::before{display:none;}

  /* verberg tabelkop, maak elke rij een kaart */
  table{border:none;background:transparent;border-radius:0;}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  tbody tr{
    display:block;background:var(--card);border:1px solid #ece3cf;
    border-radius:14px;box-shadow:var(--shadow-sm);padding:6px 16px 16px;
    margin:0 0 16px;position:relative;overflow:hidden;
  }
  tbody tr::before{content:"";position:absolute;left:0;top:0;height:100%;width:5px;
    background:linear-gradient(180deg,var(--gold-l),var(--gold));}
  tbody tr:nth-child(even){background:var(--card);}
  tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:9px 0;border-top:1px solid var(--line);text-align:right;}
  tbody td::before{
    content:attr(data-label);font-weight:800;color:var(--emerald);
    text-align:left;font-size:.82rem;letter-spacing:.02em;text-transform:uppercase;
  }
  /* casinonaam = kaarttitel */
  tbody td:first-child{
    display:block;text-align:center;border-top:none;padding:12px 0 8px;
    font-family:'Fraunces',serif;font-size:1.4rem;color:var(--emerald-d);
  }
  tbody td:first-child::before{display:none;}
  /* knop = volledige breedte */
  tbody td:last-child{display:block;padding-top:14px;border-top:none;}
  tbody td:last-child::before{display:none;}
  tbody td:last-child .btn{display:block;width:100%;text-align:center;padding:13px;font-size:.95rem;}
}