/* Directly enqueued source; no Prepros build is required for this file. */

/* Open only the submenu belonging to the hovered/focused item. */
#site-navigation ul.menu > li.menu-item-has-children:not(.has-mega-menu) ul.sub-menu {
    width: max-content;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
}

#site-navigation ul.menu > li:not(.has-mega-menu):hover > ul.sub-menu,
#site-navigation ul.menu > li:not(.has-mega-menu):focus-within > ul.sub-menu,
#site-navigation ul.menu > li:not(.has-mega-menu) ul.sub-menu > li:hover > ul.sub-menu,
#site-navigation ul.menu > li:not(.has-mega-menu) ul.sub-menu > li:focus-within > ul.sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Third and deeper levels fly out alongside their parent, aligned with its text. */
#site-navigation ul.menu > li:not(.has-mega-menu) ul.sub-menu > li {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

#site-navigation ul.menu > li:not(.has-mega-menu) ul.sub-menu ul.sub-menu {
    top: -1rem;
    left: 100%;
    right: auto;
    margin: 0;
}

#site-navigation ul.menu > li:not(.has-mega-menu) ul.sub-menu > li.submenu-opens-left > ul.sub-menu {
    left: auto;
    right: 100%;
}

#site-navigation ul.menu > li:not(.has-mega-menu) ul.sub-menu > li.menu-item-has-children > a {
    display: block;
    padding-right: 1.5rem;
}

#site-navigation ul.menu > li:not(.has-mega-menu) ul.sub-menu > li.menu-item-has-children > a::before {
    content: '';
    right: .25rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

#site-navigation ul.menu > li:not(.has-mega-menu) ul.sub-menu > li.submenu-opens-left > a::before {
    transform: translateY(-50%) rotate(-135deg);
}

/* Give every mobile submenu its own level, space and reachable toggle. */
#hamburger button.menu-bar {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    line-height: normal;
}

#hamburger .menu-name {
    display: block;
}

#hamburger button.menu-bar:focus-visible {
    outline: 2px solid #00a5ea;
    outline-offset: 4px;
}

#primary-menu-mobile li > a,
#primary-menu-mobile li > span {
    display: block;
    padding-right: 4rem;
}

#primary-menu-mobile ul.sub-menu ul.sub-menu {
    margin: 0;
}

#primary-menu-mobile ul.sub-menu ul.sub-menu > li > a,
#primary-menu-mobile ul.sub-menu ul.sub-menu > li > span {
    padding-left: 3rem;
}

#primary-menu-mobile .submenu-arrow {
    width: 44px;
    height: 44px;
    right: .75rem;
    top: 0;
}

#primary-menu-mobile .submenu-arrow::before {
    height: 16px;
    top: 14px;
}

#primary-menu-mobile .submenu-arrow::after {
    width: 16px;
    left: 14px;
}

#primary-menu-mobile .submenu-arrow.open {
    transform: none;
}

#primary-menu-mobile .submenu-arrow.open::before {
    opacity: 0;
}

#primary-menu-mobile .submenu-arrow.open::after {
    transform: none;
}

#primary-menu-mobile .submenu-arrow:focus-visible {
    outline: 2px solid #00a5ea;
    outline-offset: -2px;
}

/* Explicit chevrons do not depend on the legacy Swiper icon/font styles. */
#lightbox-slider .swiper-button {
    color: #185384;
}

#lightbox-slider .swiper-button:hover,
#lightbox-slider .swiper-button:focus-visible {
    color: #fff;
}

#lightbox-slider .lightbox-chevron {
    display: block;
    width: .65rem;
    height: .65rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

#lightbox-slider .swiper-button-prev .lightbox-chevron {
    transform: rotate(135deg);
}

#lightbox-slider .swiper-button:focus-visible {
    background-color: #00a5ea;
    outline: 2px solid #00a5ea;
    outline-offset: -4px;
}

/* Keep the existing desktop cards; use two tablet columns and one phone column. */
@media screen and (max-width: 1023px) {
    .post-archive article.type-casestudy {
        flex-basis: calc(50% - 28px);
        max-width: calc(50% - 28px);
        min-width: 0;
    }
}

@media screen and (max-width: 767px) {
    .post-archive article.type-casestudy {
        flex-basis: calc(100% - 28px);
        max-width: calc(100% - 28px);
    }
}