/*
Fuel Theme
Version: 6.0.6
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Shared Menu Styles
# Mobile Menu
# Desktop Menu
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Shared Menu Styles
--------------------------------------------------------------*/
.menu-notifications.wp-block-fuel-menu-item .notices-title,
.sub-menu .wp-block-heading {
    margin: 0.2rem 0 1rem;
    padding-bottom: 0.6rem;
    font-weight: bold;
    font-family: var(--content-font);
    font-size: clamp(0.9rem, 4vw, 1rem);
    font-style: normal;
}

.primary-menu .sub-menu nav {
    margin-top: 0;
}

.primary-menu .sub-menu a:not(.wp-block-button__link, .icon-item, .notice, .map-link, .bio-box) {
    margin-bottom: 0.3rem;
    position: relative;
    display: block;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    margin-left: -0.7rem;
}

.wp-block-fuel-sub-menu-tab-link span:first-child {
    padding-right: 1.6rem;
}

.wp-block-fuel-sub-menu-tab-link::after {
    content: "";
    background: var(--wp--preset--color--sub-menu-color);
    clip-path: url(#menu_chevron);
    width: 0.6rem;
    height: 0.4rem;
    transform: rotate(270deg);
    margin: auto;
    position: absolute;
    inset: 0 1rem 0 auto;
}

.wp-block-fuel-sub-menu-tab-panel {
    width: 100%;
    padding: 0 1rem;
}

/*--------------------------------------------------------------
# Mobile Menu
--------------------------------------------------------------*/
@media (max-width: 68.49em) {
    body {
        /* Reverses menu colors from desktop */
        --wp--preset--color--sub-menu-background: var(--primary-color);
        --wp--preset--color--sub-menu-color: var(--white);
    }

    .primary-menu {
        position: static;
        inset: unset;
        box-shadow: unset;
    }

    .menu-styling-wrapper {
        position: fixed;
        inset: auto 0 0;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
    }

    .primary-menu .wp-block-fuel-menu-wrapper {
        border-top: 1px solid var(--white);
    }

    .primary-menu .wp-block-fuel-menu-item:nth-child(n+3) {
        border-left: 1px solid var(--white);
    }

    .wp-block-fuel-menu-wrapper .sub-menu {
        bottom: 3.2rem;
        box-shadow: none;
        max-height: calc(100dvh - 3.2rem);
        padding-bottom: 0;
    }

    .sub-menu::before {
        content: url('data:image/svg+xml,<svg width="20" height="32" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.9545 27.8051C19.3631 28.9197 18.6125 29.8522 17.5662 30.5346C15.7011 31.7401 13.3811 31.4671 11.7434 29.875C10.9473 29.1016 10.3332 28.2373 10.0148 27.191C9.40065 25.2349 8.33161 23.5745 6.98963 22.0733C5.6704 20.5948 4.32842 19.1164 3.2139 17.4787C2.25859 16.0913 1.30329 14.6583 0.689161 13.0889C-0.903017 8.99469 0.325234 4.40012 3.73704 1.7844C5.51118 0.419675 7.51278 -0.14896 9.74183 0.0330036C11.7662 0.192221 13.5403 0.874584 15.0415 2.23931C15.8376 2.96716 16.4745 3.80874 16.9521 4.7413C16.9976 4.83228 17.0431 4.94601 17.0431 5.08248C16.9521 4.96875 16.8611 4.83228 16.7702 4.71856C15.7466 3.39932 14.5866 2.2848 13.0399 1.60244C10.9018 0.669875 8.78652 0.851838 6.71669 1.7844C5.55667 2.30754 4.51039 3.01265 3.62332 3.94521C2.12212 5.56013 1.39427 7.448 1.55349 9.65431C1.59898 10.2457 1.68996 10.8371 1.75819 11.4057C1.87192 12.361 2.28134 13.1798 2.73625 13.9987C3.89626 16.023 5.30648 17.8881 6.78493 19.7078C7.49003 20.5721 8.24063 21.3909 8.96848 22.2325C9.58261 22.9376 9.99203 23.7565 10.3332 24.598C10.5834 25.1894 10.7654 25.7808 10.9928 26.3949C11.4477 27.5777 12.1073 28.624 13.1081 29.4428C14.1544 30.3071 15.3144 30.3526 16.5427 29.9432C17.8164 29.5338 18.8855 28.8059 19.8863 27.9416C19.9318 27.8961 19.9545 27.8734 20 27.8279L19.9545 27.8051Z" fill="white"/><path d="M16.5882 19.5031C14.8823 18.8662 12.4257 18.8435 11.061 21.0725C11.2885 20.2765 11.6979 19.5713 12.3348 19.0255C12.4257 18.9572 12.5167 18.8435 12.6077 18.8207C12.9489 18.6843 12.9489 18.4341 12.9261 18.1156C12.8124 16.478 12.9261 14.8858 13.654 13.3846C14.1771 12.2928 14.996 11.5195 16.1787 11.1328C16.2242 11.1328 16.2697 11.0873 16.338 11.0646C15.9513 10.1775 15.4281 9.35866 14.8368 8.60807C13.9269 7.49354 12.8579 6.56098 11.6297 5.81038C10.0375 4.85508 8.44531 4.92331 6.83038 5.69666C6.03429 6.08333 5.32919 6.60647 4.76055 7.28883C4.73781 7.33432 4.69232 7.35707 4.64682 7.40256C4.64682 7.40256 4.60133 7.37982 4.60133 7.35707C4.87428 7.03863 5.10173 6.69745 5.39742 6.40176C6.37547 5.40097 7.51274 4.69586 8.9457 4.55939C10.0375 4.44566 11.0383 4.76409 11.9936 5.26449C13.0399 5.83313 13.9269 6.58373 14.7458 7.44805C15.6329 8.38061 16.4744 9.35866 17.0658 10.5414C17.9984 12.3611 18.3396 14.2944 18.2258 16.3188C18.0666 18.8435 17.316 21.1635 16.0195 23.3243C15.6101 23.984 15.1325 24.5981 14.4956 25.053C14.3136 25.1895 14.0862 25.2804 13.8815 25.3259C13.7677 25.3487 13.6085 25.2349 13.4948 25.144C13.472 25.1212 13.5403 24.9165 13.6085 24.8483C14.8368 23.2788 15.883 21.6184 16.5654 19.7306C16.5882 19.6623 16.6109 19.5713 16.6564 19.4804L16.5882 19.5031Z" fill="white"/></svg>');
        background: var(--wp--preset--color--sub-menu-background);
        display: inline-block;
        padding: 0.5rem 0.5rem 0;
        position: relative;
        z-index: 1;
    }

    .sub-menu::after {
        content: '';
        height: 1px;
        width: calc(100% - 2rem);
        background: var(--white);
        position: absolute;
        inset: 0rem 0 100% 0;
        margin: auto;
        margin-top: 1.5rem;
    }

    .primary-menu .sub-menu a:not(.wp-block-button__link, .icon-item, .notice, .map-link) {
        margin-right: -1rem;
    }

    .primary-menu .menu-label {
        min-width: 3.5rem;
        flex-direction: column;
    }

    .primary-menu .wp-block-fuel-menu-item .menu-label .menu-label-svg svg {
        width: 1rem;
        height: 1rem;
    }

    .sub-menu .tablist,
    .sub-menu .tabpanel {
        padding: 0.4rem 1rem;
    }
    .sub-menu .tablist:has(.location-cta) {
        padding: 0.4rem 0rem !important;
    }
    .sub-menu .tablist:has(.location-cta) h2 {
        padding-left: 1.5rem;
    }

    .wp-block-fuel-sub-menu .wp-block-columns {
        flex-wrap: wrap !important;
    }

    .wp-block-fuel-sub-menu .wp-block-column {
        flex-basis: 100% !important;
    }

    .sub-menu .wp-block-heading {
        background: var(--wp--preset--color--menu-hover-bg);
        padding: 0.5rem 1rem;
        margin: 0 0 0 -1rem;
        font-style: normal;
        width: calc(100% + 2rem)
    }

    .wp-block-fuel-sub-menu-tab-link:is(:hover, :focus-visible)::after {
        background-color: var(--wp--preset--color--sub-menu-background);
    }

    .back-to-tabs-btn {
        display: block;
    }

    /* Menu location list */
    .sub-menu .loc-title {
        margin-bottom: 0.5rem;
    }

    .sub-menu .location-card {
        padding: unset !important;
    }

    /* Notifications menu */
    .menu-notifications.wp-block-fuel-menu-item .tablist {
        padding: 0.4rem clamp(1rem, calc(50vw - 30rem), 18rem) 2rem;
    }

    .menu-notifications.wp-block-fuel-menu-item .notices-title {
        display: none;
    }

    .menu-notifications li {
        background: var(--wp--preset--color--menu-hover-bg);
        background-color: var(--white);
        color: var(--primary-color);
    }

    .menu-notifications li .linkIcon {
        background-color: var(--accent-color);
        color: var(--white);
    }


    .primary-menu .sub-menu-trigger[aria-expanded=true] {
        background-color: var(--white);
        color: var(--primary-color);
    }

    .entry-wrapper .entry-content:first-child:before,
    main>.entry-content:first-child:before {
        content: '';
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: auto;
        background: rgba(0, 0, 0, 0);
        transition: background-color 0.3s;
        pointer-events: none;
        z-index: 99;
    }

    body:has(.sub-menu-trigger[aria-expanded=true]) .entry-content:before {
        background: rgba(0, 0, 0, 0.5);
        pointer-events: unset;
    }
}

/*--------------------------------------------------------------
# Desktop Menu
--------------------------------------------------------------*/
@media (min-width: 68.5em) {
    .sub-animate>.tablist::before {
        content: '';
        height: calc(100% - 2rem);
        aspect-ratio: 300/398;
        max-width: 15rem;
        background-image: url('../images/menu-ear.svg');
        background-size: cover;
        position: absolute;
        top: 2rem;
        right: 0;
    }

    .tablist .wp-block-columns {
        gap: 2.8rem;
    }

    .tablist .has-h-3-font-size {
        display: flex;
        justify-content: center;
        line-height: 48px;
    }

    #notification_content .tablist::before {
        height: 100%;
        top: 0;
    }

    li:not(.menu-notifications, .mobile-label) .sub-menu-trigger::after {
        content: '';
        display: inline-block;
        background: var(--wp--preset--color--menu-color);
        clip-path: url(#menu_chevron);
        margin-left: 0.5rem;
        margin-top: 0.3rem;
        width: 0.6rem;
        height: 0.4rem;
        transition: transform 0.3s;
    }

    .primary-menu .sub-menu-trigger[aria-expanded=true]::after {
        transform: rotate(-180deg);
    }

    .primary-menu .wp-block-fuel-menu-item .menu-label .menu-label-svg svg {
        width: unset;
        height: unset;
        font-size: 1.4rem;
    }

    .sub-menu .wp-block-heading {
        border-bottom: 1px solid;
        font-style: normal;
    }

    .back-to-tabs-btn {
        display: inline-block;
        margin-bottom: 0.5rem;
    }

    /* menu-col-# Helper classes. Add menu-col-# to break navigation block into columns */
    .sub-menu .wp-block-navigation:is(.menu-col-2, .menu-col-3, .menu-col-4) .wp-block-navigation__container {
        display: block;
        column-gap: 2em;
    }

    .menu-col-2 {
        column-count: 2;
    }

    .menu-col-3 {
        column-count: 3;
    }

    .menu-col-4 {
        column-count: 4;
    }

    /* Notification Menu */
    #menu-item-notices .sub-menu {
        max-width: 25rem;
        width: 100%;
        right: clamp(1rem, 8vw - 4rem, 3rem);
        left: auto;
        top: 100%;
    }

    .menu-notifications li {
        background-color: var(--wp--preset--color--menu-background);
        background-color: var(--primary-color);
        color: var(--white);
    }

    .menu-notifications li::before {
        left: 0.9rem;
    }
}

/* Makes sub-menu full height on computer when width is less than 18rem */
@media (max-width: 22.49em) {
    .sub-menu {
        height: 100% !important;
    }
}