/* Простые стили для начала */

/* Блок :root позволяет создать "переменные" для цветов.
    Это удобно: если мы захотим поменять цвет, достаточно будет изменить его в одном месте.
*/
:root {
    --text-color: #383434; /* Темно серый для текста */
    --background-color: #F5F3F0; /* Светло бежевый для фона */
    --accent-color: #A91D3A;  /* Глубокий красный для акцентов (кнопки) */
    --header-font: 'Merriweather', serif; /* Шрифт для заголовков */
    --body-font: 'Lato', sans-serif;      /* Шрифт для основного текста */

}

body {
    font-family: var()var(--body-font); /* Выбираем простой шрифт без засечек */
    margin: 0;
    line-height: 1.6; /* Межстрочный интервал для читаемости */
    background-color: var(--background-color);  /*  цвет фона */
    color: var(--text-color) /*  основной цвет текста */
}

h1, h2 {
    color: var(--text-color); /* цвет для заголовков */
    font-family: var(--header-font);

}

section {
    padding: 40px 20px; /* Отступы внутри каждой секции */
    text-align: center; /* Выравниваем текст по центру */
    border-bottom: 1px solid #ddd; /* Светло серая линия-разделитель */
}

header {
    display: flex;
    justify-content: space-between; /* Лого слева, контакты справа */
    padding: 20px;
    border-bottom: 1px solid #ddd; /* Линия-разделитель */
    align-items: center;           /* Выравнивает элементы по центру по вертикали */
}

/* Стили для нашей акцентной кнопки */
.button {
    display: inline-block;
    background-color: var(--accent-color); /* Применяем наш акцентный красный цвет */
    color: rgb(255, 255, 255);
    padding: 12px 24px;
    text-decoration: none;  
    border-radius: 5px;
    margin-top: 20px;
    font-weight: bold; /* Делаем текст на кнопке жирным */
    transition: background-color 0.3s ease; /* Плавный переход для цвета фона за 0.3 секунды */
}

/* Стили для логотипа */
.logo img {
    height: 100px;
    width: auto
}


/* Временно скрываю секцию портфолио, пока нет фотографий.

   В CSS обращение по id пишется через символ решетки #.
*/
#portfolio {
    display: none;
}

/* --- Стили для секции "О нас" --- */

/* Обращаемся к параграфу <p>, который находится внутри элемента с id="about" */
section#about p {
    max-width: 700px;
     /* Центрируем сам блок с текстом. */
    margin-left: auto;
    margin-right: auto;
    /* Делаем шрифт чуть крупнее, чтобы он выглядел солиднее. */
    font-size: 18px;
}

section#about strong {
    /* mожно просто оставить жирным, а можно добавитьцвет */
    color: var(--accent-color);
}

/* --- Стили для секции "Контакты" --- */
.contact-details{
    margin: 20px 0; 
}

/* Стили для контейнера формы */
.contact-form{
    max-width: 600px; /* Ограничиваем ширину формы */
    margin: 0 auto;
    display: flex;    /* Включаем flexbox... */
    flex-direction: column; /* ...чтобы расположить элементы друг под другом */
    gap: 15px;        /* Добавляем расстояние между полями */


}

/* Общие стили для полей ввода и текстовой области */
.contact-form input,
.contact-form textarea{
    width: 100%; /* Поля занимают всю ширину контейнера */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: var(--body-font); /* Применяем наш основной шрифт */
    font-size: 16px;
    box-sizing: border-box; /*чтобы padding не ломал ширину */
}

/* Кнопка отправки. */
.contact-form button{
    cursor: pointer;
    width: auto;     /* Ширина по содержимому */
    align-self: center;
}

/*Стили для подвала*/
footer {
    background-color: #e8e5e1; /* фон чуть темнее основного */;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: #555; /* Цвет текста светлее основного */
    
}

.footer-links {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--text-color); /* Используем наш основной цвет текста для ссылок */
    margin: 0 10px; /* Отступы по бокам */
    transition: color 0.3s ease; /* Плавный переход для цвета текста */
}



/* ==========================================================================
   Адаптивные стили (Responsive Styles)
   ========================================================================== */

/* все стили внутри этого блока будут применяться ТОЛЬКО,
   если ширина экрана 768 пикселей или меньш
*/
@media (max-width: 768px){
    /* --- Шапка (Header) --- */
    header {
        /* Меняем направление flex-контейнера на вертикальное */
        flex-direction: column; 
        /* Добавляем небольшой отступ между лого и телефоном */
        gap: 15px; 
    }
    h1 {
        /* Уменьшаем размер главного заголовка на мобильных */
        font-size: 28px; 
    }   
    h2 {
        font-size: 24px;
    }
    /* Секция o нас */
    section#about p {
        /* Уменьшаем размер шрифта в этом блоке, чтобы он выглядел пропорционально */
        font-size: 16px;
    }
    /* --- Секция "Этапы работы" (Process) --- */
    .process-steps {
        /* Вместо ряда, ставим элементы друг под другом */
        flex-direction: column;
        /* Увеличиваем отступ между ними, т.к. они теперь вертикально */
        gap: 30px; 
    }
}



/* ==========================================================================
   Интерактивные эффекты (Hover Effects)
   ========================================================================== */
/* Стиль для кнопки в состоянии :hover */
.button:hover {
    background-color: #8c172f;
    cursor: pointer;
}

/* Стиль для ссылок в подвале в состоянии :hover */
.footer-links a:hover {
    color: var(--accent-color);
}


/* --- Стили для обновленного списка услуг --- */

/* Контейнер для всех карточек услуг */
.services-list {
    display: flex; /* Выстраиваем карточки в ряд */
    justify-content: center; /* Центрируем их по горизонтали */
    gap: 40px; /* Расстояние между карточками */
    margin-top: 40px; /* Отступ сверху от заголовка "Наши услуги" */
    flex-wrap: wrap; /* Разрешаем карточкам переноситься на новую строку, если не хватает места */
}

/* Стили для отдельной карточки услуги (иконка + текст) */
.service-item {
    display: flex; /* Включаем Flexbox для выравнивания иконки и текста */
    flex-direction: column; /* Элементы внутри будут идти друг под другом (сверху вниз) */
    align-items: center; /* Центрируем иконку и текст по горизонтали */
    text-align: center; /* Выравниваем текст по центру, если он в несколько строк */
    flex-basis: 200px; /* Задаем базовую ширину карточки в 200px */
}

/* Стили только для иконки внутри карточки */
.service-item i {
    font-size: 40px; /* Увеличиваем размер иконки */
    color: var(--accent-color); /* Используем наш фирменный красный цвет */
    margin-bottom: 15px; /* Отступ снизу, чтобы отодвинуть текст */
}

/* Стили только для текста внутри карточки */
.service-item span {
    font-size: 16px; /* Размер текста */
    font-weight: bold; /* Делаем текст жирным */
}



/* --- Стили для главного экрана (Hero Section) --- */

#hero {
    /* Создаем легкий градиент от нашего основного фона к чуть более светлому */
    background: linear-gradient(135deg, #f7f5f2 0%, #e8e5e1 100%);
    padding: 80px 20px; /* Оставляем увеличенные отступы для "воздуха" */
}

/* Так как фон теперь светлый, нам нужно вернуть темный цвет для текста,
   чтобы он хорошо читался.
*/
#hero h1,
#hero p {
    color: var(--text-color); /* Используем нашу переменную для основного цвета текста */
}

/* ==========================================================================
   Визуальные улучшения
   ========================================================================== */

/* Стиль для секций с альтернативным фоном  */
.bg-alt {
    background-color: #e8e5e1; /* Чуть более темный оттенок нашего бежевого */
}

/* Стиль для акцентного разделителя */
hr {
    border: none; /* Убираем стандартную рамку */
    height: 2px;  /* Толщина линии */
    width: 100px; /* Ширина линии */
    background-color: var(--accent-color); /* Наш фирменный красный цвет */
    margin: 0 auto; /* Центрируем линию */
}

/*Добавляем тень и внутренние отступы для формы */
.contact-form {
    background-color: #fff; /* Делаем фон формы чисто белым */
    padding: 30px; /* Добавляем "воздуха" внутри формы */
    border-radius: 8px; /* Немного скругляем углы */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* Наша легкая, профессиональная тень */
    margin-top: 30px; /* Добавляем отступ сверху */
}

/* Убираем стандартное оформление для телефонной ссылки в шапке */
header .contact-info a {
    color: var(--text-color); /* Используем наш основной цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
}