/*
 * Mastercount Mega Menu — desktop 3-column hover panel + mobile accordion.
 *
 * Strategy: target Bricks-rendered menu (`.brxe-nav-menu` with `.bricks-menu-item`
 * and nested `.sub-menu`). On desktop, items with `.menu-item-has-children` open
 * a horizontal mega panel below the top bar. On mobile burger, sub-menus
 * collapse/expand vertically.
 *
 * RTL-first design (text-align: right, direction: rtl).
 */

:root {
    --mc-brand: var(--brand-1-200, #db2323);
    --mc-brand-dark: #b81c1c;
    --mc-text: #404d57;
    --mc-text-secondary: #6a747c;
    --mc-bg: #ffffff;
    --mc-bg-soft: #f5f5f5;
    --mc-border: #e5e7eb;
    --mc-mega-radius: 14px;
    --mc-mega-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   Top-level menu items — pill style
   ============================================================ */
.brxe-nav-menu .bricks-menu-item > a,
.brxe-nav-menu .bricks-menu-item > .brx-submenu-toggle > a {
    color: var(--mc-text) !important;
    font-weight: 400 !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
    line-height: 1.2 !important;
}

.brxe-nav-menu .bricks-menu-item:hover > a,
.brxe-nav-menu .bricks-menu-item:hover > .brx-submenu-toggle > a,
.brxe-nav-menu .bricks-menu-item.current-menu-item > a,
.brxe-nav-menu .bricks-menu-item.current-menu-ancestor > a {
    background: var(--mc-text) !important;
    color: #fff !important;
}

/* Hide Bricks default chevron — we'll style our own with CSS */
.brxe-nav-menu .bricks-menu-item .brx-submenu-toggle > button .menu-item-icon,
.brxe-nav-menu .bricks-menu-item .brx-submenu-toggle > button .ion-ios-arrow-down {
    color: var(--mc-text-secondary) !important;
    transition: transform 0.2s ease !important;
}

.brxe-nav-menu .bricks-menu-item.menu-item-has-children:hover > .brx-submenu-toggle > button .menu-item-icon {
    transform: rotate(180deg) !important;
    color: var(--mc-brand) !important;
}

/* ============================================================
   Desktop mega menu panel (>= 1025px)
   ============================================================ */
@media (min-width: 1025px) {

    /* Top-level mega panel — anchored under the parent item, visible on hover */
    .brxe-nav-menu > ul > li.menu-item-has-children > .sub-menu,
    .brxe-nav-menu li.bricks-menu-item.menu-item-has-children > .sub-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        width: max-content !important;
        min-width: 280px !important;
        max-width: 720px !important;
        background: #fff !important;
        border: 1px solid var(--mc-border) !important;
        border-radius: var(--mc-mega-radius) !important;
        box-shadow: var(--mc-mega-shadow) !important;
        padding: 12px !important;
        margin: 0 !important;
        list-style: none !important;
        transform: translateY(-4px) !important;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important;
        z-index: 9999 !important;
        direction: rtl !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .brxe-nav-menu li.bricks-menu-item.menu-item-has-children:hover > .sub-menu,
    .brxe-nav-menu li.bricks-menu-item.menu-item-has-children:focus-within > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s !important;
    }

    /* Hover bridge between top-bar menu item and the first submenu — covers the 8px gap so :hover doesn't drop while moving cursor */
    .brxe-nav-menu li.bricks-menu-item.menu-item-has-children > .sub-menu::before {
        content: '' !important;
        position: absolute !important;
        top: -8px !important;
        right: 0 !important;
        left: 0 !important;
        height: 8px !important;
        background: transparent !important;
        pointer-events: auto !important;
    }

    /* Items inside the mega panel — pill rows */
    .brxe-nav-menu .sub-menu .bricks-menu-item {
        display: block !important;
        margin: 2px 0 !important;
    }

    .brxe-nav-menu .sub-menu .bricks-menu-item > a,
    .brxe-nav-menu .sub-menu .bricks-menu-item > .brx-submenu-toggle > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        background: var(--mc-bg-soft) !important;
        color: var(--mc-text) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        text-decoration: none !important;
        transition: background-color 0.15s ease, color 0.15s ease !important;
        white-space: normal !important;
    }

    .brxe-nav-menu .sub-menu .bricks-menu-item:hover > a,
    .brxe-nav-menu .sub-menu .bricks-menu-item:hover > .brx-submenu-toggle > a,
    .brxe-nav-menu .sub-menu .bricks-menu-item.current-menu-item > a {
        background: var(--mc-text) !important;
        color: #fff !important;
    }

    /* Submenu chevron icon for items with children — always visible, brand red */
    .brxe-nav-menu .sub-menu .bricks-menu-item.menu-item-has-children > .brx-submenu-toggle::after {
        content: '' !important;
        display: inline-block !important;
        width: 8px !important;
        height: 8px !important;
        border-left: 2.5px solid var(--mc-brand) !important;
        border-bottom: 2.5px solid var(--mc-brand) !important;
        transform: rotate(45deg) !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        margin-top: -6px !important;
        transition: border-color 0.15s ease, transform 0.15s ease !important;
        pointer-events: none !important;
    }

    /* On hover the row turns dark, so flip arrow to white for contrast */
    .brxe-nav-menu .sub-menu .bricks-menu-item.menu-item-has-children:hover > .brx-submenu-toggle::after,
    .brxe-nav-menu .sub-menu .bricks-menu-item.menu-item-has-children:focus-within > .brx-submenu-toggle::after {
        border-left-color: #fff !important;
        border-bottom-color: #fff !important;
        transform: rotate(45deg) translate(-2px, 2px) !important;
    }

    /* Hide Bricks's button chevron inside submenu — we use ::after */
    .brxe-nav-menu .sub-menu .bricks-menu-item .brx-submenu-toggle > button {
        display: none !important;
    }

    .brxe-nav-menu .sub-menu .bricks-menu-item .brx-submenu-toggle {
        position: relative !important;
        display: block !important;
    }

    /* Nested submenu (column 2): position to the LEFT of column 1 in RTL.
       In RTL the parent LI's "left edge" in viewport corresponds to the trailing
       end of the row, so we anchor with `right: 100%` to grow leftward. */
    .brxe-nav-menu .sub-menu .bricks-menu-item.menu-item-has-children > .sub-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        top: -12px !important;       /* match parent's padding so the panel top aligns with its first row */
        right: calc(100% + 8px) !important;
        left: auto !important;
        min-width: 240px !important;
        max-width: 360px !important;
        background: #fff !important;
        border: 1px solid var(--mc-border) !important;
        border-radius: var(--mc-mega-radius) !important;
        box-shadow: var(--mc-mega-shadow) !important;
        padding: 12px !important;
        margin: 0 !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        transform: translateX(-4px) !important;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important;
        z-index: 10000 !important;
    }

    .brxe-nav-menu .sub-menu .bricks-menu-item.menu-item-has-children:hover > .sub-menu,
    .brxe-nav-menu .sub-menu .bricks-menu-item.menu-item-has-children:focus-within > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s !important;
    }

    /* Hover bridge: invisible block that fills the gap between the parent LI
       and the nested submenu, so moving the mouse across doesn't trigger
       :hover loss on the parent. */
    .brxe-nav-menu .sub-menu .bricks-menu-item.menu-item-has-children > .sub-menu::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        right: -16px !important;       /* covers the 8px gap + a few extra px */
        width: 16px !important;
        height: 100% !important;
        background: transparent !important;
        pointer-events: auto !important;
    }

    /* Force same-direction nesting for any deeper Bricks default */
    .brxe-nav-menu .sub-menu .sub-menu {
        right: calc(100% + 8px) !important;
        left: auto !important;
    }
}

/* ============================================================
   Mobile burger menu (< 1025px)
   ============================================================ */
@media (max-width: 1024px) {
    /* Bricks already converts the menu to a mobile drawer; we just style it */

    /* Remove pill background from top-level on mobile (Bricks already does this for the drawer) */
    .brxe-nav-menu .bricks-menu-item > a,
    .brxe-nav-menu .bricks-menu-item > .brx-submenu-toggle > a {
        border-radius: 8px !important;
        padding: 14px 18px !important;
        font-size: 15px !important;
        background: var(--mc-bg-soft) !important;
        margin: 4px 8px !important;
        display: block !important;
    }

    .brxe-nav-menu .bricks-menu-item.current-menu-item > a {
        background: var(--mc-text) !important;
        color: #fff !important;
    }

    /* Submenus: full-width below parent, indented */
    .brxe-nav-menu .sub-menu {
        padding: 0 !important;
        margin: 4px 16px 8px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .brxe-nav-menu .sub-menu .bricks-menu-item > a,
    .brxe-nav-menu .sub-menu .bricks-menu-item > .brx-submenu-toggle > a {
        background: #fff !important;
        border: 1px solid var(--mc-border) !important;
        font-size: 14px !important;
        padding: 10px 16px !important;
    }

    .brxe-nav-menu .sub-menu .sub-menu .bricks-menu-item > a {
        background: #fafbfc !important;
        font-size: 13px !important;
    }

    /* Toggle button styled for mobile (always visible) */
    .brxe-nav-menu .brx-submenu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .brxe-nav-menu .brx-submenu-toggle > button {
        background: transparent !important;
        border: 0 !important;
        padding: 8px !important;
        cursor: pointer !important;
        margin: 0 !important;
    }

    /* Rotate icon when open */
    .brxe-nav-menu .menu-item-has-children.brx-open > .brx-submenu-toggle > button .menu-item-icon {
        transform: rotate(180deg) !important;
    }
}