/**
 * SITE-CORE-6A — BBUI Language Navigation frontend slice.
 * Reference implementation: ByBamboo Connect BBUI Dropdown + Language Selector.
 * Only the shared component contract required by public language navigation is shipped here.
 */
:root {
    --bbui-color-background: #ffffff;
    --bbui-color-surface: #f6f7f7;
    --bbui-color-border: #c3c4c7;
    --bbui-color-text: #1d2327;
    --bbui-color-muted: #646970;
    --bbui-color-primary: #2271b1;
    --bbui-radius-small: 3px;
    --bbui-radius-medium: 6px;
    --bbui-space-2: 8px;
    --bbui-space-3: 12px;
    --bbui-shadow-md: 0 10px 28px rgba(23, 32, 51, 0.09);
    --bbui-transition: 160ms ease;
}

.bbui-language-navigation { display: inline-block; max-width: 100%; }

.bbui-control-width.bbui-control-width--compact {
    width: max-content;
    min-width: 120px;
}

.bbui-control-width.bbui-control-width--medium {
    width: max-content;
    min-width: 180px;
}

.bbui-control-width.bbui-control-width--wide {
    width: max-content;
    min-width: 260px;
}

.bbui-control-width.bbui-control-width--extra-wide {
    width: max-content;
    min-width: 360px;
}

.bbui-control-width.bbui-control-width--full {
    width: 100%;
}

.bbui-control-width.bbui-dropdown,
.bbui-control-width .bbui-dropdown {
    max-width: 100%;
}

@media screen and (max-width: 782px) {
    .bbui-control-width.bbui-control-width--compact,
    .bbui-control-width.bbui-control-width--medium,
    .bbui-control-width.bbui-control-width--wide,
    .bbui-control-width.bbui-control-width--extra-wide {
        width: 100%;
        min-width: 0;
    }
}


.bbui-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

.bbui-dropdown > summary {
    list-style: none;
}

.bbui-dropdown > summary::-webkit-details-marker {
    display: none;
}

.bbui-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bbui-space-3, 12px);

    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding:
        8px
        12px;

    color: var(--bbui-color-text);
    background: var(--bbui-color-background);
    border: 1px solid var(--bbui-color-border);
    border-radius: var(--bbui-radius-medium, 6px);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;

    cursor: pointer;
    user-select: none;

    transition:
        border-color var(--bbui-transition),
        box-shadow 200ms cubic-bezier(.2,.8,.2,1);
}

.bbui-dropdown__trigger:hover {
    border-color: var(--bbui-color-primary);
}

.bbui-dropdown__trigger:focus,
.bbui-dropdown__trigger:focus-visible {
    outline: 0;
    border-color: var(--bbui-color-primary);
    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--bbui-color-primary) 18%,
            transparent
        );
}

.bbui-dropdown__trigger-content {
    display: flex;
    align-items: center;
    min-width: 0;
}

/*
 * Action-style Dropdown triggers reuse the canonical BBUI Button contract.
 * The Dropdown remains a <summary>; these overrides only align its geometry
 * and typography with standard admin actions when the component explicitly
 * opts into a semantic trigger variant.
 */
.bbui-dropdown__trigger.bbui-button {
    width: auto;
    min-height: 30px;
    padding:
        var(--bbui-button-padding-y, 4px)
        var(--bbui-button-padding-x, 12px);
    color:
        var(--bbui-button-text-color, var(--bbui-color-text));
    background:
        var(--bbui-button-background-color, var(--bbui-color-background));
    border-color:
        var(--bbui-button-border-color, var(--bbui-color-border));
    font-family:
        var(--bbui-button-font-family, inherit);
    font-size:
        var(--bbui-button-font-size, 13px);
    font-weight:
        var(--bbui-button-font-weight, 400);
    line-height: 2;
}


.bbui-dropdown__chevron {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--bbui-color-muted);
    font-size: 18px;
    line-height: 18px;

    transition:
        transform 200ms cubic-bezier(.2,.8,.2,1);
}

.bbui-dropdown[open]
.bbui-dropdown__chevron {
    transform: rotate(180deg);
}

.bbui-dropdown__menu {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 8px);
    left: 0;

    box-sizing: border-box;
    width: max-content;
    min-width: 100%;
    max-width: min(420px, calc(100vw - 48px));
    max-height: 320px;
    overflow: auto;

    padding: var(--bbui-space-2, 8px);

    background: var(--bbui-color-background);
    border: 1px solid var(--bbui-color-border);
    border-radius: var(--bbui-radius-medium, 6px);
    box-shadow: var(--bbui-shadow-md);
}

.bbui-dropdown--align-end
.bbui-dropdown__menu {
    right: 0;
    left: auto;
}


/*
 * BBUI Dropdown automatic vertical placement.
 * The Dropdown Engine adds this state when bottom placement would collide
 * with the viewport or another BBUI floating surface.
 */
.bbui-dropdown--placement-top
.bbui-dropdown__menu {
    top: auto;
    bottom: calc(100% + 8px);
}

.bbui-dropdown__menu-title {
    padding:
        var(--bbui-space-2, 8px)
        var(--bbui-space-3, 12px);

    color: var(--bbui-color-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bbui-dropdown__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bbui-dropdown__list-item {
    margin: 0;
}

.bbui-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--bbui-space-2, 8px);

    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding:
        8px
        10px;

    color: var(--bbui-color-text);
    background: transparent;
    border: 0;
    border-radius: var(--bbui-radius-small, 3px);

    font: inherit;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;

    cursor: pointer;
}

.bbui-dropdown__item:hover,
.bbui-dropdown__item:focus {
    outline: 0;
    color: var(--bbui-color-primary);
    background:
        color-mix(
            in srgb,
            var(--bbui-color-primary) 9%,
            var(--bbui-color-background)
        );
}

.bbui-dropdown__list-item.is-current
.bbui-dropdown__item {
    color: var(--bbui-color-primary);
    background: transparent;
    font-weight: 600;
}

.bbui-dropdown__list-item.is-current
.bbui-dropdown__item:hover,
.bbui-dropdown__list-item.is-current
.bbui-dropdown__item:focus {
    background:
        color-mix(
            in srgb,
            var(--bbui-color-primary) 9%,
            var(--bbui-color-background)
        );
}

.bbui-dropdown__list-item.is-disabled
.bbui-dropdown__item {
    color: var(--bbui-color-muted);
    cursor: not-allowed;
    opacity: 0.65;
}

.bbui-dropdown__leading {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.bbui-dropdown__item-label {
    flex: 1 1 auto;
    min-width: 0;
}

.bbui-dropdown__item-meta {
    flex: 0 0 auto;
    color: var(--bbui-color-muted);
    font-size: 11px;
}

.bbui-dropdown__empty {
    margin: 0;
    padding: var(--bbui-space-3, 12px);
    color: var(--bbui-color-muted);
}

/* ==========================================================
   LANGUAGE SELECTOR — DROPDOWN ADAPTER
   ========================================================== */

.bbui-language-selector {
    display: block;
    width: min(100%, 420px);
    max-width: 100%;
}

.bbui-language-selector__input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.bbui-language-selector__selected,
.bbui-language-selector__selected-label {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.bbui-language-selector__selected {
    gap: var(--bbui-space-2, 8px);
}

.bbui-language-selector__selected.is-placeholder {
    color: var(--bbui-color-muted);
}

.bbui-language-selector__flag {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    font-size: 18px;
    line-height: 1;
}

@media screen and (max-width: 782px) {
    .bbui-language-selector {
        width: 100%;
    }

    .bbui-dropdown__trigger {
        min-height: 44px;
        font-size: 16px;
    }

    .bbui-dropdown__menu {
        width: 100%;
        max-width: 100%;
    }
}




/* SITE-CORE-6A.1 — public language menu alignment. */
.bbui-language-navigation .bbui-dropdown__leading {
    width: 24px;
    justify-content: flex-start;
}

.bbui-language-navigation .bbui-dropdown__leading .bbui-language-selector__flag {
    width: 24px;
    min-width: 24px;
    justify-content: flex-start;
}

/* SITE-CORE-6A.3 — compact public language navigation preset.
 * Keep the BBUI Dropdown engine, but remove admin-oriented surface sizing
 * and theme list spacing from this public navigation variant only.
 */
.bbui-language-navigation .bbui-dropdown__menu {
    width: max-content;
    min-width: 0;
    max-width: min(320px, calc(100vw - 24px));
    padding: 2px;
}

.bbui-language-navigation .bbui-dropdown__list {
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 0;
}

.bbui-language-navigation .bbui-dropdown__list-item {
    width: 100%;
    margin: 0;
    padding: 0;
}

.bbui-language-navigation .bbui-dropdown__item {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
}

@media screen and (max-width: 782px) {
    .bbui-language-navigation .bbui-dropdown__menu {
        width: max-content;
        min-width: 0;
        max-width: calc(100vw - 24px);
    }
}

/* SITE-CORE-6A.4 — one shared, content-driven width for trigger + menu.
 * The value is measured by the public Language Navigation adapter because
 * the absolutely positioned BBUI menu does not participate in intrinsic
 * sizing of the <details> trigger container.
 */
.bbui-language-navigation__dropdown {
    width: var(--bbui-language-navigation-width, max-content);
}

.bbui-language-navigation__dropdown > .bbui-dropdown__trigger,
.bbui-language-navigation__dropdown > .bbui-dropdown__menu {
    width: var(--bbui-language-navigation-width, max-content);
}

/* SITE-CORE-6A.6 — typography parity inside public language navigation.
 * Font family remains inherited from the active site/Astra typography.
 * Trigger and menu items use the same UI font size.
 */
.bbui-language-navigation .bbui-dropdown__trigger,
.bbui-language-navigation .bbui-dropdown__item {
    font-size: 14px;
}