@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

h1, h2, h3, h4, h5, h6, p {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: bold;
}

:root {
--primary: #Fe6336;
--primary-soft: #eef2ff;
--text-main: #111827;
--text-muted: #6b7280;
--bg-main: #f9fafb;
--bg-card: #ffffff;
--border: #e5e7eb;
--code-bg: #0f172a;
--code-text: #e5e7eb;
}

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text-main);
background: var(--bg-main);
}

.top-nav {
position: sticky !important;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.top-nav-inner {
max-width: 1440px;
margin: 0 auto;
padding: 14px 30px;
display: flex;
align-items: center;
justify-content: space-between;
}

.nav-left {
display: flex;
align-items: center;
gap: 14px;
}

.nav-left img {
height: 30px;
width: auto;
}

.nav-title {
font-weight: 600;
font-size: 16px;
color: var(--text-main);
}

.nav-right {
display: flex;
align-items: center;
gap: 12px;
}

.nav-icon {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
background: #ffffff;
transition: all 0.25s ease;
}

.nav-icon svg {
width: 18px;
height: 18px;
}

.nav-icon:hover {
background: #ffcbbc;
border-color: var(--primary);
transform: translateY(-1px);
}

/* =====================
MAIN LAYOUT
===================== */
.layout-api {
max-width: 1440px;
margin: 0 auto;
padding: 24px;
display: grid;
grid-template-columns: 280px 1fr;
gap: 28px;
align-items: flex-start !important;
}

/* =====================
SIDEBAR / TOC
===================== */
.sidebar {
position: sticky !important;
top: 88px !important;
align-self: flex-start !important;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
max-height: calc(100vh - 120px);
overflow-y: auto;
}
.sidebar::-webkit-scrollbar {
width: 6px;
}

.sidebar::-webkit-scrollbar-track {
background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
background-color: rgba(144, 63, 238, 0.35); /* softer purple */
border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
background-color: rgba(144, 63, 238, 0.55);
}

/* Firefox */
.sidebar {
scrollbar-width: thin;
scrollbar-color: rgba(144, 63, 238, 0.4) transparent;
}

.sidebar h3 {
margin: 0 0 14px 0;
font-size: 15px;
font-weight: 600;
color: var(--text-main);
}

.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}

.sidebar li {
margin-bottom: 8px;
}

.sidebar a {
display: block;
font-size: 14px;
color: var(--text-muted);
text-decoration: none;
padding: 6px 8px;
border-radius: 6px;
}

.sidebar a:hover {
color: #fe6336;
}

.sidebar a.active {
background: #Fe6336;
color: #fff;
font-weight: 600;
}

/* =====================
CONTENT AREA
===================== */
.content {
min-width: 0;
}

.header {
background: linear-gradient(135deg, #ebd9ff, #ffffff);
border: 1px solid var(--border);
border-radius: 16px;
padding: 0 30px;
margin-bottom: 32px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header img {
height: 200px;
padding: 20px 0;
}
.header h1 {
margin: 0 0 8px 0;
font-size: 38px;
font-weight: 700;
}

.header p {
margin: 0;
color: var(--text-muted);
font-size: 16px;
}

.section {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 28px;
scroll-margin-top: 90px;
margin-bottom: 32px;
}

.section h2 {
margin-top: 0;
font-size: 22px;
font-weight: 700;
color: var(--primary);
border-bottom: 1px solid var(--border);
padding-bottom: 10px;
margin-bottom: 20px;
}

.section h3 {
font-size: 18px;
margin-top: 28px;
margin-bottom: 14px;
}

.section h4 {
font-size: 15px;
margin-top: 22px;
}

.section p,
.section li {
font-size: 15px;
line-height: 1.7;
}

ul {
padding-left: 20px;
}

/* =====================
TABLES
===================== */
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;         
margin: 18px 0;
font-size: 14px;
border-radius: 10px;
overflow: hidden !important;         
}

th, td {
border: 1px solid var(--border);
padding: 12px;
vertical-align: top;
}

th {
background: var(--primary);
color: #ffffff;
font-weight: 600;
}

tr:nth-child(even) td {
background: #f9fafb;
}

/* =====================
CODE BLOCKS
===================== */
.code-block {
background: var(--code-bg);
color: var(--code-text);
padding: 18px;
border-radius: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 13px;
overflow-x: auto !important;
margin: 16px 0;
white-space: pre-wrap;
}

/* =====================
BADGES / HELPERS
===================== */
.method {
display: inline-block;
font-size: 12px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
color: #fff;
margin-right: 8px;
}

.method-post { background: #16a34a; }
.method-get { background: #2563eb; }
.method-put { background: #f59e0b; color: #111; }
.method-delete { background: #dc2626; }

.endpoint {
background: #f8fafc;
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px;
margin: 18px 0;
}

.url {
display: inline-block;
margin-top: 0px;
background: #e5e7eb;
padding: 6px 10px;
border-radius: 6px;
font-family: ui-monospace, monospace;
font-size: 13px;
}

.note-box {
background: #eef2ff;
border: 1px solid #c7d2fe;
border-radius: 12px;
padding: 18px;
margin: 20px 0;
font-size: 14px;
}

.response-example {
background: rgb(236, 255, 236);
border: 1px solid rgb(154, 255, 154);
border-radius: 12px;
padding: 14px;
margin: 18px 0 8px 0;
font-size: 18px;
font-weight: 600;
}

.error-example {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 12px;
padding: 14px;
margin: 18px 0;
font-size: 18px;
font-weight: 600;
}

footer {
text-align: center;
color: var(--text-muted);
font-size: 14px;
padding: 40px 0 20px;
}

/* =========================
HOST / ENVIRONMENT CARDS
========================= */

.host-info {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin: 24px 0;
}

.host-box {
background: linear-gradient(135deg, #ffffff, #f9fafb);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px 20px;
position: relative;
transition: all 0.25s ease;
}

.host-box h5 {
margin: 0 0 10px 0;
font-size: 15px;
font-weight: 600;
color: var(--text-main);
display: flex;
align-items: center;
gap: 8px;
}

/* =========================
AUTH METHODS – SUBTLE HIGHLIGHT
========================= */

.auth-info h4 {
margin-top: 24px;
}

/* Method highlight */
.auth-info h4 + p,
.auth-info h4 + p + p,
.auth-info h4 + p + ol {
position: relative;
}

.auth-info h4 {
padding-left: 10px;
border-left: 3px solid var(--primary);
}

.auth-info h4 + p + p,
.auth-info h4 + p + ol {
background: #eef2ff;
border: 1px solid #c7d2fe;
border-radius: 10px;
padding: 14px 16px;
margin-top: 10px;
}

/* Keep lists clean inside method */
.auth-info ol {
padding-left: 18px;
list-style-position: inside;
margin: 0;
}

/* Screenshot refinement */
.auth-info img {
display: block;
margin-top: 12px;
border-radius: 10px;
border: 1px solid var(--border);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* =====================
MOBILE TOC / RESPONSIVE
===================== */

.toc-toggle {
display: none;
background: transparent;
border: none;
font-size: 22px;
font-weight: 700;
cursor: pointer;
color: var(--text-main);
}

/* =====================
RESPONSIVE
===================== */
@media (max-width: 1024px) {
.layout {
  overflow-x: hidden !important;
}
.top-nav {
  position: sticky !important; /* keep navbar sticky on mobile too */
  top: 0 !important;
}

.header {
  padding: 20px;
}
.sidebar {
  position: fixed !important;
  top: 0 !important;
  left: -100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  width: 280px;
  z-index: 1100;
  transition: left 0.3s ease;
  border-radius: 0;
  background: var(--bg-card);
  overflow-y: auto !important;
}

.sidebar.open {
  left: 0 !important;
}
.header img {
  height: auto;
  max-width: 100%;
  padding: 10px 0 0;
}

.host-info {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.toc-toggle {
  display: block;
}

.layout {
  padding: 16px;
  grid-template-columns: 1fr;
}

.code-block {
  overflow-x: auto !important;
  white-space: pre;
}

.section table {
  display: block;
  overflow-x: auto !important;
  width: 100%;
}

.sidebar-overlay.active {
  display: block !important;
}

.header {
  flex-direction: column;
  text-align: center;
  padding: 24px;
  gap: 12px;
}

.section img,
.header img {
  max-width: 100%;
  height: auto;
  display: block;
}

.header h1 {
  font-size: 28px;
}

.section {
  padding: 22px;
}

.section h2 {
  font-size: 20px;
}

table {
  font-size: 13px;

}

.code-block {
  font-size: 12px;
}
}