/**
 * Code Block Styling
 * Custom overrides for highlight.js with a11y-light theme
 */

/* Inline code - keep custom styling, remains inline */
:not(pre) > code {
  max-width: 100% !important;
  font-family: var(--font-family-mono) !important;
  background-color: white !important;
  border-radius: 2px !important;
  padding: 4px 6px !important;
  white-space: normal !important; /* Allow wrapping */
  word-wrap: break-word !important;
  overflow-wrap: break-word !important; /* Break long words if needed */
  display: inline !important; /* Ensure it stays inline */
}

/* Code blocks - fit content width, let theme control background */
pre {
  display: table !important; /* Makes width fit content */
  max-width: 100% !important;
  margin-top: 0;
  border-radius: 2px !important;
  padding: 0 !important;
  overflow-x: auto !important;
  margin-bottom: var(--spacing-md) !important;
}

/* Code inside pre blocks - let theme control colors */
pre code {
  max-width: 100% !important;
  padding: 0 !important;
  border-radius: 0 !important;
  white-space: pre !important;
  font-family: var(--font-family-mono) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  display: block !important;
  word-break: normal !important;
}

/* Highlight.js container - let theme control everything */
.hljs {
  display: block !important;
  overflow-x: auto !important;
  padding: 12px !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  pre {
    display: block !important; /* Switch to block on mobile for proper width */
    width: 100% !important; /* Force full width on mobile */
    padding: 0 !important;
    margin-bottom: var(--spacing-sm) !important;
  }

  .hljs {
    padding: 12px !important;
  }

  pre code {
    font-size: 0.8125rem !important;
    max-width: 100% !important;
  }
}