@import "tailwindcss";

html {
  scroll-behavior: smooth;
}

:root {
  --site-max-width: 1400px;
  --color-light: #ffffff;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  background-color: var(--color-white); /* Цвет фона страницы */
}

/* 2. Исправленный контейнер */
.site-container {
  width: 100%;
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .site-container {
    padding: 0 2rem;
  }
}

/* НУМЕРАЦИЯ ЗАГОЛОВКОВ */
.post-content { counter-reset: post-h2; }
.post-content h2 { counter-reset: post-h3; }
.post-content h2::before { counter-increment: post-h2; content: counter(post-h2) "."; margin-right: 0.5rem; color: #1e3050; font-weight: 700; }
.post-content h3::before { counter-increment: post-h3; content: counter(post-h2) "." counter(post-h3) "."; margin-right: 0.4rem; color: #1e3050; font-weight: 600; font-size: 0.9em; }

/* ТАБЛИЦЫ В ПОСТАХ */
.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  border: 1px solid #e2e8f0;
}

.post-content th,
.post-content td {
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  text-align: left;
}

.post-content th {
  background: #1e3a5f;
  color: #ffffff;
  font-weight: 600;
}

.post-content tr:hover td {
  background: #f8fafc;
}

/* АДАПТИВНАЯ ТАБЛИЦА (DIV-STRUCTURE) */
/* Десктоп: 3 колонки в ряд */
.post-content > div:has(> div > div:nth-child(3)) {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin: 2rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.post-content > div:has(> div > div:nth-child(3)) > div {
  display: contents;
}

.post-content > div:has(> div > div:nth-child(3)) > div > div {
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.95rem;
}

/* Убираем правый бордер у последней колонки */
.post-content > div:has(> div > div:nth-child(3)) > div > div:last-child {
  border-right: none;
}

/* Заголовки (первая строка) */
.post-content > div:has(> div > div:nth-child(3)) > div:first-child > div {
  background: #1e3a5f;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

/* Последняя строка без границы */
.post-content > div:has(> div > div:nth-child(3)) > div:last-child > div {
  border-bottom: none;
}

/* Hover эффект - только для строк данных, не для заголовков */
.post-content > div:has(> div > div:nth-child(3)) > div:nth-child(n+2):hover > div {
  background: #f8fafc;
}

/* Заголовки - НИКОГДА не менять фон при hover */
.post-content > div:has(> div > div:nth-child(3)) > div:first-child:hover > div {
  background: #1e3a5f !important;
}

/* Мобильная версия */
@media (max-width: 768px) {
  .post-content > div:has(> div > div:nth-child(3)) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .post-content > div:has(> div > div:nth-child(3)) > div {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }

  /* Скрываем заголовки в мобильном */
  .post-content > div:has(> div > div:nth-child(3)) > div:first-child {
    display: none;
  }

  .post-content > div:has(> div > div:nth-child(3)) > div > div {
    padding: 0.75rem 1rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
  }

  .post-content > div:has(> div > div:nth-child(3)) > div > div:last-child {
    border-bottom: none;
  }

  /* Первый элемент в строке - метка */
  .post-content > div:has(> div > div:nth-child(3)) > div > div:first-child {
    background: #1e3a5f;
    color: #fff;
    font-weight: 600;
  }

  /* Остальные элементы - значения */
  .post-content > div:has(> div > div:nth-child(3)) > div > div:not(:first-child) {
    color: #64748b;
    font-size: 0.85rem;
  }
}