/* Шапка сайта — общий компонент для всех страниц.
   Разметка — header/header.html, поведение — header/header.js.
   Переменные цветов задаёт сама страница. */

.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    background: rgba(250,247,242,.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(184,151,58,.18);
    transition: box-shadow .25s;
    font-family: 'Lora', serif;
}
.site-header.scrolled { box-shadow: 0 2px 24px rgba(44,31,20,.09); }
.site-header .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.header-inner {
    display: flex; align-items: center;
    justify-content: space-between;
    height: 72px; gap: 16px;
}

.site-header .logo { text-decoration: none; display: flex; align-items: center; gap: 12px; }
.site-header .logo img { height: 52px; width: auto; display: block; }

.main-nav ul { list-style: none; display: flex; gap: 36px; margin: 0; padding: 0; }
.main-nav a {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--brown); text-decoration: none;
    position: relative; padding-bottom: 2px;
    transition: color .2s;
}
.main-nav a::after {
    content: ''; position: absolute; bottom: -2px; left: 0;
    width: 0; height: 1px; background: var(--burgundy);
    transition: width .2s;
}
.main-nav a:hover { color: var(--burgundy); }
.main-nav a:hover::after { width: 100%; }

.menu-toggle {
    display: none; background: none; border: none; cursor: pointer;
    color: var(--brown); padding: 6px;
}

/* Страницы без своего отступа сверху — шапка фиксированная и перекрывала бы контент */
body.has-fixed-header { padding-top: 72px; }

@media (max-width: 767px) {
    .header-cta-wrap { display: none; }
    .main-nav { display: none; }
    .main-nav.open {
        display: block;
        position: fixed; top: 72px; left: 0; right: 0;
        background: var(--ivory);
        border-bottom: 1px solid rgba(184,151,58,.2);
        padding: 20px 24px 28px; z-index: 199;
    }
    .main-nav.open ul { flex-direction: column; gap: 18px; }
    .menu-toggle { display: flex; }
}