/**
 * GTranslate compact language list (top 9 + selected + show more).
 * hello-ymca-gtranslate-customizations/
 */
.gtranslate_wrapper .gt-hidden-lang {
    display: none !important;
}

.gtranslate_wrapper .gt-toggle {
    background-color: #3886CE;
    font-family: "CachetPro-Medium", Verdana;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    fill: #FFFFFF;
    color: #FFFFFF;
    border-radius: 3px 3px 3px 3px;
    padding: 12px 15px 12px 15px;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.gtranslate_wrapper .gt-toggle:hover,
.gtranslate_wrapper .gt-toggle:focus,
.gtranslate_wrapper .gt-toggle:active {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

/*
 * Elementor mega menu: the scrollable panel is #e-n-menu-content-* (often e-flex).
 * Flex items default to min-height: auto, so the panel grows with new content instead of
 * staying within the fixed height and scrolling — until a resize reflows. min-height: 0
 * restores normal overflow scrolling (same fix as nested flex scroll regions).
 */
.e-n-menu-content [id^="e-n-menu-content-"] {
    min-height: 0;
    flex-shrink: 1;
}

.e-n-menu-content [id^="e-n-menu-content-"] > .e-con-inner {
    min-height: 0;
}

/*
 * Desktop: language dropdown shrinks to the longest label (not ~100% / stretch width).
 * Elementor nests .e-con / widgets that default to full width — override the whole chain.
 *
 * Anchor under the globe: `.e-n-menu-content` is position:absolute; without a positioned
 * parent, it uses a wide ancestor (e.g. menu wrapper), so `left:0` hugged the viewport left.
 * `position:relative` on this `li` makes the dropdown position relative to the menu item.
 * Mobile: leave Elementor’s full-width stretch (no rules below this breakpoint).
 */
@media (min-width: 768px) {
    .elementor-widget-n-menu .e-n-menu-heading > .e-n-menu-item:has(.gtranslate_wrapper) {
        position: relative !important;
    }

    .elementor-widget-n-menu .e-n-menu-item:has(.gtranslate_wrapper) .e-n-menu-content {
        left: 0 !important;
        right: auto !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        transform: none !important;
        width: max-content !important;
        max-width: min(100vw - 32px, 100%) !important;
    }

    .elementor-widget-n-menu .e-n-menu-item:has(.gtranslate_wrapper) .e-n-menu-content > [id^="e-n-menu-content-"] {
        width: max-content !important;
        max-width: none !important;
        min-width: 0 !important;
        --width: max-content !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
        align-self: flex-start !important;
    }

    .elementor-widget-n-menu .e-n-menu-item:has(.gtranslate_wrapper) .e-n-menu-content .e-con-inner {
        width: max-content !important;
        max-width: none !important;
    }

    .elementor-widget-n-menu .e-n-menu-item:has(.gtranslate_wrapper) .e-n-menu-content .elementor-widget,
    .elementor-widget-n-menu .e-n-menu-item:has(.gtranslate_wrapper) .e-n-menu-content .elementor-widget-container,
    .elementor-widget-n-menu .e-n-menu-item:has(.gtranslate_wrapper) .e-n-menu-content .elementor-shortcode,
    .elementor-widget-n-menu .e-n-menu-item:has(.gtranslate_wrapper) .e-n-menu-content .elementor-element {
        width: max-content !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .elementor-widget-n-menu .e-n-menu-item:has(.gtranslate_wrapper) .gtranslate_wrapper {
        display: inline-block !important;
        width: max-content !important;
        max-width: none !important;
        vertical-align: top;
    }

    .elementor-widget-n-menu .e-n-menu-item:has(.gtranslate_wrapper) .gtranslate_wrapper a.glink {
        display: block;
        white-space: nowrap;
    }
}