/* ================================================================
   SVES Portal — Base Styles
   File: assets/css/base.css

   1. @font-face (self-hosted Inter + JetBrains Mono)
   2. CSS Reset
   3. Base HTML elements
   4. Typography defaults
   5. Global utility classes
   ================================================================ */


/* ────────────────────────────────────────────────────────────────
   1. FONTS — Self-hosted WOFF2
   Файлы лежат в /assets/fonts/
   Inter Variable: один файл покрывает weight 100–900
   JetBrains Mono: поставка двух файлов (normal + italic)
   ──────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-cyrillic.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-display: swap;
}


/* ────────────────────────────────────────────────────────────────
   2. CSS RESET
   Минимальный reset. Не использовать normalize.css — лишний вес.
   ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
}

body {
  min-height: 100vh;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

ol, ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* Remove default focus on non-keyboard nav (mouse clicks) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Keyboard focus — accent ring */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ────────────────────────────────────────────────────────────────
   3. BASE HTML
   ──────────────────────────────────────────────────────────────── */

html {
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
}

/* Общий wrapper — не позволяет контенту быть шире max-width */
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

main {
  flex: 1;
}


/* ────────────────────────────────────────────────────────────────
   4. TYPOGRAPHY

   Принципы:
   - H1 на сайте используется ОДИН раз на странице
   - H2–H4 в теле статей — цвет text-heading, не accent
   - H1 на страницах-листингах (архивы, каталоги) — accent
   - Не везде кислотно-зелёный: только там, где это уместно
   ──────────────────────────────────────────────────────────────── */

/* --- Headings --- */

h1, .h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-accent);
}

h2, .h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-heading);
}

h3, .h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-heading);
}

h4, .h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-heading);
}

h5, .h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

h6, .h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* --- Paragraphs --- */

p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

/* Lead paragraph — крупнее, для intro text */
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  font-weight: var(--weight-regular);
}

/* --- Links --- */

a:not([class]) {
  color: var(--color-text-accent);
  text-decoration: underline;
  text-decoration-color: rgba(182, 255, 0, 0.35);
  text-underline-offset: 3px;
  transition: color var(--transition-fast),
              text-decoration-color var(--transition-fast);
}

a:not([class]):hover {
  color: var(--color-accent-hover);
  text-decoration-color: rgba(201, 255, 61, 0.65);
}

a:not([class]):visited {
  color: var(--color-text-accent-dim);
}

/* --- Strong & Em --- */

strong, b {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

em, i {
  font-style: italic;
}

/* --- Inline code --- */

code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--color-text-code);
  background: rgba(164, 110, 200, 0.18);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}

/* --- Pre/code block (базовые стили, детали в code-blocks.css) --- */

pre {
  font-family: var(--font-mono);
  font-size: var(--code-font-size);
  line-height: var(--code-line-height);
  overflow-x: auto;
  tab-size: 2;
}

/* --- Lists (в теле статей) --- */

.article-content ol,
.article-content ul {
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
}

.article-content ul {
  list-style: none;
}

.article-content ul > li {
  position: relative;
  padding-left: var(--space-5);
}

.article-content ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
}

.article-content ol {
  list-style: decimal;
  color: var(--color-text-primary);
}

.article-content li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

/* --- Blockquote --- */

blockquote {
  border-left: var(--block-border-width) solid var(--color-accent-dim);
  padding: var(--space-4) var(--space-5);
  background: var(--color-accent-muted);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-6) 0;
}

blockquote p {
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0;
}

/* --- Table (в теле статей) --- */

.article-content table {
  width: 100%;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.article-content th {
  background: var(--color-bg-card);
  color: var(--color-text-accent);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-strong);
}

.article-content td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  vertical-align: top;
}

.article-content tr:last-child td {
  border-bottom: none;
}

.article-content tr:hover td {
  background: rgba(164, 110, 200, 0.06);
}

/* --- HR в статьях --- */

.article-content hr {
  margin: var(--space-10) 0;
  border-color: var(--color-border-strong);
}

/* --- Keyboard shortcut --- */

kbd {
  font-family: var(--font-mono);
  font-size: 0.8em;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 0.1em 0.5em;
  color: var(--color-text-primary);
}


/* ────────────────────────────────────────────────────────────────
   5. UTILITY CLASSES
   ──────────────────────────────────────────────────────────────── */

/* Контейнеры */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--content {
  max-width: var(--container-content);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Visually hidden (для screen readers) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Truncate text */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Accent text */
.text-accent {
  color: var(--color-text-accent);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

/* Divider с декоративной линией */
.divider {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* Section title (с акцентной подчёркивающей линией) */
.section-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.section-title--accent {
  color: var(--color-text-accent);
}

/* Декоративная полоска перед заголовком секции */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-accent);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}

/* Subtle grid overlay (декоративный фон) */
.bg-grid {
  background-image:
    linear-gradient(rgba(164, 110, 200, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164, 110, 200, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Gradient fade для preview контента */
.content-fade {
  position: relative;
}

.content-fade::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--color-bg-base)
  );
  pointer-events: none;
}

/* Scrollable wrapper для таблиц/code на мобильном */
.overflow-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}