/* Auto-generated category dropdown (includes/cat-dropdown-menu.php, js/cat-dropdown/cat-dropdown.js).
   Left: the category's children. Right: the children of the active (clicked) one.
   The theme toggles display of the panel itself (hover/click/sidebar), so that is not set here.
   Colours use !important because the header builder's submenu colour settings are more specific.
   Desktop menu only (.mfn-header-mainmenu): the mobile burger sidebar uses the same menu items
   with the drill-down menu of js/update.js and css/layout.css. */

.mfn-header-mainmenu > li.cat-dropdown {
    --cat-dd-accent: #007cc3;
    --cat-dd-accent-hover: #005a87;
    --cat-dd-text: #333;
    --cat-dd-border: #e6e6e6;
    --cat-dd-active-bg: #f2f7fb;
    --cat-dd-left: 290px;
}

/* ---------------------------------------------------------------- panel */

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu {
    width: 1000px;
    max-width: calc(100vw - 40px);
    padding: 14px 0 10px 14px;
    background: #fff !important;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
    box-sizing: border-box;
    z-index: 100;
}

/* The right column is positioned against the panel, not against its item. */
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li {
    position: static;
    width: var(--cat-dd-left);
    box-sizing: border-box;
    padding-right: 12px;
}

/* ---------------------------------------------------------------- left column */

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li > .mfn-menu-link,
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li:first-child > .mfn-menu-link,
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li:last-child > .mfn-menu-link {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent !important;
    color: var(--cat-dd-text) !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    transition: background-color .15s ease, color .15s ease;
}

/* Chevron in front of each category */
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-menu-link::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin: 0 18px 0 2px;
    border-top: 2px solid var(--cat-dd-accent);
    border-right: 2px solid var(--cat-dd-accent);
    transform: rotate(45deg);
}

/* Selected (clicked) category; hover only colours the text */
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item.is-active > .mfn-menu-link {
    background: var(--cat-dd-active-bg) !important;
    color: var(--cat-dd-accent) !important;
}

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-menu-link:hover,
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item.current-menu-item > .mfn-menu-link {
    color: var(--cat-dd-accent) !important;
}

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item.is-active > .mfn-menu-link {
    font-weight: 600;
}

/* Theme helpers (submenu arrows etc.) are not used in this panel */
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu .menu-sub,
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu .menu-item-helper,
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu .outer-menu-sub {
    display: none !important;
}

/* "Vaata kõiki tooteid →" footer row of the left column */
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-all {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--cat-dd-border);
}

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-all > .mfn-menu-link,
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-all:last-child > .mfn-menu-link {
    padding: 12px 10px 8px;
    color: var(--cat-dd-accent) !important;
    font-size: 15px;
    font-weight: 700;
}

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-all > .mfn-menu-link .menu-label::after {
    content: "\2192";
    display: inline-block;
    margin-left: 8px;
    font-weight: 400;
    transition: transform .15s ease;
}

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-all > .mfn-menu-link:hover {
    color: var(--cat-dd-accent-hover) !important;
}

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-all > .mfn-menu-link:hover .menu-label::after {
    transform: translateX(3px);
}

/* No child has subcategories: just the left column */
.mfn-header-mainmenu > li.cat-dropdown.cat-dropdown-flat > .mfn-submenu {
    width: calc(var(--cat-dd-left) + 28px);
    padding-right: 14px;
}

.mfn-header-mainmenu > li.cat-dropdown.cat-dropdown-flat > .mfn-submenu > li {
    width: 100%;
    padding-right: 0;
}

/* ---------------------------------------------------------------- right column */
/* Heading across the full width, subcategories in 3 columns (row-wise: 1 | 2 | 3, 4 | 5 | 6, …) */

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu {
    display: none !important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--cat-dd-left) + 14px); /* + the panel's left padding */
    right: 0;
    width: auto;
    padding: 22px 28px;
    overflow-y: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    align-content: start;
    background: transparent !important;
    border: 0;
    border-left: 1px solid var(--cat-dd-border);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item.is-active > .mfn-submenu {
    display: grid !important;
}

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu > li {
    width: auto;
    padding: 0;
}

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu > li > .mfn-menu-link,
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu > li:first-child > .mfn-menu-link,
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu > li:last-child > .mfn-menu-link {
    display: block;
    padding: 9px 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--cat-dd-text) !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    white-space: normal;
    transition: color .15s ease;
}

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu > li.cat-dropdown-sub-title > .mfn-menu-link,
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu > li.cat-dropdown-sub-title:first-child > .mfn-menu-link {
    padding: 0 0 8px;
    font-size: 16px;
    font-weight: 700 !important;
}

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu > li.cat-dropdown-sub-title {
    grid-column: 1 / -1;
}

.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu > li > .mfn-menu-link:hover,
.mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu > li.current-menu-item > .mfn-menu-link {
    color: var(--cat-dd-accent) !important;
}

/* ---------------------------------------------------------------- smaller desktops (mobile menu from 960px) */
/* The panel never gets wider than the screen; js/cat-dropdown/cat-dropdown.js shifts it left
   when it would run past the right edge. */

@media (max-width: 1199px) {
    .mfn-header-mainmenu > li.cat-dropdown {
        --cat-dd-left: 240px;
    }

    .mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li > .mfn-menu-link,
    .mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li:first-child > .mfn-menu-link,
    .mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li:last-child > .mfn-menu-link {
        padding: 10px 8px;
        font-size: 15px;
    }

    .mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-menu-link::before {
        margin-right: 14px;
    }

    .mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu {
        padding: 18px 22px;
        column-gap: 20px;
    }

    .mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu > li > .mfn-menu-link,
    .mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu > li:first-child > .mfn-menu-link,
    .mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu > li:last-child > .mfn-menu-link {
        font-size: 14px;
    }
}

@media (max-width: 1099px) {
    .mfn-header-mainmenu > li.cat-dropdown > .mfn-submenu > li.cat-dropdown-item > .mfn-submenu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------- heading label */
/* The right column's heading shows the category name on desktop and "Vaata kõiki" in the
   mobile drill-down menu, which already shows the name above the list. */

.cat-dd-label-mobile {
    display: none;
}

.mfn-header-tmpl-menu-sidebar .cat-dd-label-desktop {
    display: none;
}

.mfn-header-tmpl-menu-sidebar .cat-dd-label-mobile {
    display: inline;
}