/* Menu widgets (replacing JetMenu / JetBlocks). Colours, fonts and spacing
   come from the widgets' controls; this is structure and behaviour. */

.pmm .pmm-list,
.pmm .pmm-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pmm .pmm-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: color .2s, background-color .2s, border-color .2s;
}

.pmm .pmm-arrow {
    --pmm-arrow-size: 14px;
    display: inline-block;
    width: calc(var(--pmm-arrow-size) * .5);
    height: calc(var(--pmm-arrow-size) * .5);
    margin-left: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    flex: none;
}

/* ---- Desktop: horizontal bar with dropdowns ---- */

.pmm-desktop > .pmm-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.pmm-desktop .pmm-item {
    position: relative;
}

.pmm-desktop .pmm-sub,
.pmm-desktop .pmm-mega {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s, visibility 0s .2s;
    background: #fff;
}

.pmm-desktop .pmm-sub {
    min-width: 180px;
}

.pmm-desktop .pmm-sub .pmm-sub {
    top: 0;
    left: 100%;
}

.pmm-desktop .pmm-sub .pmm-arrow {
    transform: rotate(-45deg);
    margin-left: auto;
}

.pmm-desktop .pmm-item.has-mega {
    position: static;
}

.pmm-desktop .pmm-mega {
    /* Right-aligned under the menu, which sits at the header's right edge. */
    left: auto;
    right: 0;
    width: min(var(--pmm-mega-width, 1200px), calc(100vw - 40px));
}

/* The header container is the positioning context for the mega panel. */
.pmm--mega {
    position: relative;
}

.pmm-desktop .pmm-item:hover > .pmm-sub,
.pmm-desktop .pmm-item:focus-within > .pmm-sub,
.pmm-desktop .pmm-item.is-open > .pmm-sub {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

.pmm-desktop .pmm-item:hover > .pmm-mega,
.pmm-desktop .pmm-item:focus-within > .pmm-mega,
.pmm-desktop .pmm-item.is-open > .pmm-mega {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

/* Bridge the gap between item and panel so the pointer can cross it. */
.pmm-desktop .pmm-item.has-children > .pmm-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
    display: none;
}

.pmm-desktop .pmm-item.has-children:hover > .pmm-link::after {
    display: block;
}

/* ---- Off-canvas ---- */

.pmm-toggle {
    --pmm-toggle-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

.pmm-toggle:hover,
.pmm-toggle:focus {
    background: none;
}

.pmm-toggle__bars {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: var(--pmm-toggle-size);
    height: calc(var(--pmm-toggle-size) * .75);
}

.pmm-toggle__bars span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.pmm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0, 0, 0, .4);
}

.pmm-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    width: 320px;
    max-width: 100vw;
    overflow-y: auto;
    padding: 56px 0 24px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(41, 43, 46, .1);
    transform: translateX(100%);
    transition: transform .25s ease;
}

.pmm-panel.is-open {
    transform: none;
}

.pmm-close {
    position: absolute;
    top: 8px;
    right: 12px;
    padding: 4px 8px;
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: #252531;
    cursor: pointer;
}

.pmm-close:hover,
.pmm-close:focus {
    background: none;
    color: inherit;
}

.pmm-panel .pmm-item {
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.pmm-panel .pmm-link {
    padding: 12px 56px 12px 20px;
    color: #2b3c6c;
}

.pmm-panel .pmm-link .pmm-arrow {
    display: none;
}

.pmm-panel .pmm-sub-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 46px;
    padding: 0;
    background: none;
    border: 0;
    color: #2b3c6c;
    cursor: pointer;
}

.pmm-panel .pmm-sub-toggle:hover,
.pmm-panel .pmm-sub-toggle:focus {
    background: none;
}

.pmm-panel .pmm-sub-toggle[aria-expanded="true"] .pmm-arrow {
    transform: translateY(25%) rotate(-135deg);
}

.pmm-panel .pmm-sub {
    display: none;
    padding-left: 12px;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.pmm-panel .pmm-item.is-open > .pmm-sub {
    display: block;
}

.pmm-panel .pmm-sub .pmm-item:last-child {
    border-bottom: 0;
}

/* Mega menu: off-canvas only below the mobile breakpoint. */
.pmm-mobile--auto {
    display: none;
}

@media (max-width: 767px) {
    .pmm--mega .pmm-desktop {
        display: none;
    }

    .pmm-mobile--auto {
        display: block;
    }
}

body.pmm-locked {
    overflow: hidden;
}

/* ---- Nav menu ---- */

.pmm-nav--horizontal > .pmm-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}

.pmm-nav--vertical .pmm-link {
    display: block;
}

.pmm-nav .pmm-sub {
    padding-left: 12px;
}

.pmm-nav .pmm-arrow {
    display: none;
}