/* Scoped to page 174 (header) widget b3a6c66 = the "Engage" flyout submenu, same element the "General CSS" snippet already targets with min-width:280px */
.elementor-174 .elementor-element.elementor-element-b3a6c66.ts-form {
    width: 500px !important;
}

.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-field-popup-container .ts-field-popup {
    min-width: 500px !important;
}

/* Elementor's own "columns" option renders this as a 2-col CSS grid with default
   row-first auto-flow, which interleaves items left/right instead of filling
   column 1 first. Switch to CSS multi-column so items flow straight down column 1
   and only jump to column 2 where we force a break - i.e. at each menu-section-title. */
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu {
    display: block !important;
    column-count: 2 !important;
    column-fill: auto !important;
    column-gap: 24px !important;
}
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li {
    break-inside: avoid !important;
}
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.menu-section-title {
    break-before: column !important;
}

/* Remove separator lines from every item so the headings below read cleanly */
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li,
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li > a {
    border: none !important;
    box-shadow: none !important;
}
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li::before,
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li::after {
    display: none !important;
}

/* Stronger hover feedback on regular items - the theme's default hover fill
   (--ts-shade-7, #fcfcfc) is nearly invisible against the white popup background. */
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li:not(.menu-section-title):not(.menu-highlighted):not(.enu-highlighted) > a:hover {
    background-color: rgba(0, 109, 173, 0.1) !important;
}

/* "menu-section-title" items styled as column headings. No forced ordering here -
   keep each one at the top of its column in the WordPress menu (Appearance > Menus)
   and drag the rest below/after it as needed. */
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.menu-section-title {
    padding: 2px 10px !important;
}
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.menu-section-title > a span {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
    opacity: 0.65;
}
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.menu-section-title > a:hover,
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.menu-section-title > a:focus {
    background-color: transparent !important;
}

/* Slightly more breathing room on the regular items now the divider lines are gone */
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li:not(.menu-section-title):not(.ts-parent-menu) {
    padding: 6px 10px !important;
}

/* Highlighted item styled like the site's buttons (e.g. the header "Donate" button:
   accent background, cream text, 10px radius, 600 weight). Matches either spelling
   in case of a typo when the class was added in the WP menu. */
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.menu-highlighted,
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.enu-highlighted {
    padding: 4px 0 !important;
}
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.menu-highlighted > a,
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.enu-highlighted > a {
    display: inline-flex !important;
    align-items: center !important;
    background-color: var(--e-global-color-accent) !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    transition: filter .15s !important;
}
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.menu-highlighted > a span,
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.enu-highlighted > a span {
    color: var(--e-global-color-0c6c884) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    text-transform: none !important;
}
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.menu-highlighted > a:hover,
.elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu > li.enu-highlighted > a:hover {
    background-color: var(--e-global-color-accent) !important;
    filter: brightness(0.92) !important;
}

@media (max-width: 767px) {
    .elementor-174 .elementor-element.elementor-element-b3a6c66.ts-form {
        width: 280px !important;
    }

    .elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-field-popup-container .ts-field-popup {
        min-width: 280px !important;
    }

    .elementor-174 .elementor-element.elementor-element-b3a6c66 .ts-term-dropdown-list.sub-menu {
        column-count: 1 !important;
    }
}

/* Mobile drawer nav lives in a separate Elementor popup template (id 71359, widget
   17f6ce7 = Elementor's native "Nav Menu" widget), not the desktop dropdown above, and
   its links are flat <a class="elementor-sub-item"> with no nested <span>. Same
   menu-section-title / menu-highlighted classes carry over from the WP menu though. */
.elementor-71359 .elementor-element.elementor-element-17f6ce7 li.menu-section-title {
    border-bottom: 1px solid var(--e-a-border-color) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
}
.elementor-71359 .elementor-element.elementor-element-17f6ce7 li.menu-section-title > a.elementor-sub-item {
    pointer-events: none !important;
    cursor: default !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    opacity: 0.65 !important;
}

/* Center every submenu item's link (the anchors are display:flex, so text-align alone
   won't center them - stretch to full width and justify-content:center the text) so
   the nested "sub items" read as visually distinct from the left-aligned top-level menu. */
.elementor-71359 .elementor-element.elementor-element-17f6ce7 ul.sub-menu > li.menu-item > a.elementor-sub-item {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Same stronger hover fill as desktop */
.elementor-71359 .elementor-element.elementor-element-17f6ce7 ul.sub-menu > li.menu-item:not(.menu-section-title):not(.menu-highlighted):not(.enu-highlighted) > a.elementor-sub-item:hover {
    background-color: rgba(0, 109, 173, 0.1) !important;
}

.elementor-71359 .elementor-element.elementor-element-17f6ce7 li.menu-highlighted > a.elementor-sub-item,
.elementor-71359 .elementor-element.elementor-element-17f6ce7 li.enu-highlighted > a.elementor-sub-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: var(--e-global-color-accent) !important;
    color: var(--e-global-color-0c6c884) !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: filter .15s !important;
}
.elementor-71359 .elementor-element.elementor-element-17f6ce7 li.menu-highlighted > a.elementor-sub-item:hover,
.elementor-71359 .elementor-element.elementor-element-17f6ce7 li.enu-highlighted > a.elementor-sub-item:hover {
    filter: brightness(0.92) !important;
}
