/* ==========================================================================
   Theme: "Inside the Head" — editorial light look for the homepage.
   Palette #fef9f1 cream · #1d1842 indigo · #ef3b33 coral · #fda1a2 pink.
   Fonts: Fraunces (display serif) + Poppins (body). Scoped to body.theme-ith.
   ========================================================================== */
body.theme-ith{
  /* remap the base design tokens to the ITH palette */
  --navy:#fef9f1; --navy-2:#fff5ea; --panel:#ffffff; --panel-2:#fdf1e7;
  --text:#1d1842; --muted:#6f6a86; --line:#ece2d3;
  --gold:#ef3b33; --gold-2:#d8322b;
  --teal:#1d1842; --teal-2:#2a2260; --green:#ef3b33;
  --red:#ef3b33; --white:#1d1842;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#fef9f1; color:#1d1842;
}
body.theme-ith h1,body.theme-ith h2,body.theme-ith h3,body.theme-ith h4{
  font-family:'Fraunces','Farnham',Georgia,'Times New Roman',serif;
  letter-spacing:-.01em;
}
body.theme-ith h1{font-weight:900;font-size:2.7rem}
body.theme-ith h3{color:#ef3b33}

/* Header — light with indigo wordmark */
body.theme-ith .site-header{background:#fef9f1;border-bottom:1px solid #ece2d3}
body.theme-ith .site-header .brand{color:#1d1842}
body.theme-ith .site-header .brand .dot{color:#ef3b33}
body.theme-ith .nav-links a{color:#1d1842}
body.theme-ith .nav-links a:hover{background:#fdf1e7;color:#ef3b33}
body.theme-ith .nav-toggle{color:#1d1842}

/* Hero — cream with a soft coral wash */
body.theme-ith .hero{
  background:radial-gradient(1100px 380px at 75% -20%,rgba(239,59,51,.10),transparent),#fef9f1;
  border-bottom:1px solid #ece2d3;
}
body.theme-ith .hero .lede,body.theme-ith .lede{color:#4b4666}
body.theme-ith .updated b{color:#ef3b33}

/* Buttons — coral primary, indigo secondary */
body.theme-ith .btn{background:#ef3b33;color:#fff;box-shadow:0 6px 16px rgba(239,59,51,.25)}
body.theme-ith .btn:hover{filter:brightness(1.03)}
body.theme-ith .btn-cta{background:#1d1842;color:#fff;box-shadow:0 6px 16px rgba(29,24,66,.22)}

/* Comparison + data tables — white body, indigo header */
body.theme-ith table.op-table,body.theme-ith table.data-table{background:#fff}
body.theme-ith table.op-table thead th,body.theme-ith table.data-table th{background:#1d1842;color:#fef9f1}
body.theme-ith table.op-table tr:hover td{background:#fdf1e7}
body.theme-ith table.data-table tr:nth-child(even) td{background:#fdf6ee}
body.theme-ith .rank-badge{background:#fdf1e7;color:#ef3b33;border-color:#f3d9d3}
body.theme-ith .rank-1 .rank-badge{background:#ef3b33;color:#fff;border-color:#ef3b33}
body.theme-ith .logo-chip{border-color:#ece2d3}
body.theme-ith .op-bonus{color:#ef3b33}
body.theme-ith .stars{color:#ef3b33}

/* Cards, callouts, key takeaways, TOC, FAQ, author box — white/tint surfaces */
body.theme-ith .card,body.theme-ith .op-review,body.theme-ith .toc,
body.theme-ith .faq details,body.theme-ith .author-box{background:#fff;border-color:#ece2d3}
body.theme-ith .keytakeaway{background:linear-gradient(180deg,#fdf1e7,#fff);border-color:#f0e2d1}
body.theme-ith .callout{background:#fdf1e7;border-left-color:#1d1842}
body.theme-ith .callout.warn{border-left-color:#ef3b33}
body.theme-ith .callout.legal{border-left-color:#8e0d3c}
body.theme-ith .badge{background:#fdf1e7;border-color:#f0e2d1;color:#6f6a86}
body.theme-ith .badge.good{color:#1d7a5e;border-color:#bfe3d5}
body.theme-ith .pros{background:#f2f9f5}
body.theme-ith .cons{background:#fdf1ee}
body.theme-ith .faq summary{color:#1d1842}
body.theme-ith .faq summary::after{color:#ef3b33}
body.theme-ith .author-box .avatar{background:#fdf1e7;color:#ef3b33}
body.theme-ith .cta-strip{background:linear-gradient(90deg,#fdf1e7,#fff);border-color:#f0e2d1}

/* Responsible-gambling strip + footer — deep indigo, light text (ITH footer vibe) */
body.theme-ith .rg-block{background:#1d1842;border-top-color:#ef3b33;color:#e9e4f7}
body.theme-ith .rg-block a{color:#fda1a2}
body.theme-ith .rg-block .age{background:#ef3b33;color:#fff}
body.theme-ith .site-footer{background:#1d1842;color:#cfc9e6;border-top-color:#2a2260}
body.theme-ith .site-footer .brand{color:#fef9f1}
body.theme-ith .site-footer .brand .dot{color:#fda1a2}
body.theme-ith .footer-grid a{color:#cfc9e6}
body.theme-ith .footer-grid a:hover{color:#fda1a2}
body.theme-ith .footer-logos span{border-color:#3a3470;color:#cfc9e6}
body.theme-ith .footer-bottom{border-top-color:#2a2260}

/* ===== Proper editorial hero (homepage) ===== */
body.theme-ith{overflow-x:hidden}
.lux-hero{
  position:relative;
  margin:-1px calc(50% - 50vw) 2.4em;   /* full-bleed break-out of .wrap */
  width:100vw;
  background:
    radial-gradient(680px 420px at 82% 8%,rgba(239,59,51,.14),transparent),
    radial-gradient(560px 380px at 8% 92%,rgba(29,24,66,.10),transparent),
    #fef9f1;
  border-bottom:1px solid #ece2d3;
  overflow:hidden;
}
.lux-hero::before,.lux-hero::after{content:"";position:absolute;border-radius:50%;z-index:0}
.lux-hero::before{width:340px;height:340px;background:radial-gradient(circle at 30% 30%,#fda1a2,#ef3b33);opacity:.16;top:-120px;right:-70px}
.lux-hero::after{width:220px;height:220px;background:#1d1842;opacity:.05;bottom:-90px;left:12%}
.lux-hero-inner{
  position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:56px 20px 46px;
  display:grid;grid-template-columns:1.35fr .9fr;gap:44px;align-items:center;
}
.lux-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:#ef3b33;background:#fff;border:1px solid #f3d9d3;
  padding:7px 14px;border-radius:100px;box-shadow:0 4px 14px rgba(239,59,51,.08);
}
.lux-hero h1{
  font-family:'Fraunces','Farnham',Georgia,serif;font-weight:900;
  font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.05;letter-spacing:-.02em;
  color:#1d1842;margin:.5em 0 .35em;
}
.lux-hero h1 em{font-style:italic;color:#ef3b33;font-weight:900}
.lux-sub{font-family:'Poppins',sans-serif;font-size:1.16rem;line-height:1.6;color:#4b4666;max-width:560px;margin:0 0 1.3em}
.lux-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:1.6em}
.lux-cta .btn{font-family:'Poppins',sans-serif;font-size:1.02rem;padding:14px 26px;border-radius:100px}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;font-family:'Poppins',sans-serif;font-weight:700;
  color:#1d1842;padding:14px 8px;border-bottom:2px solid transparent;transition:border-color .15s;
}
.btn-ghost:hover{text-decoration:none;border-bottom-color:#ef3b33;color:#ef3b33}
.lux-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0}
.lux-trust li{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins',sans-serif;font-size:.9rem;color:#4b4666;font-weight:500}
.lux-trust li b{color:#1d1842}
.lux-trust .tick{color:#ef3b33;font-weight:900}
.hero-updated{margin:1.4em 0 0;font-size:.85rem;color:#6f6a86;line-height:2}
.hero-updated b{color:#ef3b33}

/* featured #1 pick card */
.lux-pick{
  position:relative;background:#fff;border:1px solid #ece2d3;border-radius:22px;
  padding:26px 24px;box-shadow:0 24px 60px rgba(29,24,66,.14);text-align:center;
}
.lux-pick .ribbon{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#ef3b33;color:#fff;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 14px;border-radius:100px;box-shadow:0 6px 16px rgba(239,59,51,.3);white-space:nowrap;
}
.lux-pick .pick-logo{width:180px;height:80px;object-fit:contain;margin:14px auto 12px;display:block;
  background:#fff;border:1px solid #e4dccc;border-radius:14px;padding:14px 20px;box-shadow:0 4px 14px rgba(29,24,66,.06)}
.lux-pick .pick-name{font-family:'Fraunces',serif;font-weight:900;font-size:1.5rem;color:#1d1842;margin:.1em 0}
.lux-pick .pick-stars{color:#ef3b33;font-weight:900;letter-spacing:1px}
.lux-pick .pick-rating{color:#6f6a86;font-size:.86rem;font-family:'Poppins',sans-serif}
.lux-pick .pick-bonus{font-family:'Fraunces',serif;font-size:1.28rem;font-weight:900;color:#1d1842;margin:.5em 0 .1em;line-height:1.2}
.lux-pick .pick-bonus span{color:#ef3b33}
.lux-pick .pick-note{font-family:'Poppins',sans-serif;font-size:.82rem;color:#6f6a86;margin:0 0 1em}
.lux-pick .btn{width:100%;border-radius:100px;font-size:1.05rem;padding:14px}
.lux-pick .pick-terms{display:block;text-align:center;font-size:.74rem;color:#9a94ac;margin-top:10px;font-family:'Poppins',sans-serif}

@media(max-width:860px){
  .lux-hero-inner{grid-template-columns:1fr;gap:26px;padding:32px 20px 24px}
  .lux-pick{order:2}
  /* MOBILE ONLY: compact hero (hide eyebrow/sub/CTAs/trust) + pull the affiliate
     table up right after the hero, so H1 + pick + first H2 + table sit above the fold.
     Desktop (>860px) keeps the full hero and normal order. */
  body.theme-ith .lux-hero .lux-eyebrow,
  body.theme-ith .lux-hero .lux-sub,
  body.theme-ith .lux-hero .lux-cta,
  body.theme-ith .lux-hero .lux-trust{display:none}
  /* flex is needed for the reorder, but it disables margin-collapsing — so drive
     spacing with a single gap and zero the stacked section margins (keeps .lux-hero's
     horizontal full-bleed margins intact by only zeroing top/bottom). */
  body.theme-ith main.wrap{display:flex;flex-direction:column;gap:1.5em}
  body.theme-ith main.wrap > *{margin-top:0;margin-bottom:0}
  body.theme-ith main.wrap > section.lux-hero{order:-2}
  body.theme-ith main.wrap > section:has(.op-table-wrap){order:-1}
}
@media(max-width:720px){
  .lux-trust{gap:4px 14px}
  .lux-trust li{font-size:.76rem;gap:6px}
  .lux-trust .tick{font-size:.72rem}
  .lux-sub{font-size:1.02rem}
  /* mobile dropdown menu: light panel so indigo links are visible */
  body.theme-ith .nav-links{background:#fef9f1;border-bottom:1px solid #ece2d3;box-shadow:0 12px 24px rgba(29,24,66,.10)}
  body.theme-ith .nav-links a{color:#1d1842}
  body.theme-ith .nav-links a:hover{background:#fdf1e7;color:#ef3b33}
}

/* Breadcrumb + links in body */
body.theme-ith .crumbs,body.theme-ith .crumbs a{color:#6f6a86}
body.theme-ith .crumbs a:hover{color:#ef3b33}
body.theme-ith main a{color:#d8322b}
body.theme-ith .age-badge{background:#ef3b33}