/**
 * Bengal SSG Default Theme
 * Code & Syntax Highlighting Styles
 */

/* ============================================
   INLINE CODE
   ============================================ */

/* NOTE: Base inline code styles are defined in base/reset.css
 * This file only contains additional code block and syntax highlighting styles.
 * If you need different inline code styles, use a class like .code-accent
 */

.code-accent {
  color: var(--color-accent);
  border: 1px solid var(--color-border-light);
  font-weight: var(--weight-medium);
}

/* ============================================
   CODE BLOCKS
   ============================================ */

pre {
  position: relative;
  margin: 0;
  margin-block: 1.5rem;
  padding: var(--space-6);
  background-color: var(--color-bg-code);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-2xl); /* Increased from --radius-xl (12px → 16px) */
  overflow-x: auto;
  line-height: var(--line-height-relaxed);
  box-shadow: var(--elevation-card);
  transition: box-shadow var(--transition-base);
}

pre.gradient-border {
  border: none;
}

pre.fluid-border {
  border: none;
}

pre:hover .code-copy-button {
  opacity: 1;
}

[data-theme="dark"] pre {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Break out of container padding on mobile for better scrolling */
@media (max-width: 639px) {
  pre {
    margin-inline: calc(-1 * var(--space-3));
    padding-inline: var(--space-4);
    border-radius: var(--radius-md);
    /* Smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* Better scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }

  /* Hide line numbers on very small screens if present */
  .highlight .linenos {
    display: none;
  }

  /* Better copy button positioning */
  .code-header-inline {
    inset-block-start: 0.375rem;
    inset-inline-end: 0.375rem;
  }

  .code-copy-button {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
  }
}

@media (min-width: 400px) and (max-width: 639px) {
  pre {
    margin-inline: calc(-1 * var(--space-4));
  }
}

pre code {
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  background: none;
  border: none;
  border-radius: 0;
}

/* ============================================
   CODE BLOCK HEADER
   ============================================ */

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Code block wrapper - contains pre and button */
.code-block-wrapper {
  position: relative;
  margin: var(--space-6) 0;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: var(--color-bg-code);
  box-shadow: var(--elevation-card);
  overflow: visible; /* Allow tooltips to overflow */
  transition: box-shadow var(--transition-base);
}


[data-theme="dark"] .code-block-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Keep animated borders outside the scrolling <pre> */
.code-block-wrapper.gradient-border,
.code-block-wrapper.gradient-border-subtle,
.code-block-wrapper.gradient-border-strong,
.code-block-wrapper.fluid-border,
.code-block-wrapper.fluid-combined {
  border: none;
  isolation: isolate;
}

.code-block-wrapper pre {
  margin: 0;
  border: none;
  border-radius: inherit;
  box-shadow: none;
  overflow: hidden; /* Clip code content to border-radius */
}

/* Inline code header (positioned absolutely relative to wrapper, not inside scrolling pre) */
.code-header-inline {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  z-index: 1;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.code-language {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  /* Ghost/frosted glass effect with neumorphic shadow */
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  /* Neumorphic shadow - refined depth */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(255, 255, 255, 0.4),
    inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.15),
    1px 1px 2px rgba(0, 0, 0, 0.08),
    -0.5px -0.5px 1px rgba(255, 255, 255, 0.3);
  pointer-events: auto; /* Allow interaction */
}

/* Dark mode for code language label */
[data-theme="dark"] .code-language {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
  /* Neumorphic shadow for dark mode - refined */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(255, 255, 255, 0.08),
    inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.4),
    1px 1px 3px rgba(0, 0, 0, 0.25),
    -0.5px -0.5px 1px rgba(255, 255, 255, 0.05);
}

/* Fallback */
@supports not (backdrop-filter: blur(8px)) {
  .code-language {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--color-border);
  }

  [data-theme="dark"] .code-language {
    background: rgba(26, 26, 26, 0.9);
    border-color: var(--color-border);
  }
}

.code-copy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  /* Ghost/frosted glass effect - neumorphic shadow */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast), box-shadow 0.2s ease;
  /* Neumorphic shadow - refined depth with better balance */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(255, 255, 255, 0.4),
    inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.15),
    1px 1px 2px rgba(0, 0, 0, 0.08),
    -0.5px -0.5px 1px rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative; /* For tooltip */
}

/* Hide text span */
.code-copy-button > span {
  display: none;
}

/* Tooltip */
.code-copy-button::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 0.625rem;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--text-xs);
  white-space: nowrap;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-card);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  z-index: 1000;
}

/* Tooltip arrow */
.code-copy-button::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--color-border);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  z-index: 1001;
}

.code-copy-button:hover::after,
.code-copy-button:hover::before,
.code-copy-button:focus-visible::after,
.code-copy-button:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

/* Adjust tooltip position on mobile */
@media (max-width: 640px) {
  .code-copy-button::after {
    bottom: auto;
    top: calc(100% + 0.5rem);
  }

  .code-copy-button::before {
    bottom: auto;
    top: calc(100% + 0.25rem);
    border-top: none;
    border-bottom: 4px solid var(--color-border);
  }
}

.code-copy-button:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  /* Neumorphic hover - refined raised effect with better depth */
  box-shadow:
    inset 0.5px 0.5px 1.5px rgba(255, 255, 255, 0.5),
    inset -0.5px -0.5px 1.5px rgba(0, 0, 0, 0.12),
    2px 2px 6px rgba(0, 0, 0, 0.1),
    -1px -1px 3px rgba(255, 255, 255, 0.4);
  transform: translate3d(0, -0.5px, 0);
}

.code-copy-button:active {
  /* Neumorphic pressed state - subtle inset effect */
  box-shadow:
    inset 1px 1px 2px rgba(0, 0, 0, 0.15),
    inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.2),
    1px 1px 2px rgba(0, 0, 0, 0.05);
  transform: translate3d(0, 0, 0);
  background: rgba(255, 255, 255, 0.15);
}

.code-copy-button.copied {
  color: var(--color-success);
  background: rgba(34, 197, 94, 0.15); /* Success color with transparency */
  border-color: rgba(34, 197, 94, 0.3);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  /* Neumorphic shadow with success tint */
  box-shadow:
    inset 0.5px 0.5px 1px rgba(34, 197, 94, 0.3),
    inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.1),
    1px 1px 3px rgba(34, 197, 94, 0.2),
    -0.5px -0.5px 1px rgba(34, 197, 94, 0.15);
}

/* Update tooltip text when copied */
.code-copy-button.copied::after {
  content: 'Copied!';
}

.code-copy-button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Dark mode adjustments for ghost effect */
[data-theme="dark"] .code-copy-button {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
  /* Neumorphic shadow for dark mode */
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.05),
    inset -1px -1px 2px rgba(0, 0, 0, 0.3),
    2px 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .code-copy-button:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-text-primary);
  /* Neumorphic hover for dark mode - refined raised effect */
  box-shadow:
    inset 0.5px 0.5px 1.5px rgba(255, 255, 255, 0.12),
    inset -0.5px -0.5px 1.5px rgba(0, 0, 0, 0.5),
    2px 2px 6px rgba(0, 0, 0, 0.35),
    -1px -1px 3px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .code-copy-button.copied {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.4);
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
  .code-copy-button {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--color-border);
  }

  [data-theme="dark"] .code-copy-button {
    background: rgba(26, 26, 26, 0.9);
    border-color: var(--color-border);
  }
}

/* Duplicate styles removed - already defined above */

/* ============================================
   XXS adjustments (<= --breakpoint-xxs): keep toolbar compact
   Use 399px to avoid overlap with min-width queries
   ============================================ */
@media (max-width: 399px) {
  .code-header {
    padding: var(--space-2) var(--space-3);
    gap: 0.5rem;
  }

  .code-language {
    font-size: var(--text-xxs);
  }

  .code-copy-button {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ============================================
   SYNTAX HIGHLIGHTING (Pygments-compatible)
   ============================================ */

/* Comments */
.highlight .c,
.highlight .cm,
.highlight .c1,
.highlight .cs {
  color: #6c757d;
  font-style: italic;
}

/* Keywords */
.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: #e74c3c;
  font-weight: bold;
}

/* Strings */
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx {
  color: #2ecc71;
}

/* Numbers */
.highlight .m,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo {
  color: #e67e22;
}

/* Functions */
.highlight .nf,
.highlight .fm {
  color: #3498db;
  font-weight: bold;
}

/* Classes */
.highlight .nc,
.highlight .nn {
  color: #9b59b6;
  font-weight: bold;
}

/* Variables */
.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi {
  color: #e67e22;
}

/* Operators */
.highlight .o,
.highlight .ow {
  color: #e74c3c;
}

/* Punctuation */
.highlight .p {
  color: var(--color-text-primary);
}

/* Built-ins */
.highlight .nb,
.highlight .bp {
  color: #3498db;
}

/* Constants */
.highlight .no,
.highlight .kc {
  color: #e67e22;
}

/* Errors */
.highlight .err {
  color: #e74c3c;
  background-color: #fadbd8;
}

/* ============================================
   LINE NUMBERS
   ============================================ */

.highlight .linenos {
  display: inline-block;
  padding-right: var(--space-4);
  margin-right: var(--space-4);
  border-right: 1px solid var(--color-border);
  color: var(--color-text-muted);
  user-select: none;
}

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */

[data-theme="dark"] .highlight .c,
[data-theme="dark"] .highlight .cm,
[data-theme="dark"] .highlight .c1,
[data-theme="dark"] .highlight .cs {
  color: #adb5bd;
}

[data-theme="dark"] .highlight .err {
  background-color: rgba(231, 76, 60, 0.2);
}

/* ============================================
   SCROLLBAR FOR CODE BLOCKS
   ============================================ */

pre::-webkit-scrollbar {
  height: 8px;
}

pre::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

pre::-webkit-scrollbar-thumb {
  background: var(--color-border-dark);
  border-radius: var(--radius-sm);
}

pre::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}
