﻿/* ==============================================================
   SUBMENU NAVIGATION
   ============================================================== */


/* ==============================================================
   SHARED
   ============================================================== */

.bm-submenu,
.bm-submenu * {
    box-sizing: border-box;
}

.bm-submenu {
    width: 100%;
}

.bm-submenu__inner {
    width: 100%;
}

.bm-submenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* --------------------------------------------------------------
   Optional title
   -------------------------------------------------------------- */

.bm-submenu__title {
    margin-bottom: 14px;
    font-family: "montserrat", sans-serif;
    font-size: 15px;
    line-height: 24px;
    font-weight: 700;
    color: #0A183E;
}


/* --------------------------------------------------------------
   Links
   -------------------------------------------------------------- */

.bm-submenu__link {
    color: #0A183E;
    font-family: "montserrat", sans-serif;
    font-size: 15px;
    line-height: 26px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s ease, padding-left 0.2s ease;
}

    .bm-submenu__link.is-active {
        font-weight: 700;
    }


/* --------------------------------------------------------------
   Parent link + arrow
   -------------------------------------------------------------- */

.bm-submenu__link-row {
    display: flex;
    align-items: stretch;
}

    .bm-submenu__link-row .bm-submenu__link {
        flex: 1;
    }


/* --------------------------------------------------------------
   Child toggle
   -------------------------------------------------------------- */

.bm-submenu__child-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: #0A183E;
    cursor: pointer;
}


/* --------------------------------------------------------------
   Arrow
   -------------------------------------------------------------- */

.bm-submenu__arrow {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-left: 0.1rem solid #0A183E;
    border-bottom: 0.1rem solid #0A183E;
    transform: rotate(-45deg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==============================================================
   VERTICAL VERSION
   ============================================================== */

.bm-submenu--vertical .bm-submenu__list {
    display: flex;
    flex-direction: column;
}

.bm-submenu--vertical .bm-submenu__item {
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}


/* --------------------------------------------------------------
   Vertical root links
   -------------------------------------------------------------- */

.bm-submenu--vertical .bm-submenu__link {
    display: block;
    width: 100%;
    padding: 14px 0;
}

.bm-submenu--vertical
.bm-submenu__item:not(.bm-submenu__item--has-children)
.bm-submenu__link:hover {
    padding-left: 6px;
}


/* --------------------------------------------------------------
   Vertical parent link
   -------------------------------------------------------------- */

.bm-submenu--vertical
.bm-submenu__link-row
.bm-submenu__link {
    padding: 14px 0;
}


/* --------------------------------------------------------------
   Vertical arrow button
   -------------------------------------------------------------- */

.bm-submenu--vertical
.bm-submenu__child-toggle {
    width: 46px;
}


    /* Expanded arrow */

    .bm-submenu--vertical
    .bm-submenu__child-toggle[aria-expanded="true"]
    .bm-submenu__arrow {
        transform: rotate(135deg);
    }


/* --------------------------------------------------------------
   Vertical child dropdown
   -------------------------------------------------------------- */

.bm-submenu--vertical
.bm-submenu__children {
    display: none;
    width: 100%;
    padding: 8px 0;
    background-color: #F3F9F9;
}


/* Open vertical child menu */

.bm-submenu--vertical
.bm-submenu__item.is-open >
.bm-submenu__children {
    display: block;
}


/* --------------------------------------------------------------
   Vertical child links
   -------------------------------------------------------------- */

.bm-submenu--vertical
.bm-submenu__child-link {
    display: block;
    padding: 10px 18px;
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 26px;
    color: #0A183E;
    text-decoration: none;
    transition: padding-left 0.2s ease, background-color 0.2s ease;
}

    .bm-submenu--vertical
    .bm-submenu__child-link:hover,
    .bm-submenu--vertical
    .bm-submenu__child-link:focus-visible {
        padding-left: 25px;
        background-color: #f5f5f5;
    }

    .bm-submenu--vertical
    .bm-submenu__child-link.is-active {
        background-color: rgba(10, 24, 62, 0.05);
    }


/* Vertical menu never uses main hamburger */

.bm-submenu--vertical
.bm-submenu__toggle {
    display: none;
}


/* ==============================================================
   HORIZONTAL VERSION — DESKTOP
   ============================================================== */

.bm-submenu--horizontal
.bm-submenu__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
}


/* --------------------------------------------------------------
   Horizontal root item
   -------------------------------------------------------------- */

.bm-submenu--horizontal
.bm-submenu__item {
    position: relative;
    margin: 0;
}


/* --------------------------------------------------------------
   Horizontal root links
   -------------------------------------------------------------- */

.bm-submenu--horizontal
.bm-submenu__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 12px 0;
}

    .bm-submenu--horizontal
    .bm-submenu__link:hover {
        opacity: 0.65;
    }


    /* --------------------------------------------------------------
   Active / hover underline
   -------------------------------------------------------------- */

    .bm-submenu--horizontal
    .bm-submenu__link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 4px;
        width: 100%;
        height: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.2s ease;
    }

    .bm-submenu--horizontal
    .bm-submenu__link:hover::after,
    .bm-submenu--horizontal
    .bm-submenu__link.is-active::after {
        transform: scaleX(1);
    }


/* --------------------------------------------------------------
   Horizontal link with child arrow
   -------------------------------------------------------------- */

.bm-submenu--horizontal
.bm-submenu__link-row {
    display: flex;
    align-items: center;
}

.bm-submenu--horizontal
.bm-submenu__child-toggle {
    padding: 0 0 3px 7px;
}


/* Desktop arrow opens upwards */

.bm-submenu--horizontal
.bm-submenu__item--has-children:hover
.bm-submenu__arrow,
.bm-submenu--horizontal
.bm-submenu__item--has-children:focus-within
.bm-submenu__arrow {
    transform: rotate(135deg);
}


/* ==============================================================
   HORIZONTAL CHILD DROPDOWN — DESKTOP
   ============================================================== */

.bm-submenu--horizontal
.bm-submenu__children {
    position: absolute;
    top: 100%;
    left: 0;
    width: 220px;
    padding: 10px 0;
    background-color: #F3F9F9;
    border-top: 1px solid #F3F9F9;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 1000;
}


/* --------------------------------------------------------------
   Show desktop child dropdown
   -------------------------------------------------------------- */

.bm-submenu--horizontal
.bm-submenu__item--has-children:hover >
.bm-submenu__children,
.bm-submenu--horizontal
.bm-submenu__item--has-children:focus-within >
.bm-submenu__children {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* --------------------------------------------------------------
   Horizontal child links
   -------------------------------------------------------------- */

.bm-submenu--horizontal
.bm-submenu__child-item {
    padding: 0;
}

.bm-submenu--horizontal
.bm-submenu__child-link {
    display: block;
    padding: 12px 20px 12px 18px;
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 26px;
    color: #0A183E;
    text-decoration: none;
    transition: padding-left 0.2s ease, background-color 0.2s ease;
}

    .bm-submenu--horizontal
    .bm-submenu__child-link:hover,
    .bm-submenu--horizontal
    .bm-submenu__child-link:focus-visible {
        padding-left: 25px;
        background-color: #f5f5f5;
        color: #0A183E;
    }

    .bm-submenu--horizontal
    .bm-submenu__child-link.is-active {
        background-color: rgba(10, 24, 62, 0.05);
    }


/* --------------------------------------------------------------
   Small triangle above desktop dropdown
   -------------------------------------------------------------- */

.bm-submenu--horizontal
.bm-submenu__item--has-children:hover::after,
.bm-submenu--horizontal
.bm-submenu__item--has-children:focus-within::after {
    content: "";
    position: absolute;
    left: 12px;
    bottom: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #F3F9F9;
    z-index: 1001;
}


/* ==============================================================
   MAIN HAMBURGER
   Hidden on desktop
   ============================================================== */

.bm-submenu--horizontal
.bm-submenu__toggle {
    display: none;
}


/* ==============================================================
   DESKTOP BLOCK GRID / SECTION STACKING FIX
   ============================================================== */

@media (min-width: 768px) {

    /*
     * The global .section style uses overflow:hidden
     * for rounded sections.
     *
     * The section containing a horizontal submenu must allow
     * its dropdown to extend outside the section.
     */


    /* ----------------------------------------------------------
       Raise outer Block Grid item above following sibling sections
       ---------------------------------------------------------- */

    .umb-block-grid__layout-item:has( > .section .bm-submenu--horizontal ) {
        position: relative;
        z-index: 100;
        overflow: visible;
    }


    /* ----------------------------------------------------------
       Allow submenu to escape its section
       ---------------------------------------------------------- */

    .section:has(.bm-submenu--horizontal) {
        overflow: visible;
        position: relative;
        z-index: 100;
    }


        /* ----------------------------------------------------------
       Make intermediate wrappers overflow-visible
       ---------------------------------------------------------- */

        .section:has(.bm-submenu--horizontal)
        .section__container,
        .section:has(.bm-submenu--horizontal)
        .umb-block-grid__area-container,
        .section:has(.bm-submenu--horizontal)
        .umb-block-grid__area,
        .section:has(.bm-submenu--horizontal)
        .umb-block-grid__layout-container,
        .section:has(.bm-submenu--horizontal)
        .umb-block-grid__layout-item {
            overflow: visible;
        }


    /* ----------------------------------------------------------
       Submenu stacking context
       ---------------------------------------------------------- */

    .bm-submenu--horizontal {
        position: relative;
        z-index: 200;
        overflow: visible;
    }

        .bm-submenu--horizontal
        .bm-submenu__inner,
        .bm-submenu--horizontal
        .bm-submenu__menu,
        .bm-submenu--horizontal
        .bm-submenu__list {
            overflow: visible;
        }


        /* ----------------------------------------------------------
       Child dropdown above sibling sections
       ---------------------------------------------------------- */

        .bm-submenu--horizontal
        .bm-submenu__children {
            z-index: 1000;
        }
}


/* ==============================================================
   MOBILE
   ============================================================== */

@media (max-width: 767px) {


    /* ==========================================================
       VERTICAL VERSION
       ========================================================== */

    .bm-submenu--vertical
    .bm-submenu__link {
        font-size: 15px;
        line-height: 26px;
    }


    /* ==========================================================
       HORIZONTAL -> HAMBURGER
       ========================================================== */

    .bm-submenu--horizontal {
        position: relative;
    }

        .bm-submenu--horizontal
        .bm-submenu__title {
            display: none;
        }


        /* ----------------------------------------------------------
       Main hamburger button
       ---------------------------------------------------------- */

        .bm-submenu--horizontal
        .bm-submenu__toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 14px 16px;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 8px;
            background: #fff;
            color: #0A183E;
            font-family: "montserrat", sans-serif;
            cursor: pointer;
        }

        .bm-submenu--horizontal
        .bm-submenu__toggle-label {
            font-size: 15px;
            line-height: 26px;
            font-weight: 600;
            text-align: left;
        }


        /* ----------------------------------------------------------
       Hamburger icon
       ---------------------------------------------------------- */

        .bm-submenu--horizontal
        .bm-submenu__hamburger {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            width: 20px;
            height: 20px;
            margin-left: 16px;
        }

            .bm-submenu--horizontal
            .bm-submenu__hamburger span {
                display: block;
                width: 20px;
                height: 2px;
                background: currentColor;
                transition: transform 0.25s ease, opacity 0.25s ease;
            }


        /* ----------------------------------------------------------
       Hamburger -> X
       ---------------------------------------------------------- */

        .bm-submenu--horizontal
        .bm-submenu__toggle[aria-expanded="true"]
        .bm-submenu__hamburger span:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }

        .bm-submenu--horizontal
        .bm-submenu__toggle[aria-expanded="true"]
        .bm-submenu__hamburger span:nth-child(2) {
            opacity: 0;
        }

        .bm-submenu--horizontal
        .bm-submenu__toggle[aria-expanded="true"]
        .bm-submenu__hamburger span:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }


        /* ==========================================================
       MAIN MOBILE DROPDOWN

       Normal document flow.
       This pushes following content and footer down.
       ========================================================== */

        .bm-submenu--horizontal
        .bm-submenu__menu {
            display: none;
            position: static;
            width: 100%;
            margin-top: 6px;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            overflow: hidden;
        }


        /* Open main mobile menu */

        .bm-submenu--horizontal
        .bm-submenu__toggle[aria-expanded="true"] +
        .bm-submenu__menu {
            display: block;
        }


        /* ==========================================================
       MOBILE ROOT LIST
       ========================================================== */

        .bm-submenu--horizontal
        .bm-submenu__list {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            width: 100%;
        }

        .bm-submenu--horizontal
        .bm-submenu__item {
            width: 100%;
            border-bottom: 1px solid #f5f5f5;
        }

            .bm-submenu--horizontal
            .bm-submenu__item:last-child {
                border-bottom: 0;
            }


        /* ----------------------------------------------------------
       Mobile root links
       ---------------------------------------------------------- */

        .bm-submenu--horizontal
        .bm-submenu__link {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 14px 16px;
            font-size: 15px;
            line-height: 26px;
            opacity: 1;
        }

            .bm-submenu--horizontal
            .bm-submenu__link:hover {
                opacity: 1;
                background: rgba(0, 0, 0, 0.04);
            }


            /* Remove desktop underline */

            .bm-submenu--horizontal
            .bm-submenu__link::after {
                display: none;
            }


        /* Remove desktop triangle */

        .bm-submenu--horizontal
        .bm-submenu__item--has-children:hover::after,
        .bm-submenu--horizontal
        .bm-submenu__item--has-children:focus-within::after {
            display: none;
        }


        /* ==========================================================
       MOBILE PARENT + CHILD TOGGLE
       ========================================================== */

        .bm-submenu--horizontal
        .bm-submenu__link-row {
            display: flex;
            align-items: stretch;
            width: 100%;
        }

            .bm-submenu--horizontal
            .bm-submenu__link-row
            .bm-submenu__link {
                flex: 1;
            }

        .bm-submenu--horizontal
        .bm-submenu__child-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 58px;
            padding: 14px 18px;
            border-left: 1px solid #f5f5f5;
            background-color: #fafafa;
        }


        /* ----------------------------------------------------------
       Disable desktop hover arrow behaviour
       ---------------------------------------------------------- */

        .bm-submenu--horizontal
        .bm-submenu__item--has-children:hover
        .bm-submenu__arrow,
        .bm-submenu--horizontal
        .bm-submenu__item--has-children:focus-within
        .bm-submenu__arrow {
            transform: rotate(-45deg);
        }


        /* Open arrow */

        .bm-submenu--horizontal
        .bm-submenu__child-toggle[aria-expanded="true"]
        .bm-submenu__arrow {
            transform: rotate(135deg);
        }


        /* ==========================================================
       MOBILE CHILD ACCORDION
       ============================================================== */

        .bm-submenu--horizontal
        .bm-submenu__children {
            position: static;
            display: none;
            width: 100%;
            padding: 10px 0;
            background-color: #F3F9F9;
            border: 0;
            opacity: 1;
            visibility: visible;
            transform: none;
            transition: none;
        }


        /* Open child accordion */

        .bm-submenu--horizontal
        .bm-submenu__item.is-open >
        .bm-submenu__children {
            display: block;
        }


        /* ----------------------------------------------------------
       Mobile child links
       ---------------------------------------------------------- */

        .bm-submenu--horizontal
        .bm-submenu__child-link {
            display: block;
            padding: 12px 35px;
            font-family: "montserrat", sans-serif;
            font-weight: 700;
            font-size: 15px;
            line-height: 26px;
            color: #0A183E;
            text-decoration: none;
        }

            .bm-submenu--horizontal
            .bm-submenu__child-link:hover,
            .bm-submenu--horizontal
            .bm-submenu__child-link:focus-visible {
                padding-left: 40px;
                background-color: #f5f5f5;
            }

            .bm-submenu--horizontal
            .bm-submenu__child-link.is-active {
                background-color: rgba(10, 24, 62, 0.05);
            }
}


/* ==============================================================
   ACCESSIBILITY
   ============================================================== */

.bm-submenu a:focus-visible,
.bm-submenu button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* ==============================================================
   REDUCED MOTION
   ============================================================== */

@media (prefers-reduced-motion: reduce) {

    .bm-submenu *,
    .bm-submenu *::before,
    .bm-submenu *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
