/*
 Theme Name: GeneratePress Child
 Template: generatepress
 Description: One-page стили под аккуратный вид (как скрин #2)
 Version: 1.0.0
 Text Domain: generatepress-child
*/

/* ---------- БАЗА ---------- */
:root{
  --maxw: 960px;
  --bg: #ffffff;
  --text:#0f172a;      /* темнее, чем было */
  --muted:#64748b;
  --card:#f6f9ff;      /* лёгкий голубой фон боксов */
  --ring:#e7eefc;      /* светлая обводка */
  --accent:#2563eb;    /* ссылка/акцент как на скрине */
  --radius:20px;       /* большие скругления как в TOC */
}

body,button,input,select,textarea{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
}

.onepage-container{ max-width: var(--maxw); margin:0 auto; padding: 24px; }

/* Скрываем дублирующийся заголовок страницы */
.page .entry-title{ display:none; }

/* Чтобы якоря не прятались под шапкой/админбаром */
h1,h2,h3,h4,h5,h6{ scroll-margin-top: 90px; }

/* Заголовки — крупнее и плотнее (как на скрине) */
h1{
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 2.2vw + 1rem, 2.4rem);
  margin: 0 0 10px;
}
h2{
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(1.35rem, 1.1vw + 1rem, 1.65rem);
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb; /* тонкая разделительная линия как на скрине */
}

/* Ссылки */
.entry-content a:not(.button),
a{ color: var(--accent); text-decoration: none; }
.entry-content a:hover,
a:hover{ text-decoration: underline; text-underline-offset: 2px; }

/* ---------- TOC (Table of Contents) ---------- */
/* Применяется, когда у блока Group/List выбран стиль "Table of Contents" */
.is-style-toc,
nav.toc{
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 20px 0 28px;
  box-shadow: 0 1px 0 rgba(16,24,40,.02);
}
.is-style-toc h2,
nav.toc h2{
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  border-bottom: 1px solid var(--ring);
}
.is-style-toc ol,
nav.toc ol{
  margin: 0;
  padding-left: 1.2rem;
  list-style: decimal;
  columns: 2;            /* две колонки как на скрине */
  column-gap: 36px;
}
@media (max-width: 720px){
  .is-style-toc ol, nav.toc ol{ columns: 1; }
}
.is-style-toc li,
nav.toc li{ break-inside: avoid; margin: 6px 0; }
.is-style-toc a,
nav.toc a{ font-weight: 600; }

/* ---------- CALLOUT (Vigtigt/Tip) ---------- */
/* Выбери у блока Group стиль "Callout" */
.is-style-callout{
  background: #eef6ff;
  border: 1px solid rgba(37,99,235,.20);
  border-left: 6px solid var(--accent);
  border-radius: 14px;
  padding: 14px 16px;
}
.is-style-callout strong{ font-weight: 800; }

/* ---------- МЕДИА/ТАБЛИЦЫ/ДЕТАЛИ ---------- */
figure{ margin: 0; }
figure img{ max-width: 100%; height: auto; }
figcaption{ font-size: .9rem; color: var(--muted); margin-top: 6px; }

table, .wp-block-table table{
  width:100%; border-collapse: collapse; margin: 14px 0;
}
th,td,.wp-block-table th,.wp-block-table td{
  border:1px solid #e5e7eb; padding:10px; text-align:left; vertical-align:top;
}
th,.wp-block-table th{ background:#f1f5f9; }

details{
  border:1px solid #e5e7eb; border-radius:12px; padding:12px 16px; margin:12px 0; background:#fff;
}
details>summary{ cursor:pointer; font-weight:600; }

/* Ссылка «Til toppen ↑» */
.backtotop{ text-align:right; margin-top:8px; }
.backtotop a{ color: var(--accent); font-size:.9rem; }

/* Двухколоночный контент (если нужно) — задай блоку класс split */
@media (min-width: 900px){
  .split{ display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; }
}

/* ----- PANEL: общий прямоугольник секции (для .intro-panel и .panel) ----- */
.panel,
.intro-panel{
  background:#fff;
  border:1px solid #e7eefc;
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 1px 0 rgba(16,24,40,.02);
  margin: 20px 0 28px;
}
.panel > *:first-child{ margin-top: 0 !important; }
.panel > *:last-child{  margin-bottom: 0 !important; }

/* Callout по твоей HTML-разметке: <aside class="callout"> */
aside.callout{
  background:#eef6ff;
  border:1px solid rgba(37,99,235,.20);
  border-left:6px solid #2563eb;
  border-radius:14px;
  padding:14px 16px;
  margin-top: 16px;
}
aside.callout p{ margin: 0 0 10px; }
aside.callout p:last-child{ margin-bottom:0; }
aside.callout strong{ font-weight: 800; }

/* "Til toppen" внутри панели */
.intro-panel .backtotop{ text-align:right; margin-top:8px; }
.intro-panel .backtotop a{ color:#2563eb; text-decoration:none; font-size:.9rem; }

/* TOC (если используешь <nav class="toc">) — оставим как было, на всякий */
nav.toc{
  background: var(--card);
  border: 1px solid #e7eefc;
  border-radius: 20px;
  padding: 20px 24px;
  margin: 20px 0 28px;
  box-shadow: 0 1px 0 rgba(16,24,40,.02);
}
nav.toc h2{
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  border-bottom: 1px solid #e7eefc;
}
nav.toc ol{ margin:0; padding-left:1.2rem; list-style:decimal; columns:2; column-gap:36px; }
@media (max-width:720px){ nav.toc ol{ columns:1; } }
nav.toc li{ break-inside: avoid; margin:6px 0; }

/* --- ПАНЕЛЬ вступления (обертка, которую скрипт добавляет) --- */
.intro-panel{
  background:#fff;
  border:1px solid #e7eefc;
  border-radius:20px;
  padding:22px 24px;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
  margin:20px 0 28px;
  overflow:hidden;                 /* держим любые float внутри */
}
.intro-panel::after{ content:""; display:block; clear:both; }

/* Правим поведение внутренних элементов, чтобы ничего не «уплывало» вбок */
.intro-panel .callout,
.intro-panel aside.callout{
  float:none !important;           /* запрет на правый флоат */
  clear:both;
  width:100%;
  display:block;
  margin-top:16px;
}

/* Сам вид callout */
aside.callout{
  background:#eef6ff;
  border:1px solid rgba(37,99,235,.20);
  border-left:6px solid #2563eb;
  border-radius:14px;
  padding:14px 16px;
}
aside.callout p{ margin:0 0 10px; }
aside.callout p:last-child{ margin-bottom:0; }
aside.callout strong{ font-weight:800; }

/* «Til toppen» внутри панели */
.intro-panel .backtotop{ text-align:right; margin-top:10px; }
.intro-panel .backtotop a{ color:#2563eb; text-decoration:none; font-size:.9rem; }

/* На случай, если Gutenberg-колонки случайно попали внутрь первой секции */
.intro-panel .wp-block-columns{ display:block !important; }
.intro-panel .wp-block-column{ width:100% !important; margin:0 !important; }

/* --- Разделы: от H2 до H2 --- */
.section-panel{
  background:#f6f9ff;              /* светло-серый/голубоватый фон как на эталоне */
  border:1px solid #e7eefc;
  border-radius:20px;
  padding:22px 24px;
  margin:22px 0 28px;
  overflow:hidden;                  /* чтобы float-элементы не вываливались */
  box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.section-panel::after{ content:""; display:block; clear:both; }

/* Заголовок внутри панели — без линии сверху */
.section-panel > h2{
  margin-top:0;
  padding-top:0;
  border-top:none;
}

/* Уберём глобальную «разделительную» полосу над h2, если она была */
.entry-content h2{ border-top:none; padding-top:0; }

/* Callout всегда под текстом, на всю ширину */
.section-panel .callout,
.section-panel aside.callout{
  float:none !important;
  clear:both;
  width:100%;
  display:block;
  margin-top:16px;
}

/* Сам callout */
aside.callout{
  background:#eef6ff;
  border:1px solid rgba(37,99,235,.20);
  border-left:6px solid #2563eb;
  border-radius:14px;
  padding:14px 16px;
}
aside.callout p{ margin:0 0 10px; }
aside.callout p:last-child{ margin-bottom:0; }
aside.callout strong{ font-weight:800; }

/* "Til toppen ↑" внизу панели */
.section-panel .backtotop{ text-align:right; margin-top:10px; }
.section-panel .backtotop a{ color:#2563eb; text-decoration:none; font-size:.9rem; }

/* Разделы: от H2 до H2 — один «бокс» */
.section-panel{
  background:#f6f9ff;              /* светло-серый фон, как на эталоне */
  border:1px solid #e7eefc;
  border-radius:20px;
  padding:22px 24px;
  margin:22px 0 28px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.section-panel::after{ content:""; display:block; clear:both; }

/* H2 внутри панели без верхней линии */
.section-panel > h2{ margin-top:0; padding-top:0; border-top:none; }

/* Глобальную разделительную полосу над h2 убираем */
.entry-content h2{ border-top:none; padding-top:0; }

/* Callout всегда под текстом и на всю ширину */
.section-panel .callout,
.section-panel aside.callout{
  float:none !important;
  clear:both;
  width:100%;
  display:block;
  margin-top:16px;
}

/* Внешний вид callout (если используешь <aside class="callout">) */
aside.callout{
  background:#eef6ff;
  border:1px solid rgba(37,99,235,.20);
  border-left:6px solid #2563eb;
  border-radius:14px;
  padding:14px 16px;
}
aside.callout p{ margin:0 0 10px; }
aside.callout p:last-child{ margin-bottom:0; }
aside.callout strong{ font-weight:800; }

/* Ссылка «Til toppen ↑» — внизу панели */
.section-panel .backtotop{ text-align:right; margin-top:10px; }
.section-panel .backtotop a{ color:#2563eb; text-decoration:none; font-size:.9rem; }

.section-panel{
  background:#f6f9ff; border:1px solid #e7eefc; border-radius:20px;
  padding:22px 24px; margin:22px 0 28px; overflow:hidden; box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.section-panel > h2{ margin-top:0; padding-top:0; border-top:none; }
.entry-content h2{ border-top:none; padding-top:0; }
.section-panel .callout, .section-panel aside.callout{ float:none !important; clear:both; width:100%; display:block; margin-top:16px; }
aside.callout{ background:#eef6ff; border:1px solid rgba(37,99,235,.20); border-left:6px solid #2563eb; border-radius:14px; padding:14px 16px; }
.section-panel .backtotop{ text-align:right; margin-top:10px; }

/* === Центруем всё содержимое страницы в одну колонку === */
:root{
  --maxw: 960px;   /* при желании поменяй ширину */
  --padx: 24px;    /* внутренние отступы слева/справа */
}

/* основная колонка контента */
#primary,
.content-area{
  float: none;             /* на всякий случай отключим плавающие колонки GP */
  width: 100%;
  margin: 0 auto;
}

/* центрируем заголовок страницы и контент */
.page .entry-header,
.page .inside-article,
.page .entry-content{
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padx);
  padding-right: var(--padx);
}

/* если у тебя включён режим Separate Containers — убираем лишние боковые паддинги */
body.separate-containers .inside-article{
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}

/* Callout всегда ПОД текстом, на всю ширину панели */
.section-panel .is-style-callout,
.intro-panel  .is-style-callout,
.section-panel .callout,
.section-panel aside.callout{
  clear: both !important;     /* пройти ниже любых float справа/слева */
  float: none !important;     /* запретить выравнивание в бок */
  display: block;
  width: 100%;
  margin: 16px 0 0 0;
}

/* На случай, если у callout выставлен alignright/alignleft в редакторе */
.section-panel .wp-block-group.is-style-callout.alignright,
.section-panel .wp-block-group.is-style-callout.alignleft{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* «Til toppen» тоже ниже всего */
.section-panel .backtotop{ clear: both; }

/* принудительно опустить callout ниже любых float справа/слева */
.section-panel .callout.below{
  clear: both !important;
  float: none !important;
  display: block;
  width: 100% !important;
  margin: 16px 0 0 0 !important;
}

/* === Акцентные заголовки внутри панелей =============================== */
/* Общие — размер/ритм */
.section-panel > h2{
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: clamp(1.35rem, 1.1vw + 1rem, 1.65rem);
  margin: 0 0 14px;
  padding-bottom: 8px;             /* место под подчёркивание */
  position: relative;
  border: 0;                       /* на всякий — убираем возможные линии темы */
}
.section-panel h3{
  font-weight: 700;
  line-height: 1.25;
  font-size: clamp(1.05rem, 0.9vw + 0.9rem, 1.25rem);
  margin: 20px 0 10px;
}

/* H2 — короткая градиентная «капсула»-подчёркивание */
:root{ --accent-2:#60a5fa; }       /* светлее основного акцента */
.section-panel > h2::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:96px; height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
@media (prefers-reduced-motion: no-preference){
  .section-panel > h2:hover::after{ width:128px; transition: width .28s ease; }
}

/* H3 — «пилюля» с левым акцентом */
.section-panel h3{
  background:#eef6ff;              /* чуть насыщеннее фона панели */
  border-left:6px solid var(--accent);
  border-radius:12px;
  padding:8px 12px;
}

/* Опционально: маленький «eyebrow»-лейбл перед заголовком (если используешь <span class="eyebrow">Текст</span>) */
.section-panel .eyebrow{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4665b5;
  background:#e9f2ff;
  border:1px solid #d9e8ff;
  border-radius:999px;
  padding:.18rem .5rem;
  margin:0 0 8px;
}

/* На всякий случай — старые линии темы над h2 убираем */
.entry-content h2{ border-top:none; padding-top:0; }

/* ===== Casino showcase ===== */
.section-panel.casino-panel{
  background:#fff;
  border:1px solid #e7eefc;
  border-radius:20px;
  padding:22px 24px;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
  margin:22px 0 28px;
}

.casino-panel > h2{ margin-top:0; }

.casino-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width: 1024px){ .casino-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .casino-grid{ grid-template-columns:1fr; } }

.casino-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#ffffff;
  border:1px solid #e7eefc;
  border-radius:16px;
  padding:14px;
}

.casino-card .logo{
  width:64px; height:64px; object-fit:contain;
  background:#f8fafc; border:1px solid #eef4ff; border-radius:12px;
  padding:6px; flex:0 0 64px;
}

.casino-card .meta{ flex:1; }
.casino-card .meta h3{ margin:0 0 4px; font-weight:800; font-size:1rem; letter-spacing:-.01em; }

.casino-card .rating{
  font-weight:700; font-variant-numeric:tabular-nums;
  font-size:.95rem; color:#0f172a;
}
.casino-card .rating .star{ margin-right:4px; color:#f59e0b; }

.casino-card .pills{
  list-style:none; padding:0; margin:8px 0 0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.casino-card .pills li{
  font-size:.85rem; line-height:1;
  background:#eef6ff; color:#0f172a;
  border:1px solid rgba(37,99,235,.15);
  border-radius:9999px; padding:6px 10px;
}

/* ===== Кастомный футер ===== */
:root{
  /* при необходимости задай ширину колонки под свой сайт */
  --maxw: 960px;
  --padx: 24px;
}

.site-footer--custom{
  background: #0f172a;           /* тёмный фон */
  color: #e5e7eb;                 /* светлый текст */
}

.site-footer--custom a{ color:#9ec1ff; text-decoration:none; }
.site-footer--custom a:hover{ text-decoration:underline; text-underline-offset:2px; }

.site-footer--custom .footer-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px var(--padx);
  display: grid;
  grid-template-columns: 1.3fr 1fr; /* бренд + блок ответственного игры */
  gap: 24px;
}

.site-footer--custom .brand-name{
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff;
  font-size: clamp(1.15rem, 0.8vw + 1rem, 1.4rem);
  margin-bottom: 6px;
}

.site-footer--custom .about{
  margin: 0;
  color: #cbd5e1;
}

.site-footer--custom .footer-responsible h4{
  margin: 0 0 6px;
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
}

.site-footer--custom .footer-responsible p{
  margin: 0;
  color: #d1d5db;
}

.site-footer--custom .footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 8px;
  padding: 12px var(--padx);
}

.site-footer--custom .footer-bottom .copy{
  max-width: var(--maxw);
  margin: 0 auto;
  color: #cbd5e1;
  font-size: .95rem;
}

/* Мобилка — складываем в одну колонку */
@media (max-width: 720px){
  .site-footer--custom .footer-inner{
    grid-template-columns: 1fr;
  }
}