/* Базовая «липкая» шапка для десктопа */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* === 1. ВЕРХНИЙ КОНТЕЙНЕР С ЛИНИЕЙ === */
.header-top-line {
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-divider);
    position: relative;
}

/* === 2. ОБЩИЕ СТИЛИ ШАПКИ === */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 96px;           /* TODO: --header-height */
    padding: 0 32px;        /* TODO: --header-padding-x */
    box-sizing: border-box;
    max-width: 1200px;      /* TODO: --header-max-width (или общий --container-max) */
    margin: 0 auto;
    width: 100%;
}

/* === 3. ЛОГОТИП === */
.main-icon-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.main-icon {
    height: 64px;           /* TODO: --header-logo-height */
    width: auto;
    object-fit: contain;
}

/* === 4. БУРГЕР-КНОПКА === */
.burger-button {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 38px;            /* TODO: --header-burger-width */
    height: 22px;           /* TODO: --header-burger-height */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}
.burger-button span {
    display: block;
    height: 3px;            /* можно тоже вынести */
    background: var(--header-text-primary);
    border-radius: 1px;
}

/* === 5. ДЕСКТОП-МЕНЮ === */
.desktop-menu { display: flex; }

.menu__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    height: 100%;
}
.menu__list li {
    position: relative;
    margin-right: 30px;     /* TODO: --header-menu-gap */
}
.menu__list li:last-child { margin-right: 0; }

.menu__list a {
    display: block;
    padding: 12px 8px;      /* TODO: --header-menu-item-py/px */
    color: var(--header-link);
    text-decoration: none;
    font-weight: 500;
}
.menu__list a:hover {
    color: var(--header-link-hover);
}

/* Ссылка-родитель делает место под иконку */
.menu__list li.menu-item-has-children > a {
    position: relative;
    padding-right: 1.2em;   /* TODO: --header-menu-caret-space */
}

/* По умолчанию — стрелка вниз */
.menu__list li.menu-item-has-children > a::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0d7";
    position: absolute;
    top: 55%;
    right: 0.3em;
    transform: translateY(-50%);
    font-size: 0.8em;       /* можно вынести: --header-caret-size */
    transition: transform .2s ease;
}

/* На ховере — caret-up */
.menu__list li.menu-item-has-children:hover > a::after {
    transform: translateY(-50%) rotate(180deg);
}

.menu__list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--header-bg);
    padding: 8px 0;         /* TODO: --header-submenu-py */
    list-style: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);  /* TODO: --header-shadow */
    margin: 0;
    min-width: 180px;       /* TODO: --header-submenu-minw */
    z-index: 1000;
}
.menu__list li:hover > .sub-menu { display: block; }

.sub-menu li { width: 100%; }

.sub-menu a {
    display: block;
    padding: 8px 16px;      /* TODO: --header-submenu-item-py/px */
    white-space: nowrap;
    color: var(--header-link);
}
.sub-menu a:hover {
    background: #f4f4f5;    /* без surface-alt */
    color: var(--header-link-hover);
}

/* === 6. МОБИЛЬНОЕ МЕНЮ === */
.mobile-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--header-bg);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* TODO: --header-shadow-xs */
    z-index: 1000;
}
.mobile-menu .menu__list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mobile-menu .menu__list li {
    border-top: 1px solid var(--header-divider);
    margin: 0;
}
.mobile-menu .sub-menu li {
    background: var(--header-bg);
}

.mobile-menu .menu__list a {
    display: block;
    padding: 16px 20px;     /* TODO: --header-mobile-item-py/px */
    color: var(--header-text-primary);
    text-decoration: none;
    font-weight: 500;
}
/* Второй уровень — сразу виден */
.mobile-menu .menu__list .sub-menu {
    display: block !important;
    position: static;
    padding-left: 20px;     /* TODO: --header-submenu-indent */
    box-shadow: none;
}
/* Без hover и стрелок */
.mobile-menu .menu__list a:hover,
.mobile-menu .menu__list .sub-menu a:hover {
    color: var(--header-text-primary);
    background: none;
}
.mobile-menu .menu__list li.menu-item-has-children > a::after {
    content: none !important;
}

/* Адаптивы */
@media (max-width: 768px) {
    .header-inner { height: 48px; }  /* TODO: --header-height-sm */
    .main-icon { height: 44px; }     /* TODO: --header-logo-height-sm */
    .site-header { position: static; top: auto; }
    .desktop-menu { display: none !important; }
    .burger-button { display: flex !important; }
    .mobile-menu.active { display: flex !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .header-inner { height: 48px; }  /* TODO: --header-height-md */
    .main-icon { height: 44px; }     /* TODO: --header-logo-height-md */
    .site-header { position: static; top: auto; }
    .desktop-menu { display: none !important; }
    .burger-button { display: flex !important; }
    .mobile-menu.active { display: flex !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .main-icon { height: 44px; }     /* TODO: --header-logo-height-lg */
    .menu__list li { margin-right: 5px; } /* TODO: --header-menu-gap-lg */
}