/* nexusbiz.tech — the language and theme controls at the end of the nav
 * capsule, and Khmer typography for the Khmer page (/km/).
 *
 *   - Markup: navPrefs() in scripts/prefs.mjs, written into the nav by
 *     scripts/build.mjs on both pages.
 *   - Behaviour: site/prefs.js.
 *   - The light theme the button switches to is site/light.css.
 */

/* Room for the pair: the capsule was 720px wide for five items and "Get
   started"; the controls take about 90px more. */
nav[data-nx-nav] {
  max-width: 812px !important;
}

/* The pair: two round glass buttons on the capsule's own edge colour, as tall
   as a nav item's icon and label, so the capsule keeps its height. */
[data-nx-prefs] {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
[data-nx-prefs] > a,
[data-nx-prefs] > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  min-width: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--ug-edge);
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.05);
  color: rgb(205 200 255 / 0.9);
  font-family: var(--ug-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
[data-nx-prefs] > button {
  width: 40px;
  padding: 0;
}
/* The export's a:hover (#cfe0ff) would otherwise take the link. */
[data-nx-prefs] > a:hover,
[data-nx-prefs] > button:hover {
  color: #ffffff;
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(34 211 238 / 0.55);
}
[data-nx-prefs] > a:focus-visible,
[data-nx-prefs] > button:focus-visible {
  outline: 2px solid var(--nx-accent);
  outline-offset: 2px;
}
[data-nx-prefs] svg {
  display: block;
  flex: none;
}
/* The button shows where it goes: the sun in the dark theme, the moon in the
   light one. */
[data-nx-moon] {
  display: none !important;
}
:root[data-theme='light'] [data-nx-sun] {
  display: none !important;
}
:root[data-theme='light'] [data-nx-moon] {
  display: block !important;
}

/* Phones: the nav items shrink below 430px (overrides.css), and the pair with
   them. "Get started" has already gone at 520px. */
@media (max-width: 520px) {
  [data-nx-prefs] {
    gap: 3px;
    margin-left: 2px;
  }
  [data-nx-prefs] > a,
  [data-nx-prefs] > button {
    height: 34px;
    min-width: 34px;
    padding: 0 8px;
    font-size: 12px;
  }
  [data-nx-prefs] > button {
    width: 34px;
    padding: 0;
  }
  [data-nx-prefs] svg {
    width: 16px;
    height: 16px;
  }
}

@media print {
  [data-nx-prefs] {
    display: none !important;
  }
}

/* ---------------------------------------------------------------- the Khmer page
 * /km/, lang="km", written by scripts/i18n.mjs. Kantumruy Pro carries the
 * Khmer inside every font stack (fonts.css declares it under each Latin
 * family, for the Khmer block only), so no font-family is restated here.
 */

/* Khmer is never letter-spaced: the tracking the page gives its small
   capitals pulls a word's stacked consonants apart. It goes from the whole
   page, the Latin labels with it, as on Task Job's bilingual pages. */
html:lang(km) body * {
  letter-spacing: normal !important;
}

/* Khmer stacks vowels above and subscripts below the line, so it wants more
   room than Latin: the page's tight display lines (1.02 to 1.2) would make a
   wrapped title's lines collide, and a gradient title, painted only inside its
   own box, would cut the marks off. */
html:lang(km) :is(h1, h2, h3, .ap-title, .cr-title, .fh-title, .cd-title, .nx-lb-title, [data-nx-services-title]) {
  line-height: 1.45 !important;
}
html:lang(km) :is(.fh-line, .fh-hl, [data-nx-services-title] > span) {
  padding-block: 0.08em;
}