@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   Stake Argentina - дизайн-слой поверх latter-theme
   Стиль: Modern Dark (слоистые поверхности, мягкое свечение,
   без чистого чёрного). Палитра снята с референс-сайта.
   Переменные темы печатаются инлайном ПОСЛЕ wp_head,
   поэтому перебиваем через html:root - специфичность выше.
   ============================================================ */

html:root {
  /* поверхности */
  --sa-bg: #172B39;
  --sa-bg-deep: #0E202D;
  --sa-surface: #1C3040;
  --sa-card: #213545;
  --sa-card-hover: #263D50;
  --sa-line: rgba(255, 255, 255, 0.08);
  --sa-line-strong: rgba(255, 255, 255, 0.14);

  /* текст */
  --sa-text: #ECF3F9;
  --sa-text-muted: #A1BFD6;
  --sa-text-dim: #7E9CB4;

  /* акценты */
  --sa-accent: #2DE01C;
  --sa-accent-hover: #25C016;
  --sa-accent-ink: #0E202D;
  --sa-accent-soft: rgba(45, 224, 28, 0.12);
  --sa-accent-glow: rgba(45, 224, 28, 0.28);
  --sa-info: #1475E1;
  --sa-warn: #F5A524;
  --sa-danger: #E5484D;
  --sa-star: #F5C518;

  /* геометрия и ритм (density 7: плотная, но не dashboard) */
  --sa-r-sm: 8px;
  --sa-r-md: 12px;
  --sa-r-lg: 16px;
  --sa-r-pill: 999px;
  --sa-s-1: 8px;
  --sa-s-2: 12px;
  --sa-s-3: 16px;
  --sa-s-4: 24px;
  --sa-s-5: 32px;
  --sa-s-6: 48px;
  --sa-s-7: 64px;

  /* тени: 4 уровня, мягкие, без чёрных провалов */
  --sa-e1: 0 1px 2px rgba(3, 12, 20, 0.35);
  --sa-e2: 0 4px 12px rgba(3, 12, 20, 0.35);
  --sa-e3: 0 12px 28px rgba(3, 12, 20, 0.4);
  --sa-e4: 0 24px 48px rgba(3, 12, 20, 0.45);

  /* движение */
  --sa-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sa-fast: 160ms;
  --sa-mid: 240ms;

  --sa-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- типографика ---------- */

html body {
  font-family: var(--sa-font);
  background-color: var(--sa-bg) !important;
  color: var(--sa-text-muted) !important;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: var(--sa-font);
  color: var(--sa-text);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

html body h1 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.12; font-weight: 800; }
html body h2 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; font-weight: 700; }
html body h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.3; font-weight: 700; }
html body h4 { font-size: 17px; line-height: 1.4; font-weight: 600; }

html body p { margin: 0 0 var(--sa-s-3); }
html body p:last-child { margin-bottom: 0; }

/* длина строки: комфортные 65-75 знаков на десктопе */
html body .text-block p,
html body .text-block li { max-width: 78ch; }

html body strong { color: var(--sa-text); font-weight: 600; }

/* ссылки в тексте: акцент + подчёркивание на расстоянии */
html body .text-block a,
html body .v1-welcome__info a,
html body .v1-faq a {
  color: var(--sa-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(45, 224, 28, 0.45);
  transition: color var(--sa-fast) var(--sa-ease), text-decoration-color var(--sa-fast) var(--sa-ease);
}

html body .text-block a:hover,
html body .v1-welcome__info a:hover {
  color: #5CF04E;
  text-decoration-color: currentColor;
}

/* ---------- списки: свои маркеры вместо дефолтных ---------- */

html body .text-block ul,
html body .v1-welcome__info ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--sa-s-3);
  display: grid;
  gap: 10px;
}

html body .text-block ul > li,
html body .v1-welcome__info ul > li {
  position: relative;
  padding-left: 26px;
}

html body .text-block ul > li::before,
html body .v1-welcome__info ul > li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--sa-accent);
  box-shadow: 0 0 0 3px var(--sa-accent-soft);
}

html body .text-block ol,
html body .v1-welcome__info ol {
  list-style: none;
  counter-reset: sa-step;
  padding-left: 0;
  margin: 0 0 var(--sa-s-3);
  display: grid;
  gap: 12px;
}

html body .text-block ol > li,
html body .v1-welcome__info ol > li {
  counter-increment: sa-step;
  position: relative;
  padding-left: 44px;
  min-height: 30px;
}

html body .text-block ol > li::before,
html body .v1-welcome__info ol > li::before {
  content: counter(sa-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--sa-r-sm);
  background: var(--sa-accent-soft);
  border: 1px solid rgba(45, 224, 28, 0.3);
  color: var(--sa-accent);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- секции и ритм ---------- */

html body .section {
  padding-block: var(--sa-s-5);
}

html body .section__title,
html body .section > .container > h2:first-child {
  position: relative;
  padding-left: 14px;
  margin-bottom: var(--sa-s-3);
}

html body .section__title::before,
html body .section > .container > h2:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: var(--sa-r-pill);
  background: linear-gradient(180deg, var(--sa-accent), rgba(45, 224, 28, 0.25));
}

/* ---------- таблицы ---------- */

html body .text-block table,
html body .v1-welcome__info table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--sa-s-3) 0;
  font-size: 15px;
  background: var(--sa-card);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-md);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

html body .text-block table th {
  background: var(--sa-surface);
  color: var(--sa-text);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sa-line-strong);
}

html body .text-block table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--sa-line);
  color: var(--sa-text-muted);
  vertical-align: top;
}

html body .text-block table tr:last-child td { border-bottom: 0; }
html body .text-block table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

/* строчные заголовки (наши таблицы «параметр - значение») */
html body .text-block table tbody th {
  width: 34%;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--sa-line);
  font-size: 14px;
}

/* таблица не ломает страницу на мобиле */
@media (max-width: 767px) {
  html body .text-block table,
  html body .v1-welcome__info table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  html body .text-block table th,
  html body .text-block table td { white-space: normal; min-width: 150px; }
}

/* Тема (.v1-top-table) центрирует средние колонки и прижимает последнюю вправо.
   Для текстовых ячеек это рвёт чтение, выравниваем всё по левому краю. */
html body .text-block .v1-top-table tr > th,
html body .text-block .v1-top-table tr > td { text-align: left; }

/* 3+ колонки на узком экране: строка = карточка, подпись колонки над значением.
   Класс sa-stack и data-label ставит assets/js/tables.js; без JS остаётся прокрутка. */
@media (max-width: 600px) {
  html body .text-block table.sa-stack,
  html body .v1-welcome__info table.sa-stack {
    display: block;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  html body table.sa-stack thead { display: none; }
  html body table.sa-stack tbody,
  html body table.sa-stack tr { display: block; }
  html body table.sa-stack tr {
    background: var(--sa-card);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-md);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  html body table.sa-stack tr:last-child { margin-bottom: 0; }
  html body .text-block table.sa-stack tr > td,
  html body .text-block table.sa-stack tr > th {
    display: block;
    width: auto;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    background: transparent;
    white-space: normal;
  }
  html body .text-block table.sa-stack tbody tr:nth-child(even) td { background: transparent; }
  html body .text-block table.sa-stack tr > :first-child {
    color: var(--sa-text);
    font-size: 16px;
    font-weight: 700;
    padding: 0 0 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--sa-line);
  }
  html body table.sa-stack tr > :not(:first-child)[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--sa-text-dim);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* ---------- фокус, доступность, движение ---------- */

html body a:focus-visible,
html body button:focus-visible,
html body [role='button']:focus-visible,
html body summary:focus-visible {
  outline: 2px solid var(--sa-accent);
  outline-offset: 3px;
  border-radius: var(--sa-r-sm);
}

html body a,
html body button,
html body [role='button'] { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- шапка и футер ---------- */

html body header,
html body .header {
  background: rgba(14, 32, 45, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sa-line);
}

html body footer,
html body .footer {
  background: var(--sa-bg-deep);
  border-top: 1px solid var(--sa-line);
}

/* ---------- сетка контейнера ---------- */

html body .container {
  width: min(1200px, 100% - 2 * var(--sa-s-3));
  margin-inline: auto;
}

@media (min-width: 1024px) {
  html body .container { width: min(1200px, 100% - 2 * var(--sa-s-5)); }
}

/* никакого горизонтального скролла */
html body { overflow-x: hidden; }