/* HOMEUPDATE — language switcher (FR · DE · EN · LB).

   Two deliberately different controls for the two form factors:
     · desktop (≥900px) — an inline segmented control, all four languages
       visible at once, current one filled in brand green.
     · mobile  (<900px) — its own pill button (globe + current code) that
       opens a sheet with the full language names.

   Neither is ever folded into a burger menu, and no breakpoint hides them:
   the ≤520px rules in index.html trim the phone number and the login link,
   but the switcher keeps its place in the header at every width. */

/* ---------------------------------------------- desktop: segmented control */

.hu-lang {
  display: none;                      /* shown from 900px up */
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line, #E4E7DE);
  border-radius: 999px;
  background: var(--white, #fff);
}

.hu-lang .hu-lang-opt {
  display: inline-flex;
  align-items: center;
  padding: .34rem .62rem;
  border-radius: 999px;
  font-family: var(--disp, 'Poppins', system-ui, sans-serif);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--ink-soft, #4a5142);
  transition: background .18s, color .18s;
}

/* The full language name is there for screen readers; the chip shows the code. */
.hu-lang .hu-lang-opt span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hu-lang .hu-lang-opt:hover { background: var(--mint, #E7EFE9); color: var(--ink, #1C1D16); }
.hu-lang .hu-lang-opt.on    { background: var(--green, #5C8974); color: #fff; }

@media (min-width: 900px) {
  .hu-lang { display: inline-flex; }
}

/* ------------------------------------------------- mobile: button + sheet */

.hu-lang-m { position: relative; }

@media (min-width: 900px) {
  .hu-lang-m { display: none; }
}

.hu-lang-m > summary {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .44rem .62rem;
  border: 1.5px solid var(--green, #5C8974);
  border-radius: 999px;
  background: var(--white, #fff);
  color: var(--green, #5C8974);
  font-family: var(--disp, 'Poppins', system-ui, sans-serif);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: background .18s, color .18s;
}

.hu-lang-m > summary::-webkit-details-marker { display: none; }
.hu-lang-m > summary::marker { content: ''; }
.hu-lang-m > summary svg { width: 15px; height: 15px; flex: none; }

.hu-lang-m > summary i {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .18s;
}

.hu-lang-m[open] > summary   { background: var(--green, #5C8974); color: #fff; }
.hu-lang-m[open] > summary i { transform: rotate(180deg); }

.hu-lang-sheet {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  z-index: 150;
  min-width: 200px;
  padding: .5rem;
  background: var(--white, #fff);
  border: 1px solid var(--line, #E4E7DE);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(28, 29, 22, .16);
}

.hu-lang-title {
  margin: .15rem .5rem .45rem;
  font-family: var(--disp, 'Poppins', system-ui, sans-serif);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint, #8a907d);
}

.hu-lang-sheet .hu-lang-opt {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .5rem;
  border-radius: 9px;
  font-family: var(--body, 'Poppins', system-ui, sans-serif);
  font-size: .9rem;
  color: var(--ink, #1C1D16);
}

.hu-lang-sheet .hu-lang-opt b {
  min-width: 26px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-faint, #8a907d);
}

.hu-lang-sheet .hu-lang-opt:hover { background: var(--grey, #EEF1EC); }
.hu-lang-sheet .hu-lang-opt.on    { background: var(--mint, #E7EFE9); font-weight: 600; }
.hu-lang-sheet .hu-lang-opt.on b  { color: var(--green, #5C8974); }

@media (prefers-reduced-motion: reduce) {
  .hu-lang .hu-lang-opt,
  .hu-lang-m > summary,
  .hu-lang-m > summary i { transition: none; }
}