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

/* --- Шрифты EuropeExt (локально в теме) --- */
@font-face {
  font-family: 'EuropeExt';
  src: url('../fonts/EuropeExt/europeext.otf') format('opentype'),
       url('../fonts/EuropeExt/europeextnormal.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EuropeExt';
  src: url('../fonts/EuropeExt/europeext_bold.otf') format('opentype'),
       url('../fonts/EuropeExt/europeextbold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

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

body {
  margin: 0;
}

/* Защита от фантомного горизонтального скролла на мобильных. На десктопе
   не применяется, чтобы не ломать position:sticky у pinned-hero. */
@media (max-width: 1023px) {
  html, body {
    overflow-x: hidden;
  }
}

: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: 'EuropeExt', Arial, sans-serif;
  --font-body: 'Roboto', 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: 0;
  --radius-md: 0;
  --radius-lg: 0;

  /* Отступы (кратно 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); }

/* ============================
   Списки — красные маркеры (как у ОДК)
   ============================ */
.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);
}

/* ============================
   Глобальная плавность transitions
   ============================ */
a, button, input, select, textarea,
[class*="card"], [class*="link"], [class*="btn"],
.header *, .mega-menu * {
  transition:
    color 0.3s ease,
    background 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease,
    gap 0.25s 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);
}