:root {
      --main: #f4e9d0;
    --accent: #8b0000;        /* кроваво-красный */
    --second-accent: #d4af37; /* золотой */
}

/* ===== СБРОС ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    
}

/* ===== СПИСКИ ===== */
ul {
    list-style: none;
}

/* ===== НАВИГАЦИЯ ===== *//* ================================
   ВЕРХНЕЕ ДВУХУРОВНЕВОЕ МЕНЮ
================================ */

.main-nav {
    width: 100%;
    background: #8b0000;
    position: relative;
    z-index: 1000;
    box-sizing: border-box;
}

/* Первый уровень */

.topmenu {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: stretch;

    width: 100%;
}

/* Пункты первого уровня */

.topmenu > li {
    position: relative;
    margin: 0;
    padding: 0;
        font-family: Merriweather, serif;
}

/* Ссылки первого уровня */

.topmenu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Merriweather, serif;
    min-height: 65px;
    padding: 0 22px;

    box-sizing: border-box;

        color: var(--second-accent);
    text-decoration: none;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

/* Наведение */

.topmenu > li:hover > a {
    background: #741c23;
    color: #d6b56a;
}

/* ================================
   СТРЕЛКА У ПУНКТОВ С ПОДМЕНЮ
================================ */

.has-submenu > a {
    padding-right: 38px !important;
}

.has-submenu > a::after {
    content: "";
    position: absolute;

    right: 18px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-right: 1.5px solid #d6b56a;
    border-bottom: 1.5px solid #d6b56a;

    transform: translateY(-70%) rotate(45deg);

    transition: transform 0.25s ease;
}

/* Поворачиваем стрелку */

.has-submenu:hover > a::after {
    transform: translateY(-30%) rotate(225deg);
}


/* ================================
   ВТОРОЙ УРОВЕНЬ
================================ */

.submenu {
    position: absolute;

    top: 100%;
    left: 0;

    min-width: 270px;

    margin: 0;
    padding: 8px 0;

    list-style: none;

    background: #8b0000;

    border-top: 2px solid #c6a15b;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

/* Показываем второй уровень */

.has-submenu:hover > .submenu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* ================================
   ПУНКТЫ ВТОРОГО УРОВНЯ
================================ */

.submenu li {
    position: relative;

    margin: 0;
    padding: 0;
}

/* Ссылки второго уровня */

.submenu li a {
    display: block;

    padding: 13px 20px;

    color: #f0dfb8;
    text-decoration: none;

    font-size: 14px;
    line-height: 1.35;

    background: transparent;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s ease;
}

/* Наведение второго уровня */

.submenu li a:hover {
    background: #64151b;
    color: #d6b56a;

    padding-left: 27px;
}


/* ================================
   ЗОЛОТАЯ ЛИНИЯ ПРИ НАВЕДЕНИИ
================================ */

.submenu li a::before {
    content: "";

    display: inline-block;

    width: 0;
    height: 1px;

    margin-right: 0;

    vertical-align: middle;

    background: #d6b56a;

    transition:
        width 0.2s ease,
        margin-right 0.2s ease;
}

.submenu li a:hover::before {
    width: 10px;
    margin-right: 8px;
}


/* ================================
   АДАПТИВНОСТЬ
================================ */

@media (max-width: 1200px) {

    .topmenu > li > a {
        padding-left: 15px;
        padding-right: 15px;

        font-size: 14px;
    }

    .has-submenu > a {
        padding-right: 30px !important;
    }

    .has-submenu > a::after {
        right: 12px;
    }
}


@media (max-width: 900px) {

    .topmenu {
        flex-wrap: wrap;
    }

    .topmenu > li > a {
        min-height: 55px;

        padding: 10px 14px;

        font-size: 13px;
    }

    .submenu {
        min-width: 230px;
    }
}


/* ================================
   МОБИЛЬНАЯ ВЕРСИЯ
================================ */

@media (max-width: 650px) {

    .topmenu {
        display: block;
    }

    .topmenu > li {
        width: 100%;
    }

    .topmenu > li > a {
        justify-content: flex-start;

        min-height: 48px;

        padding: 12px 20px;

        text-align: left;
    }

    .has-submenu > a {
        padding-right: 45px !important;
    }

    .has-submenu > a::after {
        right: 22px;
    }

    .submenu {
        position: static;

        width: 100%;
        min-width: 0;

        box-shadow: none;

        border-top: 1px solid #9d7a3e;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .has-submenu:hover > .submenu {
        display: block;
    }

    .submenu li a {
        padding: 12px 35px;
    }

    .submenu li a:hover {
        padding-left: 42px;
    }
}