@import './container.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Основная палитра — в стиле корпоративного синего и оранжевого, как на референсе */
  --primary: #0066cc;        /* базовый яркий синий */
  --primary-dark: #004a99;   /* более тёмный синий для фона */
  --primary-light: #1e88ff;  /* подсветка и градиенты */

  --accent: #f27d16;         /* акцентный оранжевый */
  --accent-dark: #e56700;
  --accent-light: #ffe0b2;

  /* Текст */
  --text-dark: #0f172a;
  --text-body: #334155;
  --text-muted: #64748b;

  /* Фоны */
  --bg-body: #f7f9fc;
  --bg-card: #ffffff;
  --bg-muted: #edf2fb;
  --bg-dark: #004a99;        /* глубокий синий для шапки и подвала */

  /* Границы и тени */
  --border: #d7e2f2;
  --shadow-sm: 0 1px 3px rgba(0, 51, 102, 0.12);
  --shadow-md: 0 4px 12px rgba(0, 51, 102, 0.16);
  --shadow-lg: 0 12px 28px rgba(0, 51, 102, 0.2);
  --shadow-xl: 0 20px 40px rgba(0, 51, 102, 0.28);

  /* Радиусы — по макету все углы прямые */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;

  /* Совместимость со старыми именами */
  --primary-color: var(--primary);
  --secondary-color: var(--accent);
  --text-light: var(--text-muted);
  --bg-light: var(--bg-muted);
  --bg-white: var(--bg-card);
  --border-color: var(--border);
  --orange: var(--accent);
  --orange-dark: var(--accent-dark);
  --dark-blue: var(--primary-dark);
}

/* Отступ при скролле к якорям (хедер не фиксированный) */
html {
  scroll-padding-top: 24px;
}

body {
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-body);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark);
  font-weight: 700;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Общий стиль заголовка секции (как «О заводе "Запчасть"») */
.about-title-bar {
  position: relative;
  padding: 1.25rem 1.75rem;
  margin-bottom: 2.25rem;
  color: #ffffff;
  overflow: hidden;
  z-index: 1;
}

/* Прозрачный градиентный оверлей «во весь экран»: оранжевая полоса + синяя тонировка (фон секции просвечивает) */
.about-title-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background:
    /* оранжевая кромка сверху */ linear-gradient(to bottom, rgb(237 125 35) 0, rgb(172 125 112 / 39%) 12px, transparent 14px),
    /* синяя тонировка — сохраняем окрашивание в синий */ linear-gradient(to bottom, rgb(46 85 197 / 47%), rgb(53 84 159 / 0%)),
    /* лёгкий диагональный блик */ linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent);
  background-color: transparent;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: auto, cover, cover;
  z-index: -1;
}

.about-title-text {
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  font-weight: 700;
  margin: 0;
  color: #ffffff;
}