/* ==========================================================================
   Classix Help Center – Shared Styles
   Location: /help/help.css (same folder as your .html files)
   -------------------------------------------------------------------------- */

/* Theme tokens */
:root{
  --bg:#0b0b0b;        /* was #0b0b10 */
  --layer:#0f0f10;     /* was #0e1016 */
  --panel:#141414;     /* was #11131a */
  --text:#f2f2f2;
  --muted:#b7bbc7;
  --accent:#fff;
  --ring:rgba(255,255,255,.08);
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --container:1200px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
img{max-width:100%;display:block}
.container{width:min(var(--container),92vw);margin:0 auto}

/* Skip link (accessibility) */
.skip-link{
  position:absolute;left:-9999px;top:auto;z-index:100;
  background:var(--accent);color:#fff;padding:8px 12px;border-radius:6px;
}
.skip-link:focus{left:12px;top:12px}

/* Top nav (sticky, blurred) */
/* Top nav (match web app spacing) */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  height:64px;
  z-index:50;
  display:flex;
  align-items:center;
  background:color-mix(in oklab, black 60%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav .container{
  display:flex;
  align-items:center;
  gap:22px; /* matches landing + web app */
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  font-weight:800;
  letter-spacing:.4px;
  font-size:1.2rem;
  margin-right:18px; /* space before nav links like Netflix */
}
.nav-links{display:none;gap:18px;color:var(--muted);}

	/* Align landing nav typography with web app */
.nav-links a {
  font-family: "Roboto Condensed", Inter, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.25px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.78);
}

/* Hover matches Netflix-style subtle emphasis */
.nav-links a:hover {
  color: #ffffff;
}

.spacer{flex:1}
/* Buttons – Apple-style white pills */
.btn{
  padding:10px 16px;
  border-radius:9999px;
  font-weight:600;
  line-height:1;
  border:1px solid transparent;
}

/* Primary (white pill) */
.btn-solid{
  background:#ffffff;
  color:#000000;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

/* Secondary (subtle pill) */
.btn-outline{
  background:rgba(255,255,255,.08);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.18);
}

/* Hover */
.btn-solid:hover{
  background:rgba(255,255,255,.92);
}

.btn-outline:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);
}
@media(min-width:900px){.nav-links{display:flex}}

/* Layout */
main{padding-top:84px;margin-bottom:40px}
.hero-mini{
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:28px 0;
}
.breadcrumbs{font-size:.92rem;color:var(--muted)}
.breadcrumbs a{color:var(--muted)}
.page-title{margin:.3rem 0 0;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.2}

.content-wrap{
  display:grid;gap:24px;margin-top:20px;
  grid-template-columns: 1fr;
}
@media(min-width:1024px){
  .content-wrap{grid-template-columns: minmax(0,1fr) 300px;}
}

/* Article */
article{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
article h2{margin:1.2em 0 .3em;font-size:1.3rem}
article h3{margin:1em 0 .25em;font-size:1.05rem}
article p{color:var(--text)}
article .muted{color:var(--muted)}
article ul,article ol{padding-left:1.1em}
article li+li{margin-top:.35em}
.callout{
  border-left:4px solid var(--accent);
  background:rgba(255,255,255,.04);
  padding:14px 16px;border-radius:10px;margin:14px 0;color:var(--muted)
}
.meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin-top:14px}

/* Right rail */
.rail{position:sticky;top:84px;height:max-content;display:grid;gap:16px}
.panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.toc h4,.related h4{margin:0 0 10px;font-size:1rem}
.toc a{display:block;padding:6px 0;color:var(--muted)}
.toc a.active{color:#fff}
.related a{display:block;padding:6px 0}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,.06);margin-top:36px}
.footer{color:var(--muted);font-size:.92rem;padding:24px 0 36px}
.links{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
@media(min-width:700px){.links{grid-template-columns:repeat(4, minmax(0,1fr))}}

/* Code blocks (future tech docs) */
code,kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#0e1117;border:1px solid rgba(255,255,255,.06);
  padding:.08em .35em;border-radius:6px
}
pre{
  background:#0e1117;border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:14px;overflow:auto
}
pre code{background:transparent;border:0;padding:0}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .btn-solid{box-shadow:none}
}

/* Print: simplify */
@media print{
  .nav,.rail,footer{display:none !important}
  body{background:#fff;color:#000}
  article{box-shadow:none;border:0}
}

/* Match landing page button grouping */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px; /* tighter, premium spacing */
}

/* Prevent container gap from affecting buttons */
.nav .container > .btn,
.nav .container > a.btn {
  margin-left: 0;
}