/* TOHOL / CIRMS language selector v1.2 (23 Oct 2026).
   Fixes mobile viewport clipping and supplies touch-friendly choices.
   Popover is rendered directly under <body> by the companion JavaScript,
   outside scroll/clipping/transform contexts of the mobile navigation.
   No external fonts, cookies, analytics, or requests are added. */
.tohol-lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  align-self: center;
  margin-inline-start: 10px;
  z-index: 120;
  font-family: inherit;
}
.tohol-lang-switcher *,
.tohol-lang-switcher *::before,
.tohol-lang-switcher *::after,
.tohol-lang-menu,
.tohol-lang-menu *,
.tohol-lang-menu *::before,
.tohol-lang-menu *::after { box-sizing: border-box; }
.tohol-lang-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 77px;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid rgba(119, 155, 198, .6);
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .055em;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .16s ease, background .16s ease;
}
.tohol-lang-trigger:hover,
.tohol-lang-trigger[aria-expanded="true"] {
  border-color: #79b8ff;
  background: rgba(105, 158, 215, .16);
}
.tohol-lang-trigger:focus-visible,
.tohol-lang-option:focus-visible {
  outline: 3px solid #63b3ff;
  outline-offset: 3px;
}
.tohol-lang-flag {
  display: inline-block;
  width: 23px;
  height: 16px;
  flex: 0 0 23px;
  border: 1px solid rgba(16, 34, 60, .16);
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
  background: #fff;
}
.tohol-lang-chevron {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: .75;
  transition: transform .15s ease;
}
.tohol-lang-trigger[aria-expanded="true"] .tohol-lang-chevron { transform: rotate(180deg); }
.tohol-lang-menu {
  /* JS sets left/top/width based on the *visible* viewport when opened. */
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  width: 244px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  padding: 7px;
  border: 1px solid #d8e4f1;
  border-radius: 12px;
  background: #fff;
  color: #102d50;
  box-shadow: 0 16px 42px rgba(6, 30, 63, .19);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 2147483647;
  font-family: inherit;
}
.tohol-lang-menu[hidden] { display: none !important; }
.tohol-lang-menu-label {
  padding: 8px 10px 9px;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .1em;
  color: #637b95;
  text-transform: uppercase;
}
.tohol-lang-option {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 39px;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #173958;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}
.tohol-lang-option:is(a,button) { cursor: pointer; }
.tohol-lang-option:is(a,button):hover,
.tohol-lang-option:is(a,button):focus-visible { background: #ecf5ff; color: #064fba; }
.tohol-lang-option.is-current { cursor: pointer; background: #eef5fd; color: #094d99; font-weight: 750; }
.tohol-lang-option.is-pending { opacity: .58; cursor: not-allowed; }
.tohol-lang-meta { font-size: 10px; font-weight: 700; opacity: .8; letter-spacing: .02em; }
.tohol-lang-menu-separator { height: 1px; margin: 5px 4px; background: #e8edf3; }
@media (max-width: 1050px) {
  .tohol-lang-switcher { margin: 9px 6px; }
  .tohol-lang-trigger { min-height: 44px; }
  .tohol-lang-option { min-height: 44px; padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tohol-lang-trigger, .tohol-lang-chevron { transition: none; }
}

/* v1.2: current published language is a native anchor, not an inert button. */
.tohol-lang-option.is-current:active { background: #d8eafb; }
