/* Accessibility bar (design: template/1994/html-prototypes/_a11y-bar.php). Modes themselves live in /pro/style.css «ХҮРТЭЭМЖИЙН ГОРИМУУД». */

/* ГАРЧ ИРЭХ / БҮДГЭРЭХ — MCS-ийн fixed-cta-v1-тэй ижил зан төлөв.
   ⚠️ `visibility` шилжилтэд ОРНО (0s саатал): нуугдмал үед товчнууд ГАРААР фокуслагдахгүй,
      бүдгэрсэн үед footer-ийн холбоосыг дарахгүй. Хэсэг нь бүтэн өргөнтэй тул хоёр
      хажуугийн хоосон зай доорх контентын даралтыг идэхгүйн тулд `pointer-events`-ийг
      ЗӨВХӨН pill-д буцаана (MCS-ийн блокт энэ асуудал байсан). */
#a11y-bar {
  z-index: 1030;
  pointer-events: none;
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .4s ease-in-out, opacity .4s ease-in-out, visibility 0s .4s;
}
#a11y-bar.show {
  transform: translateY(0);
  visibility: visible;
  transition: transform .4s ease-in-out, opacity .4s ease-in-out, visibility 0s;
}
#a11y-bar.show.faded {
  opacity: 0;
  visibility: hidden;
  transition: transform .4s ease-in-out, opacity .4s ease-in-out, visibility 0s .4s;
}
#a11y-bar .a11y-wrap {
  pointer-events: auto;
  width: fit-content;
  max-width: 100%;
  border-radius: 1.25rem;          /* мобайлд 2 мөр болох тул дугуй өнцөгт хайрцаг */
}
@media (min-width: 768px) {
  #a11y-bar .a11y-wrap { border-radius: 50rem; }
}

/* ГАРЧИГ — MCS pill-ийн хэв: жижиг, ТОМ ҮСЭГТ, бүдүүн + брэнд хөх дугуй icon */
#a11y-bar .a11y-title {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-body-color);
  white-space: nowrap;
}
#a11y-bar .a11y-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: rgb(var(--pro-brand-deep-rgb));
  color: #fff;
  font-size: 1.125rem;
  flex-shrink: 0;
}
/* Мобайлд гарчгийн ТЕКСТ харагдахгүй ч дэлгэц уншигчид үлдэнэ (visually-hidden-ийн хэв) */
@media (max-width: 767.98px) {
  #a11y-bar .a11y-title-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* Phone: the bar is a single round icon in the bottom-right corner (2.5rem, same size as
   the social icons above it); tapping it opens #modal-a11y with all the settings (client 2026-11-07) */
@media (max-width: 767.98px) {
  #a11y-bar .container { display: flex; justify-content: flex-end; }
  #a11y-bar .a11y-wrap {
    width: auto;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: .125rem !important;
    border-radius: 50rem;
  }
  #a11y-bar .a11y-wrap > :not(.a11y-title) { display: none !important; }
  #a11y-bar .a11y-badge { font-size: 1.125rem; }
}

/* ТОВЧ — топбарын «А А А»-тай нэг хэл: хүрээтэй, идэвхтэй нь брэнд хөх.
   The same buttons live in the phone modal, so the rules cover both. */
:is(#a11y-bar, #modal-a11y) .a11y-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
}
:is(#a11y-bar, #modal-a11y) .a11y-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 50rem;
  background-color: transparent;
  color: var(--bs-body-color);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: color .4s, background-color .4s, border-color .4s;
}
:is(#a11y-bar, #modal-a11y) .a11y-btn:hover {
  border-color: rgb(var(--pro-brand-deep-rgb));
  color: rgb(var(--pro-brand-deep-rgb));
}
:is(#a11y-bar, #modal-a11y) .a11y-btn[aria-pressed="true"] {
  background-color: rgb(var(--pro-brand-deep-rgb));
  border-color: rgb(var(--pro-brand-deep-rgb));
  color: #fff;
}
:is(#a11y-bar, #modal-a11y) .a11y-zoom:nth-child(1) { font-size: .75rem; }
:is(#a11y-bar, #modal-a11y) .a11y-zoom:nth-child(2) { font-size: .9375rem; }
:is(#a11y-bar, #modal-a11y) .a11y-zoom:nth-child(3) { font-size: 1.125rem; }

/* Modal: buttons carry their text, reset spans the width */
#modal-a11y .a11y-btn {
  height: 2.5rem;
  padding: 0 1rem;
}
#modal-a11y .a11y-zoom {
  width: 2.5rem;
  padding: 0;
}

/* Товчны ТЕКСТ — зөвхөн өргөн дэлгэцэнд (нэр нь `aria-label`-д тул нуухад хүртээмж алдагдахгүй) */
#a11y-bar .a11y-text { display: none; }
#a11y-bar .vr { display: none; }
@media (min-width: 768px) {
  #a11y-bar .vr { display: block; align-self: center; height: 1.5rem; }
}
@media (min-width: 1200px) {
  #a11y-bar .a11y-text { display: inline; }
  #a11y-bar .a11y-btn:has(.a11y-text) { padding: 0 .75rem; }
}

/* Томруулсан шатанд pill 2 мөр болдог — мөрийн төгсгөлд босоо зураас «унжихгүй»,
   дугуй өнцөгт хайрцаг хэлбэртэй (stadium биш) болно. */
html.a11y-zoom-115 #a11y-bar .vr,
html.a11y-zoom-130 #a11y-bar .vr { display: none; }
html.a11y-zoom-115 #a11y-bar .a11y-wrap,
html.a11y-zoom-130 #a11y-bar .a11y-wrap { border-radius: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  #a11y-bar,
  #a11y-bar.show,
  #a11y-bar.show.faded { transition: none; }
}