/* assets/css/custom.css — дополнительные стили v3
 * Tailwind покрывает основную стилизацию; здесь — глобальные эффекты,
 * которые неудобно выражать через utility-классы.
 *
 * WARNING [performance]:
 *   <script src="https://cdn.tailwindcss.com/..."> подключается БЕЗ defer.
 *   При добавлении defer inline <script id="tailwind-config"> может
 *   выполниться раньше загрузки Tailwind рантайма - тогда конфиг не
 *   применится и весь CSS-бутстрап не сработает. Безопасная альтернатива -
 *   собрать Tailwind CLI локально, тогда defer станет возможным и FCP
 *   сократится на 200-400 мс.
 */

:root {
  --color-background: #131313;
  --color-surface-container-lowest: #0e0e0e;
  --color-surface-container-low: #1b1b1b;
  --color-surface-container: #1f1f1f;
  --color-surface-container-high: #2a2a2a;
  --color-surface-container-highest: #353535;
  --color-primary-container: #00ff00;
  --color-primary: #eaffde;
  --color-on-surface: #e2e2e2;
  --color-outline-variant: #3b4b35;
  --border-radius: 0px;
  --font-headline: 'Space Grotesk', sans-serif;
}

body {
  font-family: var(--font-headline);
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.terminal-cursor::after {
  content: '_';
  animation: blink 1s step-end infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.glass-panel {
  background: rgba(53, 53, 53, 0.6);
  backdrop-filter: blur(20px);
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--color-background); }
::-webkit-scrollbar-thumb { background: var(--color-primary-container); }

[aria-current="page"] {
  color: var(--color-primary-container);
  border-bottom: 2px solid var(--color-primary-container);
  padding-bottom: 1px;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Стили для содержимого статей (Markdown → HTML).
 * Используем !important для перебивания runtime-стилей Tailwind CDN.
 */
.article-content { color: var(--color-on-surface) !important; line-height: 1.75 !important; }
.article-content > * + * { margin-top: 1.25rem !important; }
.article-content h2 {
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  color: var(--color-on-background) !important;
  margin-top: 3rem !important;
  margin-bottom: 1rem !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}
.article-content h3 {
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  color: var(--color-on-background) !important;
  margin-top: 2.25rem !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.3 !important;
}
.article-content h4 {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--color-primary-fixed-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.5rem !important;
}
.article-content p { color: rgba(226, 226, 226, 0.85) !important; }
.article-content strong { color: var(--color-primary-container) !important; font-weight: 600 !important; }
.article-content em { color: var(--color-on-background) !important; font-style: italic !important; }
.article-content a {
  color: var(--color-primary-container) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: color 150ms ease !important;
}
.article-content a:hover { color: #ffffff !important; }
.article-content ul,
.article-content ol {
  padding-left: 1.5rem !important;
  color: rgba(226, 226, 226, 0.85) !important;
}
.article-content ul { list-style: disc !important; }
.article-content ol { list-style: decimal !important; }
.article-content li { margin-top: 0.5rem !important; }
.article-content li::marker { color: var(--color-primary-fixed-dim) !important; }
.article-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 0.9em !important;
  background: var(--color-surface-container) !important;
  color: var(--color-primary-container) !important;
  padding: 0.15rem 0.4rem !important;
  border-radius: 2px !important;
}
.article-content pre {
  background: var(--color-surface-container-low) !important;
  border: 1px solid var(--color-outline-variant) !important;
  padding: 1rem !important;
  overflow-x: auto !important;
  font-size: 0.875rem !important;
}
.article-content pre code {
  background: transparent !important;
  padding: 0 !important;
  color: var(--color-on-surface) !important;
}
.article-content blockquote {
  border-left: 3px solid var(--color-primary-container) !important;
  padding: 0.5rem 0 0.5rem 1.25rem !important;
  color: rgba(226, 226, 226, 0.7) !important;
  font-style: italic !important;
}
.article-content hr {
  border: 0 !important;
  border-top: 1px solid var(--color-outline-variant) !important;
  margin: 2.5rem 0 !important;
}

/* GFM-таблицы внутри статей */
.article-content .article-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 2rem 0 !important;
  font-size: 0.9rem !important;
  background: var(--color-surface-container-lowest) !important;
  border: 1px solid var(--color-outline-variant) !important;
}
.article-content .article-table thead th {
  background: var(--color-surface-container-high) !important;
  color: var(--color-primary-fixed-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  text-align: left !important;
  border-bottom: 1px solid var(--color-primary-fixed-dim) !important;
  white-space: nowrap !important;
}
.article-content .article-table tbody td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--color-outline-variant) !important;
  color: rgba(226, 226, 226, 0.85) !important;
  vertical-align: top !important;
}
.article-content .article-table tbody tr:last-child td {
  border-bottom: 0 !important;
}
.article-content .article-table tbody tr:hover td {
  background: var(--color-surface-container) !important;
}