/*
Theme Name: Energy Dock
Theme URI: https://energy-portal.snow-kids.net/
Author: seo-team
Description: Тема «Док» для snow-kids.net. Навигация внизу на любой ширине, текст одной колонкой, промо сверху.
Version: 1.0.7
Text Domain: energy
*/

/* =========================================================================
   Тема «Док» — snow-kids.net, бренд Energy Casino
   =========================================================================
   Скелет, а не перекраска:
     навигация — нижняя панель на ЛЮБОЙ ширине (у соседей верхняя строка,
                 два этажа, левая колонка или бургер);
     промо     — одной группой сверху (у соседей врезками или в конце);
     контент   — одна колонка без рельсов (у соседей рельс, полосы, указатель).

   Палитра фирменная: тёмная зелень #17351B, кислотный лайм #84CC16, холст
   #0a1a0d. Лайм — цвет ПЛОСКОСТЕЙ и крупных чисел; для мелкого текста на
   тёмном берётся он же, но приглушённый, иначе получается свечение.
   ========================================================================= */

:root {
  --brand: #17351B;
  --lime: #84CC16;
  --bg: #0a1a0d;
  --tx: #f0fdf4;
  --tx-2: rgba(240, 253, 244, .66);

  --card: #0f2412;
  --card-2: #142d18;
  --line: rgba(240, 253, 244, .12);

  --col: 720px;
  --dock: 64px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0; background: var(--bg); color: var(--tx);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Место под нижнюю панель: она перекрывает конец страницы на всех ширинах. */
  padding-bottom: calc(var(--dock) + env(safe-area-inset-bottom, 0px));
}
/* overflow-x: hidden не ставим: он маскирует переполнение и ломает sticky. */

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); letter-spacing: .02em; }

.skip { position: absolute; left: -9999px; z-index: 200; padding: 12px 18px; background: var(--lime); color: #0a1a0d; }
.skip:focus { left: 12px; top: 12px; }

/* ================================================================ кнопки === */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border: 0; border-radius: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 15px; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: transform .15s var(--ease), filter .15s var(--ease);
}
/* Чёрный текст на лайме даёт 12:1 — белый на нём не читался бы вовсе. */
.btn--go { background: var(--lime); color: #0a1a0d; }
.btn--go:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn--go:active { transform: translateY(1px); }

/* ================================================================= шапка === */
/* Разделов здесь нет: они внизу. Поэтому шапка узкая и не липкая. */

/* Классы шапки — bar__*, а не top__*: имя .top занято блоком «строка с
   наибольшей отдачей», и его правила (flex-start, свои отступы) ломали
   шапку — на 390 она распадалась на три строки. */
.bar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
  max-width: var(--col); margin-inline: auto; padding: 16px 20px 10px;
}
.bar__brand img { width: auto; height: 30px; display: block; }
.bar__mark {
  margin-inline-start: auto; flex: none; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--tx-2); font-size: 11px;
}
.bar__nav {
  flex: none; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--tx-2); font-size: 12.5px; white-space: nowrap;
}
.bar__nav:hover { color: var(--tx); border-color: var(--lime); }

/* ================================================================ статья === */

.page { max-width: var(--col); margin-inline: auto; padding: 6px 20px 40px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: 12.5px; color: var(--tx-2); }
.crumbs a:hover { color: var(--lime); }
/* Разделитель — тем же приглушённым цветом, что и текст крошек: цветом линии
   он давал 1.4:1 и не читался (замер на соседнем сайте сети). */
.crumbs__sep { color: var(--tx-2); }
.crumbs__here { color: var(--lime); }

.page__t { margin: 0 0 12px; font-size: clamp(28px, 5vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
/* Подводка идёт после блока, поэтому у неё свой отступ сверху. */
.lead { margin: 0 0 6px; }
.lead p { margin: 0 0 14px; color: var(--tx); font-size: 17.5px; }

/* ============================================================== паспорт === */
/* Пары «подпись — значение» из таблицы, которую панель ставит первой.
   Сеткой, а не таблицей: на 320 точках таблица в две колонки рвёт слова. */

.facts {
  /* 165, а не 150: в 150 длинный номер лицензии рвался на «…/200» и «6». */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 1px; margin: 0 0 26px; background: var(--line);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.facts__i { display: grid; gap: 3px; padding: 11px 13px; background: var(--card); min-width: 0; }
.facts__k { color: var(--tx-2); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.facts__v { font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

/* ========================================================== общий блок === */

.blk {
  margin: 0 0 26px; padding: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.blk__h { margin: 0 0 12px; color: var(--tx-2); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.blk__note { margin: 10px 0 0; color: var(--tx-2); font-size: 11px; }
.blk__go { width: 100%; margin-top: 14px; }

/* --- порог и потолок --- */
.edge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.edge__i {
  display: grid; gap: 4px; padding: 14px; border-radius: 10px;
  background: var(--card-2); border: 1px solid var(--line);
}
.edge__i:hover { border-color: var(--lime); }
.edge__v { font-size: clamp(20px, 4vw, 26px); font-weight: 800; line-height: 1.1; color: var(--lime); overflow-wrap: anywhere; }
.edge__n { color: var(--tx-2); font-size: 12.5px; line-height: 1.3; }
/* Верхняя граница — тем же цветом, но плашка светлее: пара читается как
   «от и до», а не как два одинаковых предложения. */
.edge__i[data-side="hi"] { background: linear-gradient(180deg, var(--card-2), var(--card)); }

/* --- лента ожидания --- */
.wait { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.wait__i a { display: grid; grid-template-columns: minmax(84px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 10px; }
.wait__n { color: var(--tx); font-size: 13.5px; overflow-wrap: anywhere; }
.wait__bar { height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.wait__bar i { display: block; height: 100%; width: var(--w); background: var(--lime); border-radius: 999px; }
.wait__v { color: var(--tx-2); font-size: 12.5px; white-space: nowrap; }
.wait__i a:hover .wait__n { color: var(--lime); }

/* --- лестница требований --- */
.lad { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lad__i a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card-2);
  /* Ступень: чем выше требование, тем правее и уже — видно, что это ряд. */
  margin-inline-start: calc(var(--i) * 14px);
}
.lad__i a:hover { border-color: var(--lime); }
.lad__x { flex: none; color: var(--lime); font-size: 16px; font-weight: 800; }
.lad__n { color: var(--tx-2); font-size: 13.5px; overflow-wrap: anywhere; }

/* --- строка с наибольшей отдачей --- */
.top { display: flex; align-items: flex-start; gap: 16px; }
.top__v { flex: none; font-size: clamp(26px, 6vw, 38px); font-weight: 800; color: var(--lime); line-height: 1; }
.top__n { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.top__d { margin: 0; color: var(--tx-2); font-size: 13.5px; line-height: 1.5; }

/* --- разрыв между вводом и выводом --- */
.gap { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gap__i a {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 11px 13px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line);
}
.gap__i a:hover { border-color: var(--lime); }
.gap__n { font-size: 13.5px; overflow-wrap: anywhere; }
.gap__p { color: var(--lime); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.gap__p i { color: var(--tx-2); font-style: normal; }

/* --- полоса отдачи --- */
.spr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "bar bar bar" "lo avg hi"; gap: 8px 10px; }
.spr__bar { grid-area: bar; position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--card-2), var(--lime)); }
.spr__bar i {
  position: absolute; top: -4px; left: var(--p); width: 2px; height: 18px;
  background: var(--tx); border-radius: 2px; transform: translateX(-1px);
}
.spr__lo { grid-area: lo; color: var(--tx-2); font-size: 13px; }
.spr__avg { grid-area: avg; text-align: center; color: var(--tx); font-size: 13px; font-weight: 700; }
.spr__hi { grid-area: hi; color: var(--lime); font-size: 13px; font-weight: 700; }

/* --- величина в тексте и подсветка перехода --- */
/* mark по умолчанию жёлтый с чёрным текстом — на тёмном холсте это заплата. */
mark.val { background: none; color: var(--tx); font-weight: 700; }
[data-hit="yes"] { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

/* ================================================================= текст === */

.prose { min-width: 0; }
.prose p, .prose ul, .prose ol { max-width: 64ch; }
.prose h2 { margin: 30px 0 12px; font-size: clamp(21px, 3.4vw, 27px); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.prose h3 { margin: 22px 0 8px; font-size: 17.5px; font-weight: 700; }
.prose h4 { margin: 18px 0 6px; font-size: 15.5px; font-weight: 700; color: var(--lime); }
.prose p { margin: 0 0 14px; color: var(--tx-2); }
.prose strong { color: var(--tx); font-weight: 700; }
.prose a:not([data-cta]) { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

.prose ul, .prose ol { margin: 0 0 16px; padding-inline-start: 20px; color: var(--tx-2); }
.prose li { margin-bottom: 6px; }

.prose img { display: block; margin: 18px 0; border-radius: 12px; }

/* Таблицы прокручиваются внутри себя: на 320 точках четыре колонки иначе
   растягивают страницу и дают горизонтальную прокрутку всему сайту. */
.prose table { display: block; width: 100%; overflow-x: auto; margin: 0 0 18px; border-collapse: collapse; font-size: 14px; }
.prose th { padding: 10px 12px; text-align: start; background: var(--card-2); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.prose td { padding: 10px 12px; color: var(--tx-2); border-top: 1px solid var(--line); vertical-align: top; }
.prose tr[id] { scroll-margin-top: 20px; }

/* ========================================================= хвост и промо === */

.tail {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 28px; padding: 18px; border-radius: 14px;
  background: linear-gradient(120deg, var(--brand), var(--card));
  border: 1px solid var(--line);
}
.tail__t { margin: 0; font-size: clamp(18px, 3vw, 22px); font-weight: 800; }

/* Блок партнёрских ссылок от панели: своя разметка приходит из
   templatescrm/button.php, поэтому стилизуем структурно, по потомкам. */
.crm { margin-top: 22px; }
.crm__t { margin: 0 0 8px; color: var(--tx-2); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.crm a { color: var(--lime); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================ подвал === */

.foot { border-top: 1px solid var(--line); }
.foot__in { max-width: var(--col); margin-inline: auto; padding: 26px 20px 16px; display: grid; gap: 14px; }
.foot__note { margin: 0; color: var(--tx-2); font-size: 13px; max-width: 60ch; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.foot__nav a { color: var(--tx-2); font-size: 13.5px; }
.foot__nav a:hover { color: var(--lime); }
.foot__bar { max-width: var(--col); margin: 0 auto; padding: 12px 20px 20px; color: var(--tx-2); font-size: 11.5px; }

/* ========================================================= нижняя панель === */
/* Держится на любой ширине — это и есть навигация сайта. */

.dock {
  position: fixed; inset: auto 0 0; z-index: 90;
  background: rgba(10, 26, 13, .92); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.dock__in {
  display: flex; align-items: center; gap: 12px;
  max-width: 1080px; margin-inline: auto; padding: 10px 16px;
}
.dock__tabs {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  min-width: 0; flex: 1 1 auto;
}
.dock__tabs::-webkit-scrollbar { display: none; }
.dock__t {
  flex: none; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--tx-2);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.dock__t:hover { color: var(--tx); border-color: var(--lime); }
/* Текущий раздел — заливкой бренда, а не лаймом: лайм остаётся у кнопки,
   иначе на панели два одинаково ярких пятна и кнопка теряется. */
.dock__t[aria-current] { background: var(--brand); color: var(--tx); border-color: var(--brand); }
.dock__go { flex: none; padding: 11px 18px; }

/* ================================================================ адаптив === */

@media (max-width: 700px) {
  /* Кнопка блока поднимается наверх: сгиб на 390 приходится на верх нижней
     панели, и кнопка в конце блока оказывалась под ней. */
  .blk { display: flex; flex-direction: column; }
  .blk__go { order: -1; margin: 0 0 14px; }
  .edge { grid-template-columns: minmax(0, 1fr); }
  .top { flex-direction: column; gap: 10px; }
  .tail { flex-direction: column; align-items: stretch; }
  .tail .btn { width: 100%; }
  .wait__i a { grid-template-columns: minmax(0, 1fr) auto; }
  .wait__bar { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .page, .bar, .foot__in { padding-inline: 14px; }
  .dock__in { padding-inline: 12px; gap: 8px; }
  .dock__go { padding: 11px 14px; font-size: 14px; }
  .lad__i a { margin-inline-start: calc(var(--i) * 8px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}