/* Main menu: multi-level submenus */
#block-lcms-bootstrap-main-menu {
    width: fit-content;
    margin: auto;
}

.main-navigation .dropdown-menu {
    --bs-dropdown-border-radius: var(--bs-border-radius-sm);
}

.main-menu.menu {
    display: flex;
    gap: 1rem;
    justify-content: center;
    list-style: none;
}

.main-navigation .nav-link {
    font-weight: 600;
}

.main-navigation .navbar-nav {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.lcms-submenu-toggle {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    color: inherit;
    padding: .25rem .5rem;
    line-height: 1;
    cursor: pointer;
}

.lcms-submenu-toggle svg {
    transition: transform .2s ease;
}

/* Mobile toggle & collapse panel */
.navbar-toggler {
    border: 0;
    padding: 0;
}

.main-nav-toggle {
    border: 0;
    background: none;
    z-index: 1000;
    font-size: 2rem;
    display: flex;
    padding-left: 25px;
    margin-top: 22px;
}

.main-nav-collapse {
    width: 100%;
    background-color: var(--bs-primary);
    color: white;
    margin-top: 65px;
    overflow: hidden;
}

.main-nav-collapse .navbar-nav {
    width: 100%;
}

.main-nav-collapse .nav-item {
    width: 100%;
}

.main-nav-collapse .nav-link {
    display: block;
    padding: 1rem 0;
    font-size: 1.125rem;
}

/* Mobile header buttons (Search / Donate) */
.mobile-header-buttons {
    margin: 1rem 0 auto auto;
    padding-right: 2rem;
    line-height: 1;
    font-size: 10px;

    display: flex;
    gap: 1rem;
}

.mobile-header-button-icon {
    font-size: 2rem;
    width: fit-content;
    margin: auto;
}

/* Desktop */
@media (min-width: 992px) {
    .main-navigation .has-children {
        position: relative;
    }

    .main-navigation .menu-item-row {
        display: flex;
        align-items: center;
    }

    /* In dropdowns, the link fills the row and the chevron sits at the
       right edge, using the same right padding as the other items. */
    .main-navigation .dropdown-menu .menu-item-row > .dropdown-item {
        flex: 1 1 auto;
        width: auto;
        padding-right: .25rem;
    }

    .main-navigation .dropdown-menu .menu-item-row > .lcms-submenu-toggle {
        padding: .25rem var(--bs-dropdown-item-padding-x, 1rem) .25rem .25rem;
    }

    .main-navigation .dropdown-menu {
        position: absolute;
        margin: 0;
    }

    /* First level drops below the top-level item */
    .main-navigation .nav-level-1 {
        top: 100%;
        left: 0;
    }

    /* Deeper levels fly out to the right */
    .main-navigation .dropdown-menu .dropdown-menu {
        top: calc(-1 * var(--bs-dropdown-padding-y, .5rem));
        left: 100%;
    }

    .main-navigation .dropdown-menu .lcms-submenu-toggle svg {
        transform: rotate(-90deg);
    }

    .main-navigation .dropdown-menu.show {
        display: block;
    }

    /* Highlight the whole row (link + chevron) for items with a submenu,
       and keep it highlighted while the flyout is being used. */
    .main-navigation .dropdown-menu .has-children > .menu-item-row > .dropdown-item {
        background-color: transparent;
        color: inherit;
    }

    .main-navigation .dropdown-menu .has-children:hover > .menu-item-row,
    .main-navigation .dropdown-menu .has-children:focus-within > .menu-item-row,
    .main-navigation .dropdown-menu .has-children > .menu-item-row:has(.lcms-submenu-toggle[aria-expanded="true"]) {
        background-color: var(--bs-dropdown-link-hover-bg);
        color: var(--bs-dropdown-link-hover-color);
    }

    /* Hovering the row dims link and chevron together */
    .main-navigation .dropdown-menu .menu-item-row:hover > .dropdown-item,
    .main-navigation .dropdown-menu .menu-item-row:hover > .lcms-submenu-toggle {
        opacity: .5;
    }

    #block-lcms-bootstrap-main-menu {
        flex-wrap: wrap;
    }
}

/* Hover only on devices that actually hover, so touch tablets use the buttons */
@media (min-width: 992px) and (hover: hover) {
    .main-navigation .has-children:hover > .dropdown-menu {
        display: block;
    }
}

/* Mobile */
@media (max-width: 991.98px) {
    /* Navigation */
    #block-lcms-bootstrap-main-menu {
        position: relative; /* anchors the search bar below the header */
        background-color: var(--bs-primary);
        color: white;
        min-height: 75px;
        display: flex;
        width: 100%;
    }

    .navbar-nav {
        width: 100%;
        align-items: flex-start;
    }

    .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar-nav .nav-link {
        padding: 1rem 0;
    }

    .main-nav-collapse .menu-item-row {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .main-nav-collapse .menu-item-row > a {
        flex: 0 1 auto;
        width: auto;
    }

    .main-nav-collapse .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        border: none;
        background-color: transparent;
        box-shadow: none;
        padding-left: 1rem;
        transform: none !important;
    }

    .main-nav-collapse .dropdown-menu .dropdown-item {
        font-weight: bold;
        color: white;
        font-size: 16px;
        white-space: wrap;
    }

    .main-nav-collapse .dropdown-menu.show {
        display: block;
    }

    .main-nav-collapse .lcms-submenu-toggle {
        color: white;
        font-size: 1.25rem;
        padding: .75rem 1rem;
    }

    .main-nav-collapse .lcms-submenu-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    /* Search bar (opened by the header Search button) */
    .mobile-search-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999;
        background-color: var(--bs-primary);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    }

        .mobile-search-form {
        position: relative;
        padding: .75rem 1rem 1rem;
    }

    .mobile-search-form .form-control {
        height: 44px;
        padding-right: 3rem; /* room for the button so text doesn't run under it */
        border: 0;
        border-radius: 999px;
        font-size: 16px; /* prevents iOS zoom-on-focus */
    }

    .mobile-search-form .form-control:focus {
        box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .5);
    }

    .mobile-search-submit {
        position: absolute;
        top: .75rem;   /* matches the form's top padding */
        right: 1rem;   /* matches the form's right padding */
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--bs-primary);
        font-size: 1.125rem;
        cursor: pointer;
    }

    .mobile-search-submit:hover,
    .mobile-search-submit:focus-visible {
        background-color: rgba(0, 0, 0, .06);
    }

    .mobile-search-submit:focus-visible {
        outline: 2px solid var(--bs-primary);
        outline-offset: -4px;
    }
}