/* Responsive YouTube / video embeds.
   Wrap an iframe in <div class="video"> and it scales to any screen width. */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 1.5rem 0;
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
}

/* Screenshots read better with a hairline border — shop screenshots are often
   mostly white and otherwise bleed into the page background. */
.md-typeset figure img,
.md-typeset p > img {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
}

.md-typeset figure figcaption {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
  max-width: none;
}

/* ---------------------------------------------------------------- Khmer ----
   Material ships Roboto, which has no Khmer glyphs — without this the browser
   falls back to whatever the device has, so the site looks different on every
   phone. Khmer also stacks subscript consonants below the baseline, so it needs
   noticeably more line-height than Latin or the lines collide. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Khmer:wght@400;500;700&display=swap');

[lang="km"] body,
[lang="km"] .md-typeset,
[lang="km"] .md-nav,
[lang="km"] .md-header {
  font-family: "Noto Sans Khmer", "Khmer OS", "Khmer Sangam MN", sans-serif;
}

[lang="km"] .md-typeset {
  line-height: 1.95;
}

[lang="km"] .md-typeset h1,
[lang="km"] .md-typeset h2,
[lang="km"] .md-typeset h3 {
  line-height: 1.6;
  font-weight: 500;
}

[lang="km"] .md-nav__link {
  line-height: 1.7;
}


/* Increase logo size in header */
.md-header__button.md-logo img {
  height: 2.4rem;
  width: auto;
}

.md-header__button.md-logo {
  padding: 0.2rem;
}

/* Style the site title ("Help") cleanly */
.md-header__topic {
  font-weight: 300 !important;
  opacity: 0.85;
  letter-spacing: 0.05em;
  padding-left: 0.25rem;
}

/* ChouyLok Brand Colors for MkDocs Header */
:root, [data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #37474F;
  --md-primary-fg-color--light: #62727B;
  --md-primary-fg-color--dark:  #102027;
  --md-primary-bg-color:        #ffffff;
  
  --md-accent-fg-color:         #2D469A;
  --md-accent-fg-color--transparent: rgba(45, 70, 154, 0.1);
  --md-accent-bg-color:         #ffffff;
  --md-footer-bg-color:         #37474F;
  --md-footer-bg-color--dark:   #102027;
  --md-footer-fg-color:         #ffffff;
  --md-footer-fg-color--light:  rgba(255, 255, 255, 0.7);
  --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.3);
  
  /* Keep body links brand blue even though header is slate */
  --md-typeset-a-color:         #2D469A;
}

/* Sidebar Navigation Hover & Active States */
.md-nav__link:hover,
.md-nav__link--active,
.md-nav__link--active:hover {
  color: #2D469A !important;
}
.md-tabs__link:hover,
.md-tabs__link--active {
  color: #2D469A !important;
}

/* Fix for Dark Mode Links */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color:         #7691F3;
  --md-accent-fg-color:         #7691F3;
}
[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link--active:hover,
[data-md-color-scheme="slate"] .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: #7691F3 !important;
}