/* Widen the content area for API documentation pages */
.md-content__inner {
  max-width: 1400px;
}

/* Two-column API documentation layout */
.api-columns {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  /* margin: 2rem 0; */
  align-items: start;
}

/* Left column - documentation content */
.api-content {
  min-width: 0;
  padding-right: 1rem;
}

/* Right column - code examples */
.api-examples {
  min-width: 0;
  position: sticky;
  top: 3.5rem;
  /* Constrain to viewport height */
  height: calc(100vh - 8rem);
  /* Use CSS Grid with auto-fit rows like Tailwind */
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(0, min-content));
  gap: 0rem;
  /* Additional constraint */
  max-height: calc(100% - 2rem);
  overflow: hidden;
  /* Make text slightly smaller than main content */
  font-size: 0.9em;
}

/* Individual scroll containers for tabbed content (request examples) */
.api-examples .tabbed-set {
  min-height: 0;
  overflow: hidden;
}

.api-examples .tabbed-content {
  min-height: 0;
  max-height: 100%;
}

.api-examples .tabbed-content .highlight > pre {
  margin: 0;
  max-height: 50vh;
  overflow: hidden;
  display: block;
}

.api-examples .tabbed-content code {
  display: block;
  max-height: calc(50vh - 8rem);
  overflow-y: auto;
  overflow-x: auto;
}

/* Individual scroll containers for code blocks (response examples) */
.api-examples > .highlight,
.api-examples > pre {
  min-height: 0;
  margin: 0;
  flex-direction: column;
  overflow: hidden;
  display: flex;
}

.api-examples > .highlight > pre {
  flex: 1;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
}

.api-examples > .highlight code,
.api-examples > pre code {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}

/* Add spacing for Response heading */
.api-examples h4 {
  margin-top: 1.5rem;
}

/* Styling for method badges */
.api-method {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

.api-method.get {
  background: #61affe;
  color: white;
}

.api-method.post {
  background: #49cc90;
  color: white;
}

.api-method.delete {
  background: #f93e3e;
  color: white;
}

.api-method.put {
  background: #fca130;
  color: white;
}

/* Wrapper for badge + code block on same line */
.api-method-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1rem 0;
}

/* Ensure badge stays visible and doesn't shrink */
.api-method-wrapper .api-method {
  flex-shrink: 0;
  margin-right: 0;
  margin-top: 0.25rem; /* Slight vertical adjustment for alignment */
}

/* Allow code block to take remaining space */
.api-method-wrapper .highlight {
  flex: 1;
  min-width: 0; /* Important for text overflow handling */
  margin: 0; /* Remove default margins */
}

.api-method-wrapper .highlight pre {
  margin: 0;
}

/* Mobile responsive - stack columns on smaller screens */
@media screen and (max-width: 76.1875em) {
  .api-columns {
    grid-template-columns: 1fr;
  }

  .api-content {
    padding-right: 0;
  }

  .api-examples {
    position: relative;
    top: 0;
    max-height: none;
  }
}