/* ==========================================================================
   iGaming Affiliate Template — VARIANTE 2 "Notte Blu"
   Navy + oro, card della classifica chiare, pulsanti a pillola, font Poppins.
   Stessa struttura HTML e stessi blocchi della versione base.
   Pure CSS, no framework, mobile-first.
   ========================================================================== */

:root{
  /* --- brand palette (edit these values to re-skin the whole template) --- */
  --color-dark:        #0e1a33;   /* header / footer / hero / card bg */
  --color-dark-alt:    #1d3a6b;   /* secondary dark surfaces          */
  --color-cream:       #eef1f7;   /* light "prose" section background */
  --color-cream-alt:   #e2e8f2;
  --color-text-dark:   #14213d;
  --color-text-light:  #ffffff;
  --color-accent:      #c2410c;   /* accent on light bg (links, +, x) */
  --color-accent-hover:#9a3412;
  --color-accent-2:    #f5b301;   /* gold: hovers, quote bar, badges  */
  --color-gold:        #b7791f;   /* rating stars                     */
  --color-border:      #d3dbe9;

  --cta-bg:            linear-gradient(135deg, #ffd54a, #f5a300);
  --cta-bg-hover:      linear-gradient(135deg, #ffe07a, #ffb52e);
  --cta-text:          #1a1200;

  --radius-pill: 999px;
  --radius-card: 16px;
  --font-main: 'Poppins', -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --container-w: 1200px;
}

/* --- reset --- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-main);
  color: var(--color-text-dark);
  background: var(--color-cream);
  line-height: 1.65;
  font-size: 16px;
}
img{ max-width:100%; display:block; height:auto; }
a{ color: inherit; text-decoration: none; }
ul, ol{ padding-left: 1.25em; }
table{ border-collapse: collapse; width:100%; }
h1,h2,h3,h4{ line-height:1.25; font-weight:700; letter-spacing:-.01em; margin:0 0 .6em; }
h1{ font-size: clamp(1.7rem, 4vw, 2.6rem); }
h2{ font-size: clamp(1.35rem, 3vw, 1.9rem); margin-top: 1.4em; }
h3{ font-size: 1.2rem; margin-top: 1.2em; }
p{ margin: 0 0 1em; }
.container{ max-width: var(--container-w); margin-inline:auto; padding-inline: 20px; }

/* --- accessibility --- */
.skip-link{
  position:absolute; left:-999px; top:0; background:#fff; color:#000;
  padding:10px 16px; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  background: var(--color-dark);
  color: var(--color-text-light);
  border-bottom: 3px solid var(--color-accent-2);
  position: sticky; top:0; z-index: 500;
}
.header__row{
  display:flex; align-items:center; justify-content:flex-end;
  padding-block: 12px;
}

.nav-toggle{
  background:none; border:1px solid rgba(255,255,255,.35); color:#fff;
  border-radius:10px; padding:8px 10px; font-size:1.1rem; cursor:pointer;
}
.main-nav{
  display:none;
  flex-direction:column;
  gap:4px;
  padding-bottom: 14px;
}
.main-nav.is-open{ display:flex; }
.main-nav a{
  padding:10px 6px; color:#fff; opacity:.9; border-top:1px solid rgba(255,255,255,.08);
}
.main-nav a:hover{ opacity:1; color: var(--color-accent-2); }

@media (min-width: 900px){
  .header__row{ display:none; }
  .main-nav{
    display:flex !important; flex-direction:row; gap: 26px; padding-block: 18px;
  }
  .main-nav a{ padding:6px 0; border-top:none; font-size:.92rem; font-weight:500; }
}

/* ==========================================================================
   COOKIE BANNER (placeholder — no real consent logic)
   ========================================================================== */
.cookie-banner{
  position: fixed; inset: auto 0 0 0; z-index: 999;
  background: var(--color-dark); color:#fff;
  padding: 16px 20px; box-shadow: 0 -4px 16px rgba(0,0,0,.25);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner__row{
  max-width: var(--container-w); margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between;
}
.cookie-banner p{ margin:0; font-size:.9rem; max-width: 70ch; }
.cookie-banner a{ text-decoration:underline; }
.btn-cookie{
  background: var(--color-accent-2); color:#1a1200; border:none; font-weight:700;
  padding:10px 20px; border-radius: var(--radius-pill); cursor:pointer; white-space:nowrap;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background:
    radial-gradient(circle at 88% 12%, rgba(245,179,1,.20), transparent 42%),
    linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-alt) 100%);
  color:#fff;
  padding-block: 40px 36px;
}
.hero h1{ color:#fff; margin-bottom:.4em; }
.hero__intro{ max-width: 68ch; opacity:.92; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:18px; align-items:center; font-size:.9rem; }

.hero__grid{ display:flex; flex-direction:column-reverse; align-items:center; gap:20px; }
.hero__logo{ width:min(100%, 280px); height:auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
@media (min-width: 860px){
  .hero__grid{ flex-direction:row; justify-content:space-between; gap:40px; }
  .hero__copy{ flex:1; min-width:0; }
  .hero__logo{ width:min(40%, 400px); flex-shrink:0; }
}

/* ==========================================================================
   RANKING (classifica 10 casinò, subito sotto la hero)
   ========================================================================== */
.ranking{ padding-block: 30px 0; }
.ranking h2{ margin-top:0; }

/* ==========================================================================
   LAYOUT: colonna centrale unica (TOC → classifica → articolo)
   ========================================================================== */
.container--content{ max-width: 960px; }
.page-layout{ padding-block: 30px 50px; }
.ranking:target{ scroll-margin-top: 90px; }

/* TOC a tutta larghezza — <details>/<summary>, apribile/richiudibile nativamente */
.toc-section{ padding-block: 30px 0; }
.toc{
  background:#fff; border:1px solid var(--color-border); border-radius: 999px;
  transition: border-radius .2s ease;
}
.toc[open]{ border-radius: 24px; }
.toc__summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 18px 30px; font-size:1rem; font-weight:600;
  cursor:pointer; user-select:none; list-style:none;
}
.toc__summary::-webkit-details-marker{ display:none; }
.toc__summary::after{
  content:""; flex-shrink:0; width:9px; height:9px; margin-top:-4px;
  border-right:2px solid var(--color-dark-alt); border-bottom:2px solid var(--color-dark-alt);
  transform: rotate(45deg); transition: transform .2s ease;
}
.toc[open] .toc__summary::after{ transform: rotate(-135deg); margin-top:4px; }
.toc ol{ margin:0; padding: 0 30px 22px 50px; font-size:.95rem; }
.toc li{ margin-bottom:6px; }
.toc a{ color: var(--color-text-dark); }
.toc a:hover{ color: var(--color-accent); text-decoration:underline; }
@media (min-width: 760px){ .toc ol{ columns: 2; column-gap: 40px; } }


/* ==========================================================================
   PROSE / CONTENT BLOCKS
   ========================================================================== */
.prose > section{ margin-bottom: 40px; }
.prose section:target{ scroll-margin-top: 90px; }

/* Quick facts card */
.quick-facts{
  display:grid; grid-template-columns: repeat(2,1fr); gap:14px;
  background: linear-gradient(135deg, var(--color-dark), var(--color-dark-alt)); color:#fff; border-radius: var(--radius-card);
  padding: 22px; margin-bottom: 10px;
}
@media (min-width:640px){ .quick-facts{ grid-template-columns: repeat(4,1fr); } }
.quick-facts__item dt{ font-size:.72rem; text-transform:uppercase; opacity:.7; letter-spacing:.06em; }
.quick-facts__item dd{ margin:4px 0 0; font-weight:700; font-size:1.05rem; color: var(--color-accent-2); }

/* Pros & cons */
.pros-cons{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .pros-cons{ grid-template-columns:1fr 1fr; } }
.pros-cons__col{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-card); padding:18px 22px; }
.pros-cons__col--pros{ border-top:4px solid #2e7d32; }
.pros-cons__col--cons{ border-top:4px solid #c62828; }
.pros-cons__col h3{ margin-top:0; }
.pros-cons__col ul{ list-style:none; padding:0; margin:0; }
.pros-cons__col li{ padding-left:1.6em; position:relative; margin-bottom:8px; }
.pros-cons__col--pros li::before{ content:"✓"; position:absolute; left:0; color:#2e7d32; font-weight:700; }
.pros-cons__col--cons li::before{ content:"✕"; position:absolute; left:0; color:#c62828; font-weight:700; }

/* Tables */
.table-wrap{ overflow-x:auto; border:1px solid var(--color-border); border-radius: var(--radius-card); }
table.data-table{ min-width: 560px; font-size:.92rem; }
table.data-table caption{ text-align:left; font-weight:700; padding:12px 16px; background:#fff; }
table.data-table th, table.data-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--color-border); }
table.data-table thead th{ background: var(--color-dark); color:#fff; }
table.data-table tbody tr:nth-child(even){ background: var(--color-cream-alt); }

/* Figure / image with caption */
figure.content-figure{ margin:0; }
figure.content-figure img{ border-radius: var(--radius-card); }
figure.content-figure figcaption{ font-size:.85rem; color:#556; margin-top:8px; }

/* Pull quote */
blockquote.pull-quote{
  margin: 0; padding: 18px 24px; border-left: 5px solid var(--color-accent-2);
  background:#fff; border-radius: 0 var(--radius-card) var(--radius-card) 0; font-style:italic;
}
blockquote.pull-quote footer{ margin-top:8px; font-style:normal; font-size:.85rem; color:#556; }

/* Image / generic placeholder box */
.img-placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background: repeating-linear-gradient(45deg,#d5dcea,#d5dcea 10px,#e0e6f1 10px,#e0e6f1 20px);
  color:#44506b; font-size:.8rem; border-radius: var(--radius-card);
  width:100%;
}

/* CTA banner */
.cta-banner{
  background: linear-gradient(135deg, var(--color-dark), var(--color-dark-alt)); color:#fff; border-radius: var(--radius-card);
  padding: 28px 24px; text-align:center;
}
.cta-banner h2{ margin-top:0; color:#fff; }
.btn-cta{
  display:inline-block; background: var(--cta-bg); color: var(--cta-text); font-weight:700;
  padding: 14px 32px; border-radius: var(--radius-pill); margin-top:6px;
  border: none; cursor:pointer; font-size:1rem;
  box-shadow: 0 8px 20px rgba(245,163,0,.28);
}
.btn-cta:hover{ background: var(--cta-bg-hover); }
.cta-banner small{ display:block; margin-top:10px; opacity:.75; font-size:.75rem; }

/* ==========================================================================
   OFFER / CASINO CARD (repeatable comparison block) — versione chiara
   ========================================================================== */
.offer-list{ display:flex; flex-direction:column; gap:14px; }
.offer-card{
  background:#fff; color: var(--color-text-dark); border-radius: var(--radius-card);
  padding: 16px 18px; display:grid; gap:12px;
  border: 1px solid var(--color-border); border-left: 5px solid var(--color-accent-2);
  box-shadow: 0 6px 18px rgba(14,26,51,.06);
}
@media (min-width:760px){
  .offer-card{ grid-template-columns: 120px 1fr auto; align-items:center; gap:20px; }
}
.offer-card__badges{ display:flex; flex-wrap:wrap; gap:6px; grid-column: 1 / -1; }
@media (min-width:760px){ .offer-card__badges{ order:-1; } }
.badge-chip{
  font-size:.7rem; font-weight:600; padding:4px 10px; border-radius: var(--radius-pill);
  background: var(--color-cream-alt); color: var(--color-dark-alt); white-space:nowrap;
}
.badge-chip--top{ background:#fff0b8; color:#7a5a00; }
.badge-chip--new{ background:#dbeafe; color:#1e40af; }
.badge-chip--hot{ background:#ffe1d2; color:#9a3412; }
.badge-chip--fav{ background:#fde1ef; color:#9d174d; }
.hero .badge-chip{ background: rgba(255,255,255,.14); color:#fff; }
.hero .badge-chip--top{ background:#f5b301; color:#1a1200; }
.hero .badge-chip--new{ background:#3b82f6; color:#fff; }

.offer-card__logo{ background:#fff; border:1px solid var(--color-border); border-radius:12px; padding:10px; }
.offer-card__rating{ color: var(--color-gold); font-weight:700; font-size:.85rem; margin-top:6px; }

.offer-card__mid{ font-size:.9rem; }
.offer-card__bonus{ font-weight:700; font-size:1rem; color:#b45309; }
.offer-card__pay{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.offer-card__pay img{ height:20px; width:auto; background:#fff; border-radius:4px; padding:2px 4px; }

.offer-card__cta{
  background: var(--cta-bg); color: var(--cta-text); font-weight:700; text-align:center;
  padding:12px 26px; border-radius: var(--radius-pill); white-space:nowrap;
  box-shadow: 0 6px 16px rgba(245,163,0,.28);
}
.offer-card__cta:hover{ background: var(--cta-bg-hover); }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-item:first-child{ border-top:1px solid var(--color-border); }
.faq-question{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:1rem; font-weight:600; color: var(--color-text-dark);
  padding: 16px 30px 16px 0; position:relative;
}
.faq-question::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:1.3rem; color: var(--color-accent);
}
.faq-question[aria-expanded="true"]::after{ content:"–"; }
.faq-answer{ padding: 0 0 16px; color:#33405a; }
.faq-answer[hidden]{ display:none; }

/* Methodology */
.methodology{ background:#fff; border:1px dashed var(--color-border); border-radius: var(--radius-card); padding:20px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--color-dark); color:#b8c4dd; padding-block: 40px 20px; border-top:3px solid var(--color-accent-2); }
.footer__grid{ display:grid; gap:28px; grid-template-columns:1fr; margin-bottom:30px; }
@media (min-width:760px){ .footer__grid{ grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__grid h2{ color:#fff; font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; margin-top:0; }
.footer__grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-size:.9rem; }
.footer__grid a:hover{ text-decoration:underline; color:#fff; }
.footer__about p{ font-size:.85rem; opacity:.85; }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:18px;
  font-size:.78rem; opacity:.7; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
}

/* Skip-to-top */
.back-to-top{
  position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:50%;
  background: var(--cta-bg); color: var(--cta-text); display:flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.3); font-size:1.2rem; z-index:400;
}