/* ML Meanders - Math (KaTeX) Styling */

/* ============================================
   Base KaTeX Overrides
   ============================================ */
.katex {
  font-size: 1.05em !important;
}

/* Inline math should align nicely with text */
.katex-display {
  margin: var(--space-xl) 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Display math container */
.math-display {
  margin: var(--space-xl) 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--space-sm) 0;
  max-width: 100%;
}

.math-display .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

.katex-html {
  max-width: 100%;
}

/* Fix KaTeX sqrt SVG overflow - they use width="400em" */
.katex .sqrt svg {
  max-width: 100%;
  overflow: hidden;
}

.katex .vlist-t {
  overflow: hidden;
}

.katex .mord.sqrt {
  overflow: hidden;
}

/* Ensure math containers clip overflow */
.katex {
  overflow: hidden;
}

.katex-display > .katex {
  overflow-x: auto;
  overflow-y: hidden;
}

.math-display > .katex-display {
  margin: 0 !important;
}

/* Centered display math */
.math-display .katex-display > .katex {
  text-align: center;
}

/* ============================================
   Equation Numbering
   ============================================ */
.math-display {
  position: relative;
  counter-increment: equation;
}

/* Add equation number */
.math-display.numbered::after {
  content: '(' counter(equation) ')';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Reset equation counter per post */
.post-body {
  counter-reset: equation theorem definition lemma;
}

/* ============================================
   Theorem-like Environments
   ============================================ */
.theorem,
.lemma,
.definition,
.proposition,
.corollary,
.example,
.remark,
.proof {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-accent);
}

/* Environment headers */
.theorem::before,
.lemma::before,
.definition::before,
.proposition::before,
.corollary::before,
.example::before,
.remark::before {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.theorem::before {
  counter-increment: theorem;
  content: 'Theorem ' counter(theorem);
}

.lemma::before {
  counter-increment: lemma;
  content: 'Lemma ' counter(lemma);
}

.definition::before {
  counter-increment: definition;
  content: 'Definition ' counter(definition);
}

.proposition::before {
  content: 'Proposition';
}

.corollary::before {
  content: 'Corollary';
}

.example::before {
  content: 'Example';
}

.remark::before {
  content: 'Remark';
}

/* Proof environment */
.proof {
  background-color: transparent;
  border-left: none;
  padding-left: 0;
  padding-right: 0;
}

.proof::before {
  content: 'Proof.';
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  display: block;
}

/* QED symbol */
.proof::after {
  content: '□';
  display: block;
  text-align: right;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* Named theorems */
.theorem[data-name]::before {
  content: 'Theorem ' counter(theorem) ' (' attr(data-name) ')';
}

.lemma[data-name]::before {
  content: 'Lemma ' counter(lemma) ' (' attr(data-name) ')';
}

.definition[data-name]::before {
  content: 'Definition ' counter(definition) ' (' attr(data-name) ')';
}

/* ============================================
   Algorithm Environment
   ============================================ */
.algorithm {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.algorithm-header {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.algorithm-body {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.algorithm-line {
  padding: var(--space-xs) 0;
}

.algorithm-keyword {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
}

.algorithm-comment {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ============================================
   Math Error Styling
   ============================================ */
.katex-error {
  color: #d63031;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background-color: rgba(214, 48, 49, 0.1);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
}

/* ============================================
   Responsive Math
   ============================================ */
@media (max-width: 768px) {
  .math-display {
    font-size: 0.9em;
  }

  .theorem,
  .lemma,
  .definition,
  .proposition,
  .corollary,
  .example,
  .remark,
  .proof {
    padding: var(--space-md);
  }
}