/* =========================================================
   blog.css : Reusable Blog Template Stylesheet (AllPanel777)
   -----------------------------------------------------------
   Loaded ALONGSIDE the site's main style.css (via $extraCss),
   so all theme variables (--bg-card, --cyan-accent, --font-head,
   etc.) and shared components (.icon-grid, .table-wrap,
   .data-table, .faq-list, .intro-panel, .btn-*, .disclaimer-box)
   are already available here. This file only adds the pieces
   that are specific to blog posts.

   Use this SAME file for every future blog post. Do not fork it
   per post, only the .php content changes.
   ========================================================= */

/* ---------- Breadcrumb ---------- */
.blog-breadcrumb{
  font-size:13px;color:var(--text-faint);padding:18px 0 0;
}
.blog-breadcrumb a{color:var(--text-faint);}
.blog-breadcrumb a:hover{color:var(--cyan-accent);}
.blog-breadcrumb .sep{margin:0 6px;}

/* ---------- Meta row (author / date / read time) ---------- */
.blog-meta-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:16px;
  margin:18px 0 0;font-size:13.5px;color:var(--text-faint);
  position:relative;z-index:1;
}
.blog-meta-row .author{
  display:flex;align-items:center;gap:9px;color:var(--text-main);font-weight:600;
}
.blog-meta-row .avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue-bright),var(--cyan-accent));
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#04122b;font-size:12.5px;
}
.blog-meta-row .divider{color:var(--border-soft);}

/* ---------- Featured / banner image ---------- */
.blog-featured-img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius-md);border:1px solid var(--border-soft);
  margin:22px 0 8px;
}
.blog-img-caption{font-size:12.5px;color:var(--text-faint);text-align:center;margin:0 0 6px;}

/* ---------- Layout: article + sticky TOC ---------- */
.blog-layout{
  display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:start;
}
.blog-toc{
  position:sticky;top:96px;
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:20px;
}
.blog-toc h4{
  font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);margin:0 0 12px;
}
.blog-toc nav{display:flex;flex-direction:column;gap:2px;max-height:65vh;overflow-y:auto;}
.blog-toc-link{
  display:block;padding:7px 10px;border-radius:8px;font-size:13.5px;
  color:var(--text-mute);border-left:2px solid transparent;transition:var(--transition);
}
.blog-toc-link:hover{color:#fff;background:rgba(255,255,255,.04);}
.blog-toc-link.active{
  color:var(--cyan-accent);border-left-color:var(--cyan-accent);
  background:rgba(0,209,255,.08);font-weight:600;
}

/* ---------- Article typography ---------- */
.blog-article{min-width:0;}
.blog-article h2{scroll-margin-top:100px;margin-top:38px;}
.blog-article h3{scroll-margin-top:100px;font-size:17.5px;margin-top:22px;}
.blog-article p{font-size:15.5px;}
.blog-article ul,
.blog-article ol{margin:0 0 16px;padding-left:22px;}
.blog-article li{margin:0 0 9px;color:var(--text-mute);font-size:15px;}
.blog-article strong{color:#fff;}
.blog-article a{color:var(--cyan-accent);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Game card (for "Top 5 crash games" style sections) ---------- */
.blog-game-card{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:20px;margin-bottom:16px;transition:var(--transition);
}
.blog-game-card:hover{border-color:var(--blue-bright);}
.blog-game-card .num{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue-bright),var(--blue-primary));
  color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;
}
.blog-game-card h3{margin:0 0 6px;font-size:17px;}
.blog-game-card p{margin:0;font-size:14.5px;color:var(--text-mute);}

/* ---------- CTA box ---------- */
.blog-cta{
  background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-section) 100%);
  border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:30px;margin:34px 0;text-align:center;
}
.blog-cta h3{margin:0 0 8px;}
.blog-cta p{color:var(--text-mute);margin:0 0 18px;}

/* ---------- Author / E-E-A-T box ---------- */
.blog-author-box{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:20px;margin:34px 0;
}
.blog-author-box .avatar{
  width:50px;height:50px;border-radius:50%;flex:0 0 50px;
  background:linear-gradient(135deg,var(--blue-bright),var(--cyan-accent));
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#04122b;font-size:16px;
}
.blog-author-box h5{margin:0 0 4px;font-size:14.5px;color:#fff;}
.blog-author-box p{margin:0;font-size:13.5px;color:var(--text-mute);}

/* ---------- Related posts ---------- */
.blog-related{padding:14px 0 50px;}
.blog-related h3{margin-bottom:18px;}
.blog-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.blog-related-card{
  display:block;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:18px;transition:var(--transition);
}
.blog-related-card:hover{border-color:var(--blue-bright);box-shadow:var(--shadow-glow);}
.blog-related-card .tag{font-size:11.5px;color:var(--cyan-accent);font-weight:700;text-transform:uppercase;}
.blog-related-card h4{font-size:15px;margin:8px 0 0;color:#fff;}

/* ---------- Reading progress bar ---------- */
.blog-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--blue-bright),var(--cyan-accent));
  z-index:300;transition:width .1s linear;
}

/* ---------- Back to top ---------- */
.blog-back-top{
  position:fixed;right:20px;bottom:88px;z-index:190;
  width:44px;height:44px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--border-soft);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--transition);
}
.blog-back-top.visible{opacity:1;visibility:visible;transform:translateY(0);}
.blog-back-top:hover{background:var(--blue-primary);border-color:var(--blue-primary);}

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .blog-layout{grid-template-columns:1fr;}
  .blog-toc{position:static;}
  .blog-toc nav{flex-direction:row;flex-wrap:wrap;gap:8px;max-height:none;overflow:visible;}
  .blog-toc-link{border:1px solid var(--border-soft);border-left:1px solid var(--border-soft);padding:6px 12px;}
  .blog-toc-link.active{border-color:var(--cyan-accent);}
  .blog-related-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .blog-game-card{flex-direction:column;}
  .blog-related-grid{grid-template-columns:1fr;}
  .blog-back-top{right:14px;bottom:78px;width:40px;height:40px;}
}