/**
 * Component: Public Navbar
 * Scope:     engine/shell/public-navbar
 * Depends:   moonsync-ui (navbar.css, icon-button.css)
 * Added:     2026-04-26
 *
 * Only styles that cannot be expressed with canonical MoonSync UI classes.
 * Mirrors the language-selector visual pattern from app/1_5_3/components/header.
 */

/* ─────────────────────────────────────────────────────────────
   Language selector — trigger
   ───────────────────────────────────────────────────────────── */

/* Flag emoji in trigger and in dropdown items */
.lang-flag {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.22);
}

/* Language code text ("TH", "EN" …) in the trigger button */
.lang-code {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.03em;
}

/* ─────────────────────────────────────────────────────────────
   Language selector — dropdown items
   ───────────────────────────────────────────────────────────── */

/* Language name inside each dropdown option */
.lang-name {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Active option: name inherits the primary colour already set on .selector-option.active */
.selector-option.active .lang-name {
  color: inherit;
  font-weight: var(--font-weight-semibold);
}

/* Constrain dropdown width — language list is short */
#langSwitcher .selector-menu {
  min-width: 10rem;
}