/*
Theme Name: GeneratePress Child – Dark Blocks
Theme URI: https://example.com
Author: alfasearch
Template: generatepress
Description: Child theme that hides GP chrome and applies a dark, block-based design system. Section styles are in main-page.css.
Version: 1.0
*/

/* -----------------------------
   0) CSS Custom Properties
------------------------------*/
:root{
  --bg: #0e0f12;            /* main page background */
  --bg-2: #12141a;          /* alt block bg */
  --bg-3: #151923;          /* chips / muted */
  --card: #191e2a;          /* cards */
  --emph: #1e2533;          /* emphasized surfaces */
  --line: #263043;          /* borders & dividers */
  --muted: #9aa3b2;         /* secondary text */
  --text: #e6ecf3;          /* primary text */
  --brand: #7bdcff;         /* cyan accent */
  --brand-2: #9d7bff;       /* purple accent */
  --ok: #4ad67b;
  --warn: #ffca5f;
  --bad: #ff6b6b;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
  --shadow-soft: 0 10px 28px rgba(6,10,25,.36);
  --ring: 0 0 0 1px var(--line);
  --maxw: 1140px;
}

/* Base reset for dark UI */
html,body{
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.7;
  letter-spacing:.1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* -----------------------------
   1) Hide default GP chrome
   (safe CSS approach – no template edits required)
------------------------------*/
.site-header,
.site-footer,
.site-info,
.footer-widgets,
.inside-header,
.breadcrumbs,
#site-navigation { display:none !important; }

/* Make the content stretch edge-to-edge */
.site,
#page, 
.site-content, 
.grid-container{
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--bg);
  box-shadow: none !important;
}

/* Article container centering */
.mainContent{
  max-width: var(--maxw);
  margin: 40px auto 100px;
  padding: 0 20px 20px;
}

/* Typography defaults */
h1,h2,h3,h4{ color: #fff; line-height: 1.25; margin: 0 0 16px; }
p{ margin: 0 0 16px; }
strong{ color:#fff; }
em{ color:#cfe6ff; }

/* Tables – global baseline */
table{ width:100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
thead th{ background: linear-gradient(180deg, #1a2130, #161c28); color:#dfe8ff; font-weight:700; text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); }
tbody td{ padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:nth-child(odd) td{ background: rgba(255,255,255,.015); }

/* Figures & images */
figure{ margin: 18px 0; }
figure img{ display:block; width:100%; height:auto; border-radius: var(--radius); box-shadow: var(--shadow-soft); }

/* Utility chips / badges */
.badge{ display:inline-flex; gap:8px; align-items:center; padding:6px 10px; background: var(--bg-3); border:1px solid var(--line); color:#eaf6ff; border-radius:999px; font-size:.85rem; }

/* Content width helpers inside blocks */
.wrapper{ max-width: var(--maxw); margin: 0 auto; }

/* Page background (тёмный общий фон, без глобального reset) */
body { background:#0b0f14; }

/* Контейнеры */
.content-blocks {
  background:#121821;
  border:1px solid #223042;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Сетки карточек */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:18px;
}
.cards > *{
  background:#151d26;
  border:1px solid #223042;
  border-radius:14px;
  padding:16px;
}

/* Лицензии – фикс переполнений текста/иконки */
.licens-list .cards .card-head{display:flex;align-items:center;gap:10px;margin-bottom:.25rem}
.licens-list .cards img{width:28px;height:28px;object-fit:contain}

/* Замечания/предупреждения */
.notice{padding:14px 16px;border-radius:12px;border:1px solid #223042;background:rgba(255,255,255,.03);box-shadow:0 8px 20px rgba(0,0,0,.25);margin:14px 0}
.notice.warn{background:linear-gradient(180deg, rgba(255,200,60,.08), rgba(255,200,60,.03));border-color:rgba(255,200,60,.28)}
.notice.bad{background:linear-gradient(180deg, rgba(255,90,120,.10), rgba(255,90,120,.04));border-color:rgba(255,90,120,.35)}

/* Таблицы – тёмные */
table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #223042;border-radius:12px;background:#151d26}
thead th{background:#0f1822;color:#e7edf7;padding:12px;text-align:left}
tbody td{padding:12px;border-top:1px solid #223042;vertical-align:top}
tbody tr:hover{background:#0f151c}

/* Списки оплат – иконки в линию */
.payment-list{list-style:none;padding:0;margin:0}
.payment-list li{display:flex;gap:10px;align-items:center;background:#151d26;border:1px solid #223042;border-radius:12px;padding:12px;margin:10px 0}
.payment-list img{width:28px;height:28px}

/* Мелкие улучшения типографики и переносов */
p, li, td{overflow-wrap:anywhere;hyphens:auto}

/* ====== FIX 1: Глобальный тёмный фон (перебиваем тему) ====== */
html, body,
.site, .site-container, #page, .page,
.site-content, .content-area {
  background: #0b0f14 !important;
}

/* если тема красит сам <main> — подстрахуемся */
.mainContent {
  background: transparent !important;
}

/* ====== FIX 2: Ломающийся блок лицензий ======
   Старое правило делало p внутри .licens-list гридом (44px 1fr).
   В нашей новой разметке (cards) это сжимает текст в 44px.
   Снимаем грид конкретно для карточек. */
.licens-list .cards article p {
  display: block !important;
  grid-template-columns: none !important;
}

/* на всякий случай гасим и общее правило, если оно ещё действует */
.licens-list p {
  display: block;
  grid-template-columns: none;
}

/* шапка карточки лицензии — выравнивание иконки/заголовка */
.licens-list .cards .card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: .35rem;
}
.licens-list .cards .card-head img {
  width: 28px; height: 28px; object-fit: contain;
}

/* === A) ТЁМНЫЙ ФОН ДЛЯ ВСЕЙ СТРАНИЦЫ, НЕ ТРОГАЯ ТЕМУ ===
   Раз у нас есть только <main>, рисуем полноэкранный фон псевдо-элементом. */
.mainContent{
  position: relative;
  z-index: 0;
}
.mainContent::before{
  content:"";
  position: fixed; /* заставляем тянуться на весь вьюпорт */
  inset: 0;
  background:#0b0f14;            /* общий тёмный фон */
  z-index: -1;                    /* под всем контентом */
  pointer-events:none;
}

/* === B) ФИКС КАРТОЧЕК ЛИЦЕНЗИЙ (ломался текст) === */
.licens-list p{
  display:block !important;
  grid-template-columns: initial !important;
}

/* на карточках выравниваем заголовок с иконкой */
.licens-list .card-head{
  display:flex; align-items:center; gap:10px; margin-bottom:.4rem;
}
.licens-list .card-head img{
  width:28px; height:28px; object-fit:contain;
}

/* лёгкий «вид ссылки» для .nolink, чтобы не казалось битым */
.nolink{
  color:#cfe6ff;
  text-decoration: underline dotted;
  cursor: default;
}

/* подстраховка: в списках и таблицах запрещаем сверхузкую колонку-«спичку» */
.content-blocks p, .content-blocks li, .content-blocks td{
  word-break: normal;
  overflow-wrap: anywhere;    /* можно оставить, но без break-all */
}

/* === H4: компактный “label”-заголовок для подпунктов === */
.mainContent article .content-blocks h4{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  margin:10px 0 12px;
  font-size:clamp(16px, 2.1vw, 18px);
  font-weight:700;
  letter-spacing:.3px;
  color:#eaf2ff;
  background: linear-gradient(180deg, rgba(123,220,255,.10), rgba(157,123,255,.08));
  border:1px solid #223042;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* маленькая цветная черточка слева */
.mainContent article .content-blocks h4::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:3px;
  background: linear-gradient(180deg, var(--brand-2, #7bdcff), var(--brand, #9d7bff));
  box-shadow: 0 0 0 2px rgba(157,123,255,.15);
}

/* вариации: предупреждение / опасность — по аналогии с .notice */
.mainContent article .content-blocks h4.warn{
  background: linear-gradient(180deg, rgba(255,200,60,.12), rgba(255,200,60,.06));
  border-color: rgba(255,200,60,.32);
}
.mainContent article .content-blocks h4.warn::before{
  background: linear-gradient(180deg, #ffd26b, #ffb200);
  box-shadow: 0 0 0 2px rgba(255,200,60,.18);
}

.mainContent article .content-blocks h4.bad{
  background: linear-gradient(180deg, rgba(255,90,120,.12), rgba(255,90,120,.06));
  border-color: rgba(255,90,120,.35);
}
.mainContent article .content-blocks h4.bad::before{
  background: linear-gradient(180deg, #ff8aa1, #ff4b6e);
  box-shadow: 0 0 0 2px rgba(255,90,120,.20);
}

/* если после h4 идёт текст — чуть отделим блок */
.mainContent article .content-blocks h4 + p{
  margin-top: 6px;
}

/* H4 — стиль как у h3 (чип) */
.content-blocks h4{
  display:inline-block;
  font-size:clamp(16px, 2.2vw, 18px);
  font-weight:600;
  line-height:1.2;
  padding:6px 10px;
  margin:6px 0 12px;             /* как у h3 по ощущению */
  border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(90deg, rgba(123,220,255,.10), rgba(157,123,255,.10));
  color:#e7eeff;
  letter-spacing:.2px;
}

/* если h4 первый в секции — убираем лишний верхний отступ */
.content-blocks > h4:first-child{ margin-top:0; }

/* и чуть уменьшаем верхний внутренний паддинг у самой секции,
   когда она начинается с h4 (чтобы было как у секций с h3) */
.content-blocks:has(> h4:first-child){ padding-top:20px; }

/* На случай старых браузеров без :has — небольшой универсальный твик,
   чтобы не было огромного зазора даже без правила выше */
@supports not(selector(:has(*))){
  .content-blocks > h4:first-child{ margin-top:0; }
}

/* У секций, которые начинаются с h4 — делаем верх плотнее как у h3 */
.content-blocks > h4:first-child{ 
  margin-top:0 !important;
}

.content-blocks:has(> h4:first-child){
  padding-top:14px !important;   /* было 26px; подгони 12–16 по вкусу */
}

/* Стиль самого h4 (чип) — оставляем как раньше, но без лишнего отступа */
.content-blocks h4{
  display:inline-block;
  font-size:clamp(16px, 2.2vw, 18px);
  font-weight:600;
  line-height:1.2;
  padding:6px 10px;
  margin:6px 0 12px;             /* верх = 6px */
  border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(90deg, rgba(123,220,255,.10), rgba(157,123,255,.10));
  color:#e7eeff;
  letter-spacing:.2px;
}

/* Фоллбек для Safari/старых браузеров без :has */
@supports not(selector(:has(*))){
  .content-blocks.tight-top{ padding-top:14px !important; }
}

/* === PATCH: Pros/Cons cards fix === */
.section--pros ul,
.section--cons ul{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:14px;
}
.section--pros ul li,
.section--cons ul li{
  display:block;              /* <— НЕ flex */
  padding:12px 14px;
  background: var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  overflow-wrap: normal;      /* перестаём ломать слова по буквам */
  word-break: normal;
  hyphens: auto;
}
.section--pros ul li::before,
.section--cons ul li::before{
  content:none;               /* эмодзи уже играют роль маркера */
}

/* Чуть аккуратнее типографика внутри карточек */
.section--pros ul li strong,
.section--cons ul li strong{ margin-right:.35ch; }

/* === H4 spacing: как у h3, без огромного воздуха === */
.content-blocks h4{
  margin: 8px 0 12px !important;   /* раньше был большой top-margin */
  padding: 6px 10px;
  display:inline-block;
  background: linear-gradient(90deg, rgba(123,220,255,.10), rgba(157,123,255,.10));
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1.05rem;
  color: #e7eeff;
  letter-spacing:.2px;
}

/* === Общий фон: жёстко тёмный, если тема перетирает === */
html, body{ background:#0b0f14 !important; }

/* ===== Pros / Cons: сетка карточек + запрет долбёжки слов на слоги ===== */
.mainContent .content-blocks.wrapper.section--pros > ul,
.mainContent .content-blocks.wrapper.section--cons > ul{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr)) !important;
  gap:14px !important;
  margin:10px 0 6px 0 !important;
  padding-left:0 !important;
  list-style:none !important;
}

/* перебиваем глобальное .content-blocks ul li{display:flex} */
.mainContent .section--pros ul li,
.mainContent .section--cons ul li{
  display:block !important;
  padding:12px 14px !important;
  background: var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  line-height:1.55 !important;

  /* главное: перестаём ломать слова */
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  white-space: normal !important;
}

/* эмодзи уже есть — убираем псевдобуллет */
.mainContent .section--pros ul li::before,
.mainContent .section--cons ul li::before{ content:none !important; }

/* заголовок внутри <li> держим в одну строку */
.mainContent .section--pros ul li > strong,
.mainContent .section--cons ul li > strong{
  white-space:nowrap !important;
  word-break:keep-all !important;
  margin-right:.35ch !important;
}

/* ===== H4: отступы как у H3, без огромного зазора сверху ===== */
.mainContent .content-blocks h4{
  display:inline-block !important;
  font-size:clamp(16px, 2.2vw, 18px) !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  padding:6px 10px !important;
  margin:6px 0 12px !important;     /* верх почти как у h3 */
  border-radius:999px !important;
  border:1px solid var(--line) !important;
  background:linear-gradient(90deg, rgba(123,220,255,.10), rgba(157,123,255,.10)) !important;
  color:#e7eeff !important;
}

/* если секция начинается с h4 — убираем лишний верхний зазор */
.mainContent .content-blocks > h4:first-child{ margin-top:0 !important; }
.mainContent .content-blocks > h4:first-child { /* эмуляция уменьшенного паддинга секции */
  --_padfix: 12px;
}
.mainContent .content-blocks > h4:first-child { /* трюк без :has() */
  padding-top: calc(26px - 12px) !important; /* было 26px — сделаем плотнее */
}

/* ===== Глобальный тёмный фон (если тема красит фон) ===== */
html, body,
.site, .site-container, #page, .page,
.site-content, .content-area, .mainContent{
  background:#0b0f14 !important;
}

/* ==== H4: чистый заголовок + короткое подчёркивание (фикс «капсулы») ==== */
.mainContent .content-blocks h4{
  /* жёстко перебиваем все прежние стили */
  display:block !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:8px 0 10px !important;
  font-size:clamp(17px, 2.1vw, 19px) !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  color:#eaf2ff !important;
  letter-spacing:.2px !important;
}

/* убираем любые псевдоэлементы, что рисовали «капсулу» слева/сзади */
.mainContent .content-blocks h4::before{
  content:none !important;
}

/* аккуратная полоска-подчёркивание под h4 */
.mainContent .content-blocks h4::after{
  content:"" !important;
  display:block !important;
  width:64px;                 /* длина подчёркивания */
  height:3px;
  margin-top:8px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  opacity:.9;
}

/* если секция начинается с h4 — без лишнего воздуха сверху */
.mainContent .content-blocks > h4:first-child{ margin-top:0 !important; }
/* чуть плотнее верхний внутренний край секции */
@supports selector(:has(*)){
  .mainContent .content-blocks:has(> h4:first-child){ padding-top:16px !important; }
}
/* фоллбек (без :has) — просто делаем секцию чуть плотнее глобально */
@supports not(selector(:has(*))){
  .mainContent .content-blocks{ padding-top:22px; }
}