/* ============================================================
   SEO Manager for WHMCS — Documentation site
   Self-contained stylesheet (no external CDN / fonts).
   Brand colors mirror the module's admin theme.
   ============================================================ */

:root {
  --sidebar-bg: #2b3643;
  --sidebar-hover: #35414f;
  --sidebar-text: #cfd6df;
  --sidebar-muted: #7f8b9c;
  --accent: #65a0d0;
  --accent-solid: #5194ca;
  --accent-dark: #4079a8;
  --accent-soft: #e8f0f8;

  --bg: #eef1f5;
  --card: #ffffff;
  --text: #333f4d;
  --heading: #22303f;
  --muted: #69778a;
  --border: #dbe2ea;
  --border-strong: #c6cfda;

  --code-bg: #f6f8fa;
  --header-bg: #202a35;   /* top header band */
  --maxw: 920px;          /* content column max width */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 15px;
}

.wrap { min-height: 100vh; }

/* ============================================================
   Top header bar
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg);
  color: #fff;
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  height: 58px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.topbar .doc-title { font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.topbar .doc-title small { display:block; font-weight:500; font-size:11.5px; color:#9fb1c2; letter-spacing:.6px; }
.topbar .spacer { flex: 1; }
.topbar .status {
  font-size: 12px; padding: 4px 11px; border-radius: 999px; font-weight:600; letter-spacing:.4px;
  background: #2e7d4f; text-transform: uppercase;
}
.topbar .menu-open { display:none; margin-left:auto; }

/* ============================================================
   Sidebar navigation
   ============================================================ */
.sidebar { background: var(--sidebar-bg); color: var(--sidebar-text); }
.side-scroll { padding: 20px 14px 40px; position: sticky; top: 58px; }

.side-nav { list-style: none; margin: 0; padding: 0; }
.side-nav .group-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--sidebar-muted); margin: 20px 10px 7px;
}
.side-nav a {
  display: block; color: var(--sidebar-text); text-decoration: none;
  padding: 7px 11px; border-radius: 6px; font-size: 14px;
}
.side-nav a:hover { background: rgba(255,255,255,.06); color:#fff; }
.side-nav a.active { background: var(--accent-solid); color:#fff; font-weight:600; }

/* ============================================================
   Content column
   ============================================================ */
.content { background: var(--bg); }

.page { max-width: var(--maxw); margin: 0 auto; padding: 30px 40px 70px; }

.breadcrumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.breadcrumbs a { color: var(--accent-dark); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

h1 { font-size: 30px; color: var(--heading); margin: 6px 0 4px; letter-spacing:-.4px; }
.lead { font-size: 17px; color: var(--muted); margin: 4px 0 6px; }
.rule { border:0; border-top:1px solid var(--border); margin: 22px 0 26px; }

h2 { font-size: 22px; color: var(--heading); margin: 40px 0 10px; padding-top:8px; }
h2::before { content:''; display:block; width:46px; height:3px; background:var(--accent-solid); border-radius:2px; margin-bottom:10px; }
h3 { font-size: 17px; color: var(--heading); margin: 26px 0 8px; }
h4 { font-size: 15px; color: var(--heading); margin: 20px 0 6px; color: var(--accent-dark); }
p { margin: 10px 0; }
ul, ol { margin: 8px 0; padding-left: 24px; }
li { margin: 5px 0; }
strong { color: var(--heading); }

a { color: var(--accent-dark); }
a:hover { color: var(--accent-solid); }

/* ============================================================
   Code
   ============================================================ */
code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}
pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
}
pre code { background: transparent; border: 0; padding: 0; }
pre .num { color: var(--muted); user-select: none; }

kbd {
  background: #fff; border:1px solid var(--border-strong);
  border-bottom-width:2px; border-radius:4px;
  padding:1px 6px; font-size:12px; font-family:inherit;
}

/* ============================================================
   Tables
   ============================================================ */
.table-wrap { overflow-x: auto; margin: 14px 0; }
table { width:100%; border-collapse: collapse; font-size: 14px; background:#fff; }
th, td { text-align:left; padding: 10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
th { background: var(--accent-soft); color: var(--heading); font-weight:600; white-space:nowrap; }
tr:last-child td { border-bottom:0; }

/* ============================================================
   Cards, notes, badges
   ============================================================ */
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:14px; margin:16px 0; }
.card {
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.card h4 { margin:0 0 6px; }
.card p { margin:0; font-size:13.5px; color:var(--muted); }

.note {
  border-left:4px solid var(--accent-solid); background:var(--accent-soft);
  border-radius:0 6px 6px 0; padding:12px 16px; margin:16px 0; font-size:14px;
}
.note.warn { border-left-color:#e8a33d; background:#fbf1e2; }
.note.danger { border-left-color:#d9534f; background:#fbecec; }
.note strong:first-child { text-transform:uppercase; font-size:12px; letter-spacing:.6px; }

.badge {
  display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600;
  letter-spacing:.4px; text-transform:uppercase;
}
.badge.new { background:#e2f2e6; color:#2e7d4f; }
.badge.hot { background:#fdecec; color:#c0392b; }
.badge.plain { background:#eef1f6; color:#5c6b7c; }

/* ============================================================
   Pager (prev/next)
   ============================================================ */
.pager { display:flex; justify-content:space-between; gap:16px; margin-top:54px; padding-top:20px; border-top:1px solid var(--border); }
.pager a { flex:1; text-decoration:none; color:var(--text); border:1px solid var(--border); background:#fff; border-radius:8px; padding:12px 16px; transition:border-color .15s; }
.pager a:hover { border-color: var(--accent-solid); }
.pager .dir { display:block; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:4px; }
.pager .pl { font-weight:600; color:var(--heading); }
.pager a.next { text-align:right; }

/* ============================================================
   Footer
   ============================================================ */
footer.site { border-top:1px solid var(--border); margin-top:40px; padding-top:20px; color:var(--muted); font-size:13px; }
footer.site a { color:var(--accent-dark); text-decoration:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 981px) {
  .wrap { display:grid; grid-template-columns: 270px 1fr; }
}
@media (min-width: 1340px) {
  .wrap { grid-template-columns: 300px 1fr; }
}
@media (max-width: 980px) {
  .topbar .menu-open { display:block; background:none; border:0; color:#fff; font-size:20px; cursor:pointer; padding:6px; }
  .sidebar {
    display:none; position:fixed; top:58px; left:0; bottom:0; width:270px; z-index:50;
    box-shadow:2px 0 8px rgba(0,0,0,.2); overflow-y:auto;
  }
  .sidebar.open { display:block; }
  .side-scroll { position:static; }
  .page { padding: 24px 20px 60px; }
  h1 { font-size:25px; }
  .topbar .doc-title small { display:none; }
}

@media print {
  .topbar, .sidebar, .pager { display:none; }
  .page { max-width:100%; padding:0; }
}