/* Personal color overrides for Serhii Chechun's blog */

:root {
  /* Accent color - a warm teal/cyan */
  --accent: #0EA5B9;
  --accent-alpha-20: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-alpha-70: color-mix(in srgb, var(--accent) 70%, transparent);

  /* Article link colors */
  --article-link-color: var(--accent);
}

/* Subtle customizations */
.site-header {
  border-bottom: 2px solid var(--accent-alpha-20);
}

.logo__text {
  font-weight: 700;
}

.post-content h2 {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.3em;
}

.post-content h3 {
  color: var(--accent);
}

/* Make tables more readable */
.post-content table {
  font-size: 0.9em;
}

.post-content table th {
  background: var(--accent-alpha-20);
  color: var(--accent);
}

/* Blockquote styling */
.post-content blockquote {
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  overflow: hidden;
  border-radius: 0 4px 4px 0;
}

.post-content blockquote code {
  word-break: break-all;
  white-space: normal;
}

/* Code block enhancements */
.post-content .highlight {
  border: 1px solid var(--border-color);
}

/* Footer links hover */
.footer a:hover {
  color: var(--accent);
}

/* Responsive table wrapper */
.post-content table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

/* Definition list styling */
.post-content dl dt {
  color: var(--accent);
  font-weight: 600;
  margin-top: 1em;
}

.post-content dl dd {
  margin-left: 1.5em;
  padding-left: 1em;
  border-left: 2px solid var(--accent-alpha-20);
}

/* Code block title bar */
.highlight > figcaption {
  background: var(--accent-alpha-20);
  color: color-mix(in srgb, var(--color) 60%, transparent);
  padding: 4px 12px;
  font-size: 0.85em;
  font-family: monospace;
  border-bottom: 1px solid var(--border-color);
}

.highlight > figcaption + pre {
  margin-top: 0;
}

/* Horizontal scroll for code blocks — prevent wrapping on mobile */
.post-content pre {
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}