/* ИМПОРТ НОВЫХ ШРИФТОВ */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Общие стили */
:root {
    /* ���� ������������ ����� */
    --primary: #86CDF7; /* ������� - ���� ������ */
    --secondary: #452811; /* �����-���������� - �������� �����, ��� ������ */
    --accent: #452811; /* �����-���������� - ��� �������� ���������, �������� (���������� ��� ������� ��� �� ����, ��� � secondary, ����� �������� ����������� ��������� ����) */
    --light: #F8F5F2; /* ������� ��� �������/������ */
    --text-dark: #2C221B; /* ����� ������ ������� ������ */
    --text-light: #FFFFFF; /* ����� ����� */
    --caramel: #CD853F; /* �������� */
    --cream: #FFFACD; /* �������� */
    /* �����, ���������� �� ���������� � ����� ���������� */
    --header-bg: var(--primary); /* ����� ������ ������� */
    --nav-link-color: var(--secondary); /* ���� ������ ��������� - �����-���������� */
    --nav-active-bg: var(--accent); /* �������� ������ ������ ���������� (���������� --accent) */
    --nav-active-text: var(--text-light); /* ����� �������� ������ - ����� (��������: ��� --secondary, ������ --text-light) */
    --auth-button-bg: var(--secondary); /* ��� ��� ������ "�������/����" - �����-���������� */
    --auth-button-text: var(--text-light); /* ����� ��� ������ "�������/����" - ����� */
    --hero-h1-color: var(--secondary); /* ��������� Hero - �����-���������� */
    --hero-subtitle-color: #616161; /* ������������ Hero - ����� */
    --image-overlay-text-color: var(--text-light); /* ����� �� ������� ����������� - ����� */
    /* ������� � ������� */
    --header-radius: 20px; /* ���������� ����� ������ */
    --auth-button-radius: 15px; /* ���������� ����� ������ "�������/����" */
    --element-radius: 10px; /* ����� ���������� ��� ��������/����������� */

    --spacing-unit: 1rem;
    --spacing-xs: calc(var(--spacing-unit) * 0.5); /* 8px */
    --spacing-sm: calc(var(--spacing-unit) * 1); /* 16px */
    --spacing-md: calc(var(--spacing-unit) * 1.5); /* 24px */
    --spacing-lg: calc(var(--spacing-unit) * 2); /* 32px */
    --spacing-xl: calc(var(--spacing-unit) * 3); /* 48px */
    --spacing-xxl: calc(var(--spacing-unit) * 4); /* 64px */
    --container-max-width: 1200px;
    --font-family-header: 'Dela Gothic One', sans-serif;
    --font-family: 'Open Sans', sans-serif;
}


body {
    margin: 0;
    background-color: #f8f8f8;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.main-header {
    background-color: #fff;
    padding: 15px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-container {
    max-width: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Стили для Hero Banner */
.hero-banner {
    width: 100%;
    background-color: #cccccc;
    position: relative;
    overflow: hidden;
    /* Раскомментируйте это, чтобы добавить изображение */
    background-image: url('/images/banner.jpg'); /* Укажите правильный путь к вашему изображению */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .hero-banner::before {
        content: '';
        display: block;
        padding-top: calc(2 / 11 * 100%);
    }


.site-logo img {
    height: 50px; /* Adjust as needed */
}

.site-nav ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-lg);
    /* ������ ����� ������ ������ �������/���� */
    margin-right: var(--spacing-md);
}

    .site-nav ul li a {
        color: var(--nav-link-color); /* ������ ��������� - �����-���������� */
        font-size: 1.1rem; /* ������� ������ ����� */
        font-weight: 600;
        padding: 5px 12px; /* ���� ������ padding ��� ����� ������� ������ */
        position: relative;
        transition: color 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;
        border-radius: 5px; /* ���������� ������� ������ */
    }

        .site-nav ul li a:hover {
            color: var(--text-light); /* ��� ��������� ����� ������� ������� */
            background-color: var(--secondary); /* ��� ��� ��������� */
        }

        .site-nav ul li a.active-page {
            background-color: var(--nav-active-bg); /* �������� ������ - ���������� ��� */
            color: var(--nav-active-text); /* ����� �������� ������ - ����� */
        }

/* ������ ������-���� �� ��������� ��� �������� */
.burger-menu {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    position: relative;
    z-index: 1001; /* ���������, ��� ��� ���� ������� �������� */
}

    .burger-menu div {
        width: 100%;
        height: 3px;
        background-color: #333; /* ���� ����� ������� */
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    /* ����� ��� ��������� ������-���� */
    .burger-menu.open .bar1 {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .burger-menu.open .bar2 {
        opacity: 0;
    }

    .burger-menu.open .bar3 {
        transform: rotate(45deg) translate(-5px, -6px);
    }

/* Mobile Menu Toggle */
.menu-toggle {
    display: none; /* �� ��������� ����� �� �� */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    position: relative;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    /* ������� display: flex; ������, ����� � �����-������� */
}

.hamburger,
.hamburger::before,
.hamburger::after {
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--secondary); /* ���� ���������� */
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
    position: absolute;
}

    .hamburger::before,
    .hamburger::after {
        content: '';
        left: 0;
    }

    .hamburger::before {
        top: -10px;
    }

    .hamburger::after {
        top: 10px;
    }

/* Main Navigation */
.site-nav {
    display: flex;
    align-items: center;
}

.header-auth-buttons {
    display: flex;
    align-items: center;
    gap: 15px; /* Расстояние между элементами */
}

/* Стили для общей подложки меню */
.menu-background {
    background-color: #fe9f4d;
    border-radius: 10px; /* Закругленные края для подложки */
    padding: 10px 10px; /* Внутренние отступы */
    display: flex; /* Чтобы кнопки внутри располагались в ряд */
    gap: 10px; /* Расстояние между кнопками внутри подложки */
}

/* Стили для кнопок меню */
.menu-button {
    display: flex; /* Используем flexbox для легкого центрирования */
    justify-content: center; /* Центрирование текста по горизонтали */
    align-items: center;
    padding: 8px 15px;
    background-color: #ffffff; /* Белый цвет фона */
    border-radius: 8px; /* Закругленные края */
    text-decoration: none;
    color: #fe9f4d; /* Цвет текста */
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap; /* Предотвращает перенос текста */
}

    .menu-button:hover {
        background-color: #f0f0f0; /* Легкое изменение цвета при наведении */
    }

    .menu-button img {
        height: 20px;
        width: 20px;
    }


/* Стили для кнопок аутентификации/корзины */
.auth-button {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #333;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

    .auth-button img {
        height: 20px;
        width: 20px;
    }

    .auth-button:hover {
        background-color: #eee;
    }

/* Media Queries для адаптивности (бургер-меню) */
@media (max-width: 768px) {
    body {
        padding-top: var(--header-height);
    }

    /* ����� ��������� ���� �������, ������������� ������ � ��� */
    .site-nav.open .header-auth-buttons {
        flex-direction: column; /* ������ �������� ����� ������ ���� ��� ������ */
        width: 100%; /* �������� ��� ������ ���������� ���� */
        align-items: center; /* ����������� ������ �� ������ �� ����������� */
        padding: 15px 0; /* ��������� ���������� ������� ������/����� */
        margin-top: 20px; /* ������ �� ��������� ���� */
        border-top: 1px solid rgba(255, 255, 255, 0.2); /* ������������ ����������� */
    }

        /* ������ ������ ������ ����, ����� ��� ��������� ��� ���� � ��������� ���� */
        .site-nav.open .header-auth-buttons .auth-button {
            width: 80%; /* ��� 90%, ����� ��������� ��������� */
            margin-bottom: 10px; /* ������ ����� �������� */
            box-sizing: border-box; /* ��������� padding � border � ������ */
        }

            /* ������� ������ margin � ��������� ������, ����� �� ���� ������� ������� */
            .site-nav.open .header-auth-buttons .auth-button:last-child {
                margin-bottom: 0;
            }

    .main-header .header-container {
        justify-content: space-between; /* �������� ������� � ������ */
        padding: 10px 20px; /* �������� ������� ��� ��������� ��������� */
    }

    .burger-menu {
        display: flex; /* �������� ������-���� �� ��������� ����������� */
    }

    .site-nav {
        position: fixed;
        top: 0;
        right: -100%; /* ���������� �� ������� */
        width: 70%; /* ������ ���������� ���� */
        height: 100%;
        background-color: #f9f9f9; /* ��� ��� ���������� ���� */
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 80px; /* ������������ ��� ��������� */
        box-shadow: -2px 0 5px rgba(0,0,0,0.2);
        transition: right 0.3s ease-in-out;
        z-index: 1000; /* ������ ������ ������� */
    }

        .site-nav.open {
            right: 0; /* ��������� */
        }

        .site-nav ul {
            flex-direction: column;
            width: 100%;
        }

            .site-nav ul li {
                width: 100%;
                text-align: center;
                border-bottom: 1px solid #eee; /* ����������� ��� ������� ���� */
            }

                .site-nav ul li:last-child {
                    border-bottom: none;
                }

                .site-nav ul li a {
                    padding: 15px 0;
                    display: block; /* ������� ������ �� ��� ������ */
                }

    .auth-button {
        width: calc(100% - 20px);
        margin: 5px 10px;
        justify-content: center;
        background-color: #f0f0f0; /* Цвет кнопок аутентификации на мобильных */
    }
}
