/* ==========================================================================
   1. ОБЩИЕ СТИЛИ (Глобальные настройки)
   ========================================================================== */
* {
    margin: 0;              /* Сбрасываем внешние отступы у всех элементов */
    padding: 0;             /* Сбрасываем внутренние отступы у всех элементов */
    box-sizing: border-box; /* Включаем расчет размеров с учетом границ и падингов */
}

body {
    font-family: 'Segoe UI', Roboto, sans-serif; /* Устанавливаем шрифт */
    line-height: 1.6;       /* Задаем межстрочный интервал для читаемости */
    color: #333;            /* Основной цвет текста (темно-серый) */
    background-color: #fcfcfc; /* Цвет фона всей страницы (почти белый) */
}

.container {
    max-width: 1100px;      /* Ограничиваем ширину контента */
    margin: 0 auto;         /* Центрируем блок по горизонтали */
    padding: 0 20px;        /* Добавляем боковые отступы, чтобы текст не лип к краям */
}


/* ==========================================================================
   2. ШАПКА САЙТА (Header & Navigation)
   ========================================================================== */
header {
    background: #fff;       /* Белый фон шапки */
    padding: 15px 0;        /* Отступы сверху и снизу */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Легкая тень снизу */
    position: sticky;       /* "Приклеиваем" шапку при прокрутке */
    top: 0;                 /* Позиция приклеивания — самый верх */
    z-index: 1000;          /* Слой выше остальных, чтобы не перекрывали меню */
}

nav {
    display: flex;          /* Включаем гибкую верстку для элементов меню */
    justify-content: space-between; /* Распределяем лого и ссылки по краям */
    align-items: center;    /* Выравниваем лого и ссылки по центру высоты */
}

.logo {
    display: flex;          /* Гибкий блок для иконки и текста */
    align-items: center;    /* Центрируем иконку и текст по вертикали */
    gap: 12px;              /* Расстояние между иконкой и текстом */
    font-size: 24px;        /* Размер шрифта логотипа */
    font-weight: 800;       /* Жирность шрифта */
    color: #2d3436;         /* Темный цвет логотипа */
    text-transform: uppercase; /* Все буквы заглавные */
    letter-spacing: -0.5px; /* Немного сжимаем расстояние между буквами */
}

.logo span {
    color: #e67e22;         /* Оранжевый цвет для выделенного слова */
}

.nav-links {
    list-style: none;       /* Убираем маркеры списка (точки) */
    display: flex;          /* Ссылки встают в ряд */
    gap: 25px;              /* Расстояние между пунктами меню */
}

.nav-links a {
    text-decoration: none;  /* Убираем подчеркивание ссылок */
    color: #2d3436;         /* Цвет ссылок */
    font-weight: 600;       /* Полужирный шрифт */
    transition: color 0.3s; /* Плавная смена цвета при наведении */
}

.nav-links a:hover {
    color: #e67e22;         /* Цвет ссылки при наведении мыши */
}


/* ==========================================================================
   3. ГЛАВНЫЙ БАННЕР (Hero Section)
   ========================================================================== */
.hero {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                url('https://unsplash.com'); /* Затемнение + картинка курицы */
    background-size: cover;    /* Растягиваем картинку на весь блок */
    background-position: center; /* Центрируем изображение */
    height: 300px;             /* Фиксированная высота баннера */
    display: flex;             /* Включаем флекс для центровки текста */
    align-items: center;       /* Центрируем содержимое по вертикали */
    justify-content: center;   /* Центрируем содержимое по горизонтали */
    text-align: center;        /* Текст внутри по центру */
    color: white;              /* Белый цвет текста */
}

.hero h1 { 
    font-size: 3.5rem;         /* Крупный размер заголовка */
    margin-bottom: 50px;       /* Отступ снизу */
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3); /* Тень у букв для читаемости */
}

.hero p {
    font-size: 1.2rem;         /* Размер текста описания */
    opacity: 0.9;              /* Небольшая прозрачность текста */
}


/* ==========================================================================
   4. ПОИСК (Search Box)
   ========================================================================== */
.search-box {
    margin-top: 30px;          /* Отступ сверху от текста */
    display: flex;             /* Инпут и кнопка в одну линию */
    justify-content: center;   /* Центрируем блок поиска */
    max-width: 450px;          /* Максимальная ширина поиска */
    margin-left: auto;         /* Центровка блока */
    margin-right: auto;        /* Центровка блока */
}

.search-box input {
    padding: 15px 25px;        /* Внутренние отступы в поле ввода */
    width: 100%;               /* Поле занимает всё свободное место */
    border: none;              /* Убираем рамку */
    outline: none;             /* Убираем обводку при клике */
    font-size: 16px;           /* Размер вводимого текста */
    border-radius: 30px 0 0 30px; /* Закругляем только левые углы */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Тень под полем ввода */
}

.search-box button {
    padding: 0 35px;           /* Отступы внутри кнопки */
    border: none;              /* Убираем рамку */
    background: #e67e22;       /* Оранжевый фон кнопки */
    color: white;              /* Белый текст на кнопке */
    font-weight: bold;         /* Жирный текст */
    font-size: 16px;           /* Размер текста */
    cursor: pointer;           /* Курсор "рука" при наведении */
    border-radius: 0 30px 30px 0; /* Закругляем только правые углы */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Тень под кнопкой */
    transition: background 0.3s; /* Плавная смена цвета при наведении */
}

.search-box button:hover {
    background: #d35400;       /* Более темный оранжевый при наведении */
}


/* ==========================================================================
   5. СЕТКА РЕЦЕПТОВ (Recipe Grid & Cards)
   ========================================================================== */
main { 
    padding: 150px 0;           /* Увеличили отступ сверху и снизу для всей основной части */
}

h2 { 
    font-size: 2.5rem;         /* Размер заголовка (можно чуть увеличить для красоты) */
    margin-bottom: 40px;       /* Отступ снизу, чтобы текст не лип к блоку повара */
    text-align: center;        /* Выравниваем текст строго по центру */
    width: 100%;               /* Растягиваем блок на всю ширину для точной центровки */
    color: #2d3436;            /* Делаем цвет заголовка таким же темным, как логотип */
}

.recipe-grid {
    display: grid;             /* Включаем сетку (Grid) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Авто-колонки: минимум 300px каждая */
    gap: 30px;                 /* Расстояние между карточками */
}

.recipe-card {
    background: #fff;          /* Белый фон карточки */
    border-radius: 15px;       /* Закругляем углы карточки */
    overflow: hidden;          /* Скрываем всё, что выходит за границы (для фото) */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); /* Мягкая тень */
    transition: all 0.3s ease; /* Плавная анимация при наведении */
    border: 1px solid #eee;    /* Тонкая серая граница */
}

.recipe-card:hover { 
    transform: translateY(-10px); /* Приподнимаем карточку вверх при наведении */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Усиливаем тень при наведении */
}

.recipe-img {
    height: 220px;             /* Высота картинки в карточке */
    background-size: cover;    /* Картинка заполняет весь блок */
    background-position: center; /* Центрируем изображение */
    background-color: #f0f0f0; /* Серый фон, если картинка не загрузится */
}

.recipe-info { 
    padding: 25px;             /* Отступы внутри текстовой части карточки */
}

.recipe-info span { 
    color: #e67e22;            /* Оранжевый цвет категории (напр. "Полезное") */
    font-size: 0.85rem;        /* Маленький размер текста */
    font-weight: 700;          /* Жирный шрифт категории */
    text-transform: uppercase; /* Все буквы заглавные */
}

.recipe-info h3 { 
    margin: 10px 0;            /* Отступы сверху и снизу заголовка */
    font-size: 1.4rem;         /* Размер заголовка блюда */
    color: #2d3436;            /* Темный цвет заголовка */
}

.recipe-info p {
    color: #636e72;            /* Серый цвет описания блюда */
    font-size: 0.95rem;        /* Размер текста описания */
}


/* ==========================================================================
   6. СТРАНИЦЫ-ЗАГЛУШКИ (Coming Soon)
   ========================================================================== */
.coming-soon {
    height: 80vh;              /* Высота блока — 80% от высоты экрана */
    display: flex;             /* Флекс для центровки сообщения */
    align-items: center;       /* Центрируем по вертикали */
    justify-content: center;   /* Центрируем по горизонтали */
    text-align: center;        /* Текст по центру */
}

.message-box {
    background: white;         /* Белый фон коробки сообщения */
    padding: 50px;             /* Внутренние отступы */
    border-radius: 20px;       /* Закругление углов */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Тень коробки */
    max-width: 600px;          /* Максимальная ширина сообщения */
    margin: 0 auto;            /* Центровка */
}

.message-box .icon {
    font-size: 80px;           /* Размер эмодзи-иконки */
    margin-bottom: 20px;       /* Отступ под иконкой */
}

.btn-back {
    display: inline-block;     /* Позволяет задавать отступы и размеры */
    margin-top: 30px;          /* ДОБАВЬ ЭТО: отодвигает кнопку вниз от текста на 30 пикселей */
    padding: 15px 30px;        /* Внутренние отступы внутри кнопки */
    background: #e67e22;       /* Оранжевый цвет */
    color: white;              /* Белый текст */
    text-decoration: none;     /* Убираем подчеркивание */
    border-radius: 8px;        /* Закругляем углы */
    font-weight: bold;         /* Жирный шрифт */
    transition: background 0.3s; /* Плавная смена цвета при наведении */
}

.btn-back:hover {
    background: #d35400;       /* Темный оранжевый при наведении */
}

/* Контейнер для всей секции "Скоро будет" */
.coming-soon-main {
    padding: 80px 0;           /* Внутренние отступы: 80px сверху/снизу, 0 по бокам */
    display: flex;             /* Включаем режим Flexbox для выравнивания */
    justify-content: center;   /* Центрируем содержимое по горизонтали */
    align-items: center;       /* Центрируем содержимое по вертикали */
    text-align: center;        /* Выравниваем весь текст по центру */
    width: 100%;               /* Блок занимает всю доступную ширину */
}

/* Белая карточка с сообщением внутри контейнера */
.coming-soon-main .message-box {
    background: #fff;          /* Белый цвет фона карточки */
    padding: 60px;             /* Большие внутренние отступы со всех сторон */
    border-radius: 20px;       /* Сильно закругляем углы карточки */
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); /* Мягкая, глубокая тень для эффекта объема */
    border: 1px solid #f0f0f0; /* Едва заметная тонкая рамка */
    max-width: 700px;          /* Ограничиваем максимальную ширину карточки */
}

/* Иконка (эмодзи) над текстом */
.coming-soon-main .icon {
    font-size: 70px;           /* Делаем иконку очень крупной */
    margin-bottom: 20px;       /* Отступ снизу, чтобы текст не прилипал */
}

/* Заголовок внутри карточки */
.coming-soon-main h2 {
    margin-bottom: 20px;       /* Отступ под заголовком */
    color: #2d3436;            /* Темно-серый, почти черный цвет текста */
    font-size: 2rem;           /* Крупный размер шрифта (примерно 32px) */
}

/* Обычный текст описания */
.coming-soon-main p {
    color: #636e72;            /* Спокойный серый цвет текста */
    font-size: 1.1rem;         /* Чуть больше стандартного размера (примерно 18px) */
    line-height: 1.6;          /* Увеличенное расстояние между строками текста */
}

/* ==========================================================================
   7. ПОДВАЛ (Footer)
   ========================================================================== */
footer {
    background: #2d3436;       /* Темно-серый фон футера */
    color: white;              /* Белый текст */
    padding: 60px 0;           /* Внутренние отступы */
    margin-top: 100px;         /* Отступ сверху от контента */
    width: 100%;               /* Ширина на весь экран */
    position: fixed;           /* Фиксируем относительно экрана */
    bottom: 0;                 /* Прижимаем к самому низу */
    left: 0;                   /* Растягиваем от левого края */
    z-index: 1000;             /* Чтобы был поверх контента */
}
/* ==========================================================================
   8. АДАПТИВНОСТЬ (Для мобильных телефонов)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. ОТКЛЕИВАЕМ ШАПКУ И ДЕЛАЕМ КОМПАКТНОЙ */
    header {
        position: relative;     /* Отменяем sticky: теперь шапка уезжает при скролле */
        top: auto;              /* Сбрасываем привязку к верху */
        padding: 15px 0;        /* Внутренние отступы для удобства */
        box-shadow: 0 1px 5px rgba(0,0,0,0.1); /* Делаем тень чуть мягче */
    }
    
    nav {
        flex-direction: column; /* Логотип и меню встают друг под другом */
        gap: 15px;              /* Расстояние между лого и ссылками */
    }

    .logo {
        font-size: 20px;        /* Уменьшаем размер текста логотипа */
    }

    .nav-links {
        gap: 12px;              /* Расстояние между пунктами меню */
        font-size: 14px;        /* Уменьшаем шрифт меню для узких экранов */
        flex-wrap: wrap;        /* Если ссылки не влезут в ряд, они перенесутся */
        justify-content: center; /* Центрируем пункты меню */
    }

    /* 2. ЧИНИМ БАННЕР (HERO) — Убираем наслоение */
    .hero {
        height: auto;           /* Резиновая высота: блок подстраивается под текст */
        min-height: 320px;      /* Но не меньше 320px для красоты */
        padding: 50px 20px;     /* Добавляем отступы, чтобы текст не лип к краям */
        display: flex;
        flex-direction: column; 
        justify-content: center;
    }

    .hero h1 {
        font-size: 1.8rem;      /* Уменьшаем заголовок, чтобы не занимал весь экран */
        line-height: 1.2;       /* Уменьшаем межстрочный интервал */
        margin-bottom: 10px;
    }

    .hero p {
        font-size: 1rem;        /* Комфортный размер подзаголовка */
        margin-bottom: 20px;
        padding: 0 10px;        /* Чтобы текст не касался краев экрана */
    }

    /* 3. ПОИСК: Разделяем поле и кнопку */
    .search-box {
        flex-direction: column; /* Поле сверху, кнопка под ним */
        gap: 10px;              /* Расстояние между ними */
        margin-top: 10px;
        width: 100%;            /* Растягиваем на всю ширину контейнера */
    }

    .search-box input, 
    .search-box button {
        width: 100%;            /* На телефоне обе части на всю ширину */
        height: 50px;           /* Удобная высота для нажатия пальцем */
        border-radius: 30px;    /* Полностью круглые края у обоих элементов */
        font-size: 16px;        /* Чтобы браузер не "зумил" поле при вводе */
    }

    /* 4. КОНТЕНТ И ЗАГОЛОВКИ */
    main {
        padding: 40px 0;        /* Уменьшаем вертикальные отступы основной части */
    }

    h2 {
        font-size: 1.6rem;      /* Уменьшаем "Популярные рецепты" */
        margin-bottom: 25px;
        padding: 0 15px;
    }

    /* 5. ОТКЛЕИВАЕМ ФУТЕР */
    footer {
        position: relative;     /* Отменяем фиксированное положение */
        bottom: auto;           /* Сбрасываем привязку к низу экрана */
        margin-top: 50px;       /* Отступ от контента */
        padding: 40px 0;        /* Делаем футер аккуратным */
    }

    .footer-content {
        flex-direction: column; /* Текст и ссылки в колонку */
        gap: 10px;
    }
}