/*
Theme Name: BindSmith Docs
Theme URI: https://benandpaper.com/bindsmith/
Author: Ben and Paper
Description: A focused documentation theme for the BindSmith World of Warcraft addon. Includes hierarchical docs navigation, breadcrumbs, on-page table of contents, search, code-copy buttons and responsive layouts.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: bindsmith-docs
License: GPL-2.0-or-later
*/

:root {
  --bs-bg: #0b1020;
  --bs-surface: #11182b;
  --bs-surface-2: #172037;
  --bs-border: #283550;
  --bs-text: #e8edf6;
  --bs-muted: #9aa9bf;
  --bs-accent: #63a8ff;
  --bs-accent-2: #8ec4ff;
  --bs-code: #0a0f1c;
  --bs-success: #65d49b;
  --bs-warning: #f5c26b;
  --bs-max: 1500px;
  --bs-content: 860px;
  --bs-sidebar: 300px;
  --bs-toc: 230px;
  --bs-radius: 12px;
  --bs-shadow: 0 18px 60px rgba(0,0,0,.24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--bs-text);
  background:
    radial-gradient(circle at 15% 0%, rgba(99,168,255,.12), transparent 32rem),
    var(--bs-bg);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.7;
  font-size: 16px;
}
a { color: var(--bs-accent-2); text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:hover { color: #fff; }
img { max-width: 100%; height: auto; }
button, input { font: inherit; }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto !important; clip-path: none; background: #fff; color:#111;
  display:block; height:auto; left:8px; top:8px; padding:12px 16px;
  width:auto; z-index:100000;
}

.bs-progress {
  position: fixed; z-index: 9999; top: 0; left: 0;
  height: 3px; width: 0; background: var(--bs-accent);
}

.bs-header {
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: blur(16px);
  background: rgba(11,16,32,.88);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bs-header-inner {
  max-width: var(--bs-max); margin: 0 auto; min-height: 68px;
  padding: 0 24px; display: flex; gap: 24px; align-items: center;
}
.bs-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; min-width:max-content; }
.bs-brand-mark {
  width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; font-weight:800; color:#07101f;
  background: linear-gradient(135deg, var(--bs-accent), #b9dbff);
  box-shadow: 0 0 24px rgba(99,168,255,.25);
}
.bs-brand-text strong { display:block; line-height:1.1; font-size:17px; }
.bs-brand-text span { display:block; color:var(--bs-muted); font-size:12px; line-height:1.2; margin-top:2px; }
.bs-header-spacer { flex: 1; }
.bs-search { width:min(430px, 42vw); position:relative; }
.bs-search input[type="search"] {
  width:100%; border:1px solid var(--bs-border); border-radius:10px;
  background:#0d1425; color:var(--bs-text); padding:10px 42px 10px 14px;
  outline:none;
}
.bs-search input[type="search"]:focus { border-color:var(--bs-accent); box-shadow:0 0 0 3px rgba(99,168,255,.12); }
.bs-search button {
  position:absolute; right:6px; top:5px; width:34px; height:34px;
  border:0; border-radius:8px; background:transparent; color:var(--bs-muted); cursor:pointer;
}
.bs-menu-toggle {
  display:none; border:1px solid var(--bs-border); border-radius:9px;
  background:var(--bs-surface); color:var(--bs-text); padding:8px 11px; cursor:pointer;
}

.bs-shell {
  max-width: var(--bs-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--bs-sidebar) minmax(0, 1fr) var(--bs-toc);
  gap: 36px;
  padding: 36px 24px 64px;
}
.bs-sidebar {
  position: sticky; top: 96px; align-self: start;
  max-height: calc(100vh - 118px); overflow:auto;
  padding-right: 8px;
}
.bs-sidebar::-webkit-scrollbar { width:6px; }
.bs-sidebar::-webkit-scrollbar-thumb { background:var(--bs-border); border-radius:10px; }
.bs-sidebar-title {
  font-size:12px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bs-muted); margin: 0 0 12px;
}
.bs-doc-tree, .bs-doc-tree ul { list-style:none; margin:0; padding:0; }
.bs-doc-tree ul { padding-left:14px; border-left:1px solid var(--bs-border); margin-left:7px; }
.bs-doc-tree li { margin:2px 0; }
.bs-doc-tree a {
  display:block; padding:7px 10px; border-radius:8px;
  text-decoration:none; color:#bdc8d8; font-size:14px; line-height:1.35;
}
.bs-doc-tree a:hover { background:rgba(255,255,255,.05); color:#fff; }
.bs-doc-tree .current_page_item > a,
.bs-doc-tree .current_page_ancestor > a {
  color:#fff; background:rgba(99,168,255,.13);
}
.bs-doc-tree .current_page_item > a { box-shadow: inset 3px 0 0 var(--bs-accent); }

.bs-main { min-width:0; max-width:var(--bs-content); width:100%; margin:0 auto; }
.bs-breadcrumbs {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  color:var(--bs-muted); font-size:13px; margin-bottom:24px;
}
.bs-breadcrumbs a { color:var(--bs-muted); text-decoration:none; }
.bs-breadcrumbs a:hover { color:#fff; }
.bs-breadcrumbs .sep { opacity:.55; }

.bs-article-header { margin-bottom:30px; }
.bs-kicker { color:var(--bs-accent); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.bs-article-header h1 {
  font-size:clamp(34px, 5vw, 58px); line-height:1.05;
  letter-spacing:-.035em; margin:7px 0 12px;
}
.bs-article-header .bs-meta { color:var(--bs-muted); font-size:14px; }

.bs-content > *:first-child { margin-top:0; }
.bs-content h2, .bs-content h3, .bs-content h4 {
  color:#fff; scroll-margin-top:100px; line-height:1.25;
}
.bs-content h2 { font-size:30px; margin:54px 0 16px; letter-spacing:-.02em; }
.bs-content h3 { font-size:22px; margin:36px 0 12px; }
.bs-content h4 { font-size:18px; margin:28px 0 10px; }
.bs-content p { margin:0 0 18px; color:#d4ddea; }
.bs-content ul, .bs-content ol { margin:0 0 22px; padding-left:24px; }
.bs-content li { margin:6px 0; }
.bs-content strong { color:#fff; }
.bs-content hr { border:0; border-top:1px solid var(--bs-border); margin:48px 0; }

.bs-content blockquote {
  margin:26px 0; padding:18px 20px;
  border-left:4px solid var(--bs-accent);
  background:rgba(99,168,255,.08); border-radius:0 var(--bs-radius) var(--bs-radius) 0;
}
.bs-content blockquote p:last-child { margin-bottom:0; }

.bs-content pre {
  position:relative; overflow:auto; margin:24px 0;
  background:var(--bs-code); color:#e5eefb;
  border:1px solid #1d2940; border-radius:var(--bs-radius);
  padding:18px 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.bs-content code {
  font-family:"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:.92em;
}
.bs-content :not(pre) > code {
  color:#d9ebff; background:#17223a; border:1px solid #263753;
  border-radius:6px; padding:.12em .38em;
}
.bs-copy-code {
  position:absolute; top:8px; right:8px;
  border:1px solid #31415e; border-radius:7px;
  background:#121c30; color:#aebed3; padding:5px 8px;
  font-size:12px; cursor:pointer;
}
.bs-copy-code:hover { color:#fff; border-color:var(--bs-accent); }

.bs-content table {
  width:100%; border-collapse:collapse; margin:24px 0;
  display:block; overflow-x:auto;
}
.bs-content th, .bs-content td { border:1px solid var(--bs-border); padding:11px 13px; text-align:left; }
.bs-content th { background:var(--bs-surface-2); color:#fff; }
.bs-content tr:nth-child(even) td { background:rgba(255,255,255,.018); }

.bs-content .wp-block-buttons { gap:10px; margin:20px 0 28px; }
.bs-content .wp-block-button__link {
  border-radius:9px; text-decoration:none;
  background:var(--bs-surface-2); border:1px solid var(--bs-border); color:#fff;
  padding:10px 14px;
}
.bs-content .wp-block-button__link:hover { border-color:var(--bs-accent); background:#1b2b48; }

.bs-toc {
  position: sticky; top: 96px; align-self:start;
  border-left:1px solid var(--bs-border); padding-left:20px;
  max-height:calc(100vh - 118px); overflow:auto;
}
.bs-toc-title {
  font-size:12px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--bs-muted); font-weight:800; margin-bottom:12px;
}
.bs-toc ul { list-style:none; margin:0; padding:0; }
.bs-toc li { margin:3px 0; }
.bs-toc a { display:block; color:var(--bs-muted); text-decoration:none; font-size:13px; line-height:1.4; padding:5px 0; }
.bs-toc a:hover, .bs-toc a.active { color:#fff; }
.bs-toc .level-3 { padding-left:12px; }

.bs-prev-next {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-top:58px; padding-top:28px; border-top:1px solid var(--bs-border);
}
.bs-prev-next a {
  display:block; text-decoration:none; border:1px solid var(--bs-border);
  background:var(--bs-surface); border-radius:var(--bs-radius); padding:15px 17px;
}
.bs-prev-next a:hover { border-color:var(--bs-accent); background:#151f35; }
.bs-prev-next .next { text-align:right; }
.bs-prev-next small { display:block; color:var(--bs-muted); margin-bottom:4px; }
.bs-prev-next strong { color:#fff; }

.bs-generic {
  max-width:1050px; margin:0 auto; padding:52px 24px 80px;
}
.bs-card-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:28px;
}
.bs-card {
  border:1px solid var(--bs-border); border-radius:var(--bs-radius);
  background:var(--bs-surface); padding:20px;
}
.bs-card h2, .bs-card h3 { margin-top:0; }

.bs-footer {
  border-top:1px solid var(--bs-border);
  color:var(--bs-muted); background:#080d18;
}
.bs-footer-inner {
  max-width:var(--bs-max); margin:0 auto; padding:28px 24px;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.bs-footer a { color:var(--bs-muted); }

@media (max-width: 1180px) {
  .bs-shell { grid-template-columns:260px minmax(0,1fr); }
  .bs-toc { display:none; }
}
@media (max-width: 840px) {
  .bs-header-inner { padding:0 16px; gap:12px; }
  .bs-menu-toggle { display:block; }
  .bs-search { width:auto; flex:1; }
  .bs-brand-text span { display:none; }
  .bs-shell { grid-template-columns:1fr; padding:24px 18px 56px; }
  .bs-sidebar {
    display:none; position:fixed; z-index:900; left:0; top:68px; bottom:0;
    width:min(86vw, 340px); max-height:none; padding:22px 18px 40px;
    background:#0b1120; box-shadow:var(--bs-shadow); border-right:1px solid var(--bs-border);
  }
  body.bs-nav-open .bs-sidebar { display:block; }
  .bs-article-header h1 { font-size:40px; }
  .bs-card-grid { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .bs-search { display:none; }
  .bs-prev-next { grid-template-columns:1fr; }
  .bs-prev-next .next { text-align:left; }
  .bs-content h2 { font-size:26px; }
}

@media print {
  .bs-header, .bs-sidebar, .bs-toc, .bs-prev-next, .bs-progress, .bs-footer { display:none !important; }
  body { background:#fff; color:#111; }
  .bs-shell { display:block; max-width:none; padding:0; }
  .bs-main { max-width:none; }
  .bs-content p, .bs-content li, .bs-content h1, .bs-content h2, .bs-content h3 { color:#111; }
  .bs-content pre { white-space:pre-wrap; color:#111; background:#f4f4f4; }
}