/* ══════════════════════════════════════════════════════════════════
   theme.css — токены темы + база. Подключается на ВСЕХ страницах.
   Перекраска правится только здесь.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* Шрифты */
  --font-head: 'Plus Jakarta Sans', 'Inter', Arial, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', Arial, sans-serif;

  /* Фирменные цвета */
  --purple:        #3E0A4E;   /* заголовки, логотип, текст */
  --purple-mid:    #4B1259;   /* карточки-градиенты */
  --purple-deep:   #2C0637;
  --green:         #17C282;   /* кнопка формы */
  --green-hover:   #12A76F;
  --green-dark:    #0B4A37;   /* блок "Our Global Network" */
  --green-cta-1:   #0B4A37;   /* градиент CTA-блока */
  --green-cta-2:   #128A5E;
  --orange:        #FB5C1D;   /* пилюли, статистика */
  --orange-2:      #FF7A3D;
  --cream:         #EFEBDD;   /* карточка "Together, we protect people" */
  --cream-soft:    #FDFBF3;   /* фон секции блогов */
  --lilac:         #E9DEF5;   /* чипы дат в списке событий */
  --mint:          #DFF2E7;   /* теги статей */

  /* Фоны и текст */
  --bg:              #ffffff;
  --bg-alt:          #F7F5F9;
  --surface:         #ffffff;
  --text:            #3E0A4E;
  --text-muted:      #6E5578;
  --border:          #E6E1EA;
  --input-bg:        #F4F6FA;
  --link:            #FB5C1D;

  /* Акцент (используется формой и общими элементами) */
  --accent:          #FB5C1D;
  --accent-dim:      #D64A12;
  --on-accent:       #ffffff;

  /* Шапка */
  --header-bg:       #ffffff;
  --header-fg:       #3E0A4E;
  --header-fg-muted: #3E0A4E;

  /* Футер */
  --footer-bg:       #ffffff;
  --footer-fg:       #3E0A4E;
  --footer-fg-muted: #6E5578;

  /* Дропдауны языка / кодов стран */
  --ls-panel-bg:     #ffffff;
  --ls-active-bg:    rgba(251,92,29,0.12);
  --ls-active-fg:    #FB5C1D;
  --ls-fg:           #3E0A4E;

  /* Геометрия */
  --maxw:            1200px;
  --radius-card:     18px;
  --radius-btn:      10px;
  --radius-input:    10px;
  --radius-pill:     999px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.dark-input::placeholder  { color: rgba(255,255,255,0.5); }
.light-input::placeholder { color: #9AA0AE; }

.dial-dropdown::-webkit-scrollbar { width: 6px; }
.dial-dropdown::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }

/* Оранжевая пилюля-кнопка */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 11px 20px; border: none; border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none; transition: background .15s, transform .15s;
}
.pill:hover { background: #E24F14; }
.pill--green { background: var(--green); }
.pill--green:hover { background: var(--green-hover); }
.pill--outline { background: transparent; border: 1.5px solid rgba(255,255,255,0.85); }
.pill--outline:hover { background: rgba(255,255,255,0.12); }

/* Текстовая ссылка-акцент со стрелкой */
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange); text-decoration: none;
}

/* ─── Общая шапка (статичные страницы) ─── */
.site-hd { position: sticky; top: 0; z-index: 100; background: var(--header-bg); border-bottom: 1px solid var(--border); }
.site-hd .hd-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 76px; }
.site-hd .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-hd .logo img { height: 30px; width: auto; display: block; }
.site-hd .logo span { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--purple); letter-spacing: -0.5px; }
.site-hd nav { display: flex; gap: 24px; align-items: center; }
.site-hd nav a { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--purple); text-decoration: none; white-space: nowrap; }
.site-hd nav a:hover { color: var(--orange); }

/* ─── Общий футер ─── */
.site-ft { background: var(--footer-bg); padding: 56px 32px 28px; border-top: 1px solid var(--border); }
.site-ft .ft-inner { max-width: var(--maxw); margin: 0 auto; display: flex; gap: 48px; flex-wrap: wrap; margin-bottom: 36px; }
.site-ft .ft-col { flex: 1 1 200px; }
.site-ft .ft-brand { font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--purple); margin-bottom: 16px; letter-spacing: -0.5px; }
.site-ft h4 { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--purple); margin-bottom: 16px; }
.site-ft p, .site-ft li { font-family: var(--font-body); font-size: 14px; color: var(--text-muted); line-height: 1.9; list-style: none; }
.site-ft a { color: var(--text-muted); text-decoration: none; }
.site-ft a:hover { color: var(--orange); }
.site-ft .ft-bottom { max-width: var(--maxw); margin: 0 auto; padding-top: 20px; border-top: 1px solid var(--border); display: flex; gap: 24px; flex-wrap: wrap; }
.site-ft .ft-bottom a, .site-ft .ft-bottom p { font-size: 13px; margin: 0; }

/* ─── Текст юридических страниц ─── */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.legal h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(28px, 5vw, 42px); line-height: 1.2; color: var(--purple); margin-bottom: 8px; letter-spacing: -1px; }
.legal .updated { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }
.legal h2 { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--purple); margin: 36px 0 12px; }
.legal p { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.75; color: var(--text-muted); margin-bottom: 14px; }
.legal ul { list-style: none; padding: 0; margin-bottom: 14px; }
.legal ul li { font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: var(--text-muted); padding-left: 18px; position: relative; margin-bottom: 10px; }
.legal ul li::before { content: "•"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.legal strong { font-weight: 700; color: var(--purple); }
.legal a { color: var(--orange); }
.legal table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-family: var(--font-body); font-size: 14px; }
.legal th, .legal td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; color: var(--text-muted); }
.legal th { background: var(--bg-alt); font-weight: 700; color: var(--purple); }

/* ─── Адаптив ───
   Лендинг (index.html) раскладывается через JS-хук useBP() в Header.jsx —
   здесь только статичные страницы и общие мелочи. */
@media (max-width: 760px) {
  .site-hd .hd-inner { padding: 0 20px; height: 62px; }
  .site-hd nav > a { display: none; }
  .site-ft { padding: 40px 20px 24px; }
  .site-ft .ft-inner { flex-direction: column; gap: 28px; }
  .legal { padding: 36px 20px 56px; }
  .legal table { font-size: 13px; }
  .legal th, .legal td { padding: 8px 9px; }
}
@media (max-width: 560px) {
  .pill { font-size: 10.5px; padding: 11px 16px; }
  .legal p, .legal ul li { font-size: 15px; }
}

/* Таблица юр. страниц не должна растягивать страницу по горизонтали */
.legal .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 18px; }
.legal .table-wrap table { margin-bottom: 0; min-width: 460px; }