/* 1. Основной контейнер хедера */
header {
    display: flex; /* Включаем Flexbox */
    justify-content: space-between; /* Распределяем блоки по краям */
    align-items: center; /* Центрируем элементы по вертикали */
    padding: 0 0px; /* Добавляем отступы по бокам для контента */
    width: 100%; /* Гарантируем, что хедер занимает всю ширину */
    box-sizing: border-box; /* Чтобы отступы не увеличивали общую ширину */
}

/* 2. Левая часть хедера (Логотип и меню) */
.header__start {
    display: flex;
    align-items: center; /* Центрируем логотип и меню по вертикали */
    gap: 40px; /* Расстояние между логотипом и меню */
    flex-grow: 1; /* Эта часть будет занимать все доступное пространство */
}

/* 3. Правая часть хедера (Телефон, Кнопка, Иконка меню) */
.header__end {
    display: flex;
    align-items: center; /* Центрируем элементы по вертикали */
    justify-content: flex-end;
    gap: 30px; /* Расстояние между элементами в правой части */
}

/* 4. Стили для элементов внутри .header__end (оптимизация) */
.phone_header a,
.link__OrderSend {
    display: flex; /* Делаем ссылки флекс-контейнерами для центрирования иконки и текста */
    align-items: center;
    gap: 10px; /* Расстояние между иконкой и текстом в номере телефона */
}


/* 1. Базовые стили для всего блока overhead */
.overhead {
    display: flex; /* Включаем Flexbox для расположения в одну строку */
    justify-content: space-between; /* Распределяем дочерние блоки по краям */
    align-items: center; /* Выравниваем по центру по вертикали */
    width: 100%; /* Занимаем всю доступную ширину */
    font-size: 12px; /* Устанавливаем базовый размер шрифта для всего блока */
    padding: 0 15px; /* Добавляем внутренние отступы по бокам для контента */
    box-sizing: border-box; /* Чтобы padding не увеличивал общую ширину */
}

/* 2. Стили для левой части (меню) */
.menu_head {
    display: flex; /* Внутренний контейнер тоже флекс, на случай если понадобится */
}

.HeadMenu {
    display: flex; /* Делаем меню горизонтальным */
    gap: 40px; /* Расстояние между пунктами меню */
    list-style: none; /* Убираем маркеры списка */
    padding: 0;
    margin: 0;
}

.HeadMenu a {
    color: inherit; /* Наследуем цвет от родителя или глобальных стилей */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
    font-weight: 500; /* Можно задать здесь или в глобальных стилях */
    font-size: 14px; /* Устанавливаем базовый размер шрифта для всего блока */
}

/* 3. Стили для правой части (соц. иконки и ссылки) */
.head__end {
    display: flex; /* Делаем правую часть флекс-контейнером */
    align-items: center; /* Центрируем элементы по вертикали */
    justify-content: flex-end;
    gap: 30px; /* Расстояние между соц. иконками и блоком ссылок */
    font-size: 14px; /* Устанавливаем базовый размер шрифта для всего блока */

}

/* 2. Ключевое изменение: Делаем оба блока гибкими и задаем им базовую ширину */
.menu_head,
.head__end {
    flex: 1 1 50%; /* Это сокращение для трех свойств: flex-grow, flex-shrink, flex-basis */
    /* flex-grow: 1; - Блок может расти, забирая свободное пространство */
    /* flex-shrink: 1; - Блок может сжиматься, если места не хватает */
    /* flex-basis: 50%; - Базовая ширина блока — 50% от родителя */
    max-width: 50%; /* Ограничиваем максимальную ширину, чтобы блоки не разъезжались */
}

/* Стили для блока с ссылками "Узнать стоимость" и "Связаться" */
.link_callback ul {
    display: flex; /* Делаем список ссылок горизонтальным */
    gap: 20px; /* Расстояние между ссылками */
    list-style: none;
    padding: 0;
    margin: 0;
}

.link_callback a {
    text-decoration: none;
}

/* 4. Стили для социальных иконок (из вашего предыдущего кода) */
.social-icon ul {
    display: flex;
    gap: 20px;
}

.social-icon ul li a {
    display: block;
    width: 100%;
    height: 100%;
}

.social-vk,
.social-max {
    width: 36px;
    height: 36px;
}




/* --- 1. Базовые стили для хедера (объединяем с вашим первым кодом) --- */
header, .overhead {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}

/* --- 2. Стили для основного меню (объединяем и оптимизируем) --- */
.HeaderMenu {
  display: flex;
  gap: 40px; /* Увеличиваем расстояние между пунктами */
  list-style: none;
  padding: 0; /* Сброс отступов у списка */
  margin: 0; /* Сброс внешних отступов */
}

.HeaderMenu li {
  position: relative; /* Создаем контекст для абсолютного позиционирования подменю */
}

.HeaderMenu a {
  color: var(--color-black);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none; /* Убираем подчеркивание у ссылок */
  transition: opacity .6s; /* Переход для прозрачности */
}

/* --- 3. Стили для выпадающего подменю (ваш новый код, оптимизированный) --- */

/* Состояние при наведении на родительский пункт меню */
.HeaderMenu li:hover a {
    opacity: 0.6; /* Делаем текущую ссылку полупрозрачной */
}

/* Базовые стили для подменю (спрятано по умолчанию) */
.HeaderMenu  .sub-menu {
    display: none;
    position: absolute;
    top: 30px;
    width: auto;
    min-width: 380px;
    background: var(--color-lightblue);
    z-index: 99999999;
    left: calc(50% - 190px);
    -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, .6);
    -moz-box-shadow: 5px 5px 5px -5px rgba(34,60,80,.6);
    box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, .6);
    color: var(--color-white);
    padding: 16px 20px 10px 20px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.HeaderMenu  .sub-menu:before {
    content: "";
    border: solid transparent;
    position: absolute;
    bottom: 100%;
    left: 50%;
    border-bottom-color:  var(--color-lightblue);
    border-width: 9px;
    margin-left: -9px;
}

/* Ссылки внутри подменю */
.HeaderMenu .sub-menu li a {
    color: var(--color-white);
    font-size: 16px; /* Немного уменьшаем размер для вложенности */
    font-weight: 400;
    display: block; /* Чтобы ссылка занимала всю строку */
    padding: 8px 0; /* Добавляем вертикальные отступы для удобства клика */
}

/* Отображение подменю при наведении на родительский элемент */
.HeaderMenu li:hover .sub-menu {
    display: block;
}

/* Стили для ссылки "Заказать" */
.link__OrderSend {
    background-color: var(--color-red);
    color: var(--color-white);
    border-radius: 40px; /* Современные браузеры понимают это без префиксов */
    padding: 15px 36px 15px 66px;
    position: relative;
    display: inline-block; /* Чтобы padding справа работал корректно */
}


.link__OrderSend:before {
  content: "";
  background-image: url(/wp-content/uploads/2025/08/heand.webp);
  background-size: cover;
  background-position: center;
  position: absolute;
  z-index: +9;
  left: 20px;
  top: calc(50% - 17.5px);
  width: 35px;
  height: 35px;
}

.link__OrderSend:hover {
  transition: all .6s;
  opacity: 0.8;
  color: var(--color-white);
}



.social-icon ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 12px; /* Отступ между кнопками */
    justify-content: center;
}

/* Базовый контейнер ссылки */
.social-icon li a {
    position: relative;
    display: inline-block;

    width: 48px;
    height: 48px;

    border-radius: 50%;
    overflow: hidden; /* ОБЯЗАТЕЛЬНО: скрывает вылезающий текст */

    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

    /* Замещение текста фоном (Техника Phark) */
    text-indent: -9999px;
    line-height: 0; /* Убирает пустое пространство под текстом */
    font-size: 0; /* Страховка от визуальных артефактов шрифта */
}

/* --- ВКОНТАКТЕ --- */
.social-vk a {
    background-image: url('https://artiko.ru/wp-content/uploads/2026/01/vk-white.webp');
    background-color: var(--color-gray); /* Цвет фона-заглушки на случай ошибки загрузки .webp */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60% 60%;

}

.social-vk a:hover,
.social-vk a:focus {
    background-image: url('https://artiko.ru/wp-content/uploads/2026/01/vk-black.webp');
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* --- MAX --- */
.social-max a {
    background-image: url('https://artiko.ru/wp-content/uploads/2025/08/max-bottom-hover.webp');
    background-color: var(--color-gray);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60% 60%;
}

.social-max a:hover,
.social-max a:focus {
    background-image: url('https://artiko.ru/wp-content/uploads/2025/08/max-top-hover.webp');
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ */
@media (max-width: 480px) {
    .social-icon li a {
        width: 44px;
        height: 44px;
    }
    .social-icon ul {
        gap: 8px;
    }
}


/* На экранах от 576px (планшеты) - 2 столбца в ряд */
@media (min-width: 576px) {

    .content_mobile {
      width: 96%;
      margin: 0 auto;
    }
}

/* На экранах от 768px (небольшие десктопы) - 3 столбца в ряд */
@media (min-width: 768px) {

    .content_mobile {
      width: 96%;
      margin: 0 auto;
    }
    .form_front_page {
        flex-direction: column; /* Располагаем блоки вертикально */
        align-items: stretch; /* Чтобы блоки занимали полную ширину родителя */
    }

    .form__block {
        flex-direction: column; /* Метка над полем */
        align-items: flex-start;
        gap: 8px;
    }

    .form__block label {
        text-align: left;
        min-width: unset;
        width: 100%;
    }

    .form__block input {
        width: 100%;
    }

    .form__block__2 {
        justify-content: center;
    }
    .form_front_page.horizont {

        gap: 20px;
        padding: 0 15px;
    }

    .form_front_page.horizont label {

        padding: 0; /* Убираем горизонтальный паддинг у меток на мобилках */
    }
}



/* 1. Стили для .phone_header */
.phone_header a {
  color: var(--color-black);
  text-decoration: none; /* Убираем подчеркивание у ссылок по умолчанию */
}

.phone_header a:hover {
  /* Переход (transition) должен быть в основном состоянии, а не в :hover */
  transition: opacity 0.6s ease; /* Уточняем, что анимируем только opacity */
  opacity: 0.8;
}

/* Оптимизация иконки (кнопка) */
.phone_header .far {
  display: flex; /* Flexbox идеально подходит для центрирования */
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
}

/* Анимация вращения сделана более плавной и с помощью transform */
.phone_header .far {
  animation: rotate 1.5s ease-in-out infinite alternate;
}

@keyframes rotate {
  from { transform: rotate(-10deg); }
  to   { transform: rotate(10deg); }
}

/* Изображение внутри иконки */
.phone_header .far img {
  width: 26px;
  height: auto; /* height: auto сохраняет пропорции изображения */
}

/* 2. Стили для .link_callback */
.link_callback ul {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Исправление логики hover */
.link_callback ul li {
  position: relative; /* Создаем контекст для позиционирования */
}

.link_callback ul li a.link-red {
  position: relative; /* Для псевдоэлемента */
}

.link_callback ul li a.link-red::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* Поднимаем подчеркивание, чтобы оно не касалось текста */
    width: 100%;
    height: 1px;
    background-color: var(--color-red);
    transform: scaleX(0); /* Скрываем подчеркивание по умолчанию */
    transition: transform 0.3s ease; /* Плавное появление */
}

.link_callback ul li a.link-red:hover::after {
    transform: scaleX(1); /* Показываем подчеркивание при наведении */
}

/* Альтернативный, более простой вариант (если не нужна анимация подчеркивания):
.link_callback ul li a.link-red {
    border-bottom: 1px solid transparent; /* Прозрачная рамка по умолчанию */
    transition: border-color .3s; /* Анимация смены цвета рамки */
}

.link_callback ul li a.link-red:hover {
    border-color: var(--color-red);
}