/**
 * @file
 * Language switcher (dropdown_language block, rendered as a core dropbutton).
 *
 * See stuff/language-dropdown-system.md for the system this implements.
 *
 * WHAT ALREADY EXISTS AND IS NOT REPEATED HERE
 * --------------------------------------------
 * The block ships as `#type => dropbutton`, so Drupal loads core/drupal.dropbutton
 * for free. Its JS turns the flat <ul> into the documented structure
 * (.dropbutton-multiple on the wrapper, .dropbutton-action / .secondary-action on
 * the items, an injected .dropbutton-toggle button) and its own delegated click
 * handler toggles `.open`. Core's CSS (stable9 dropbutton.css) supplies the
 * layout skeleton.
 *
 * So neither the markup from §1 of the brief nor the toggle half of the jQuery
 * in §2 needs re-implementing — adding the brief's toggle handler on top of
 * core's would fire twice per click and cancel itself out. js/navigation/
 * language-switcher.js only adds what core is missing: close-on-outside-click,
 * close-on-Escape, aria-expanded, a clickable label, and moving the secondary
 * actions into a real panel element (see below).
 *
 * This file is the theming layer: it overrides the admin-grey chrome that
 * themes/contrib/bootstrap5/css/components/dropbutton.css paints (a white box
 * with a #ccc border — invisible white-on-white against the dark utility bar)
 * and restyles the switcher as a member of the utility strip.
 *
 * DESIGN
 * ------
 * Closed state matches .utility-link / .utility-search-trigger in
 * navigation/header.css exactly: 13px, 500, 0.03em, rgba(255,255,255,0.85),
 * 4px 10px padding, 4px radius, white 12% hover wash. The caret is the same
 * chevron glyph the main nav uses (menu--main.html.twig), drawn as a mask so it
 * inherits currentColor, and it rotates 180deg on open like .nav-link .chev.
 *
 * Open state matches the mega-menu panels: white surface, soft shadow, items
 * that go var(--phi-secondary) / var(--phi-orange) on hover. A dark panel was
 * the other option, but it would have hung over .main-header — which is the
 * same near-black — and disappeared into it.
 *
 * Tokens come from global.css. Nothing is redeclared here.
 */

/* ---------------------------------------------------------------------------
 * RESET — undo the admin chrome
 * ------------------------------------------------------------------------ */

/* The wrapper is a flex item in .region-header-top, so it must size to its
   content. Core sets `width: 100%` under 600px for form actions; here that
   would blow the utility bar apart. */
.js .block-dropdown-language .dropbutton-wrapper {
    position: relative;
    /* Block-level flex, NOT inline-flex. An inline-level box inside the block's
       .content div sits on a text baseline, and the line box adds a couple of
       pixels of descender space beneath it — enough to make the block 29px tall
       against the search trigger's 26px and lift the label off the shared
       baseline. The block's own `display: flex` still sizes this to content. */
    display: flex;
    width: auto;
    align-items: center;
}

/* Core raises the open dropbutton to `z-index: 100`, which — because the
   wrapper is also positioned — makes it a STACKING CONTEXT. Any z-index on the
   panel inside is then resolved within that context, so the panel was sitting
   behind .main-header (z-index 1005) no matter how high its own value went.
   The number that actually has to clear the header is this one. Kept below the
   search overlay's 2000. */
.js .block-dropdown-language .dropbutton-wrapper.open {
    z-index: 1010;
}

/* bootstrap5's dropbutton.css puts a 1px #ccc border and a white background on
   the widget. That is the white box currently sitting in the dark strip. */
.js .block-dropdown-language .dropbutton-widget,
.js .block-dropdown-language .dropbutton-widget:hover {
    border: 0;
    background: none;
}

/* Core reserves 2em on the right for the toggle, at `.js .dropbutton-multiple
   .dropbutton-widget`. Matching that selector class-for-class and adding one
   more is what makes this stick regardless of which of the two component
   stylesheets the aggregator emits first. 26px holds a 9px chevron plus the
   pill's own 10px right padding. */
.js .block-dropdown-language .dropbutton-multiple .dropbutton-widget {
    padding: 4px 26px 4px 10px;
}

/* The pill itself. Everything visible in the closed state — label, caret,
   hover wash — belongs to the widget, so the hit area and the wash are one
   rectangle rather than a label with a detached arrow next to it. */
.js .block-dropdown-language .dropbutton-widget {
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
    /* Shared with the Knowledge Center button and the search trigger — see
       --utility-font-size in navigation/header.css, which also owns the step
       down at 650px. The fallback is only reached if this block is ever placed
       outside the utility bar. */
    font-size: var(--utility-font-size, 0.8125rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.js .block-dropdown-language .dropbutton-wrapper:hover .dropbutton-widget,
.js .block-dropdown-language .dropbutton-wrapper.open .dropbutton-widget {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* bootstrap5 pads every action's child twice over — once in its dropbutton
   component file (0.1em 0.5em) and again in style.css, which is in the `theme`
   group and so loads after everything here. Specificity is what settles it, not
   order: this needs to out-rank `.dropbutton-widget .dropbutton
   .dropbutton-action > *`, hence the four classes. Left unhandled it makes the
   pill 38px tall in a 50px bar. */
.block-dropdown-language .dropbutton-widget .dropbutton .dropbutton-action > * {
    padding: 0;
}
.block-dropdown-language .dropbutton .secondary-action,
.block-dropdown-language .dropbutton-multiple .dropbutton {
    border: 0;
}
.block-dropdown-language .dropbutton-multiple .dropbutton .dropbutton-action > * {
    margin-right: 0;
}

/* ---------------------------------------------------------------------------
 * CLOSED STATE — the active language
 * ------------------------------------------------------------------------ */

.js .block-dropdown-language .dropbutton-widget .dropbutton {
    /* Core sets overflow:hidden. Nothing overflows now that the other
       languages live in .lang-menu, but a clipped box would still cut the
       focus ring off the label. */
    overflow: visible;
    /* Flex, not the default block-and-line-boxes. The label is an inline-flex
       span, so in a line box it is aligned on ITS baseline and the line grows
       ~2px of descender space underneath — which made the pill 28px against
       the search trigger's 26px and lifted the label off the shared centre
       line. As flex items there is no baseline to sit on and the box is just
       padding + text. The toggle is absolutely positioned and so unaffected. */
    display: flex;
    align-items: center;
}
.js .block-dropdown-language .dropbutton-widget .dropbutton-action {
    display: flex;
    align-items: center;
}

/* The closed pill shows the language CODE — EN, TH, and JA/ID as they are
   added — while the menu keeps the full native name. The relabelling is done in
   phi_preprocess_links__dropbutton__dropdown_language(); this is just its type.
   A touch more weight and tracking than the neighbouring labels, because two
   capitals at 13px otherwise read as an abbreviation someone forgot to finish
   rather than a deliberate code. */
.block-dropdown-language .active-language {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: inherit;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* Globe, so the control reads as a language control at a glance and matches
   the icon-plus-label shape of the Search trigger beside it. Drawn as a mask
   rather than an <img> so it takes the same currentColor as the label. */
.block-dropdown-language .active-language::before {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------------------------------------------------------------------------
 * THE CARET
 *
 * Core draws a triangle out of borders on a zero-size span. The rest of this
 * header uses a stroked chevron (menu--main.html.twig), so the borders are
 * zeroed and the same chevron is masked in instead — one glyph across the
 * whole header, and it inherits the label's colour on hover for free.
 * ------------------------------------------------------------------------ */

.block-dropdown-language .dropbutton-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 26px;
    /* Core hides the toggle's text with `text-indent: 110%`, which needs the
       button to stay in the flow of its own line box; keep it. */
}
.block-dropdown-language .dropbutton-toggle button {
    display: flex;
    align-items: center;
    /* Pushed to the right edge, then held off it by the pill's own 10px, so
       the chevron lines up with the label's left inset. */
    justify-content: flex-end;
    padding: 0 10px 0 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: inherit;
    /* Core hides the toggle label with `text-indent: 110%` on the <li>; that
       inherits down and would drag the chevron's mask box sideways. The label
       is a .visually-hidden span, so it is already out of sight without it. */
    text-indent: 0;
}
.block-dropdown-language .dropbutton-arrow {
    position: static;
    width: 9px;
    height: 9px;
    margin: 0;
    border: 0;
    background-color: currentColor;
    transition: transform 0.25s var(--ease);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Core's own open-state rule re-adds a border to flip the triangle; there is
   no triangle any more, so it is cancelled and the mask is rotated instead. */
.block-dropdown-language .dropbutton-multiple.open .dropbutton-arrow {
    top: auto;
    border: 0;
    transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
 * THE PANEL
 *
 * .lang-menu is built by language-switcher.js, which moves the
 * .secondary-action items out of the dropbutton's own <ul> into a sibling one.
 * That is the only structural change, and it exists so the group can carry a
 * single surface — background, radius and shadow — instead of every language
 * having to paint its own and hope the seams line up. It also sidesteps core's
 * `overflow: hidden` on the dropbutton list.
 *
 * Visibility is driven from `.open` on the wrapper, exactly as the brief
 * describes; core's `.secondary-action { display: none }` no longer applies,
 * because these items are no longer inside `.dropbutton`.
 * ------------------------------------------------------------------------ */

.block-dropdown-language .lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    /* Local to the wrapper's stacking context — see the .open rule above. */
    z-index: 1;
    min-width: 100%;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 8px;
    background: var(--white);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    /* Closed by default, and hidden from assistive tech and tab order with it.
       Animated rather than display-toggled so the panel does not snap in. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.block-dropdown-language .dropbutton-wrapper.open .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Bridges the 8px gap between pill and panel. Core closes the menu 500ms after
   the pointer leaves the wrapper, and the gap counts as leaving it. */
.block-dropdown-language .lang-menu::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 8px;
}
.block-dropdown-language .lang-menu li {
    margin: 0;
    list-style: none;
}
.block-dropdown-language .lang-menu .language-link {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--phi-gray-800);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.block-dropdown-language .lang-menu .language-link:hover,
.block-dropdown-language .lang-menu .language-link:focus {
    background: var(--phi-secondary);
    color: var(--phi-orange);
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * FOCUS
 *
 * The utility bar's focus treatment is an orange outline (see
 * .utility-link:focus-visible in header.css). Matched here so the switcher is
 * keyboard-reachable in the same visual language.
 * ------------------------------------------------------------------------ */

.block-dropdown-language .dropbutton-toggle button:focus-visible,
.block-dropdown-language .lang-menu .language-link:focus-visible {
    outline: 2px solid var(--phi-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * NARROW SCREENS
 *
 * The type size steps down with the rest of the strip via
 * --utility-font-size (navigation/header.css), so only this control's own
 * spacing and icon sizes are here. The panel keeps its full-size type — it is
 * a menu, not part of the strip, and shrinking it would only make the language
 * names harder to read on the device where that matters most.
 * ------------------------------------------------------------------------ */

@media (max-width: 650px) {
    .js .block-dropdown-language .dropbutton-multiple .dropbutton-widget {
        padding: 4px 22px 4px 8px;
    }
    .block-dropdown-language .dropbutton-toggle {
        width: 22px;
    }
    .block-dropdown-language .dropbutton-toggle button {
        padding-right: 8px;
    }
    .block-dropdown-language .active-language::before {
        width: 11px;
        height: 11px;
    }
}

/* Motion preference — the caret rotation and the panel's slide are decoration. */
@media (prefers-reduced-motion: reduce) {
    .block-dropdown-language .dropbutton-arrow,
    .block-dropdown-language .lang-menu {
        transition: none;
    }
    .block-dropdown-language .lang-menu {
        transform: none;
    }
}