/* ===========================
   Dark Blocks – sectioned layout for your single-page article
   Works with your existing classes: .mainContent, .content-blocks, .wrapper
===========================*/

/* 1) Hero / intro (first .content-blocks) */
.mainContent > article > .content-blocks:nth-of-type(1){
  background:
    radial-gradient(1200px 600px at 120% -20%, rgba(157,123,255,.25), transparent 60%),
    radial-gradient(800px 400px at -20% 10%, rgba(123,220,255,.20), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  border: 1px solid var(--line);
  padding: 32px 24px;
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
}
.mainContent h1{
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing:.3px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, #fff, #cfe6ff 40%, #9d7bff 80%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.mainContent > article > .content-blocks:nth-of-type(1) p{
  font-size: 1.08rem;
  color: var(--muted);
}

/* 2) Generic section panel baseline */
.content-blocks{
  position: relative;
  margin: 26px auto;
  padding: 26px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: var(--shadow);
}

/* alternating skins so panels feel unique */
.content-blocks:nth-of-type(2n){ background: linear-gradient(180deg, #12151e, #0f131b);}
.content-blocks:nth-of-type(3n){ background: linear-gradient(180deg, #141a26, #0f141d);}
.content-blocks:nth-of-type(5n){ background: radial-gradient(700px 250px at 110% -10%, rgba(123,220,255,.08), transparent), var(--bg-2);}

/* 3) Section headings – ribbons & underlines */
.content-blocks h2{
  font-size: clamp(24px, 3.6vw, 34px);
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--brand), rgba(255,255,255,0)) 1;
}
.content-blocks h3{
  font-size: clamp(18px, 2.6vw, 22px);
  display: inline-block;
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(123,220,255,.12), rgba(157,123,255,.12));
  border: 1px solid var(--line);
  border-radius: 999px;
  margin: 6px 0 14px;
}
.content-blocks h4{
  font-size: 1.05rem;
  color: #e7eeff;
  letter-spacing:.2px;
  margin-top: 4px;
}

/* 4) Card grid component (auto for lists/paragraph clusters) */
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 16px 14px;
  box-shadow: var(--shadow);
}
.card header{ font-weight:700; margin-bottom: 8px; }
.card p{ color: var(--muted); }

/* 5) Lists – readable, “checklist” look */
.content-blocks ul{ margin: 10px 0 6px 0; padding-left: 0; list-style: none; }
.content-blocks ul li{
  display:flex; gap: 10px; align-items:flex-start;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  margin-bottom: 8px;
}
.content-blocks ul li::before{
  content: "•";
  display:inline-block; line-height:1; font-weight:900;
  margin-top: 2px;
  color: var(--brand);
}

/* emoji bullets already provided – keep spacing pretty */
.content-blocks ul li:has(strong)::before{ margin-top: 4px; }

/* Ordered lists styled like steps */
.content-blocks ol{
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}
.content-blocks ol li{
  counter-increment: step;
  position: relative;
  padding: 12px 12px 12px 48px;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 14px;
  margin: 8px 0;
}
.content-blocks ol li::before{
  content: counter(step);
  position: absolute; left: 12px; top: 10px;
  width: 28px; height: 28px; border-radius: 8px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  color:#051019; font-weight:800;
  box-shadow: var(--shadow);
}

/* 6) Notice / “risk” rows (you have a table and risk lists) */
.notice{
  padding: 14px 16px;
  border-radius: 12px;
  background: #1d222f;
  border-left: 4px solid var(--brand);
}
.notice.warn{ background:#2a2315; border-left-color: var(--warn); }
.notice.bad{ background:#2a1718; border-left-color: var(--bad); }

/* 7) Comparison tables – already globally styled in style.css.
      Add colored chips for values. */
td .chip, th .chip{
  display:inline-block; padding:4px 10px; border-radius: 999px;
  border:1px solid var(--line); background: var(--bg-3); color:#eaf6ff; font-size:.85rem;
}
td .chip.ok{ background: rgba(74,214,123,.12); border-color: rgba(74,214,123,.4); color:#d0ffe1; }
td .chip.warn{ background: rgba(255,202,95,.12); border-color: rgba(255,202,95,.4); color:#fff5cf;}
td .chip.bad{ background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.4); color:#ffdada;}

/* 8) “Payment list” with small logos */
.payment-list{
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.payment-list li{
  display:flex; gap:12px; align-items:center; padding:12px;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
}
.payment-list img{ width:28px; height:28px; object-fit:contain; filter: drop-shadow(0 0 1px rgba(0,0,0,.4)); }

/* 9) “Licens-list” paragraphs -> make them feel like media cards */
.licens-list p{
  display:grid; grid-template-columns: 44px 1fr; gap:12px;
  align-items:flex-start;
  padding:12px; margin:10px 0;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
}
.licens-list img{ width:44px; height:44px; object-fit:contain; border-radius:10px; background: #0f1320; padding:6px; }

/* 10) FAQ blocks – transform each Q/A section into an accordion-like card (static HTML) */
.content-blocks:has(> h2#faq) + .content-blocks h3,
.content-blocks:has(> h2#faq) + .content-blocks + .content-blocks h3{
  display:block;
}
.content-blocks h3 + p{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 14px;
  padding:14px 16px;
  color: var(--muted);
}

/* 11) Tables in “Risikomatrix / sammenligninger” – add striped header labels */
table thead th:first-child{ border-left: none; }
table thead th{ position: relative; }
table thead th::after{
  content:"";
  position:absolute; left:0; bottom:0;
  height:2px; width:100%;
  background: linear-gradient(90deg, var(--brand), transparent);
}

/* 12) Inline callouts inside paragraphs */
p > a[rel~="nofollow"]{ text-decoration-thickness: 2px; }

/* 13) Tiny elements */
small, .muted{ color: var(--muted); }

/* 14) Anchor styles for in-page TOC jumps (your IDs on h2/h3) */
[id]::before{
  content:"";
  display:block;
  height:80px; /* offset aid */
  margin-top:-80px;
  visibility:hidden;
}

/* 15) Section-specific “themes” by content:
   - Tax & EU section gets cyan border
   - Licenses gets purple glow
   - ROFUS/MitID gets warning ribbon
*/
#skat-eu-eoes-vs-uden-for-eu,
#hvornaar-er-gevinster-skattefri,
#gevinster-uden-for-eu{
  scroll-margin-top: 80px;
}
.content-blocks:has(> h2#skat-eu-eoes-vs-uden-for-eu){
  border-color: rgba(123,220,255,.45);
  box-shadow: 0 0 0 1px rgba(123,220,255,.12), var(--shadow);
}
.content-blocks:has(> h2#licenstyper-og-tilsyn),
.content-blocks:has(> h3#eu-e-eos-licenser),
.content-blocks:has(> h3#eu-eoes-licenser){
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(157,123,255,.12), transparent),
    var(--bg-2);
}
.content-blocks:has(> h2#rofus-mitid-ansvarligt-spil),
.content-blocks:has(> h3#spil-uden-rofus){
  border-left: 4px solid var(--warn);
}

/* 16) “Pros & Cons” – turn ULs into two-column cards if desired */
#fordele, #ulemper{
  scroll-margin-top: 80px;
}
.content-blocks:has(> h3#fordele) ul,
.content-blocks:has(> h3#ulemper) ul{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:10px;
}
.content-blocks:has(> h3#ulemper) ul li::before{ color: var(--bad); }

/* 17) Risk matrix table – emphasize levels */
.content-blocks:has(> h4#risikomatrix) table td:nth-child(2){
  font-weight: 700;
}
.content-blocks:has(> h4#risikomatrix) tbody tr td:nth-child(2){
  color:#ffdede;
}

/* 18) Footer “Kontaktpunkter” – make links into pill buttons */
.content-blocks:has(> h3#kontaktpunkter) p a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; margin:6px 8px 6px 0;
  background: #182233;
  border:1px solid var(--line); border-radius: 999px;
}
.content-blocks:has(> h3#kontaktpunkter) img{
  margin: 10px 0 0;
}

/* 19) Responsive niceties */
@media (min-width: 900px){
  .content-blocks{ padding: 30px 28px; }
  .mainContent{ margin-top: 56px; }
}

/* 20) Print support */
@media print{
  .content-blocks{ background:#fff; color:#000; box-shadow:none; border-color:#ddd; }
  a{ color:#0033cc; }
  .site-header,.site-footer{ display:none !important; }
}

/* 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; }
}

/* === Pros / Cons — правка карточек и переносов === */
.section--pros ul,
.section--cons ul{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:14px;
  margin: 10px 0 6px 0;  /* как в твоём базовом UL */
  padding-left: 0;
  list-style:none;
}
.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;
  line-height:1.55;

  /* ключевой антиперенос для этой зоны */
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
  white-space: normal !important;
}

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

/* делаем «заголовок» в LI читаемым одной строкой */
.section--pros ul li strong,
.section--cons ul li strong{
  display:inline;               /* оставляем текст в одну строку */
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:keep-all;
  hyphens:none;
  margin-right:.35ch;
}

/* если слово всё-таки слишком длинное — мягче спасаемся */
@supports (text-wrap:balance){
  .section--pros ul li,
  .section--cons ul li{ text-wrap:pretty; }
}

/* === H4 — отступы как у h3 (фикс большого гэпа) === */
.content-blocks h4{
  margin: 8px 0 12px !important;
  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;
}
