/*
 * Общие CSS-правила переключения (:checked / :has) для header-меню (HeaderLayout)
 * и мобильного оверлея (MobileOverlay). Подключается из MainLayout, а не из
 * страничных *.css, потому что HeaderLayout/MobileOverlay рендерятся layout'ом
 * на каждой странице, а страничные *.css (catalog.css, article.css, ...)
 * дублируют только статичное позиционирование этих компонентов, без правил
 * :checked — из-за этого дропдауны "Категории"/"Контент"/уведомления/профиль
 * не открывались на любой странице, кроме Home (единственной, где подключён
 * main.css целиком). См. docs/layout-ui.md.
 */

.dd-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dd-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 4;
    cursor: default;
}

.dd-toggle:checked ~ .dd-backdrop {
    display: block;
}

.dropdownContainer.open, .dd-toggle:checked ~ .dropdownContainer {
    opacity: 1;
    visibility: visible;
}

.user-dropdown.open, .dd-toggle:checked ~ .user-dropdown {
    visibility: visible;
    opacity: 1;
}

.mobile-overlay.open, .mobile-overlay:has(input[name="mob-modal"]:checked:not(#mob-none)) {
    -webkit-animation: show forwards 0.5s;
    animation: show forwards 0.5s;
}

html:has(.mobile-overlay input[name="mob-modal"]:checked:not(#mob-none)) {
    overflow: hidden;
}

.mobile-modal.open,
#mob-search:checked ~ .mobile-overlay__content .mobile-modal--search,
#mob-notification:checked ~ .mobile-overlay__content .mobile-modal--notification,
#mob-user:checked ~ .mobile-overlay__content .mobile-modal--user,
#mob-menu:checked ~ .mobile-overlay__content .mobile-modal--menu {
    opacity: 1;
    visibility: visible;
}

.menu-button.active,
#menu-tab-content:checked ~ .menu-buttons label[for="menu-tab-content"],
#menu-tab-category:checked ~ .menu-buttons label[for="menu-tab-category"] {
    color: #181818;
    border-radius: 8px;
}

.menu-mask.first, #menu-tab-content:checked ~ .menu-buttons .menu-mask {
    left: 0;
    width: 50%;
}

.menu-mask.second, #menu-tab-category:checked ~ .menu-buttons .menu-mask {
    left: 50%;
    width: 50%;
}

.menu-content .dropdownContent.open,
#menu-tab-content:checked ~ .menu-content .dropdownContent.catalog,
#menu-tab-category:checked ~ .menu-content .dropdownContent.category {
    display: block;
}