/*!
 * BellExpan language switcher — kawaii palette, AA contrast, key-nav friendly.
 *
 * Single canonical pill button group, used identically on every page so the
 * UI is consistent across HP top, NyanGram LP, privacy-policy, support, etc.
 *
 * The previous .lang-switch--floating variant was retired because page-local
 * `* { padding: 0; }` resets that loaded after this stylesheet broke its
 * layout — the inner anchors and separator collapsed, and on the floating
 * (right-corner) variant the whole pill was squeezed into a 1-character-wide
 * column on the left edge of legal pages. Using doubled-class selectors below
 * raises specificity above any single-class wildcard reset, so the styling
 * survives even on pages whose own <style> resets `* { padding: 0; }`.
 */

.lang-switch.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(201, 62, 102, 0.2);
  border-radius: 999px;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro",
               "Klee", "Yu Gothic", -apple-system, BlinkMacSystemFont,
               "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo",
               system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.4;
  white-space: nowrap;
}

.lang-switch.lang-switch a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: #2a1820;
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch.lang-switch a:hover:not([aria-current="true"]),
.lang-switch.lang-switch a:focus-visible:not([aria-current="true"]) {
  background: rgba(201, 62, 102, 0.1);
  color: #c93e66;
}

.lang-switch.lang-switch a:focus-visible {
  outline: 2px solid #c93e66;
  outline-offset: 2px;
}

.lang-switch.lang-switch a[aria-current="true"] {
  background: #c93e66;
  color: #fff;
  font-weight: 600;
}

@media (max-width: 480px) {
  .lang-switch.lang-switch { font-size: 0.8rem; }
  .lang-switch.lang-switch a { padding: 5px 10px; }
}

/* Standard wrapper for doc-style pages (privacy / support / etc.) so the
   pill switcher sits at the top-right of the same content column as the
   <main> .container. Doubled-class specificity defends against page-local
   `* { margin: 0; padding: 0; }` resets. */
.page-header.page-header {
  max-width: 720px;
  margin: 0 auto 12px;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}