/*!
 * locale-switch.css v1.4.0
 * Language switcher dropdown for the navbar — an icon trigger div with
 * Webflow's own Locales list floating underneath it (or above it, when
 * there is no room below).
 *
 * Drives: js/components/locale-switch.js  (ship both together — this file
 * keeps the panel hidden until the script opens it).
 *
 * The script tags Webflow's untouched locale markup with these classes, so
 * the styling below works whatever Webflow named things:
 *   .locale-switch          root block          ([data-locale-switch])
 *   .locale-switch__trigger the icon div        ([data-locale-trigger])
 *   .locale-switch__panel   Locales Wrapper
 *   .locale-switch__list    Locales List
 *   .locale-switch__row     one Locale item row
 *   .locale-switch__item    the locale link (+ .is-current, .is-active)
 *
 * Custom props — override on [data-locale-switch] in Webflow to theme it
 * (a dark bar needs only --ls-fg and --ls-hover-bg):
 *   --ls-fg           trigger text/icon colour   (muted at rest)
 *   --ls-fg-strong    trigger colour on hover/open
 *   --ls-bg           trigger background   (default lab(89.4% 0 0) = #e1e1e1)
 *   --ls-bg-hover     trigger background on hover/open
 *   --ls-border       trigger border             (default none — set a
 *                                                 colour to add a hairline)
 *   --ls-hover-bg     hover/open wash on the trigger and the locale rows
 *   --ls-size         trigger height             (default 2rem)
 *   --ls-panel-bg     panel background
 *   --ls-panel-line   panel hairline
 *   --ls-panel-w      panel min width            (default 9.5rem)
 *   --ls-item-fg      locale link colour
 *   --ls-item-fg-strong  hovered / current link colour
 *   --ls-accent       the current-locale dot
 *   --ls-z            panel stacking order            (default 60)
 *
 * https://github.com/roicool/sestek
 *
 * Changelog
 * v1.4.0 — .is-flip-up: the panel opens above the trigger (set by
 *          locale-switch.js v1.3.0 when there is no room below)
 * v1.3.0 — the panel's z-index is now the --ls-z prop, so it can be raised
 *          when something in the bar paints over the open panel (locales
 *          visible but unclickable)
 * v1.2.0 — the trigger is a always-on light chip (--ls-bg #e1e1e1, deepening
 *          to --ls-bg-hover) instead of a transparent control, and its row is
 *          aligned wrapper-proof: every direct child is its own centred flex
 *          box, the trigger's inline strut is removed (line-height:0), the
 *          chevron class works on the <svg> or on a Webflow embed <div>
 *          around it, and the uppercase label is optically nudged.
 * v1.1.0 — quieter, tighter styling: borderless trigger with a neutral
 *          hover wash (was an outlined pill that flipped to brand pink),
 *          smaller icon/label, 12px panel radius with a layered hairline
 *          shadow, compact rows, neutral row hover with the accent kept for
 *          the current-locale dot only. The chevron is pushed last with
 *          flex `order`, so it reads correctly even when Webflow's DOM puts
 *          it before the label.
 * v1.0.0 — initial release
 */

[data-locale-switch] {
  --ls-fg: rgba(23, 21, 31, 0.78);
  --ls-fg-strong: var(--color-text--base, #17151f);
  /* Always-on chip background — lab(89.4% 0 0) */
  --ls-bg: #e1e1e1;
  --ls-bg-hover: #d7d7d7;
  --ls-border: transparent;
  --ls-hover-bg: rgba(23, 21, 31, 0.05);
  --ls-size: 2rem;
  --ls-panel-bg: var(--surface--base, #fff);
  --ls-panel-line: rgba(23, 21, 31, 0.07);
  --ls-panel-w: 9.5rem;
  --ls-item-fg: var(--color-text--muted, rgba(23, 21, 31, 0.62));
  --ls-item-fg-strong: var(--color-text--base, #17151f);
  --ls-accent: var(--color-text--accent, #ec008c);

  position: relative;
  display: inline-block;
}

/* The chip must be exactly --ls-size tall wherever it lands, so it can't
   inherit content-box sizing and grow by its border. */
[data-locale-switch],
[data-locale-switch] * {
  box-sizing: border-box;
}

/* ── Trigger (a plain div — Webflow can't nest a button here) ──────── */
/* A quiet chip: always the same light background, no border; it only
   deepens slightly on hover / while open. */
.locale-switch__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: var(--ls-size);
  padding: 0 0.5625rem;
  border: 1px solid var(--ls-border);
  border-radius: var(--radius--full, 9999px);
  background: var(--ls-bg);
  color: var(--ls-fg);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: var(--font-weight--medium, 500);
  /* line-height:0 kills the inline strut, so nothing rides a text baseline;
     each child re-declares its own. */
  line-height: 0;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.locale-switch__trigger:hover,
[data-locale-switch].is-open .locale-switch__trigger {
  color: var(--ls-fg-strong);
  background: var(--ls-bg-hover);
}

.locale-switch__trigger:focus-visible {
  outline: 2px solid var(--ls-fg-strong);
  outline-offset: 2px;
}

/* Every direct child is centred as its own flex box — this is what keeps the
   row aligned when Webflow wraps an icon in an embed <div> instead of
   dropping a bare <svg> in. */
.locale-switch__trigger > * {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* The globe/flag icon (bare, or inside a Webflow embed wrapper). */
.locale-switch__trigger svg,
.locale-switch__trigger img {
  width: 0.9375rem;
  height: 0.9375rem;
  display: block;
}

/* Optional chevron — put class="locale-switch__chevron" on the <svg> OR on
   its embed wrapper; both are handled. `order` pushes it to the end of the
   row, so it stays right of the label whatever Webflow's DOM order is. */
.locale-switch__chevron {
  order: 9;
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

svg.locale-switch__chevron,
.locale-switch__chevron svg {
  width: 0.625rem !important;
  height: 0.625rem !important;
  display: block;
}

.locale-switch__trigger:hover .locale-switch__chevron,
[data-locale-switch].is-open .locale-switch__chevron {
  opacity: 0.85;
}

[data-locale-switch].is-open .locale-switch__chevron {
  transform: rotate(180deg);
}

[data-locale-label] {
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  /* Optical centring: an all-caps label reserves descender space it never
     uses, so its ink reads a hair high next to the icons — nudge it back. */
  transform: translateY(0.03em);
}

/* ── Panel (Webflow's Locales Wrapper) ─────────────────────────────── */
.locale-switch__panel {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  /* Raise --ls-z if something in the bar (a mega-menu container, an overlay)
     paints over the open panel — the locales stay visible but clicks land on
     that element instead. Deliberately set on the panel, not on the block:
     a z-index on the block would cap the panel inside a new stacking context
     and could make that worse. */
  z-index: var(--ls-z, 60);
  min-width: var(--ls-panel-w);
  max-width: min(16rem, calc(100vw - 2rem));
  max-height: 17rem;
  overflow-y: auto;
  padding: 0.25rem;
  border: 1px solid var(--ls-panel-line);
  border-radius: 0.75rem;
  background: var(--ls-panel-bg);
  /* Layered and shallow — one heavy drop shadow is what makes a menu look
     stock. */
  box-shadow:
    0 1px 2px rgba(23, 21, 31, 0.04),
    0 8px 24px -10px rgba(23, 21, 31, 0.18);
  opacity: 0;
  visibility: hidden;
  /* Closed (and while fading out) the panel must not swallow clicks meant
     for whatever sits under the bar. */
  pointer-events: none;
  transform: translateY(-0.25rem);
  /* visibility flips with a delay on CLOSE (so the fade-out is visible) but
     instantly on OPEN — a transitioned visibility would still be `hidden`
     in the frame the panel opens, and the script couldn't focus a locale
     for keyboard users. */
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  scrollbar-width: thin;
}

[data-locale-switch].is-open .locale-switch__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

/* Flips when the panel would overflow the viewport (JS toggles the class),
   or when [data-locale-align="right"] pins it there. */
[data-locale-switch].is-align-right .locale-switch__panel {
  left: auto;
  right: 0;
}

/* Opens upward when there is no room below the trigger (JS toggles the
   class from the measured space, or [data-locale-drop="up"] pins it). The
   slide-in reverses so it still moves toward the trigger. */
[data-locale-switch].is-flip-up .locale-switch__panel {
  top: auto;
  bottom: calc(100% + 0.375rem);
  transform: translateY(0.25rem);
}

[data-locale-switch].is-flip-up.is-open .locale-switch__panel {
  transform: translateY(0);
}

/* ── List + rows (Webflow's own containers, tagged by the script) ───── */
.locale-switch__list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.locale-switch__row {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Locale links ──────────────────────────────────────────────────── */
.locale-switch__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.5rem;
  color: var(--ls-item-fg);
  font-size: 0.8125rem;
  font-weight: var(--font-weight--regular, 400);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}

/* Neutral hover — a tinted brand fill on every row is what reads as
   template-y; the accent is saved for the current-locale dot. */
.locale-switch__item:hover,
.locale-switch__item:focus-visible,
.locale-switch__item.is-active {
  background: var(--ls-hover-bg);
  color: var(--ls-item-fg-strong);
  outline: 0;
}

/* The locale currently being viewed (Webflow's .w--current). */
.locale-switch__item.is-current {
  color: var(--ls-item-fg-strong);
  font-weight: var(--font-weight--medium, 500);
}

.locale-switch__item.is-current::after {
  content: "";
  width: 0.3125rem;
  height: 0.3125rem;
  margin-left: auto;
  border-radius: var(--radius--full, 9999px);
  background: var(--ls-accent);
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .locale-switch__trigger,
  .locale-switch__chevron,
  .locale-switch__panel,
  .locale-switch__item {
    transition: none;
  }
}

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .locale-switch__panel {
    max-width: calc(100vw - 1.5rem);
  }
}