/* The language picker.
 *
 * A <details> element, so it opens, closes and takes keyboard focus with no
 * JavaScript at all. The only script involved is the one line in page.js that
 * closes it on an outside click, which is a convenience, not a requirement.
 *
 * Sized to sit level with the theme switch beside it: 28px tall, pill shaped,
 * same border colours in both themes. */

.lang-picker {
  position: relative;
  flex: 0 0 auto;
  /* The rule drawn by .header-actions::before now separates the nav from the
     controls, so the picker no longer has to hold that gap open by itself. */
  margin-left: 0;
}

.lang-picker > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #d3d2cf;
  border-radius: 999px;
  background: transparent;
  color: #171718;
  font: 600 11px/1 var(--display, inherit);
  letter-spacing: 0.08em;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.25s, color 0.25s;
  /* The row is 44px tall for touch while the pill itself stays 28px. */
  margin: 8px 0;
}

/* Safari draws its own triangle unless both of these are removed. */
.lang-picker > summary::-webkit-details-marker { display: none; }
.lang-picker > summary::marker { content: ""; }

.lang-picker > summary:hover,
.lang-picker[open] > summary {
  border-color: var(--red, #e30613);
  color: var(--red, #e30613);
}

.lang-picker > summary:focus-visible {
  outline: 2px solid var(--red, #e30613);
  outline-offset: 2px;
}

/* Sized in px rather than em: it sits beside a 11px letter-spaced label, and
   scaling with that font makes it too small to read as a globe. */
.lang-globe {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  display: block;
  overflow: visible;
}
.lang-picker > summary b { font-weight: 700; }

.lang-picker ul {
  position: absolute;
  right: 0;
  top: calc(100% - 4px);
  z-index: 40;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #d3d2cf;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}

.lang-picker li { margin: 0; }

.lang-picker ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* 44px of target, which is the minimum that is comfortable on a phone. */
  min-height: 44px;
  padding: 0 12px;
  color: #171718;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.18s, color 0.18s;
}

.lang-picker ul a span {
  font: 600 10px/1 var(--display, inherit);
  letter-spacing: 0.1em;
  color: #8a8a87;
}

.lang-picker ul a:hover { background: #f3f2ef; color: var(--red, #e30613); }
.lang-picker ul a:hover span { color: var(--red, #e30613); }

/* The language being read: marked for everyone, not only for a screen reader. */
.lang-picker ul a[aria-current] { color: var(--red, #e30613); font-weight: 600; }
.lang-picker ul a[aria-current] span { color: var(--red, #e30613); }

/* The header's sign-in link and quote button are sized around the English words.
   "Demander un devis" and "客户登录" both wrap inside them, which reads as a
   broken header rather than a long label, so they are kept on one line. */
.site-header .login-link,
.site-header .header-actions .button,
.site-header nav a { white-space: nowrap; }

/* --- Dark ------------------------------------------------------------------ */

.dark .lang-picker > summary { border-color: #555; color: #f4f3f1; }
.dark .lang-picker > summary:hover,
.dark .lang-picker[open] > summary { border-color: var(--red, #e30613); color: var(--red, #e30613); }
.dark .lang-picker ul { background: #202021; border-color: #3a3a3b; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.dark .lang-picker ul a { color: #f4f3f1; }
.dark .lang-picker ul a span { color: #9a9a97; }
.dark .lang-picker ul a:hover { background: #2a2a2b; }

/* --- Phones ----------------------------------------------------------------
   Three stylesheets have an opinion about this row at 800px, in load order:
   styles.css hides it, theme.css brings it back with !important and hides only
   the sign-in link and the quote button, which is how the theme switch survives
   on a phone. So the picker just joins the switch there -- an earlier version of
   this file hid everything that was not the picker and took the switch with it. */

@media (max-width: 800px) {
  .site-header .header-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    margin-right: 14px;
  }

  /* No nav to separate from at this width: it is behind the burger. */
  .lang-picker { margin-left: 0; }

  /* Only these two, matching theme.css. The switch is deliberately not listed. */
  .site-header .header-actions .login-link,
  .site-header .header-actions .button { display: none; }

  /* A fingertip wants 44px, but a 44px-tall pill looks wrong beside a 28px
     switch. So the pill stays 28px and an invisible box extends what can be
     tapped, which is exactly what theme.css does for the switch itself. */
  .lang-picker > summary {
    height: 28px;
    margin: 0;
    padding: 0 10px;
    position: relative;
  }

  .lang-picker > summary::after {
    content: '';
    position: absolute;
    inset: -8px -6px;
  }

  /* Opening leftwards: at this width the pill sits close to the right edge. */
  .lang-picker ul {
    right: 0;
    left: auto;
    min-width: 170px;
  }
}

/* Narrow phones: the label alone, without the globe, keeps the header on one line. */
@media (max-width: 460px) {
  .lang-picker > summary { padding: 0 8px; }
  .lang-globe { display: none; }
}

/* --- Client portal ----------------------------------------------------------
   The sign-in screen is a dark panel with the theme switch pinned top-right;
   the picker sits just inside it. In the signed-in app it goes in the sidebar
   footer, which is dark in both themes, so it always uses the dark colours. */

/* Below the theme switch, right edges aligned, not beside it. The switch is a
   52x28 pill whose ::before extends what can be tapped by 8px above and below,
   so the gap here is measured from 104px (its foot) plus that invisible 8px,
   leaving a real 16px between the two tap targets. Its position changes twice
   on the way down to a phone, so this follows it at the same breakpoints. */
.lang-picker.on-login {
  position: absolute;
  z-index: 3;
  right: 38px;
  top: 120px;
  margin: 0;
}

.lang-picker.on-login > summary,
.sidebar-bottom .lang-picker > summary {
  border-color: #4b4b4d;
  color: #fff;
}

.lang-picker.on-login > summary:hover,
.lang-picker.on-login[open] > summary,
.sidebar-bottom .lang-picker > summary:hover,
.sidebar-bottom .lang-picker[open] > summary {
  border-color: var(--red, #e30613);
  color: var(--red, #e30613);
}

.lang-picker.on-login ul,
.sidebar-bottom .lang-picker ul {
  background: #202021;
  border-color: #3a3a3b;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.lang-picker.on-login ul a,
.sidebar-bottom .lang-picker ul a { color: #f4f3f1; }
.lang-picker.on-login ul a:hover,
.sidebar-bottom .lang-picker ul a:hover { background: #2a2a2b; }

/* The sidebar is narrow, so the menu opens upwards rather than off the bottom. */
/* The sidebar is a tall column with this at its foot, so the menu opens
   upwards; opening down would run it off the bottom of the screen. */
.sidebar-bottom .lang-picker { margin: 0 0 10px; }
.sidebar-bottom .lang-picker ul {
  top: auto;
  bottom: calc(100% - 4px);
  left: 0;
  right: auto;
  min-width: 170px;
}

/* ...except that admin.css turns the sidebar into a bar across the top at
   720px, which puts this in the top-right corner. Opening upwards there sends
   the menu clean off the screen -- measured at -256px, entirely invisible. It
   opens downwards, and from the right so it does not run off that edge. */
@media (max-width: 720px) {
  .sidebar-bottom .lang-picker { margin: 0; }
  .sidebar-bottom .lang-picker ul {
    top: calc(100% - 2px);
    bottom: auto;
    left: auto;
    right: 0;
  }
}

/* Measured, not assumed. theme.css has a .login-theme{right:20px;top:70px}
   inside a max-width:800px block, but a later plain .login-theme rule in the
   same file overrides it -- a media query adds no specificity -- so the switch
   actually stays at right:38px top:76px down to 720px. The picker only grows to
   a 44px tap target here, so it starts lower to keep the 16px gap. */
@media (max-width: 800px) {
  .lang-picker.on-login { right: 38px; top: 136px; }
}

/* Below this portal.css does move the switch, to right:20px top:16px, and it
   wins because portal.css loads after theme.css. */
@media (max-width: 720px) {
  .lang-picker.on-login { right: 20px; top: 76px; }
}

/* On the narrowest phones the card begins at y84 and the sign-in eyebrow at
   y108, so a picker stacked under the switch lands on top of that text. There
   is no room below it, so here alone it goes beside the switch, into the empty
   run between the brand and the corner, vertically centred on it. */
@media (max-width: 360px) {
  .lang-picker.on-login { right: 90px; top: 16px; }
}

/* --- In the site header -----------------------------------------------------
   The picker is also the portal's, where it sits in a narrow sidebar and keeps
   the 28px size above. Only the one in the site header grows, to sit level with
   the nav and the sign-in link beside it. */

.site-header .lang-picker > summary {
  height: 34px;
  padding: 0 13px;
  gap: 6px;
  font-size: 13px;
  /* Still a 44px row for a fingertip, with the pill now 34px of it. */
  margin: 5px 0;
}

.site-header .lang-globe { width: 15px; height: 15px; }

/* Back to the smaller pill where the header has no room to be bigger; this
   matches the step in styles.css. */
@media (max-width: 1360px) {
  .site-header .lang-picker > summary {
    height: 28px;
    padding: 0 10px;
    gap: 5px;
    font-size: 11px;
    margin: 8px 0;
  }

  .site-header .lang-globe { width: 13px; height: 13px; }
}