/* ==========================================================================
   SHADOWPEDIA — the in-house wiki (WoWWiki-style, Shadowburn skin)
   Extends css/style.css. Articles are rendered by js/shadowpedia.js from the
   #sp-articles JSON block — one object per article maps to a future
   `shadowpedia_article` row (slug, category, updated, lead, sections, infobox).
   ========================================================================== */

.sp-wrap{
  max-width:1280px; margin:0 auto; padding:52px 5% var(--block-gap);
  display:grid; grid-template-columns:250px minmax(0,1fr) 262px; gap:44px; align-items:start;
}

/* ---------- LEFT NAV ---------- */
.sp-nav{position:sticky; top:96px; display:flex; flex-direction:column; gap:16px;}
.sp-search{
  width:100%; padding:11px 14px; border-radius:10px;
  background:rgba(8,13,24,0.6); border:1px solid var(--border);
  color:var(--text); font-family:var(--font-body); font-size:0.88rem;
}
.sp-search::placeholder{color:var(--text-dim);}
.sp-nav-scroll{
  max-height:calc(100vh - 190px); overflow-y:auto; padding-right:4px;
  display:flex; flex-direction:column; gap:20px;
}
.sp-nav-group-title{
  font-family:var(--font-display); font-size:0.68rem; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border);
}
.sp-nav-link{
  display:block; padding:7px 10px; border-radius:7px; font-size:0.86rem;
  color:var(--text-dim); border-left:2px solid transparent; transition:all .15s ease;
}
.sp-nav-link:hover{color:var(--text); background:rgba(111,216,255,0.05);}
.sp-nav-link.active{
  color:var(--frost-glow); background:rgba(111,216,255,0.08); border-left-color:var(--frost);
}
.sp-nav-empty{font-size:0.82rem; color:var(--text-dim); padding:6px 10px;}

/* ---------- ARTICLE ---------- */
.sp-article{min-width:0;}
.sp-crumb{
  font-size:0.76rem; color:var(--text-dim); margin-bottom:14px;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.sp-crumb a{color:var(--text-dim);}
.sp-crumb a:hover{color:var(--frost-glow);}
.sp-crumb .sep{opacity:0.5;}
.sp-article h1{
  font-family:var(--font-display); font-size:2.1rem; line-height:1.15; margin-bottom:10px;
}
.sp-meta{
  font-size:0.76rem; letter-spacing:0.4px; color:var(--text-dim);
  padding-bottom:20px; margin-bottom:26px; border-bottom:1px solid var(--border);
}
.sp-meta b{color:var(--frost-glow); font-family:var(--font-display); font-weight:400;}
.sp-lead{font-size:1.02rem; line-height:1.8; color:var(--text); margin-bottom:14px;}
.sp-lead a, .sp-body a{color:var(--frost-glow);}
.sp-body h2{
  font-family:var(--font-display); font-size:1.3rem; margin:34px 0 12px;
  padding-bottom:8px; border-bottom:1px solid var(--border); scroll-margin-top:90px;
}
.sp-body h3{font-family:var(--font-display); font-size:1.02rem; margin:22px 0 8px; color:var(--text);}
.sp-body p{color:var(--text-dim); line-height:1.85; font-size:0.94rem; margin-bottom:14px;}
.sp-body ul, .sp-body ol{margin:0 0 16px 4px; display:flex; flex-direction:column; gap:8px;}
.sp-body li{
  color:var(--text-dim); line-height:1.7; font-size:0.92rem; padding-left:20px; position:relative;
}
.sp-body ul li::before{content:"›"; position:absolute; left:2px; color:var(--frost-glow); font-weight:700;}
.sp-body ol{counter-reset:sp; }
.sp-body ol li::before{counter-increment:sp; content:counter(sp) "."; position:absolute; left:0; color:var(--frost-glow); font-family:var(--font-display);}
.sp-body code{
  font-family:'Consolas','Menlo',monospace; font-size:0.86em;
  background:rgba(111,216,255,0.08); border:1px solid var(--border);
  padding:1px 6px; border-radius:5px; color:var(--frost-glow);
}
.sp-callout{
  margin:18px 0; padding:14px 18px; border-radius:10px;
  border:1px solid var(--frost-dim); background:rgba(111,216,255,0.06);
  font-size:0.9rem; line-height:1.7; color:var(--text-dim);
}
.sp-callout b{color:var(--text); font-family:var(--font-display);}

.sp-seealso{
  margin-top:38px; padding:18px 20px; border-radius:12px;
  border:1px solid var(--border); background:var(--bg-alt);
}
.sp-seealso h3{
  font-family:var(--font-display); font-size:0.72rem; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:10px;
}
.sp-seealso a{display:inline-block; margin:4px 14px 4px 0; color:var(--frost-glow); font-size:0.88rem;}

/* ---------- RIGHT RAIL ---------- */
.sp-rail{position:sticky; top:96px; display:flex; flex-direction:column; gap:22px;}
.sp-card{
  border:1px solid var(--border); border-radius:12px; padding:18px 18px 20px;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
}
.sp-card h3{
  font-family:var(--font-display); font-size:0.7rem; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:12px;
}
.sp-toc a{
  display:block; padding:5px 0 5px 12px; border-left:2px solid var(--border);
  font-size:0.82rem; color:var(--text-dim); transition:all .15s ease;
}
.sp-toc a:hover{color:var(--text); border-left-color:var(--frost-dim);}
.sp-toc a.active{color:var(--frost-glow); border-left-color:var(--frost);}

.sp-infobox dl{display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:0.82rem;}
.sp-infobox dt{color:var(--text-dim); white-space:nowrap;}
.sp-infobox dd{color:var(--text); text-align:right;}

.sp-edit{
  display:flex; align-items:flex-start; gap:9px;
  font-size:0.78rem; line-height:1.6; color:var(--text-dim);
}
.sp-edit svg{width:14px; height:14px; flex-shrink:0; margin-top:2px; color:var(--frost-glow);}

@media(max-width:1180px){
  .sp-wrap{grid-template-columns:240px minmax(0,1fr); gap:38px;}
  .sp-rail{display:none;}
}
@media(max-width:820px){
  .sp-wrap{grid-template-columns:minmax(0,1fr); max-width:680px;}
  .sp-nav{position:static;}
  .sp-nav-scroll{max-height:none;}
  .sp-article h1{font-size:1.7rem;}
}