/* casino-silo.css — components + Oranje re-skin for the crypto/no-Cruks casino silo.
   Loaded AFTER shared.css and ONLY on silo pages, so this :root override re-skins the
   silo to the Oranje orange palette WITHOUT touching the shared tree-site theme. */
:root{
  --primary:#EA580C;    /* orange-600 — links, headings, table headers, accents */
  --secondary:#F97316;  /* orange-500 — CTA buttons / highlights */
  --accent:#F59E0B;     /* amber-500 — trust accents */
  --dark:#0F172A;       /* slate-900 — hero gradient + footer */
  --light:#FFF7ED;      /* orange-50 — tinted boxes/sections */
}
body{background:#F8FAFC;color:#1e293b}              /* slate-50 page bg, slate-800 text (app look) */
a{color:var(--primary)}
/* softer, rounder "fintech" cards to match the Oranje design */
.toplist .tl-row,.op-review{border-radius:16px;box-shadow:0 4px 16px rgba(15,23,42,.06);border-color:#fde7d3}
.keyfacts{border-radius:14px}
.cmp-table{border-radius:12px;overflow:hidden}
.tl-rank,.op-review .op-rank{background:linear-gradient(135deg,var(--secondary),var(--primary))}
/* glowing CTA buttons */
.tl-cta a,.op-review .op-cta,.btn{border-radius:9px;background:linear-gradient(135deg,#FB923C,#EA580C);
  box-shadow:0 4px 14px rgba(249,115,22,.45);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
  animation:ctaGlow 2.4s ease-in-out infinite}
.tl-cta a:hover,.op-review .op-cta:hover,.btn:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 0 24px rgba(249,115,22,.75),0 10px 26px rgba(249,115,22,.5)}
@keyframes ctaGlow{0%,100%{box-shadow:0 4px 14px rgba(249,115,22,.40)}50%{box-shadow:0 0 22px rgba(249,115,22,.70),0 6px 18px rgba(249,115,22,.5)}}
@media (prefers-reduced-motion:reduce){.tl-cta a,.op-review .op-cta,.btn{animation:none}}

/* ---- hero: Oranje crypto visual behind a dark/orange overlay (hero-design §4 + §6 contrast) ---- */
.hero{background:linear-gradient(rgba(15,23,42,.84),rgba(234,88,12,.48)),url('/assets/hero-bg.webp')!important;
  background-size:cover!important;background-position:center!important}
.hero h1{font-size:2rem;margin:.2em 0}
.hero p{max-width:760px;margin:0 auto;opacity:.95}
.hero .byline{color:rgba(255,255,255,.9);margin:14px auto 0}
/* mobile: collapse the hero description so the #1 card's CTA lands in the first viewport */
@media (max-width:768px){
  .hero{padding:18px 16px!important}
  .hero h1{font-size:1.5rem;margin:.1em 0}
  .hero p:not(.byline){display:none}
  .hero .byline{margin-top:8px}
}
.hero .byline a{color:#fff;text-decoration:underline}
/* rank-1 highlight (toplist-horizontal-table §8) */
.toplist .tl-row.highlight-row td{background:#FFF7ED}
.toplist .tl-row.highlight-row td:first-child{border-left:4px solid var(--secondary)}
.toplist .tl-row.highlight-row .tl-brand b{color:var(--primary)}
@media (max-width:768px){.toplist .tl-row.highlight-row{border:2px solid var(--secondary)}}

/* ---- sticky navbar ---- */
header{position:sticky;top:0;z-index:900;background:var(--white);box-shadow:0 2px 10px rgba(0,0,0,.06)}
/* hero butts directly against the navbar (no white gap, desktop + mobile) */
main.content{padding-top:0}
main.content>.hero:first-child,main.content>div:first-child>.hero{margin-top:0}

/* ---- site logo (navbar) ---- */
.logo-placeholder .site-logo{height:42px;width:auto;display:block;margin:0}
@media (max-width:768px){.logo-placeholder .site-logo{height:34px}}

/* ---- navbar with dropdowns (built on the existing header/nav) ---- */
.silo-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:18px;padding:0;margin:0;align-items:center}
.silo-nav li{position:relative}
.silo-nav a{text-decoration:none;color:var(--dark);font-weight:600;white-space:nowrap}
.silo-nav a:hover{color:var(--primary)}
.silo-nav .has-sub>span{cursor:pointer;font-weight:600;color:var(--dark)}
.silo-nav .has-sub>span::after{content:" ▾";color:var(--primary)}
.silo-nav .sub{display:none;position:absolute;top:100%;left:0;background:var(--white);
  border:1px solid var(--light);border-top:3px solid var(--primary);border-radius:0 0 6px 6px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:240px;padding:8px 0;z-index:1000}
.silo-nav .has-sub:hover .sub,.silo-nav .has-sub:focus-within .sub{display:block}
.silo-nav .sub li{display:block}
.silo-nav .sub a{display:block;padding:9px 18px;font-weight:500}
.silo-nav .sub a:hover{background:var(--light)}
.silo-nav .util{margin-left:auto;display:flex;gap:14px}
.silo-nav .util a{font-weight:500;font-size:14px;color:#666}
/* hamburger / slide-out (mobile only) */
.nav-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.hamburger,.nav-close,.nav-overlay{display:none}
@media (max-width:768px){
  .hamburger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    font-size:26px;color:var(--primary);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .silo-nav{position:fixed;top:0;right:-310px;width:290px;max-width:85vw;height:100vh;background:var(--white);
    z-index:1001;box-shadow:-4px 0 24px rgba(0,0,0,.22);padding:54px 0 24px;overflow-y:auto;transition:right .25s ease}
  .nav-toggle:checked ~ .silo-nav{right:0}
  .silo-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .silo-nav li{width:100%}
  .silo-nav a,.silo-nav .has-sub>span{display:block;padding:12px 20px;width:100%;border-bottom:1px solid var(--light)}
  .silo-nav .sub{display:block;position:static;border:0;box-shadow:none;border-radius:0;min-width:0;padding:0}
  .silo-nav .sub a{padding:9px 20px 9px 34px;font-weight:400;color:#556}
  .silo-nav .util{margin-left:0;flex-direction:column;gap:0;width:100%}
  .silo-nav .util a{padding:12px 20px;border-bottom:1px solid var(--light);font-size:15px}
  .nav-close{display:block;position:absolute;top:10px;right:16px;font-size:22px;color:var(--dark);cursor:pointer}
  .nav-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;opacity:0;
    pointer-events:none;transition:opacity .25s}
  .nav-toggle:checked ~ .nav-overlay{opacity:1;pointer-events:auto}
}

/* ---- key-facts box ---- */
.keyfacts{background:var(--light);border-left:4px solid var(--primary);border-radius:6px;
  padding:20px 24px;margin:28px 0}
.keyfacts h2{margin-top:0;font-size:1.2rem}
.keyfacts table{width:100%;border-collapse:collapse}
.keyfacts td{padding:7px 4px;border-bottom:1px solid #dde3ea;font-size:15px}
.keyfacts td:first-child{font-weight:600;width:55%}

/* ---- toplist (desktop table → mobile card via media query) ---- */
.toplist{width:100%;border-collapse:separate;border-spacing:0 10px;margin:24px 0}
.toplist .tl-row{background:var(--white);box-shadow:0 1px 6px rgba(0,0,0,.08);border-radius:10px}
.toplist td{padding:16px 14px;vertical-align:middle;border-top:1px solid var(--light);border-bottom:1px solid var(--light)}
.toplist td:first-child{border-left:1px solid var(--light);border-radius:10px 0 0 10px;width:46px;text-align:center}
.toplist td:last-child{border-right:1px solid var(--light);border-radius:0 10px 10px 0}
.tl-rank{font-weight:800;font-size:20px;color:#fff}   /* ranks sit on the orange gradient cell → white */
.toplist .tl-row.highlight-row .tl-rank{color:var(--primary)}   /* rank 1 is on the light highlight bg */
.tl-logo img{max-width:120px;max-height:54px;width:auto;height:auto;display:block}
.tl-logo .logo-fallback{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:8px;background:var(--primary);color:#fff;font-weight:800;font-size:18px}
.tl-brand b{display:block;font-size:17px;color:var(--dark)}
.tl-brand span{font-size:13px;color:#667}
.tl-bonus{font-weight:900;color:var(--primary);font-size:26px;line-height:1.2;text-align:center}
.tl-feat{font-size:13px;color:#556;text-align:center}
.tl-cta a{display:inline-block;background:var(--secondary);color:#fff;font-weight:800;text-decoration:none;
  padding:12px 22px;border-radius:6px;white-space:nowrap}
.tl-cta a:hover{filter:brightness(.94)}

@media (max-width:768px){
  .toplist,.toplist tbody,.toplist tr,.toplist td{display:block;width:100%}
  .toplist{border-spacing:0}
  .toplist .tl-row{margin-bottom:18px;padding:14px;border:1px solid var(--light)}
  .toplist td{border:0!important;padding:6px 0;text-align:center!important}
  .toplist td:first-child{position:absolute;width:34px;height:34px;background:var(--primary);color:#fff;
    border-radius:50%;line-height:34px;padding:0}
  .tl-rank{color:#fff;font-size:16px}
  .tl-logo img{margin:4px auto}
  .tl-bonus{background:var(--light);border-radius:6px;padding:10px;margin:8px 0;font-size:24px}
  .tl-cta a{display:block;width:100%}
}

/* ---- comparison / data tables ---- */
.cmp-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.cmp-table th,.cmp-table td{border:1px solid #dde3ea;padding:10px 12px;text-align:left}
.cmp-table thead th{background:var(--primary);color:#fff}
.cmp-table tbody tr:nth-child(even){background:var(--light)}
/* mobile: stack every data table into label:value rows (no squashing/scroll) */
@media (max-width:768px){
  .cmp-table thead{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table td{display:block;width:100%}
  .cmp-table tr{margin:0 0 14px;border:1px solid #dde3ea;border-radius:10px;overflow:hidden;background:#fff!important}
  .cmp-table td{display:flex;justify-content:space-between;gap:14px;text-align:right;
    border:0;border-bottom:1px solid #eef1f5;padding:10px 12px}
  .cmp-table td:last-child{border-bottom:0}
  .cmp-table td[data-label]::before{content:attr(data-label);font-weight:700;color:var(--primary);
    text-align:left;flex:0 0 42%}
  /* scroll fallback for any other (non-toplist, non-cmp) table */
  main.content table:not(.toplist):not(.cmp-table){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---- pros / cons ---- */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}
.proscons .col{border-radius:8px;padding:16px 20px}
.proscons .pros{background:#eaf7f0;border:1px solid var(--secondary)}
.proscons .cons{background:#f2f5fa;border:1px solid #cdd6e0}
.proscons h3{margin-top:0}
@media (max-width:768px){.proscons{grid-template-columns:1fr}}

/* ---- byline + author box (E-E-A-T) ---- */
.byline{font-size:13px;color:#667;margin:-6px 0 18px;text-align:center}
.byline a{color:var(--primary);text-decoration:none;font-weight:600}
.byline span{vertical-align:middle}
.byline-av{width:34px;height:34px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:8px;border:2px solid rgba(255,255,255,.7);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.byline-av-link{display:inline-block;vertical-align:middle}
.author-box{display:flex;gap:16px;align-items:flex-start;background:var(--light);border:1px solid #dde3ea;
  border-radius:8px;padding:16px 20px;margin:32px 0}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.author-box h3{margin:0 0 4px;font-size:16px}
.author-box p{margin:0;font-size:14px;color:#556}
.author-box a{color:var(--primary)}
/* authors index + profile */
.author-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:28px 0}
.author-card{border:1px solid #dde3ea;border-radius:10px;padding:20px;text-align:center;background:#fff}
.author-card img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 12px}
.author-card h3{margin:0 0 4px}.author-card .role{color:var(--primary);font-size:14px;font-weight:600}
.profile-head{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:20px 0}
.profile-head img{width:140px;height:140px;border-radius:12px;object-fit:cover}
.stats-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
.stat{background:var(--light);border-radius:8px;padding:16px;text-align:center}
.stat b{display:block;font-size:24px;color:var(--primary)}
.stat span{font-size:13px;color:#667}
.tag-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tag-list li{background:var(--light);border:1px solid #dde3ea;border-radius:20px;padding:6px 14px;font-size:13px}
@media (max-width:768px){.stats-panel{grid-template-columns:1fr 1fr}}

/* ---- featured #1 (Lucki) card — MOBILE ONLY, page-specific blurb ---- */
.featured-1{display:none}
@media (max-width:768px){
  .featured-1{display:block;text-align:center;background:#fff;border:2px solid var(--secondary);
    border-radius:14px;padding:12px 14px;margin:14px 0;box-shadow:0 8px 22px rgba(249,115,22,.20)}
  .featured-1 .f1-badge{display:inline-block;background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;font-weight:800;font-size:11px;padding:4px 14px;border-radius:20px;letter-spacing:.04em;text-transform:uppercase}
  .featured-1 .f1-logo img{max-width:150px;max-height:44px;width:auto;height:auto;margin:8px auto 2px;display:block}
  .featured-1 .f1-logo .logo-fallback{margin:8px auto 2px;width:48px;height:48px;font-size:18px}
  .featured-1 .f1-bonus{font-weight:800;color:var(--primary);font-size:20px;margin:2px 0}
  .featured-1 .f1-text{font-size:13px;color:#556;margin:6px 0 10px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .featured-1 .op-cta{display:block;width:100%}
}

/* ---- per-operator review blocks (every subpage, toplist order) ---- */
.op-reviews{margin:32px 0}
.op-review{border:1px solid #dde3ea;border-radius:10px;padding:18px 20px;margin:16px 0;background:#fff}
.op-review .op-head{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.op-review .op-rank{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--primary);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
.op-review .op-logo img{max-width:96px;max-height:42px;width:auto;height:auto}
.op-review .op-logo .logo-fallback{width:42px;height:42px;font-size:15px}
.op-review h3{margin:0;font-size:18px}
.op-review .op-bonus{font-weight:700;color:var(--primary);margin:0 0 6px}
.op-review .op-spec{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px}
.op-review .op-spec li{background:var(--light);border:1px solid #fde7d3;border-radius:14px;padding:3px 11px;font-size:12px;color:#556}
/* "Hoe wij testen" methodology panel */
.methodology{background:var(--light);border:1px solid #fde7d3;border-radius:14px;padding:22px 26px;margin:26px 0}
.methodology h2{margin-top:0;font-size:1.25rem}
.methodology .method-list{list-style:none;margin:14px 0 0;padding:0}
.methodology .method-list li{position:relative;padding:9px 0 9px 30px;border-bottom:1px solid #f3e3d5;font-size:15px}
.methodology .method-list li:last-child{border-bottom:0}
.methodology .method-list li::before{content:"\2713";position:absolute;left:0;top:9px;color:var(--secondary);font-weight:800}
.op-review .op-cta{display:inline-block;background:var(--secondary);color:#fff;font-weight:800;
  text-decoration:none;padding:10px 20px;border-radius:6px;margin-top:6px}
.op-review .op-cta:hover{filter:brightness(.94)}

/* ---- FAQ ---- */
.faq details{border:1px solid var(--light);border-radius:6px;margin:10px 0;padding:4px 16px}
.faq summary{font-weight:700;cursor:pointer;padding:12px 0;color:var(--dark)}
.faq details[open] summary{color:var(--primary)}

/* ---- footer columns ---- */
footer.silo-footer{background:var(--dark);color:#cdd6e0;text-align:left;padding:44px 0 0}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.footer-cols h4{color:#fff;margin:0 0 12px;font-size:15px}
.footer-cols ul{list-style:none;padding:0;margin:0}
.footer-cols li{margin:6px 0}
.footer-cols a{color:#cdd6e0;text-decoration:none;font-size:14px}
.footer-cols a:hover{color:var(--secondary)}
.footer-bottom{border-top:1px solid #2c333b;margin-top:32px;padding:18px 0;text-align:center;font-size:13px;color:#8a93a0}
.footer-bottom .rg{margin:6px 0}
@media (max-width:768px){.footer-cols{grid-template-columns:1fr 1fr;gap:20px}}