/**
 * API Documentation Styles
 *
 * Specialized styles for auto-generated API documentation content.
 * Complements reference-docs.css (which handles index/list pages).
 *
 * These styles target the rendered API documentation pages generated
 * by Bengal's autodoc system for Python, OpenAPI, and CLI docs.
 */

/* ============================================
   API CONTENT STRUCTURE
   ============================================ */

/* Override prose max-width for API docs to allow wider layouts */
.prose.api-content {
  max-width: var(--content-max-width, 1200px);
}

/* Ensure .prose base styles don't conflict with api-content */
.prose.api-content h1,
.prose.api-content h2,
.prose.api-content h3,
.prose.api-content h4,
.prose.api-content h5,
.prose.api-content h6 {
  /* API content headings inherit from prose but maintain api-docs specificity */
  font-weight: var(--font-semibold);
}

/* Code-formatted headers (method/function/class names) */
.prose.api-content h3 > code,
.prose.api-content h4 > code {
  font-size: inherit;
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  background: var(--color-bg-elevated);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
}

.prose.api-content h3 > code {
  font-size: 1.5rem;
}

.prose.api-content h4 > code {
  font-size: 1.15rem;
}

/* API content inherits prose list styles but maintains spacing */
.prose.api-content ul,
.prose.api-content ol {
  /* Lists use prose defaults unless overridden by parameter list styles */
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

/* ============================================
   API SECTION HEADERS
   ============================================ */

.api-title-wrap {
  /* Allow long dotted identifiers to wrap gracefully */
  overflow-wrap: anywhere; /* modern fallback */
  word-break: break-word;  /* legacy fallback */
  hyphens: auto;           /* allow hyphenation when possible */
}

.api-module-header,
.api-class-header,
.api-function-header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: var(--space-12) 0 var(--space-6) 0;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}

.api-module-icon,
.api-class-icon,
.api-function-icon {
  font-size: var(--text-2xl);
  line-height: 1;
}

.api-source-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: all 0.2s;
}

.api-source-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}

/* ============================================
   METHOD/FUNCTION SIGNATURES
   ============================================ */

/* Enhanced styling for code blocks containing signatures - API docs only */
.prose.api-content h3 + pre,
.prose.api-content h4 + pre {
  background: var(--color-bg-elevated);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-4) 0 var(--space-6) 0;
  position: relative;
  box-shadow: var(--elevation-subtle);
}

/* Signature code blocks should wrap on mobile - API docs only */
.prose.api-content h3 + pre code,
.prose.api-content h4 + pre code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================
   PARAMETERS & ARGUMENTS
   ============================================ */

/* Style parameter lists with better visual hierarchy - API docs only */
.prose.api-content strong + code {
  /* Parameter types following bold parameter names */
  background: var(--color-code-type-bg);
  color: var(--color-code-type);
  font-weight: var(--font-medium);
  padding: 0.2em 0.5em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

/* Parameter list styling - API docs only */
.prose.api-content ul li strong:first-child {
  /* Parameter names */
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Add subtle background to parameter/argument lists in API docs only */
.prose.api-content p + ul,
.prose.api-content h4 + ul,
.prose.api-content h5 + ul {
  background: var(--color-bg-elevated);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-12);
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--elevation-subtle);
  margin: var(--space-4) 0;
}

/* ============================================
   RETURNS, RAISES, EXCEPTIONS
   ============================================ */

/* Style "Returns:" and "Raises:" sections - API docs only */
.prose.api-content p strong {
  color: var(--color-text-primary);
}

/* Special styling for Returns: and Raises: paragraphs - API docs only */
.prose.api-content p:has(strong:first-child) {
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-info);
  margin: var(--space-4) 0;
}

/* Raises section with danger color - API docs only */
.prose.api-content h4:has(+ p strong:first-child) + p,
.prose.api-content p strong:first-child:contains("Raises") {
  border-left-color: var(--color-danger);
}

/* ============================================
   BADGES & INDICATORS
   ============================================ */

.api-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35em 0.85em;
  border-radius: var(--radius-mdd);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
  margin-left: var(--space-3);
  box-shadow: var(--elevation-subtle);
}

.api-badge-async {
  background: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid var(--color-info-light);
}

.api-badge-property {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-light);
}

.api-badge-classmethod,
.api-badge-staticmethod {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-light);
}

.api-badge-deprecated {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-light);
}

.api-badge-dataclass {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* CSS-based badges using pseudo-elements */
.prose h4.api-property::after,
.prose h3.api-async::after,
.prose h4.api-async::after,
.prose h4.api-classmethod::after,
.prose h4.api-staticmethod::after {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.75em;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: var(--space-3);
  vertical-align: middle;
}

.prose h4.api-property::after {
  content: 'property';
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-light);
}

.prose h3.api-async::after,
.prose h4.api-async::after {
  content: 'async';
  background: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid var(--color-info-light);
}

.prose h4.api-classmethod::after {
  content: 'classmethod';
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-light);
}

.prose h4.api-staticmethod::after {
  content: 'staticmethod';
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-light);
}

/* ============================================
   TYPE ANNOTATIONS
   ============================================ */

/* Enhanced inline code for type annotations - API docs only */
.prose.api-content code {
  font-weight: var(--font-medium);
}

/* Type in parentheses after parameter names - API docs only */
.prose.api-content li code:first-of-type {
  background: var(--color-code-type-bg);
  color: var(--color-code-type);
  font-weight: var(--font-semibold);
}

/* ============================================
   ATTRIBUTES & PROPERTIES
   ============================================ */

/* Attributes list styling - API docs only */
.prose.api-content p:has(strong:contains("Attributes")) + ul {
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0 var(--space-4) 0;
}

/* Properties section - API docs only */
.prose.api-content p:has(strong:contains("Properties")) + ul,
.prose.api-content p:has(strong:contains("Methods")) + ul {
  background: transparent;
  border: none;
  padding-left: var(--space-8);
}

/* ============================================
   EXAMPLES & CODE BLOCKS
   ============================================ */

/* Example sections - API docs only */
.prose.api-content p:has(strong:contains("Examples")) {
  margin-top: var(--space-6);
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
}

.prose.api-content p:has(strong:contains("Examples")) + pre {
  border-left: 4px solid var(--color-success);
}

/* ============================================
   INFO BOXES (for dataclass, async, etc.)
   ============================================ */

/* Bengal's ::: info directive styling enhancement for API docs */
/* Scoped to api-content to prevent conflicts with general prose */
.prose.api-content .info {
  background: var(--color-info-bg);
  border-left: 3px solid var(--color-info);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
  box-shadow: var(--elevation-subtle);
}

.prose.api-content .warning {
  background: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  margin: var(--space-4) 0;
  box-shadow: var(--elevation-subtle);
}

/* ============================================
   SECTION DIVIDERS
   ============================================ */

/* Horizontal rules between methods/functions */
.prose hr {
  margin: var(--space-8) 0;
  border-top: 2px solid var(--color-border-light);
}

/* ============================================
   CLASS INHERITANCE
   ============================================ */

/* "Inherits from:" line */
.prose p:has(strong:contains("Inherits")) {
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
  font-size: var(--text-sm);
  margin: var(--space-3) 0;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  .api-module-header,
  .api-class-header,
  .api-function-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .api-source-link {
    margin-left: 0;
    margin-top: var(--space-3);
  }

  /* Make code blocks more readable on mobile */
  .prose.api-content h3 + pre,
  .prose.api-content h4 + pre {
    font-size: 0.85rem;
    padding: var(--space-4);
  }

  /* Reduce padding on parameter lists */
  .prose.api-content p + ul,
  .prose.api-content h4 + ul,
  .prose.api-content h5 + ul {
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

[data-theme="dark"] .prose h3 + pre,
[data-theme="dark"] .prose h4 + pre {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  .prose h3 + pre,
  .prose h4 + pre {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* For manual application in templates */
.api-parameter-list {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(100px, auto) 2fr;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  margin: var(--space-4) 0;
}

.api-parameter-list > div {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}

.api-parameter-name {
  font-family: var(--font-mono);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
}

.api-parameter-type {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-code-type-bg);
  padding: 0.25em 0.5em;
  border-radius: var(--radius-sm);
  width: fit-content;
}

.api-parameter-description {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

@media (max-width: 768px) {
  .api-parameter-list {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

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

/* Parameter table styling - for functions with 5+ parameters */
.prose.api-content table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--elevation-subtle);
  margin: var(--space-4) 0 var(--space-6) 0;
  font-size: var(--text-sm);
}

.prose.api-content table thead {
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
}

.prose.api-content table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.prose.api-content table tbody tr {
  border-bottom: 1px solid var(--color-border-light);
  transition: background-color 0.15s ease;
}

.prose.api-content table tbody tr:last-child {
  border-bottom: none;
}

.prose.api-content table tbody tr:hover {
  background: var(--color-surface);
}

.prose.api-content table tbody td {
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
  line-height: 1.6;
}

/* First column (Name) - monospace and highlighted */
.prose.api-content table tbody td:first-child {
  font-family: var(--font-mono);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  font-size: 0.95em;
}

/* Second column (Type) - styled as type annotation */
.prose.api-content table tbody td:nth-child(2) {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-code-type);
}

.prose.api-content table tbody td:nth-child(2) code {
  background: var(--color-code-type-bg);
  padding: 0.2em 0.5em;
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
}

/* Third column (Default) - monospace */
.prose.api-content table tbody td:nth-child(3) {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-text-muted);
}

.prose.api-content table tbody td:nth-child(3) code {
  background: var(--color-bg-secondary);
  padding: 0.2em 0.5em;
  border-radius: var(--radius-sm);
}

/* Fourth column (Description) - regular text */
.prose.api-content table tbody td:nth-child(4) {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Responsive table - stack on mobile */
@media (max-width: 768px) {
  .prose.api-content table,
  .prose.api-content table thead,
  .prose.api-content table tbody,
  .prose.api-content table tr,
  .prose.api-content table th,
  .prose.api-content table td {
    display: block;
  }

  .prose.api-content table thead {
    display: none; /* Hide header on mobile */
  }

  .prose.api-content table tbody tr {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
  }

  .prose.api-content table tbody td {
    padding: var(--space-2) 0;
    border: none;
  }

  /* Add labels on mobile */
  .prose.api-content table tbody td:before {
    content: attr(data-label);
    font-weight: var(--font-semibold);
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    margin-bottom: var(--space-1);
  }
}

/* ============================================
   COLLAPSIBLE SECTIONS (details/summary)
   ============================================ */

/* Collapsible parameter lists (10+ parameters) */
.prose.api-content details {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--elevation-subtle);
}

.prose.api-content details summary {
  cursor: pointer;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  padding: var(--space-2) var(--space-4);
  margin: calc(-1 * var(--space-4));
  border-radius: var(--radius-lg);
  transition: background-color 0.2s ease;
  user-select: none;
  list-style: none; /* Remove default marker */
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Custom arrow indicator */
.prose.api-content details summary::before {
  content: '▶';
  display: inline-block;
  font-size: 0.75em;
  transition: transform 0.2s ease;
  color: var(--color-primary);
  flex-shrink: 0;
}

.prose.api-content details[open] summary::before {
  transform: rotate(90deg);
}

.prose.api-content details summary:hover {
  background: var(--color-surface);
}

.prose.api-content details summary:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Content inside details */
.prose.api-content details > *:not(summary) {
  margin-top: var(--space-4);
}

.prose.api-content details table {
  margin-top: var(--space-4);
  margin-bottom: 0;
}

/* ============================================
   RUBRIC - Pseudo-headings for API Sections
   ============================================ */

/* Rubric directive - styled text that looks like a heading but isn't in TOC */
.prose.api-content .rubric {
  display: block;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: 1.1em;
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  letter-spacing: 0.02em;
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--color-border-light);
}

/* Specific rubric styles for different API sections */
.prose.api-content .rubric-parameters {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary-light);
}

.prose.api-content .rubric-returns {
  color: var(--color-info);
  border-bottom-color: var(--color-info-light);
}

.prose.api-content .rubric-raises {
  color: var(--color-error);
  border-bottom-color: var(--color-error-light);
}

.prose.api-content .rubric-examples {
  color: var(--color-success);
  border-bottom-color: var(--color-success-light);
  margin-top: var(--space-8);
}

.prose.api-content .rubric-attributes,
.prose.api-content .rubric-properties,
.prose.api-content .rubric-methods {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary-light);
}

/* ============================================
   SECTION HEADERS (Fallback for non-rubric)
   ============================================ */

/* Enhanced styling for section headers like "Parameters:", "Returns:", etc. */
.prose.api-content p > strong {
  font-weight: var(--font-semibold);
}

/* Make section headers (Parameters, Returns, etc.) more prominent */
.prose.api-content p:has(> strong:first-child) {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

/* Specific styling for common API section headers */
.prose.api-content strong:first-child {
  color: var(--color-primary);
  font-size: 1.05em;
  letter-spacing: 0.02em;
}

/* Parameters section header */
.prose.api-content p > strong:first-child:contains("Parameters:") {
  color: var(--color-primary);
  font-size: 1.1em;
}

/* Returns section header */
.prose.api-content p > strong:first-child:contains("Returns:") {
  color: var(--color-info);
  font-size: 1.1em;
}

/* Raises section header */
.prose.api-content p > strong:first-child:contains("Raises:") {
  color: var(--color-error);
  font-size: 1.1em;
}

/* Examples section header */
.prose.api-content p > strong:first-child:contains("Examples:") {
  color: var(--color-success);
  font-size: 1.1em;
}

/* ============================================
   ENHANCED EXAMPLE CODE BLOCKS
   ============================================ */

/* Style for example code blocks - give them special treatment */
.prose.api-content p:has(> strong:contains("Examples")) ~ pre {
  border-left: 4px solid var(--color-success);
  background: var(--color-success-bg);
  position: relative;
}

.prose.api-content p:has(> strong:contains("Examples")) ~ pre::before {
  content: 'Example';
  position: absolute;
  top: var(--space-2);
  right: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-success);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

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

@media print {
  .api-source-link {
    display: none;
  }

  .api-badge {
    border: 1px solid black;
    background: white;
    color: black;
  }

  .prose h3 + pre,
  .prose h4 + pre {
    border: 1px solid black;
    box-shadow: none;
  }

  /* Expand all collapsible sections when printing */
  .prose.api-content details {
    border: 1px solid black;
  }

  .prose.api-content details summary::before {
    content: '';
  }

  /* Ensure tables print properly */
  .prose.api-content table {
    box-shadow: none;
    border: 1px solid black;
  }
}
