/* Основные свойства */
:root {
    --color-prim: #392818;
    --color-prim-light: #52402f;
    --color-bg-and-nav-font: #fff2e9;
    --color-dot-bg-and-hover: #ffe8d2;
    --color-finder-border: #e0e0e0;
    --color-white: white;

    --border-radius-8: 8px;
    --border-radius-10: 10px;
    --border-redius-35: 35px;

    --font-size-21-3-64: clamp(21px, 3.85vw, 64px);
    --font-size-19-6-58: clamp(19px, 6.85vw, 58px);
    --font-size-21-3-48: clamp(21px, 3.25vw, 48px);
    --font-size-18-4-42: clamp(18px, 4.85vw, 42px);
    --font-size-21-3-38: clamp(21px, 3.25vw, 38px);
    --font-size-12-2-32: clamp(12px, 2.68vw, 32px);
    --font-size-14-4-28: clamp(14px, 4.85vw, 28px);
}

/* Основниые настройки */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg-and-nav-font);
    font-family:'Caveat', cursive;
}

/* Настройки блока main */
main {
    max-width: 1440px;
    min-width: 470px;
    min-height: 100vh;
    margin: 0 auto; /* Центруем весь сайт - блок main */
}

a {
    text-decoration: none;
}

h1 {
    font-size: var(--font-size-21-3-64);
    color: var(--color-prim);
}

h2 {
    font-size: var(--font-size-19-6-58); /* clamp(19px, 6.85vw, 58px); */
    color: var(--color-prim);
}

h3 {
    font-size: var(--font-size-18-4-42); /* clamp(14px, 4.85vw, 42px); */
    color: var(--color-prim);
}

.horizont-line {
    width: 100%;
}

/* Блок социальных сетей */
.top-line {
    display: flex;
    justify-content: space-between; /* Расстовляет элементы на равные расстояния, прижимая крайний левый к левой стороне, а крайний правый к правой */
    padding-left: 34px;
    padding-right: 34px;
    background-color: var(--color-prim);
}

.social-icons { 
    display: flex;
    align-items: center;
    gap: 34px;
}

.social-icons__icon > img {
    display: block;  /* Убирает отступы снизу */
}

.social-icons__icon:nth-child(1):hover > img {
    content: url('../img/icons/vk-hover.svg');
}

.social-icons__icon:nth-child(2):hover > img {
    content: url('../img/icons/telega-hover.svg');
}

.social-icons__icon:nth-child(3):hover > img {
    content: url('../img/icons/book-hover.svg');
}


/* Поисковый блок */
.finder {
    display: flex; 
    align-items: center;
    gap: 10px;
}

#find {
    padding: 10px;
    width: 340px;
    height: 48px;
    margin: 10px;
    border: none;
    border-radius: var(--border-radius-10);
}

.finder button {
    background-color: var(--color-prim);
    border: 0;
}

/* Hero блок - главное фото и слоган */
.hero {
    position: relative;
}

.hero img {
    width: 100%;
    display: block;
}

.hero h1 {
    position: absolute;
    text-align: center;
    right: 20px;
    bottom: 20px;
}

/* Основное меню */
nav {
    max-width: 1440px;
    text-align: center;
    margin: 0 auto;
}

nav ul {
    list-style: none;
}

.main-menu {
    display:flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 3%;
    margin-left: 15px;
    margin-right: 15px;
}

.menu-btn {
    flex: 1; /* одинаковая ширина */
    text-align: center;
}

.menu-btn a {
    display: block;
    padding: 5px 10px;
    font-size: var(--font-size-21-3-48);
    border-radius: var(--border-radius-10);
    background-color: var(--color-prim);
    color: var(--color-bg-and-nav-font);
}

.menu-btn:hover a {
    background-color: var(--color-prim-light);
}

/* --Раздел контент-- */
.content-img {
    width: 100%;
    max-width: 285px;
    height: auto;
    border-radius: var(--border-redius-35);
    padding: 20px;
    transition: transform 0.3s ease; /* Задаем плавность */
}
 
/* "Наши товары" */ 
.day-recipes {
    align-items: baseline;
}
    
.pans, 
.recipes,
.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pans h3, 
.recipes h3,
.product h3 {
    text-align: center;
    margin-bottom: 1vh;
    max-width: 300px;
}

.pans:hover h3, 
.recipes:hover h3,
.product:hover h3 {
    color: var(--color-prim-light);
    text-decoration: underline;
}

.day-recipes {
    display: flex;
    justify-content: center;
    gap: 3vw;
    flex-wrap: wrap; /* Важно для адаптива */
}

.section-title, 
.more-recipe-btn {
    text-align: center;
    margin-bottom: 1vh;
}

/* "Рецепты дня" */
.more-recipe-btn a {
    background-color: var(--color-prim);
    color: var(--color-bg-and-nav-font);
    padding: 5px 25px;
    border-radius: var(--border-radius-10);
    font-size: var(--font-size-21-3-48);
}

.more-recipe-btn {
    margin: 2vh;
}

.more-recipe-btn:hover a {
    background-color: var(--color-prim-light);
}

/* Меняем размер картинок при наведении мыши */
.pans:hover .content-img,
.recipes:hover .content-img,
.product:hover .content-img {
    transform: scale(1.05); /* Увеличение на 5% */
}

/* Настройка подвала footer-a */
.logo-and-copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-prim);
    color: var(--color-bg-and-nav-font);
    text-align: center;
    font-size: large;
}

.logo-and-copyright img {
    margin-top: 8px;
}

.logo-and-copyright p {
    margin-top: 8px;
}

.copy-right-icon-and-text {
    display:flex;
    align-items:center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* --Блок адаптивных правил-- */

/* Social and Finder*/

@media (max-width: 768px) {
    .top-line {
        flex-direction: column;      /* было в строку → стало в колонку */
        align-items: center;         /* центр по горизонтали */
        justify-content: center;     /* центр по вертикали */
        gap: 15px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .social-icons {
        justify-content: center;
    }

    .finder {
        justify-content: center;
    }

    #find {
        width: 340px; /* уменьшаем поле поиска */
    }
}

/* Основной контент */
@media (max-width: 768px) {
    .our-product, .day-recipes {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .pans, .recipes {
    width: 100%;
    max-width: 400px;
    }
}