/**
 * Language switcher.
 *
 * A pill button that opens a popover, per the design. Shared by the footer and
 * the mobile hamburger menu, so it lives in the foundation rather than in either
 * component. `--up` opens above the button (footer), `--down` below it (header).
 *
 * The menu renders open and is hidden by the behavior, so the languages stay
 * reachable as plain links when JavaScript does not run.
 */

.dc-lang {
  position: relative;
}

.dc-lang__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-primary);
  cursor: pointer;
  font-family: var(--font-brand);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-body);
  white-space: nowrap;
}

.dc-lang__current {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.dc-lang__chevron {
  display: inline-flex;
  transition: transform var(--dur-fast) var(--ease-out);
}

.dc-lang__toggle[aria-expanded="true"] .dc-lang__chevron {
  transform: rotate(180deg);
}

.dc-lang__menu {
  z-index: 31;
  min-width: 180px;
  margin: var(--space-2) 0 0;
  padding: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-canvas);
  list-style: none;
}

/* Once the behavior runs the menu becomes a real popover, hidden until opened. */
.js-dc-lang .dc-lang__menu {
  position: absolute;
  left: 0;
  margin: 0;
}

.js-dc-lang.dc-lang--up .dc-lang__menu {
  bottom: calc(100% + 6px);
}

.js-dc-lang.dc-lang--down .dc-lang__menu {
  top: calc(100% + 6px);
}

.js-dc-lang .dc-lang__menu[hidden] {
  display: none;
}

.dc-lang__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--fg-primary);
  font-family: var(--font-brand);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-align: left;
  text-decoration: none;
}

.dc-lang__option:hover,
.dc-lang__option:focus {
  background: var(--bg-surface);
  color: var(--digicel-red);
  text-decoration: none;
}

.dc-lang__option.is-active {
  background: var(--bg-surface);
}

.dc-lang__code {
  color: var(--fg-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

@media (min-width: 768px) {
  /* In the footer the control shrinks to its content and aligns right; inside
     the mobile menu it never reaches this breakpoint. */
  .dc-site-footer__languages .dc-lang__toggle {
    width: auto;
  }

  .dc-site-footer__languages .js-dc-lang .dc-lang__menu {
    right: 0;
    left: auto;
  }
}