/* ============================================
   Component: Header / Navigation
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: var(--spacing-lg) 0;
  background-color: rgba(26, 29, 36, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.header--home {
  background-color: rgba(26, 29, 36, 0.38);
  box-shadow: none;
}

.header--home.header--scrolled {
  background-color: rgba(26, 29, 36, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-shrink: 0;
}

.header__logo-img {
  height: 58px;
  width: auto;
  object-fit: contain;
}

.header__logo-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.header__logo-title,
.header__logo-text .logo-text__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extra-bold);
  color: var(--color-white);
  text-transform: uppercase;
  line-height: normal;
  letter-spacing: 0.02em;
}

.header__logo-subtitle,
.header__logo-text .logo-text__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 16px;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-5xl);
}

.header__menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-5xl);
}

.header__menu-link {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-text-light);
  white-space: nowrap;
  transition: color var(--transition-default);
}

.header__menu-link:hover {
  color: var(--color-primary);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-5xl);
}

.header__phones {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-text-light);
  line-height: 31px;
  white-space: nowrap;
}

.header__phones a {
  display: block;
}

.header__phones a:hover {
  color: var(--color-primary);
}

.header__divider {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin-top: var(--spacing-lg);
}