/* Language switcher in the site nav.

   Zero JavaScript: it is a <details>/<summary> disclosure, so it cannot be
   broken by the Bootstrap 4/5 data-api conflict this app carries. */

.lang-switch {
    position: relative;
    /* inline-FLEX, not inline-block: the switcher sits in a flex row beside
       the Sign Up / Log In buttons, so the wrapper stretches to their 40px
       height -- but an inline-block wrapper does not pass that height down,
       which left the visible pill 33px tall and sitting 3px high against
       buttons it is supposed to line up with. */
    display: inline-flex;
    align-items: center;
    /* Breathing room before the Sign Up / Log In buttons, which sit
       immediately after this in all three headers. */
    margin-right: 22px;
}

.lang-switch__current {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Match the header CTA height so the three controls read as one row. */
    min-height: 40px;
    box-sizing: border-box;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--ui-gray-hex, #D1D5DB);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--core-1-hex, #19284A);
    background: #fff;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}

.lang-switch__current::-webkit-details-marker { display: none; }
.lang-switch__current::marker { content: ""; }

.lang-switch__current:hover,
.lang-switch[open] .lang-switch__current {
    border-color: var(--core-2-hex, #FF6B2C);
    background: #fff7f3;
}

.lang-switch__current::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: 2px;
}

.lang-switch[open] .lang-switch__current::after { transform: rotate(180deg); }

/* The trigger shows the CURRENT language's flag, so a visitor can see which
   language they are in without opening the menu. */
.lang-switch__current .lang-switch__flag { margin-right: 2px; }

.lang-switch__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    min-width: 150px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--ui-gray-hex, #D1D5DB);
    border-radius: 10px;
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1));
}

.lang-switch__option {
    /* FLEX, not block: the row is now code-chip + name + check mark, and the
       three have to share a baseline. */
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--core-1-hex, #19284A);
    text-decoration: none;
    white-space: nowrap;
}

/* Inline SVG flag. Sized in px rather than em so it cannot grow with an
   inherited font-size and break the row height the header CTAs set. */
.lang-switch__flag {
    /* flex-basis pins the width so both flags are identical and the two
       language names line up underneath each other. */
    flex: 0 0 21px;
    width: 21px;
    height: 14px;
    display: block;
    border-radius: 2px;
    /* A 1px inset ring rather than a real border: the US flag's outer stripe
       is white, so on the white menu ground the flag would otherwise bleed
       into the background and read as a floating blue square. */
    box-shadow: inset 0 0 0 1px rgba(25, 40, 74, .18);
}

.lang-switch__option.is-active .lang-switch__flag {
    box-shadow: inset 0 0 0 1px rgba(25, 40, 74, .18),
                0 0 0 2px var(--core-2-hex, #FF6B2C);
}

.lang-switch__option:hover {
    background: var(--light-bg-hex, #F3F3F3);
    color: var(--core-1-hex, #19284A);
    text-decoration: none;
}

.lang-switch__option.is-active {
    font-weight: 700;
    color: var(--core-2-hex, #FF6B2C);
}

.lang-switch__option.is-active::after {
    content: "\2713";
    /* Pushed to the far edge rather than trailing the word: in a flex row a
       check tight against "Espanol" reads as part of the name. */
    margin-left: auto;
    padding-left: 10px;
}

@media (max-width: 767px) {
    .lang-switch { margin-right: 12px; }
    .lang-switch__label { display: none; }
    .lang-switch__current { padding: 8px 10px; }

    /* ...except in the off-canvas panel, where there is room and hiding it
       leaves an unlabelled flag. A flag is a picture of a country, not the
       name of a language -- and the Mexican tricolour at 14px is a few pixels
       away from Italy's, which is why the SVG carries an emblem hint at all.
       A control that changes the language of the whole site should say so. */
    .offcanvas__lang .lang-switch__label { display: inline; }
    .offcanvas__lang .lang-switch { margin-right: 0; }
}

/* Governing-language notice on the legal pages under /es/. */
.es-legal-notice {
    max-width: 1100px;
    margin: 16px auto;
    padding: 14px 18px;
    border: 1px solid var(--warning-hex, #CC9900);
    border-left-width: 5px;
    border-radius: 8px;
    background: #fffaf0;
    color: var(--core-1-hex, #19284A);
    font-size: 15px;
    line-height: 1.55;
}

.es-legal-notice a { color: var(--core-2-hex, #FF6B2C); text-decoration: underline; }

/* Header CTAs must never wrap.

   These buttons were sized for "Sign Up" / "Log In". Spanish needs "Crear
   cuenta" / "Iniciar sesión", which wrapped to two lines and doubled the
   header height (93px wide, 64px tall, only ~45px of that usable after 48px
   of horizontal padding). Scoped to .header-acttion-btns -- the same wrapper
   in all three customer headers -- because btn-tertiary/bg-gradient-* are
   also used on the 404 page, the auction page and the inventory cards, where
   wrapping is fine. A nav CTA should not wrap in any language. */
.header-acttion-btns .btn {
    white-space: nowrap;
}

/* ...but NOT in the mobile off-canvas, which reuses the same wrapper class.
   The comment above says "all three customer headers" and that was wrong:
   mobile-menu.html is a FOURTH place using .header-acttion-btns. There the
   buttons are d-block and span the panel, so nowrap cannot shrink them and the
   longer Spanish labels ran off the right edge instead of wrapping. Reported
   from a phone.

   The nav-CTA argument does not apply here. That rule exists so a horizontal
   bar does not double in height; this is a stacked menu, where a button
   wrapping to two lines costs nothing. */
.offcanvas__area .header-acttion-btns .btn {
    white-space: normal;
}

/* Inside the mobile off-canvas the dropdown lays out IN FLOW rather than
   floating. The menu is position:absolute so it can escape its container --
   which is what you want under a header and exactly what you do not want in a
   scrolling panel, where an ancestor's overflow can clip it away to nothing.
   Static positioning cannot be clipped; <details> still opens and closes. */
.offcanvas__lang {
    padding: 0 25px;
}

/* The menu's <ul> carries a pt-35 utility class -- 35px of breathing room that
   made sense while nothing sat above it. With the switcher there it compounds
   into a gap big enough to read as a rendering fault, which is how it was
   reported. Adjacent-sibling selector so the padding is only reduced on the
   panel that actually has a switcher above it; a page with no translation
   renders no switcher and keeps the original spacing. */
.offcanvas__lang + .mobile-menu > ul {
    padding-top: 14px;
}

.offcanvas__lang .lang-switch__menu {
    position: static;
    box-shadow: none;
    border: 0;
    margin-top: 6px;
    min-width: 0;
}