/*
 * The top bar (2026-08-24; rebuilt as two matching buttons in Phase 8,
 * Step 8.10).
 *
 * Both halves are the same thing now: a `<details>` disclosure holding
 * a rounded button with an icon on the left, a label, and a chevron on
 * the right, collapsing to a plain icon circle on narrow screens.
 *
 * The language side used to be Polylang's own `<select>`, matched to
 * the member button first in typography (Step 8.5) and then in shape
 * (Step 8.10). **Step 8.16 stopped matching it and replaced it**, for a
 * reason no amount of CSS could fix: an `<option>` may contain text and
 * nothing else, so a `<select>` cannot show a flag, and its submenu is
 * the operating system's, not ours. Polylang still supplies the list,
 * the URLs, the active state and the flag images — only the markup is
 * ours.
 *
 * A `<details>` rather than a scripted dropdown, still: it opens on
 * click and on Enter, closes on Escape, is announced as expanded or
 * collapsed, and works with JavaScript disabled — all from the element
 * itself, with no plugin-owned JS, which is this plugin's standing
 * baseline.
 *
 * Literal colours and `--wp--preset--*` only, never `--color-*`
 * custom properties. That used to be a workaround -- they lived in the
 * child theme's `variables.css`, which was loaded nowhere
 * (implementation-issues.md item 8), so a declaration using one was
 * dropped. As of Phase 10 Step 10.12 it is simply the rule: that file
 * held an obsolete brand and has been deleted.
 */

.topbar-nav {
    display: flex;
    align-items: center;
    /* Language hard left, member area hard right (Step 8.10). The
       explicit `width` is what makes that true (Step 8.16): the block
       sits inside a header group whose own layout shrinks it to its
       contents, so `space-between` had nothing to spread and the two
       buttons ended up side by side wherever the group put them. */
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
    flex-wrap: nowrap;
}

.topbar-nav__left,
.topbar-nav__right {
    display: flex;
    align-items: center;
}

/* ---- The shared button shape ------------------------------------- */

.topbar-lang__trigger,
.topbar-user__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.25rem;
    padding: 0 0.9rem;
    border: 1px solid #cfc6bd;
    border-radius: 999px;
    background: #fff;
    color: #3e2b2f;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.topbar-lang__trigger:hover,
.topbar-user__trigger:hover,
.topbar-lang[open] .topbar-lang__trigger,
.topbar-user[open] .topbar-user__trigger {
    border-color: #5e7775;
}

.topbar-lang__trigger:focus-visible,
.topbar-user__trigger:focus-visible {
    outline: 3px solid #d0af21;
    outline-offset: 2px;
}

.topbar-lang,
.topbar-user {
    position: relative;
}

.topbar-lang__trigger,
.topbar-user__trigger {
    list-style: none;
}

/* Safari draws a disclosure triangle unless both of these are set. */
.topbar-lang__trigger::-webkit-details-marker,
.topbar-user__trigger::-webkit-details-marker {
    display: none;
}

.topbar-lang__trigger::marker,
.topbar-user__trigger::marker {
    content: '';
}

/* One chevron, drawn rather than typed: the old `▾`/`▴` characters
   rendered at whatever size and weight the font decided, and the
   `<select>` drew the browser's own, which is why the two buttons never
   quite matched. */
.topbar-lang__trigger::after,
.topbar-user__trigger::after {
    content: '';
    width: 0.4em;
    height: 0.4em;
    flex: none;
    margin-left: 0.15rem;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-0.1em, -0.1em);
    transition: transform 0.15s ease;
}

.topbar-lang[open] .topbar-lang__trigger::after,
.topbar-user[open] .topbar-user__trigger::after {
    transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.topbar-user__icon,
.topbar-lang__flag {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: #5e7775;
}

/*
 * Polylang's flag is a small `<img>`, sized so it lines up with the
 * member button's 18px icon rather than at whatever intrinsic size the
 * file happens to be.
 *
 * **Sized on the container, not the image (fixed 2026-10-20).**
 * Polylang 3.9 replaced its base64 PNG flags with inline-SVG data URIs
 * and, with them, started emitting its own
 * `style="display:block;object-fit:cover;...;width:100%;height:100%"`
 * on the tag. An inline style outranks any stylesheet selector, so the
 * `width: 18px` that used to live on `.topbar-lang__flag img` stopped
 * applying; the percentages then resolved against a container that had
 * no size of its own, and each flag fell back to the SVG's intrinsic
 * 900x600 and covered the page.
 *
 * Giving the container definite dimensions is what Polylang's own
 * inline style is written for -- `width`/`height: 100%` and
 * `object-fit: cover` only mean anything inside a box that has a size.
 * 18x12 is the 3:2 every flag it ships uses, and the `width`/`height`
 * attributes it puts on the tag. `overflow: hidden` is the backstop:
 * if a later version drops the inline style again, the flag is clipped
 * to the box instead of taking over the page.
 */
.topbar-lang__flag {
    width: 18px;
    height: 12px;
    overflow: hidden;
}

.topbar-lang__flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topbar-lang__name,
.topbar-user__name {
    font-weight: 400;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- The submenu ------------------------------------------------- */

.topbar-lang__menu,
.topbar-user__menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;
    min-width: 12rem;
    margin: 0.4rem 0 0;
    padding: 0.35rem;
    list-style: none;
    background: #fff;
    border: 1px solid #cfc6bd;
    /* Rounded like the button it hangs from, rather than the 6px box it
       used to be. */
    border-radius: 1rem;
    box-shadow: 0 6px 18px rgba(62, 43, 47, 0.14);
}

/* The language menu hangs from a left-aligned button, so it opens
   leftwards; the member menu is right-aligned and opens rightwards. */
.topbar-lang__menu {
    right: auto;
    left: 0;
}

.topbar-lang__menu li,
.topbar-user__menu li {
    margin: 0;
}

.topbar-lang__menu a,
.topbar-user__menu a {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    color: #3e2b2f;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    white-space: nowrap;
}

.topbar-lang__menu a:hover,
.topbar-lang__menu a:focus-visible,
.topbar-user__menu a:hover,
.topbar-user__menu a:focus-visible {
    background: #eef1f0;
    color: #3e2b2f;
}

.topbar-user__separator {
    border-top: 1px solid #f0ebe4;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
}

/* ---- Narrow screens ---------------------------------------------- */

/*
 * **Nothing here re-justifies the bar, deliberately.** `.topbar-nav`
 * above is `space-between` at every width: the language switcher is at
 * the left edge and the member area at the right edge on a phone
 * exactly as on a desktop.
 *
 * There *was* a `justify-content: flex-end` here, pushing both to the
 * right below 768px. Its stated reason was "matching the desktop
 * layout", which was true when it was written (Phase 5 QA round 4) and
 * stopped being true in Phase 10: Step 10.17 put the row level with the
 * logo with the two halves at opposite ends, so from then on this rule
 * made narrow screens the odd one out rather than the consistent one.
 * Removed at the project owner's request, 2026-09-01.
 *
 * It is worth knowing how it survived that long: it spent from Phase 5
 * until Step 10.12 in the child theme's `responsive.css`, which was
 * never loaded, so it had never applied to anything. It became live and
 * became wrong in the same phase, a few steps apart, and the note
 * warning that the narrow layout would change was written before the
 * change that made the new layout the wrong one.
 *
 * The same block also carried `.topbar-nav__right a { margin-left:
 * 0.75rem }`, from when that group held two plain links. Since Step
 * 8.10 it holds a `<details>` button whose only `<a>` elements are the
 * submenu's items, so the rule had been indenting every entry of the
 * member menu on narrow screens. Gone with it.
 */

/* ---- Narrow screens: icon only ----------------------------------- */

@media (max-width: 600px) {
    /*
     * Both buttons become a circle holding just their icon — the flag
     * on one, the person on the other. Each label is hidden rather than
     * removed, so a screen reader still reads the language and who is
     * signed in.
     */
    .topbar-lang__trigger,
    .topbar-user__trigger {
        width: 2.25rem;
        padding: 0;
        justify-content: center;
        overflow: hidden;
    }

    .topbar-lang__name,
    .topbar-user__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .topbar-lang__trigger::after,
    .topbar-user__trigger::after {
        display: none;
    }

    /* Anchored to the viewport edge rather than the trigger, so a 12rem
       menu can't push the page sideways on a narrow screen — each to
       the edge its own button sits at. */
    .topbar-lang__menu,
    .topbar-user__menu {
        position: fixed;
        top: auto;
        min-width: min(12rem, calc(100vw - 1rem));
    }

    .topbar-lang__menu {
        left: 0.5rem;
        right: auto;
    }

    .topbar-user__menu {
        right: 0.5rem;
        left: auto;
    }
}