/* ===== Navigation Bar ===== */

.nav-container {
    position: relative;
}

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.nav-link {
    text-decoration: none;
    white-space: nowrap;
    color: #202020;
    --nav-li-v-padding: 15px;
    padding: var(--nav-li-v-padding) 28px var(--nav-li-v-padding) 0;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.nav-menu > .nav-item > .nav-link {
    --nav-li-v-padding: 33px;
    font-weight: bold;
    font-size: 20px;
}

.nav-link:hover {
    color: var(--currentDarkBlue);
    text-decoration: none;
}

/* ===== Hamburger Icon ===== */

.hamburger__box {
    --burgerLineHeight: 2px;
    --burgerLineVerticalSpace: 4px;
    --burgerHeight: calc(3 * var(--burgerLineHeight) + 2 * var(--burgerLineVerticalSpace));
    --bugerWidth: 18px;

    width: var(--bugerWidth);
    height: var(--burgerLineHeight);
    display: inline-block;
    position: relative;
}

.hamburger__box.catalog-link {
    height: var(--burgerHeight);
    margin-right: 5px;
}

.catalog-link .hamburger__inner,
.catalog-link .hamburger__inner::after,
.catalog-link .hamburger__inner::before {
    width: 100%;
    background-color: #000000;
    height: var(--burgerLineHeight);
    border-radius: 0;
}

.nav-item--parent.is-open .hamburger__inner,
.nav-item--parent.is-open .hamburger__inner::after,
.nav-item--parent.is-open .hamburger__inner::before,
button:hover .hamburger__inner,
button:hover .hamburger__inner::after,
button:hover .hamburger__inner::before {
    width: var(--bugerWidth);
    background-color: var(--currentDarkBlue);
}

.hamburger__inner::after {
    bottom: calc(-1 * (var(--burgerLineHeight) + var(--burgerLineVerticalSpace)));
}

.hamburger__inner::before {
    top: calc(-1 * (var(--burgerLineHeight) + var(--burgerLineVerticalSpace)));
}

/* ===== Dropdown Overlay ===== */

.dropdown-new-overlay {
    position: fixed;
    top: var(--header-bottom, 120px);
    left: 0;
    height: 100vh;
    width: 100%;
    min-height: 370px;
    background: rgba(7, 22, 31, 0.5);
    opacity: 0;
    visibility: hidden;
    /* z-index здесь не нужен: оверлей вложен в .site-header (var(--z-header)),
       его слот определяется стековым контекстом шапки, а не локальным рангом */
    overscroll-behavior: none;
    overflow: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.dropdown-new-overlay-wrapper {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 4px 0 rgba(0, 0, 0, 0.25);
    border-top: 2px solid var(--currentGrey);
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
}

.nav-item--parent.is-open > .dropdown-new-overlay {
    opacity: 1;
    visibility: visible;
}

.nav-item--parent.is-open > .dropdown-new-overlay .dropdown-new-overlay-wrapper {
    transform: translateY(0);
}

/* ===== Dropdown Container: L1 | line | L2 + image ===== */

.dropdown-new-overlay-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    min-height: 382px;
}

/* L1 column wrapper (title + submenu) */
.nav-submenu-column {
    border-right: 2px solid var(--currentGrey, #e0e0e0);
}

/* L1 list (.nav-title / .nav-submenu / .nav-submenu__item / .nav-submenu-arrow)
   moved to marchenkov:catalog.dropdown component template style.css. */

/* Padding around the shared component output */
.nav-submenu-column .nav-submenu {
    padding: 44px 0;
}

/* Right area: L2 subcategories + image (no divider between them) */
.nav-submenu-details {
    display: flex;
    align-items: flex-start;
    padding: 84px 0 34px 40px;
    gap: 32px;
}

.nav-submenu-children {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-flow: column nowrap;
    gap: 4px;
}

.nav-submenu-children.active {
    display: flex;
    animation: slideInLeft 0.3s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nav-submenu-children a.nav-link {
    font-size: 16px;
    line-height: 1.4;
    padding: 4px 0;
    white-space: nowrap;
}

.nav-submenu-children a.nav-link:hover {
    color: var(--currentDarkBlue);
}

/* Banner / image area */
.dropdown-new-overlay-banner {
    opacity: 1;
    box-sizing: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    min-height: 300px;
    min-width: 300px;
    max-width: 524px;
    width: 100%;
    margin-left: auto;
}

.dropdown-new-overlay-banner.has-image {
    animation: slideDownBanner 0.3s ease-out;
}

@keyframes slideDownBanner {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}