/* mn-overflow-fixes.css
   Fixes layout breakage caused by Mongolian (Cyrillic) text being ~1.5-2x longer than Korean.
   Loaded LAST so it overrides the template CSS. Scope: /mn pages only.
   The site is a fixed ~1400px desktop canvas; the GNB bar fits >=1460, so below that we
   collapse to the existing full-screen overlay (hamburger), whose content is already Mongolian. */

/* ---- GNB top nav (desktop bar, >=1460): let the longer MN labels fit, wrap not clip ---- */
#header nav { padding-left: 20px; }
#header nav ul li a { padding: 0 5px; }
#header nav ul li a span {
  font-size: 14.5px;
  line-height: 1.12;
  letter-spacing: -0.3px;
  white-space: normal;
  text-align: center;
  word-break: keep-all;
}
#header .hd_rt a { margin: 0 6px; font-size: 13px; }

/* ---- Below the design canvas: collapse to the hamburger overlay + fluid, right-aligned header ---- */
@media (max-width: 1459px) {
  #header nav { display: none; }
  #header .hd_rt { display: none; }
  #header .btnGnbAll { display: block !important; margin-left: auto !important; }
  #header .innerBox { max-width: 100%; width: 100%; padding: 0 16px; box-sizing: border-box; justify-content: space-between; }
}

/* ---- Mega-menu overlay: stack into a vertical scrollable list on small screens ---- */
@media (max-width: 900px) {
  .gnbAllMenu .innerBox:before { display: none; }
  .gnbAllMenu .gnb { flex-direction: column; padding: 0; }
  .gnbAllMenu .gnb > div, .gnbAllMenu .gnb > .brand { width: 100%; padding: 14px 20px; }
  .gnbAllMenu .gnb ul li a { padding-left: 0; }
  .gnbAllMenu .gnb > .brand .depthBox > div { margin-bottom: 16px; }
}

/* ---- Promo popup top-nav (.dnav) long MN items ---- */
.hd_pops .dnav li a { white-space: normal; word-break: keep-all; line-height: 1.2; }

/* ---- Right-side quick menu: let MN labels (Какаотток асуулга etc.) wrap, not clip ---- */
#quick .quick_in a, .quick a { white-space: normal; word-break: keep-all; line-height: 1.2; }

/* ---- Generic guard: CTAs/buttons should wrap MN text instead of clipping ---- */
.btn, .more, button.hd_pops_reject_ds { white-space: normal; word-break: keep-all; }

/* ---- bbs in-page section tabs: keep MN labels whole; reduce size so more fits.
   (This tab strip sits in the site's fixed ~1400px body, so on viewports < ~1400 it scrolls
    with the rest of the page, as on the original Korean site.) ---- */
.one-page-menu li a { white-space: normal; word-break: keep-all; }
@media (max-width: 1459px) { .one-page-menu li a { font-size: 13px; } }

/* ---- Mega-menu secondary columns: wrap into 2 rows on desktop so each column (2차메뉴)
   gets enough width for the longer Mongolian sub-items (was 9 columns crammed in 1 row) ---- */
@media (min-width: 901px) {
  .gnbAllMenu .gnb { flex-wrap: wrap !important; align-items: flex-start; padding: 30px 40px 30px 0; }
  .gnbAllMenu .gnb > div { flex: 0 0 20% !important; max-width: 20% !important; box-sizing: border-box; padding: 14px 0 !important; }
  .gnbAllMenu .gnb > .brand { flex: 0 0 20% !important; max-width: 20% !important; width: 20% !important; padding-left: 30px !important; }
  .gnbAllMenu .gnb ul li a { padding-left: 12px !important; }
  .gnbAllMenu .gnb h2 a { font-size: 15px; }
  .gnbAllMenu .innerBox:before { display: none !important; }   /* drop the single-row white bg hack */
}

/* ---- Mega-menu 2-row panel: clean white background, brand cell stays green ---- */
@media (min-width: 901px) {
  .gnbAllMenu .gnb { background: #fff; }
  .gnbAllMenu .gnb > .brand { background: #78a991 !important; }
}

/* ---- Menu-board styling: show category headers, normalize the info/brand column ---- */
@media (min-width: 901px) {
  .gnbAllMenu .gnb > div { padding: 18px 18px !important; }
  /* category title (was hidden) */
  .gnbAllMenu .gnb h2 { height: auto !important; visibility: visible !important; margin: 0 0 12px !important; padding-bottom: 9px; border-bottom: 1px solid #d9e1dd; }
  .gnbAllMenu .gnb h2 a { font-size: 15px !important; font-weight: 700; color: #2f6b52 !important; line-height: 1.25; }
  .gnbAllMenu .gnb ul li a { font-size: 13.5px !important; color: #555 !important; line-height: 1.35; padding-left: 0 !important; }
  .gnbAllMenu .gnb ul li + li { margin-top: 7px !important; }
  /* info column: drop green, turn its first item into the same header style */
  .gnbAllMenu .gnb > .brand { background: #fff !important; padding-left: 18px !important; }
  .gnbAllMenu .gnb > .brand .depthBox { display: block !important; }
  .gnbAllMenu .gnb > .brand .depthBox > div { width: 100% !important; margin-bottom: 0 !important; }
  .gnbAllMenu .gnb > .brand .depthBox ul li a { color: #555 !important; font-size: 13.5px !important; padding-left: 0 !important; }
  .gnbAllMenu .gnb > .brand .depthBox ul li a:before { display: none !important; }
  .gnbAllMenu .gnb > .brand .depthBox ul li + li { margin-top: 7px !important; }
  .gnbAllMenu .gnb > .brand .depthBox ul li:first-child { margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid #d9e1dd; }
  .gnbAllMenu .gnb > .brand .depthBox ul li:first-child a { font-size: 15px !important; font-weight: 700; color: #2f6b52 !important; }
}

/* ---- Even menu-board rows: reserve a uniform 2-line height for every category header
   so 1-line and 2-line (e.g. "Аюулгүй, найдвартай Мелон Кэйр") headers align their items ---- */
@media (min-width: 901px) {
  .gnbAllMenu .gnb h2 { min-height: 45px; box-sizing: content-box; }
  .gnbAllMenu .gnb > .brand .depthBox ul li:first-child { min-height: 45px; box-sizing: content-box; }
  .gnbAllMenu .gnb > .brand .depthBox ul li:first-child a { display: block; }
}