/* Jekyll GitHub Code Styles
 * Supports both light and dark themes
 * For Chirpy theme: uses data-mode="light" for light, default for dark
 * Syntax highlighting is provided by Rouge (Jekyll's built-in highlighter)
 */

.github-code-block {
  --github-code-bg: #0d1117;
  --github-code-header-bg: #161b22;
  --github-code-border: #30363d;
  --github-code-text: #e6edf3;
  --github-code-text-secondary: #8b949e;
  --github-code-link: #58a6ff;
  --github-code-link-hover: #79c0ff;

  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  background-color: var(--github-code-bg);
  border: 1px solid var(--github-code-border);
  border-radius: 8px;
  margin: 16px 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.github-code-block:hover {
  border-color: var(--github-code-link);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Light theme support */
[data-mode="light"] .github-code-block,
.light .github-code-block,
[data-theme="light"] .github-code-block,
.github-code-block.light {
  --github-code-bg: #ffffff;
  --github-code-header-bg: #f6f8fa;
  --github-code-border: #d0d7de;
  --github-code-text: #1f2328;
  --github-code-text-secondary: #656d76;
  --github-code-link: #0969da;
  --github-code-link-hover: #0550ae;
}

[data-mode="light"] .github-code-block:hover,
.light .github-code-block:hover,
[data-theme="light"] .github-code-block:hover,
.github-code-block.light:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Prefer color scheme for automatic detection */
@media (prefers-color-scheme: light) {
  .github-code-block:not([data-theme]):not(.dark) {
    --github-code-bg: #ffffff;
    --github-code-header-bg: #f6f8fa;
    --github-code-border: #d0d7de;
    --github-code-text: #1f2328;
    --github-code-text-secondary: #656d76;
    --github-code-link: #0969da;
    --github-code-link-hover: #0550ae;
  }

  .github-code-block:not([data-theme]):not(.dark):hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

/* Header */
.github-code-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background-color: var(--github-code-header-bg);
  border-bottom: 1px solid var(--github-code-border);
  font-size: 14px;
}

.github-code-filename {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--github-code-text);
  min-width: 0;
  overflow: hidden;
}

.github-code-filename a {
  color: var(--github-code-link);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
  word-break: break-word;
  overflow-wrap: break-word;
}

.github-code-filename a:hover {
  color: var(--github-code-link-hover);
  text-decoration: underline;
}

.github-icon {
  flex-shrink: 0;
  color: var(--github-code-text-secondary);
}

/* Code content */
.github-code-content {
  overflow-x: auto;
}

.github-code-content pre {
  margin: 0;
  padding: 16px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.github-code-content code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.6;
  color: var(--github-code-text);
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
}

/* Error state */
.github-code-error {
  --github-code-error-bg: #3d1f28;
  --github-code-error-border: #f85149;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  background-color: var(--github-code-error-bg);
  border: 1px solid var(--github-code-error-border);
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  font-size: 14px;
  color: var(--github-code-error-border);
}

.github-code-error strong {
  display: block;
  margin-bottom: 4px;
}

/* Light theme error state */
[data-mode="light"] .github-code-error,
.light .github-code-error,
[data-theme="light"] .github-code-error,
.github-code-error.light {
  --github-code-error-bg: #ffebe9;
  --github-code-error-border: #cf222e;
}

@media (prefers-color-scheme: light) {
  .github-code-error:not([data-theme]):not(.dark) {
    --github-code-error-bg: #ffebe9;
    --github-code-error-border: #cf222e;
  }
}

/* Responsive */
@media (max-width: 520px) {
  .github-code-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .github-code-content pre {
    padding: 12px;
  }

  .github-code-content code {
    font-size: 12px;
  }
}