/* Mongol Bichig Toggle — front-end styles */

@font-face {
  font-family: 'Mongol Bichig';
  src: url('fonts/NotoSansMongolian.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  /* Full Hudum Mongolian block, so every letter this plugin can emit has a glyph. */
  unicode-range: U+1800-18AF;
}

.mbt-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 99999;
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.mbt-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  color: #333;
}

.mbt-btn[aria-pressed="true"] {
  background: #16324f;
  color: #fff;
}

.mbt-btn-bichig {
  font-family: 'Mongol Bichig', sans-serif;
  font-size: 15px;
}

/* Traditional-script reading mode: vertical top-to-bottom, columns flowing left-to-right,
   applied to the header/content/footer regions the toggle actually converts. Navigation
   stays horizontal-tb (only the glyphs and font change there) so the site stays usable;
   only the main article/content area switches to true vertical-lr reading.
   !important is used deliberately: the theme sets font-family via CSS custom properties
   (var(--font-main)/var(--font-ui)) on many specific selectors, and those would otherwise
   out-specificity a plain class selector here and silently keep showing tofu. */
html.mbt-mode-mng .site-header,
html.mbt-mode-mng .site-header *,
html.mbt-mode-mng .site-footer,
html.mbt-mode-mng .site-footer *,
html.mbt-mode-mng .main-content-area,
html.mbt-mode-mng .main-content-area * {
  font-family: 'Mongol Bichig', sans-serif !important;
}

html.mbt-mode-mng .main-content-area {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  height: 80vh;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 2.1;
}

/* Small experimental-feature disclaimer badge shown next to the toggle. */
.mbt-toggle::after {
  content: "\1F9EA"; /* test-tube emoji as a subtle "beta" marker */
  align-self: center;
  margin-left: 2px;
  font-size: 11px;
  opacity: 0.6;
}