/* ====================================================
   API DOCS THEME — api.mpalo.com
   All shared styles for the api docs layout.
   DO NOT put page-specific styles here.
==================================================== */

:root {
  --bg-header: #0D1B2A;
  --bg-sidebar: #1B263B;
  --bg-right-sidebar: #1a253a;
  --bg-content: #1a253a;
  --bg-secondary: #0D1B2A;
  --bg-card: #263554;
  --bg-input: #323252;
  --bg-mobile-popup: #1B263B;
  --text-primary: #E0E1DD;
  --text-secondary: #F8F4E3;
  --text-card: #E0E1DD;
  --accent: #ffffff;
  --border-color: rgba(249, 237, 237, 0.081);
  --border-sidebar: rgba(249, 237, 237, 0.021);
  --border-mobile-popup: rgba(249, 237, 237, 0.1);
  --card-border: #263554;
  --card-border-hover: #263554;
  --font-body: "Helvetica LT Std Bold", sans-serif;
  --bg-code-block: #282c34;
  --text-code-block: #abb2bf;
}

/* ---- Base ---- */
body.page-api-layout {
  font-family: var(--font-body);
  background-color: var(--bg-content);
  color: var(--text-primary);
}

/* ---- Utility classes ---- */
.bg-main    { background-color: var(--bg-content); }
.bg-header  { background-color: var(--bg-header); }
.bg-sidebar { background-color: var(--bg-sidebar); }
.bg-content { background-color: var(--bg-content); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-card    { background-color: var(--bg-card); }
.bg-input   { background-color: var(--bg-input); }
.bg-mobile-popup { background-color: var(--bg-mobile-popup); }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-accent    { color: var(--accent); }
.text-card      { color: var(--text-card); }

.border-default       { border-color: var(--border-color); }
.border-sidebar       { border-color: var(--border-sidebar); }
.border-mobile-popup  { border-color: var(--border-mobile-popup); }

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

.no-scrollbar               { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---- Header & secondary nav scroll transition ---- */
header.api-header,
nav.api-main-nav {
  background-color: rgba(13, 27, 42, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.3s ease;
  position: fixed;
  left: 0;
  width: 100%;
}

header.api-header {
  top: 0;
  z-index: 50;
  height: 4rem;
  border-radius: 0;
}

nav.api-main-nav {
  top: 4rem;
  z-index: 45;
}

header.api-header.scrolled,
nav.api-main-nav.scrolled {
  background-color: var(--bg-header);
}

/* ---- Desktop layout offsets ---- */
@media (min-width: 1025px) {
  body.page-api-layout {
    padding-top: 8rem; /* 4rem header + ~4rem nav */
  }

  /* Ensure sidebars are fixed-positioned below both bars,
     independent of Tailwind utility classes loading. */
  aside.left-sidebar {
    position: fixed;
    top: 8rem;
    left: 0;
    width: 16rem;
    height: calc(100vh - 8rem);
    display: block !important;
  }

  aside.right-sidebar {
    position: fixed;
    top: 8rem;
    right: 0;
    width: 16rem;
    height: calc(100vh - 8rem);
    display: block !important;
  }

  /* Main content: clear right sidebar */
  main.page-api-layout-main {
    padding-right: 18rem; /* right sidebar (16rem) + gap */
  }

  /* Hover & active states for sidebar links */
  aside.left-sidebar nav a:hover,
  aside.right-sidebar a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--accent);
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  aside.left-sidebar nav a.active,
  aside.right-sidebar a.active,
  .page-nav a.active {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--accent);
    font-weight: bold;
  }
}

/* Mobile padding handled by mobilestyles.css */

/* ---- Cards ---- */
.card {
  border: 2px solid var(--card-border);
  border-radius: 0.75rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: var(--bg-card);
  color: var(--text-card);
  padding: 1rem;
}

.card:hover {
  box-shadow: 0 0 0 2px var(--accent);
}

.card h3,
.card p,
.card a h3,
.card a p {
  color: var(--text-card);
}

/* ---- Compare table ---- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  word-break: break-word;
}

.compare-table th,
.compare-table td {
  padding: 0.75rem;
  border-right: 1px solid var(--border-color);
  text-align: left;
}

.compare-table th:last-child,
.compare-table td:last-child { border-right: none; }

.compare-table thead tr { border-bottom: 2px solid var(--border-color); }
.compare-table tbody tr { border-bottom: 1px solid var(--border-color); }
.compare-table tbody tr:last-child { border-bottom: none; }

.compare-table th {
  color: var(--text-primary);
  font-weight: bold;
  background-color: var(--bg-content);
}

.compare-table td { color: var(--text-secondary); }

/* ---- Sidebar category separators ---- */
#api-docs-sidebar > nav > ul > li.pb-5 {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ---- Section dividers ---- */
main section:not(:first-of-type) {
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
}

/* ---- Code blocks ---- */
pre {
  background-color: var(--bg-code-block);
  color: var(--text-code-block);
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.75rem 0;
  font-family: monospace;
  font-size: 0.875rem;
  white-space: pre;
}

code:not(pre code) {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.1em 0.3em;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.9em;
}

/* ---- Feedback section ---- */
.feedback-section {
  text-align: center;
  padding: 2rem 0;
  border-top: 1px solid var(--border-color);
}

#feedback-form {
  margin-top: 1.5rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.feedback-icons button {
  background: none;
  border: none;
  cursor: pointer;
  margin: 0 0.5rem;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.feedback-icons button:active {
  transform: scale(0.9);
}

/* ---- Animations ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

/* ---- Mobile overlay ---- */
#sidebar-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 90;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

#api-mobile-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  max-height: 100vh;
  background-color: var(--bg-mobile-popup);
  padding: 1rem;
  overflow-y: auto;
  z-index: 100;
  transition: transform 0.3s ease-in-out;
  transform: translateY(100%);
}