/* static-page.css — /page/{slug} content pages (CryptoAlleys vibe).
   px sizes on purpose (BS3 page: html{font-size:10px}).
   Palette follows the site's body.dark-mode TOGGLE, media query = first paint. */
:root{
  --sp-bg:#fafafa;--sp-panel:#fff;--sp-text:#13131a;--sp-muted:#64748b;--sp-line:#eef0f4;
  --sp-primary:#8254e9;--sp-soft:rgba(130,84,233,.09);
}
@media (prefers-color-scheme: dark){ :root{ --sp-panel:#16151d;--sp-text:#efeff5;--sp-muted:#a49fb5;--sp-line:#26242f; } }
body.dark-mode{ --sp-panel:#16151d;--sp-text:#efeff5;--sp-muted:#a49fb5;--sp-line:#26242f; }
body:not(.dark-mode){ --sp-panel:#fff;--sp-text:#13131a;--sp-muted:#64748b;--sp-line:#eef0f4; }

/* breadcrumb strip */
#static-page-crumb .breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  list-style:none;
  background:linear-gradient(135deg, rgba(130,84,233,.10), rgba(176,108,247,.03));
  border:1px solid rgba(130,84,233,.14);
  border-radius:12px;
  padding:10px 16px;
  font-size:12.5px;
  margin:14px 0 0;
  gap:2px;
}
#static-page-crumb .breadcrumb-item{
  display:inline-flex;
  align-items:center;
  color:var(--sp-muted);
}
#static-page-crumb .breadcrumb-item + .breadcrumb-item::before{
  content:"›";
  padding:0 10px;
  color:rgba(130,84,233,.55);
  font-weight:700;
}
#static-page-crumb .breadcrumb-item a{
  color:var(--sp-primary);
  text-decoration:none;
  font-weight:600;
}
#static-page-crumb .breadcrumb-item a:hover{
  color:#6b3fd4;
  text-decoration:underline;
}
#static-page-crumb .breadcrumb-item.active{
  color:var(--sp-text);
  font-weight:600;
}

/* cards */
.sp-card{
  background:var(--sp-panel); border:1px solid var(--sp-line); border-radius:14px;
  box-shadow:0 2px 10px rgba(20,5,40,.05); margin-bottom:16px; overflow:hidden;
}
.sp-card .sp-head{
  padding:12px 18px; border-bottom:1px solid var(--sp-line);
  display:flex; align-items:center; gap:10px; font-weight:700; color:var(--sp-text);
}
.sp-card .sp-head i{ color:var(--sp-primary); }
.sp-card .sp-head h1{ font-size:19px; margin:0; font-weight:800; color:var(--sp-text); }
.sp-card .sp-body{ padding:18px 22px; }

/* content typography */
.sp-content{ color:var(--sp-text); font-size:14px; line-height:1.65; }
.sp-content h2, .sp-content h3, .sp-content h4{
  color:var(--sp-text); font-weight:800; line-height:1.3; margin:22px 0 10px;
}
.sp-content h2{ font-size:19px; }
.sp-content h3{ font-size:16.5px; padding-bottom:6px; border-bottom:1px solid var(--sp-line); }
.sp-content h4{ font-size:14.5px; }
.sp-content p{ margin:0 0 12px; }
.sp-content ul, .sp-content ol{ margin:0 0 14px; padding-left:22px; }
.sp-content li{ margin-bottom:6px; }
.sp-content a{ color:var(--sp-primary); font-weight:600; }
.sp-content strong{ color:var(--sp-text); }
.sp-content blockquote{
  border-left:3px solid var(--sp-primary); background:var(--sp-soft);
  margin:14px 0; padding:10px 14px; border-radius:0 10px 10px 0; color:var(--sp-text);
}
.sp-content code{
  background:var(--sp-soft); color:var(--sp-primary); border-radius:6px; padding:1px 6px; font-size:12.5px;
}
.sp-content img{ max-width:100%; height:auto; border-radius:12px; border:1px solid var(--sp-line); }
.sp-content table{ width:100%; border-collapse:collapse; margin:14px 0; font-size:13px; }
.sp-content th, .sp-content td{ border:1px solid var(--sp-line); padding:8px 10px; text-align:left; }
.sp-content th{ background:var(--sp-soft); color:var(--sp-text); }
.sp-content hr{ border:0; border-top:1px solid var(--sp-line); margin:20px 0; }

/* callout chips inside guides */
.sp-content .sp-tip{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid rgba(130,84,233,.25); background:var(--sp-soft);
  border-radius:10px; padding:10px 14px; margin:14px 0;
}

/* sidebar page nav */
.sp-side .sp-links a{
  display:block; padding:9px 16px; color:var(--sp-text); text-decoration:none;
  font-size:13px; border-bottom:1px solid var(--sp-line); transition:background .15s,color .15s;
}
.sp-side .sp-links a:last-child{ border-bottom:0; }
.sp-side .sp-links a:hover{ background:var(--sp-soft); color:var(--sp-primary); }
.sp-side .sp-links a.active{
  background:var(--sp-soft); color:var(--sp-primary); font-weight:700;
  border-left:3px solid var(--sp-primary);
}

@media (max-width: 991px){
  .sp-card .sp-body{ padding:14px 16px; }
}