/* ============================
   Global Styles — Метроэск
   ============================ */

/* --- Шрифты (Arimo + Open Sans, HTTPS, display=swap) --- */
/* Подключение в index.html через Google Fonts */

/* --- CSS-переменные --- */
html {
  scroll-behavior: smooth;
}

:root {
  /* Цвета */
  --color-primary: #182d97;
  --color-primary-dark: #0a275d;
  --color-accent: #9b1515;
  --color-accent-light: #e54141;
  --color-accent-dark: #980002;
  --color-dark: #1a1a2e;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-50: #f8f9fb;
  --color-gray-100: #e5e7eb;
  --color-gray-400: #6b7280;
  --color-gray-500: #4b5563;
  --color-gray-600: #374151;

  /* Шрифты */
  --font-heading: 'Arimo', Arial, sans-serif;
  --font-body: 'Open Sans', Verdana, sans-serif;

  /* Типографика */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 48px;

  /* Межстрочный интервал */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Скругления */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* Отступы (кратно 4) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Отступы секций (вертикальные) */
  --section-padding: 80px;
  --section-padding-sm: 48px;

  /* Контейнер */
  --container-max: 1280px;
  --container-padding: 32px;
  --container-padding-mobile: 16px;
}

/* ============================
   Заголовки — двухцветная система
   ============================ */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-dark);
  font-weight: 600;
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

/* Акцентное слово в заголовке — красным */
.text-accent { color: var(--color-accent); }

/* Альтернатива — акцентное слово синим */
.text-accent-blue { color: var(--color-primary); }

/* Красный акцент (для span внутри заголовков/подзаголовков) */
.text-accent-red { color: var(--color-accent); }

/* ============================
   Общие стили секционных заголовков
   ============================ */
.section-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: var(--leading-tight);
  margin: 0 0 12px;
  text-transform: uppercase;
}

h2.section-title::before {
  content: '';
  display: inline-block;
  vertical-align: inherit;
  width: 28px;
  height: 14px;
  margin-right: 12px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 810 387'><g transform='translate(0,387) scale(0.1,-0.1)' fill='%239b1515'><path d='M1413 3733 c-45 -114 -208 -503 -433 -1033 -43 -102 -142 -338 -220 -525 -78 -187 -180 -428 -225 -535 -45 -107 -85 -204 -88 -215 -4 -11 -36 -85 -71 -165 l-63 -145 -152 -3 -151 -3 0 -549 0 -550 967 2 968 3 258 685 c141 377 279 746 306 820 27 74 53 136 59 138 12 4 30 -34 277 -568 34 -74 85 -182 112 -240 28 -58 61 -127 73 -155 13 -27 60 -129 105 -225 46 -96 113 -238 149 -315 l66 -140 701 0 701 0 225 480 c394 843 415 888 470 1010 30 66 57 128 60 138 12 38 33 12 68 -85 21 -57 68 -184 105 -283 203 -537 247 -653 340 -905 56 -151 109 -294 117 -317 l16 -43 968 0 969 0 0 550 0 550 -154 0 -154 0 -60 143 c-127 298 -285 674 -307 727 -12 30 -54 129 -93 220 -38 91 -114 269 -167 395 -54 127 -135 318 -180 425 -46 107 -133 314 -195 460 -62 146 -124 291 -138 323 l-25 57 -899 -2 -900 -3 -135 -290 c-74 -159 -170 -366 -213 -460 -43 -93 -128 -278 -190 -410 -62 -132 -130 -277 -151 -322 l-38 -83 -44 0 -43 0 -34 73 c-19 39 -69 146 -112 236 -43 89 -78 165 -78 166 0 2 -40 88 -89 192 -49 103 -103 220 -121 258 -112 242 -248 531 -276 588 l-28 57 -901 0 -901 0 -51 -127z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-gray-400);
  max-width: 560px;
  margin: 0 auto;
  line-height: var(--leading-normal);
}

@media (max-width: 767px) {
  .section-title {
    font-size: 28px;
    text-align: center;
  }

  h2.section-title::before {
    display: block;
    margin: 0 auto 8px;
  }

  .section-subtitle {
    text-align: center;
  }
}

/* ============================
   Списки — красные маркеры (как у ОДК)
   ============================ */
.list-branded {
  list-style: none;
  padding-left: 0;
}

.list-branded li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
}

.list-branded li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ============================
   Нумерованные списки (как у Cometal)
   ============================ */
.list-numbered {
  list-style: none;
  padding-left: 0;
  counter-reset: item;
}

.list-numbered li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 12px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  counter-increment: item;
}

.list-numbered li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}

/* ============================
   Глобальная плавность transitions
   ============================ */
a, button, input, select, textarea,
[class*="card"], [class*="link"], [class*="btn"],
.header *, .mega-menu * {
  transition: all 0.3s ease;
}

/* Исключить из transitions то, что не должно анимироваться */
img, video, svg path {
  transition: none;
}

/* ============================
   Кастомная полоса прокрутки
   ============================ */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-gray-100);
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-primary-dark);
}