/* =============================================================================
   HEADER — ТУСГАЙ CSS  (тунгалаг горим + фокусын заагч)
   -----------------------------------------------------------------------------
   Яагаад тусдаа файл вэ:
   · Тунгалаг горим нь extra-гийн `style.css`-д байдаг ба 10 гаруй төсөл түүгээр
     ажилладаг. Тэндээс нь ЗӨӨГӨӨГҮЙ — ХУУЛСАН. `style.css` дэх эх хувилбар
     хэвээр үлдэнэ, бусад төсөл юу ч мэдэхгүй.
   · Фокусын заагч нь урьд нь `_header.php`-ийн дотоод `<style>`-д байсан бөгөөд
     4 файлд (үндсэн + 3 preview) ДАВХАРДАЖ хуулагдсан байв. Одоо нэг эх сурвалж.

   Энэ файлыг ЗӨВХӨН шилжсэн төсөл ачаална (одоогоор 1990).
   Ачаалах дараалал: bootstrap → extra/style.css → ЭНЭ ФАЙЛ → төслийн brand/style
   Эх хувилбар: style.css мөр 33-268 (тунгалаг) · _header.php §3 (фокус)
   (2026-09-13)
   ============================================================================= */

/* ============================================================
   HEADER — TRANSPARENT ГОРИМ
   ------------------------------------------------------------
   `.header-transparent` класс авсан header нь sticky БИШ үедээ
   (хуудсын дээд, hero-гийн дээр) тунгалаг болж, доод контент
   ардаас нь ил гарна. Гүйлгэхэд JS `.sticky` нэмэхэд бүх дүрэм
   `:not(.sticky)`-ээр автоматаар унтарч, хатуу (solid) бар болно.

   ⚠️ Толгойн БУСАД БҮХ CSS нь тухайн толгойн ӨӨРИЙН файлд (`_header.php`-ийн
   scoped <style>) байна. Энд ЗӨВХӨН `header-transparent` горим — бүх дүрэм
   `.header-vN`-гүй, гурван хувилбарт нийтлэг.

   Бүтэц:
     1. Байрлал + scrim              4. Лого солих (light ↔ dark слот)
     2. Бар дээрх текст/линк          5. Мобайл: цэс задрахад SOLID (body.nav-open)
     3. Хэл/тема солигчийн pill       6. Цэс нээх товч ба задарсан цэсний линк

   Тохируулга: scrim-ийн хар өнгийг `--header-scrim` variable-аар
   төслийн түвшинд дарж болно (жишээ: цайвар hero дээр илүү бараан).
   ============================================================ */

/* ---------------- GENERAL (бүх header хувилбар) ---------------- */

/* Байрлал + дээрээс доош бараан scrim (hero ямар ч өнгөтэй байсан
   цагаан текст уншигдана). Fixed тул доод контентоо түлхэхгүй. */
.header-transparent {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  width: 100%;
}
.header-transparent:not(.sticky) {
  --header-scrim: linear-gradient(180deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 100%);
  background: var(--header-scrim);
  box-shadow: none !important;
}

/* Навбар ба топбар өөрсдөө бүрэн тунгалаг — зөвхөн header-ийн scrim харагдана */
.header-transparent:not(.sticky) .navbar {
  background: transparent !important;
  box-shadow: none !important;
}
.header-transparent:not(.sticky) .header-topbar {
  background: transparent !important;
}

/* Бар дээрх бүх текст/линк — цагаан (dark theme-тэй ижил утга).
   ⚠️ `.topbar-social i` ЗААВАЛ хамт — «SOCIAL BRAND COLORS» блок нь `.fa-facebook-f`
   гэх мэтээр icon-д брэндийн өнгө оноодог тул удамшсан цагаан хүрдэггүй. */
.header-transparent:not(.sticky) .nav-link,
.header-transparent:not(.sticky) .topbar,
.header-transparent:not(.sticky) .top-link,
.header-transparent:not(.sticky) .topbar-link,
.header-transparent:not(.sticky) .topbar-social,
.header-transparent:not(.sticky) .topbar-social i,
.header-transparent:not(.sticky) .topbar-social svg {
  color: #fff !important;
}

/* Hover / focus / идэвхтэй / нээлттэй — бага зэрэг бүдэгрүүлж хариу мэдрэмж өгнө */
.header-transparent:not(.sticky) .nav-link:hover,
.header-transparent:not(.sticky) .nav-link:focus,
.header-transparent:not(.sticky) .nav-link.active,
.header-transparent:not(.sticky) .nav-link.show,
.header-transparent:not(.sticky) .topbar:hover,
.header-transparent:not(.sticky) .top-link:hover,
.header-transparent:not(.sticky) .topbar-link:hover,
.header-transparent:not(.sticky) .topbar-social:hover {
  color: rgba(255, 255, 255, .75) !important;
}

/* Топбарын хуваагч зураас — тунгалаг цагаан */
.header-transparent:not(.sticky) .vr {
  color: rgba(255, 255, 255, .4) !important;
}

/* Барын удирдлагын товч (хэл сонгогч · тема солигч) — цагаан текст + тунгалаг цагаан хүрээ */
.header-transparent:not(.sticky) .lang-toggle,
.header-transparent:not(.sticky) .theme-toggle,
.header-transparent:not(.sticky) .search-toggle {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .35) !important;
}
.header-transparent:not(.sticky) .lang-toggle:hover,
.header-transparent:not(.sticky) .lang-toggle:focus,
.header-transparent:not(.sticky) .theme-toggle:hover,
.header-transparent:not(.sticky) .theme-toggle:focus,
.header-transparent:not(.sticky) .search-toggle:hover,
.header-transparent:not(.sticky) .search-toggle:focus {
  border-color: rgba(255, 255, 255, .6) !important;
  background-color: rgba(255, 255, 255, .1) !important;
}

/* Лого солих — тунгалаг дээр цайвар (dark) лого харагдана.
   `.navbar` descendant-аар бичсэн нь толгойн inline base дүрмийн
   `.header-vN[data-bs-theme=light] .navbar-brand-dark{display:none!important}`
   (0,3,0)-г давах (0,4,0) жин авахын тулд. */
.header-transparent:not(.sticky) .navbar .navbar-brand-light {
  display: none !important;
}
.header-transparent:not(.sticky) .navbar .navbar-brand-dark {
  display: flex !important;
}

/* Focus ring — бараан дэвсгэр дээр цагаан туяа (Bootstrap-ийн бараан ring-ийг солино) */
.header-transparent:not(.sticky) .nav-link:focus-visible,
.header-transparent:not(.sticky) .lang-toggle:focus-visible,
.header-transparent:not(.sticky) .theme-toggle:focus-visible,
.header-transparent:not(.sticky) .search-toggle:focus-visible,
.header-transparent:not(.sticky) .navbar-toggler:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .35) !important;
}

/* ЗАДАРСАН ҮЕД (mobile) — цэс нээгдэнгүүт header буцаад SOLID болж, өөрийн bg-ээ
   авна (тунгалаг бар + доорх цагаан цэс салангид харагдахаас сэргийлнэ). Бар дээрх
   текст/лого/pill бүгд default (бараан) байдалдаа буцна. body.nav-open-ийг collapse-ийн
   show/hide JS онооно (v1, v3, clone-ууд). v2 offcanvas тул энд хамаарахгүй. */
@media (max-width: 1199.98px) {
  /* Бар solid руу шилжих бүх элемент НЭГ ижил .4s-ээр гүйнэ — navbar/topbar/lang нь
     `.transition`-тэй (0.4s) боловч toggler нь transition-гүй тул урьд нь салангид
     шилждэг байсныг жигдэлж, бар бүхэлдээ цэстэйгээ зэрэгцэн зөөлөн цагаан болгоно. */
  body.nav-open .header-transparent:not(.sticky),
  body.nav-open .header-transparent:not(.sticky) .navbar,
  body.nav-open .header-transparent:not(.sticky) .header-topbar,
  body.nav-open .header-transparent:not(.sticky) .nav-link,
  body.nav-open .header-transparent:not(.sticky) .lang-toggle,
  body.nav-open .header-transparent:not(.sticky) .theme-toggle,
  body.nav-open .header-transparent:not(.sticky) .search-toggle,
  body.nav-open .header-transparent:not(.sticky) .navbar-toggler,
  body.nav-open .header-transparent:not(.sticky) [data-bs-toggle="offcanvas"] {
    transition: all .4s ease-in-out !important;
  }
  body.nav-open .header-transparent:not(.sticky) {
    background: transparent !important;        /* header root scrim унтраана */
  }
  body.nav-open .header-transparent:not(.sticky) .navbar {
    background: var(--bs-body-bg) !important;      /* бар solid (default navbar bg) */
    box-shadow: none !important;
  }
  body.nav-open .header-transparent:not(.sticky) .header-topbar {
    background: var(--bs-tertiary-bg) !important;  /* топбар default (bg-body-tertiary) */
  }
  /* Бар дээрх текст / pill / toggler буцаад бараан (solid дэвсгэрт зохицно) */
  body.nav-open .header-transparent:not(.sticky) .nav-link,
  body.nav-open .header-transparent:not(.sticky) .lang-toggle,
  body.nav-open .header-transparent:not(.sticky) .theme-toggle,
  body.nav-open .header-transparent:not(.sticky) .search-toggle,
  body.nav-open .header-transparent:not(.sticky) .navbar-toggler,
  body.nav-open .header-transparent:not(.sticky) [data-bs-toggle="offcanvas"] {
    color: var(--bs-body-color) !important;
  }
  body.nav-open .header-transparent:not(.sticky) .lang-toggle,
  body.nav-open .header-transparent:not(.sticky) .theme-toggle,
  body.nav-open .header-transparent:not(.sticky) .search-toggle,
  body.nav-open .header-transparent:not(.sticky) .navbar-toggler,
  body.nav-open .header-transparent:not(.sticky) [data-bs-toggle="offcanvas"] {
    border-color: var(--bs-border-color) !important;
  }
  /* Лого буцаад default (light theme = бараан лого) */
  body.nav-open .header-transparent:not(.sticky) .navbar .navbar-brand-light {
    display: flex !important;
  }
  body.nav-open .header-transparent:not(.sticky) .navbar .navbar-brand-dark {
    display: none !important;
  }
}

/* ЗАДАРЧ БУЙ ЦЭС ӨӨРӨӨ transparent→bg-body болж бүдгэрнэ (mobile). Суурь = тунгалаг+сүүдэргүй;
   `body.nav-open` (JS-ээр цэс нээх/хаах агшинд t=0-д онооно) үед bg-body+сүүдэр рүү бүдгэрнэ.
   ХААХ: nav-open t=0-д хасагдана → bg шууд буцаж уусна (зөв, өмнөх байдлаараа).
   НЭЭХ: Bootstrap `.show`-г өндөр задарч дууссаны ДАРАА нэмдэг тул bg-г .show-д уяхгүй,
   `body.nav-open`-д уясан — гэвч collapse нээгдэхдээ display:none→block ордог тул энгийн
   transition эхний frame-ээс гал авдаггүй; `@starting-style` нь орох агшны ЭХЛЭЛ өнгийг
   тунгалаг болгож өгдөг тул НЭЭХ fade ч мөн t=0-оос (хураахтай ижил цагт) эхэлж бүдгэрнэ.
   ⚠️ Суурийг ЗААВАЛ тунгалаг байлга (bg-body БИШ) — эс бөгөөс хураах fade алдагдана.
   Хуучин браузер @starting-style дэмжихгүй бол нээхэд шууд solid болно (эвдрэхгүй). v1/v3-д. */
@media (max-width: 1199.98px) {
  .header-transparent:not(.sticky) .navbar-collapse {
    background: transparent !important;
    box-shadow: none !important;
    transition: height .35s ease, background-color .4s ease-in-out, box-shadow .4s ease-in-out !important;
  }
  body.nav-open .header-transparent:not(.sticky) .navbar-collapse {
    background: var(--bs-body-bg) !important;
    /* ЗӨВХӨН ДООШ чиглэсэн сүүдэр (y-offset + сөрөг spread). Bootstrap-ын shadow-lg
       бүх талдаа 48px тархдаг тул дээшээ цагаан бар дээр нэвчиж, бар ба самбар
       хоёр өөр өнгөтэй мэт саарал залгаас үүсгэж байсан (2026-09-05). */
    box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, .175) !important;
  }
  @starting-style {
    body.nav-open .header-transparent:not(.sticky) .navbar-collapse {
      background: transparent !important;
      box-shadow: none !important;
    }
  }
}


/* ---------------- Цэс нээх товч (v1/v3 hamburger · v2 offcanvas trigger) ---------------- */

/* `.header-vN` угтваргүй — нэг толгой эдгээрийн зөвхөн НЭГИЙГ агуулдаг тул ялгах
   шаардлагагүй. Дээрх `body.nav-open` дүрэм илүү жинтэй (`body` элемент нэмэгддэг)
   тул мобайл цэс задрахад энэ цагаан нь автоматаар бараан болно. */
.header-transparent:not(.sticky) .navbar-toggler,
.header-transparent:not(.sticky) [data-bs-toggle="offcanvas"] {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .35) !important;
}
.header-transparent:not(.sticky) .navbar-toggler:hover,
.header-transparent:not(.sticky) .navbar-toggler:focus,
.header-transparent:not(.sticky) [data-bs-toggle="offcanvas"]:hover,
.header-transparent:not(.sticky) [data-bs-toggle="offcanvas"]:focus {
  border-color: rgba(255, 255, 255, .6) !important;
  background-color: rgba(255, 255, 255, .1) !important;
}


/* ---------------- Задарсан цэсний доторх линк (< xl) ---------------- */

/* Collapse овэрлэй нь SOLID (bg-body) тул доторх nav-link-ийг буцааж бараан болгоно
   (цагаан дээр цагаан болохоос сэргийлнэ). Бар дээрх (desktop) nav-link цагаан хэвээр.
   v2 нь offcanvas — панел нь өөрөө SOLID тул энэ дүрэмд хамаарахгүй.
   NB: mega-dropdown-ийн панел ч SOLID (.wrapper.bg-body) тул доторх .dropdown-item /
   .dropdown-title автоматаар зөв өнгөтэй — барын цагаан дүрэм тэдэнд хүрэхгүй. */
@media (max-width: 1199.98px) {
  .header-transparent:not(.sticky) .navbar-collapse .nav-link {
    color: var(--bs-body-color) !important;
  }
  .header-transparent:not(.sticky) .navbar-collapse .nav-link:hover,
  .header-transparent:not(.sticky) .navbar-collapse .nav-link:focus,
  .header-transparent:not(.sticky) .navbar-collapse .nav-link.active,
  .header-transparent:not(.sticky) .navbar-collapse .nav-link.show {
    color: var(--bs-primary) !important;
  }
}

/* =============================================================================
   FOCUS — ТОЛГОЙН НЭГДСЭН ЗААГЧ
   -----------------------------------------------------------------------------
   Өмнө нь 3 өөр эзэн зурдаг байв: браузерын `outline: auto` (лого, задаргааны
   мөр) · Bootstrap-ийн `.nav-link:focus-visible` цайвар цэнхэр · манай
   `currentColor` цагираг (3 товч). Одоо БҮГД нэг дүрэм.
   ============================================================================= */

/* ── FOCUS — `bootstrap-extra/focus.css`-д НЭГТГЭГДСЭН (2026-09-13).
   Урьд нь энэ дүрэм 4 файлд давхардаж, тус бүр өөр сонгогчоор хашигдсан тул
   хашаанаас гадуурх элементүүд браузерын жамын заагчтай үлддэг байв. */