/*
Fuel Theme
Version: 6.0.6
*/

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


/*--------------------------------------------------------------
# Shared Menu Styles
--------------------------------------------------------------*/
.wp-block-fuel-sub-menu .wp-block-column { min-width: fit-content; }
.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); }
.primary-menu .sub-menu nav { margin-top: 0; }
.primary-menu .sub-menu a:not(.wp-block-button__link, .icon-item, .notice, .map-link) { padding: 0.3rem 1rem; margin-left: -0.8rem; font-style: normal; position: relative; }
.wp-block-fuel-sub-menu-tab-link span:first-child { padding-right: 1.5rem; }
.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-navigation.is-vertical .wp-block-navigation-item { margin: 0 0 0.3rem; }
.wp-block-fuel-menu-wrapper .sub-menu a:is(:hover,:focus-visible):is(.address.map-link) { background: none; }


/*--------------------------------------------------------------
# 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 .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); }
    .sub-menu::before {content: url('data:image/svg+xml,<svg width="31" height="42" viewBox="0 0 31 42" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14 41.9172V38.4757C14 35.761 15.3893 33.4328 17.7723 32.155L25.8492 27.8196C26.6844 27.3726 27.6152 27.3945 28.4259 27.8826C29.2366 28.3707 29.6979 29.1879 29.6979 30.1367V33.4904L14 41.9172Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M30.2552 33.4904V30.0435C30.2552 27.3315 28.8686 25.0061 26.4911 23.7255L5.99998 12.6936V16.1406C5.99998 18.8526 7.38662 21.178 9.76411 22.4586L30.2552 33.4904Z" fill="%2360A6A2"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M29.7145 23.7364V20.2895C29.7145 17.5775 28.3278 15.2521 25.9503 13.9715L0 0V3.44694C0 6.15897 1.38664 8.48435 3.76412 9.76495L29.7145 23.7364Z" fill="%2360A6A2"/> </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: 1.5rem 0 100% 0; margin: auto; }
    .primary-menu .sub-menu a:not(.wp-block-button__link, .icon-item, .notice, .map-link) { margin-left: -1rem; 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-top: 0.4rem; }
    .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: rgba(0, 0, 0, 0.15); padding: 0.5rem 1rem; margin: 0 0 0 -1rem; 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); }
    .sub-menu p {/* font-style: italic; */line-height: 1.7;margin-left: 0 !important;}
    .sub-menu p br { display: none; }
    .back-to-tabs-btn { display: block; margin-bottom: 0.8rem; }
    .sub-menu .wp-block-navigation__container, .sub-menu .wp-block-navigation__container * { width: 100%; flex: 1 1 100%; }

    .menu-mobile-btn { text-align: center; }
    .menu-mobile-btn.wp-block-buttons .wp-element-button {background-color: var(--white);color: var(--primary-color);max-width: 30rem;padding: 0.57rem 1rem;}
    .menu-mobile-btn.wp-block-buttons .wp-element-button:is(:hover, :focus-visible) {background-color: var(--accent-color);color: var(--white);}

    /* Menu bio list */ 
    .sub-menu .bio-list .bio-box.bio-box { margin-left: -1rem; width: calc(100% + 2rem); }
    .sub-menu .bio-box::after, #main .bio-box::after { content: ''; --link-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18" height="18"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.37 7.63a3.88 3.88 0 0 0-5.49 0l-2.74 2.74a3.88 3.88 0 0 0 5.49 5.5L9 14.48"></path><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.63 10.37a3.88 3.88 0 0 0 5.49 0l2.74-2.74a3.88 3.88 0 1 0-5.49-5.5L9 3.52"></path></svg>'); background-color: currentColor; -webkit-mask: var(--link-svg); mask: var(--link-svg); position: absolute; inset: 0 8vw 0 auto; width: 0.9rem; height: 0.9rem; margin: auto; transition: background-color 0.3s ease; }
    .sub-menu .bio-list .bio-box:not(:hover, :focus-visible):nth-child(odd) { background: rgba(255,255,255,0.1); }

    /* Menu location list */ 
    .sub-menu .loc-title { margin-bottom: 0.5rem; }
    .wp-block-fuel-menu-wrapper .sub-menu .address.map-link:is(:hover,:focus-visible) { background: none; }

    /* Menu Quotes */
    .menu-quote-col p {padding-top: 0.8rem;border-top: 1px solid var(--white);}
    .menu-quote-col.about-menu-quote-col p { text-align: center; font-style: italic; }
    .menu-quote-col .wp-block-buttons .wp-element-button {background-color: var(--white);color: var(--accent-color);padding: 0.65rem 3rem;}
    .menu-quote-col .wp-block-buttons .wp-element-button:is(:hover, :focus-visible) {background-color: var(--accent-color);color: var(--white);}

    /* 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); }
    .menu-notifications li::before {width: 0.5rem;height: 0.5rem;left: 0.75rem;}
    .menu-notifications .sub-menu a:is(:hover,:focus-visible) { background: var(--white); }
    .menu-notifications .notice {padding: 0.5rem 0.5rem 0.5rem 2rem;font-weight: 700;}
    .menu-notifications .notice small { font-weight: 400; }
    .menu-notifications .linkIcon { background: rgba(255,255,255,0.2); }
}
















/*--------------------------------------------------------------
# Desktop Menu
--------------------------------------------------------------*/
@media (min-width: 68.5em) {
    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: 1.4rem; height: 1.3rem; }
    .sub-menu {background:  url('data:image/svg+xml,<svg width="336" height="426" viewBox="0 0 336 426" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="mask0_6586_2155" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="336" height="426"> <rect width="336" height="426" fill="%23D9D9D9"/> </mask> <g mask="url(%23mask0_6586_2155)"> <g opacity="0.2"> <path fill-rule="evenodd" clip-rule="evenodd" d="M172.497 476.048V438.606C172.497 409.07 187.613 383.74 213.538 369.838L301.413 322.669C310.5 317.806 320.627 318.045 329.447 323.356C338.267 328.666 343.286 337.557 343.286 347.879V384.367L172.497 476.048Z" fill="%23152C40"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M343.284 384.367V346.865C343.284 317.359 328.198 292.06 302.332 278.127L79.3936 158.103V195.605C79.3936 225.111 94.4798 250.411 120.346 264.343L343.284 384.367Z" fill="%2360A6A2"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M343.286 278.246V240.744C343.286 211.238 328.199 185.939 302.333 172.006L20 20V57.5018C20 87.008 35.0863 112.307 60.9527 126.24L343.286 278.246Z" fill="%2360A6A2"/> </g> </g> </svg>');background-size: contain;background-repeat: no-repeat;background-position: bottom right;}
    .sub-menu .wp-block-heading { border-bottom: 1px solid; }
    .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; }

    /* Menu Quotes */
    .menu-quote-col.about-menu-quote-col p {color: var(--primary-color);font-size: 1.6rem;font-style: italic;max-width: 19.3rem;margin-left: 2rem !important;}    
    .svcs-menu-quote-col {padding-left: 2rem;border-left: 1px solid var(--primary-color);margin-left: 2rem !important;} 
    .svcs-menu-quote-col p { font-size: 1.2rem; }
    .svcs-menu-quote-col .wp-block-buttons .wp-element-button { font-size: 1.1rem; padding: 0.725rem 1.2rem; }        
    
    /* Menu Search */
    .menu-search .wp-element-button { background-color: var(--accent-color); color: var(--white); font-size: 1rem; }
    .menu-search .wp-element-button:is(:hover, :focus-visible) { background-color: var(--primary-color); }

    /* Notification Menu */ 
    #menu-item-notices .sub-menu {background-image: none;max-width: 25rem;width: 100%;right: clamp(1rem, 8vw - 4rem, 3rem);}
    .menu-notifications li { background-color: var(--wp--preset--color--menu-background); color: var(--white); }
    .menu-notifications li::before {width: 0.5rem;height: 0.5rem;left: 0.75rem;}
    .menu-notifications .notice {padding: 0.5rem 0.5rem 0.5rem 2rem;font-weight: 700;}
    .menu-notifications .notice small { font-weight: 400; }
    .menu-notifications .linkIcon { background: var(--color2); }
}


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