/* =========================================================
   Меню — компьютер
   ========================================================= */

.header-menu-desc {
    width: 100%;

    background: var(--cream-50);

    border-bottom: 1px solid var(--sand-300);
}


.subnav-content {
    display: flex;
    align-items: stretch;

    width: 100%;
    height: 72px;
}


/* =========================================================
   Основные пункты
   ========================================================= */

.subnav-item {
    position: relative;

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

    flex: 1;
    min-width: 0;

    text-decoration: none;

    cursor: pointer;

    transition: background 0.2s ease;
}


.subnav-item:hover {
    background: var(--cream-500);
}


/* =========================================================
   Содержимое пункта
   ========================================================= */

.subnav-main {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}


/* =========================================================
   Иконки
   ========================================================= */

.subnav-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    margin-right: 12px;
}


.subnav-icon img {
    display: block;

    width: 30px;
    height: 30px;

    object-fit: contain;
}


/* =========================================================
   Текст
   ========================================================= */

.subnav-text {
    font-size: 17px;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   Стрелка у выпадающих пунктов
   ========================================================= */

.subnav-dropdown .subnav-main::after {
    content: "";

    display: block;

    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    margin-left: 11px;
    margin-top: -4px;

    border-right: 1.5px solid var(--graphite);
    border-bottom: 1.5px solid var(--graphite);

    transform: rotate(45deg);

    transition:
        transform 0.2s ease,
        margin-top 0.2s ease;
}


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

.subnav-dropdown:hover .subnav-main::after {
    margin-top: 4px;

    transform: rotate(225deg);
}


/* =========================================================
   Разделители основных пунктов
   ========================================================= */

.subnav-item:not(:first-child)::before {
    content: "";

    position: absolute;

    left: 0;
    top: 20px;
    bottom: 20px;

    width: 1px;

    background: var(--sand-300);
}


/* =========================================================
   Выпадающее меню
   ========================================================= */

.subnav-dropdown-menu {
    position: absolute;

    top: 100%;
    left: 50%;

    min-width: 220px;

    padding: 8px 0;

    background: var(--cream-50);

    border: 1px solid var(--sand-300);

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);

    opacity: 0;
    visibility: hidden;

    transform: translateX(-50%) translateY(6px);

    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0.15s ease;

    z-index: 1000;
}


/* Показываем выпадающее меню */

.subnav-dropdown:hover .subnav-dropdown-menu {
    opacity: 1;
    visibility: visible;

    transform: translateX(-50%) translateY(0);
}


/* =========================================================
   Ссылки выпадающего меню
   ========================================================= */

.subnav-dropdown-link {
    display: block;

    padding: 12px 20px;

    color: var(--graphite);

    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;

    white-space: nowrap;

    text-decoration: none;

    transition: background 0.15s ease;
}


.subnav-dropdown-link:hover {
    background: var(--cream-400);
}


/* =========================================================
   Проекты — отдельная смысловая группа
   ========================================================= */

.subnav-projects {
    flex: 0 0 190px;

    margin-left: 16px;

    background: var(--cream-300);

    border-left: 1px solid var(--sand-300);
}


/* Убираем стандартный короткий разделитель */

.subnav-projects::before {
    display: none;
}


/* Текст проектов */

.subnav-projects .subnav-text {
    font-weight: 500;
}


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

.subnav-projects:hover {
    background: var(--cream-400);
}


/* =========================================================
   Выпадающее меню проектов
   ========================================================= */

.subnav-projects .subnav-dropdown-menu {
    left: auto;
    right: 0;

    min-width: 250px;

    transform: translateY(6px);
}


.subnav-projects:hover .subnav-dropdown-menu {
    transform: translateY(0);
}