/* Zudo Documentation — Redesigned for readability */
/* Brutalist structure, soft palette */

/* ==================== RESET ==================== */

* {
  border-radius: 0px !important;
}

html {
  scroll-behavior: auto;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #1A1A2E;
  background: #FAFAF9;
}

/* ==================== TYPOGRAPHY ==================== */

.text-hero {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-h1 {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.text-h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.text-h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.text-body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}

.text-small {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.text-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ==================== CODE BLOCKS ==================== */

.code-block {
  background: #1E1E2E;
  color: #CDD6F4;
  border: 2px solid #313244;
  border-left: 4px solid #C0392B;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.8;
  overflow-x: auto;
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  tab-size: 2;
  white-space: pre;
  position: relative;
}

.code-block .kw { color: #CBA6F7; font-weight: 600; }
.code-block .str { color: #A6E3A1; }
.code-block .cmt,
.code-block .cm { color: #9399B2; font-style: italic; }  /* .cm: legacy alias used by older pages */
.code-block .fn { color: #89B4FA; }
.code-block .tp { color: #89DCEB; }
.code-block .num { color: #FAB387; }
.code-block .op { color: #94E2D5; }
.code-block .const { color: #F38BA8; }
.code-block .prop { color: #B4BEFE; }
.code-block .param { color: #F5C2E7; }
.code-block .punct { color: #9399B2; }
.code-block .dec { color: #F9E2AF; }

/* Line numbers */
.code-block .line-num {
  color: #45475A;
  user-select: none;
  display: inline-block;
  width: 2.5em;
  text-align: right;
  margin-right: 1.5em;
}

/* Code block label */
.code-block-label {
  display: inline-block;
  background: #313244;
  color: #A6ADC8;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  margin-bottom: -2px;
  border: 2px solid #313244;
  border-bottom: none;
  position: relative;
  top: 2px;
}

.code-inline {
  background: #313244;
  color: #CBA6F7;
  border: 1px solid #45475A;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.85em;
  padding: 2px 6px;
  font-weight: 500;
}

/* Spacing between consecutive code blocks */
.code-block + .code-block {
  margin-top: -1px;
  border-top: none;
}

/* Code block with label gets merged borders */
.code-block-label + .code-block {
  border-top-left-radius: 0;
}

/* ==================== NAVIGATION ==================== */

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #C0392B;
  transition: width 0.2s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link-active::after {
  width: 100%;
  background: #2471A3;
}

/* ==================== COMPONENTS ==================== */

/* Buttons */
.btn-primary {
  background: #C0392B;
  color: #FFFFFF;
  border: 2px solid #1A1A2E;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.btn-primary:hover {
  background: #A93226;
  box-shadow: 3px 3px 0px #1A1A2E;
}

.btn-primary:active {
  transform: translate(-1px, -1px);
}

.btn-secondary {
  background: transparent;
  color: #2471A3;
  border: 2px solid #2471A3;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.btn-secondary:hover {
  background: rgba(36, 113, 163, 0.08);
}

.btn-ghost {
  background: transparent;
  color: #1A1A2E;
  border: 2px solid #D1D5DB;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.btn-ghost:hover {
  background: #1A1A2E;
  color: #FFFFFF;
  border-color: #1A1A2E;
}

/* Focus States */
*:focus-visible {
  outline: 3px solid #2471A3;
  outline-offset: 2px;
}

/* ==================== SIDEBAR ==================== */

.sidebar-item {
  padding: 8px 16px;
  border-left: 3px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  display: block;
  color: #4B5563;
  text-decoration: none;
}

.sidebar-item:hover {
  background: #F5F5F0;
  border-left-color: #C0392B;
  color: #1A1A2E;
}

.sidebar-item-active {
  background: #EFF6FF;
  border-left-color: #2471A3;
  font-weight: 700;
  color: #1A1A2E;
}

.sidebar-section {
  padding: 16px 16px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6B7280;
}

/* ==================== TABLE OF CONTENTS ==================== */

.toc-item,
.toc-link {
  padding: 6px 12px;
  font-size: 0.75rem;
  color: #6B7280;
  border-left: 2px solid transparent;
  display: block;
  text-decoration: none;
  line-height: 1.4;
}

.toc-item:hover,
.toc-link:hover {
  color: #2471A3;
  border-left-color: #2471A3;
  background: #F9FAFB;
}

.toc-item-active,
.toc-link-active {
  color: #C0392B;
  border-left-color: #C0392B;
  font-weight: 700;
  background: #FDF2F2;
}

.toc-link-nested {
  padding-left: 28px;
  font-size: 0.7rem;
  color: #6B7280;
}

.toc-link-nested:hover {
  color: #2471A3;
}

.toc-item[data-level="3"],
.toc-link[data-level="3"] {
  padding-left: 24px;
}

.doc-toc .text-xs {
  padding: 0 12px;
}

/* ==================== CALLOUTS ==================== */

.callout {
  border-left: 4px solid;
  padding: 16px 20px;
  margin: 20px 0;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-left: 4px solid;
}

.callout-note {
  border-left-color: #2471A3;
  background: #EFF6FF;
}

.callout-warning {
  border-left-color: #D4AC0D;
  background: #FEF9E7;
}
/* Brand yellow is 2:1 on the pale callout; the label and inline code use the
   darker amber so they pass WCAG AA, also on inline code's tinted background (5.3:1+). */
.callout-warning .text-zudo-yellow,
.callout-warning strong,
.callout-warning code,
.bg-zudo-yellow\/20 .text-zudo-yellow { color: #6B5705; }

.callout-danger {
  border-left-color: #C0392B;
  background: #FDF2F2;
}

.callout-tip {
  border-left-color: #1E8449;
  background: #F0FFF4;
}

/* ==================== TABLES ==================== */

.doc-table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #1A1A2E;
  font-size: 0.875rem;
}

.doc-table th {
  background: #1A1A2E;
  color: #FFFFFF;
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.doc-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #E5E7EB;
}

.doc-table tr:last-child td {
  border-bottom: none;
}

.doc-table tbody tr:hover {
  background: #F5F5F0;
}

/* ==================== SEARCH ==================== */

.search-overlay {
  background: rgba(26, 26, 46, 0.95);
  backdrop-filter: blur(4px);
}

.search-input {
  background: #313244;
  border: 2px solid #45475A;
  color: #FFFFFF;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  padding: 12px 16px;
}

.search-input:focus {
  outline: 2px solid #2471A3;
  outline-offset: 0;
  border-color: #2471A3;
}

.search-input::placeholder {
  color: #9399B2;
}

.search-result {
  border: 1px solid #45475A;
  padding: 12px 16px;
  cursor: pointer;
}

.search-result:hover {
  background: #313244;
  border-color: #C0392B;
}

/* ==================== TAG / BADGE ==================== */

.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid #D1D5DB;
}

.tag-red { background: #FDF2F2; color: #C0392B; border-color: #C0392B; }
.tag-blue { background: #EFF6FF; color: #2471A3; border-color: #2471A3; }
.tag-yellow { background: #FEF9E7; color: #7D6608; border-color: #D4AC0D; }
.tag-green { background: #F0FFF4; color: #1E8449; border-color: #1E8449; }
.tag-black { background: #1A1A2E; color: #FFFFFF; border-color: #1A1A2E; }

/* ==================== STATUS ==================== */

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid;
}

.status-success { background: #F0FFF4; color: #1E8449; border-color: #1E8449; }
.status-error { background: #FDF2F2; color: #C0392B; border-color: #C0392B; }
.status-info { background: #EFF6FF; color: #2471A3; border-color: #2471A3; }

/* ==================== LAYOUT ==================== */

.content-area {
  max-width: 72ch;
}

/* ==================== PRINT ==================== */

@media print {
  .sidebar, .toc, nav, .search-overlay {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #1A1A2E;
    background: #FFFFFF;
  }

  .code-block {
    border: 1px solid #D1D5DB;
    background: #F5F5F0;
    color: #1A1A2E;
  }
}

/* ==================== API SPECIFIC ==================== */

.api-method {
  display: inline-block;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
}

.api-get { background: #EFF6FF; color: #2471A3; border: 1px solid #2471A3; }
.api-post { background: #F0FFF4; color: #1E8449; border: 1px solid #1E8449; }
.api-put { background: #FEF9E7; color: #7D6608; border: 1px solid #D4AC0D; }
.api-delete { background: #FDF2F2; color: #C0392B; border: 1px solid #C0392B; }

.api-signature {
  background: #1E1E2E;
  color: #CDD6F4;
  border: 2px solid #313244;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  padding: 16px;
  overflow-x: auto;
}

/* Anchor link on headings */
.anchor-link {
  color: #D1D5DB;
  text-decoration: none;
  margin-left: 8px;
  font-weight: 400;
  opacity: 0;
}

h2:hover .anchor-link,
h3:hover .anchor-link {
  opacity: 1;
}

.anchor-link:hover {
  color: #C0392B;
}

/* Section spacing */
section {
  margin-bottom: 3rem;
}

section h2 {
  margin-bottom: 1rem;
}

/* Prose spacing */
.prose > * + * {
  margin-top: 1rem;
}

.prose > h2 + * {
  margin-top: 0.5rem;
}

.prose > * + h2 {
  margin-top: 2.5rem;
}

/* Code within prose */
.prose code {
  background: #313244;
  color: #CBA6F7;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  border: 1px solid #45475A;
}

/* List styling */
.prose ul {
  list-style: none;
  padding-left: 0;
}

.prose ul li {
  padding-left: 1.5em;
  position: relative;
}

.prose ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #C0392B;
  font-weight: 700;
}