/* Ashling docs — additions on top of Material */

/* Brand (from ashling.com): navy #0A0D21, magenta #D950C5 → violet #8359EA, Montserrat headings.
   Text colours below are darkened/lightened from the brand accents to pass WCAG AA. */
:root {
  --ash-navy: #0a0d21;
  --ash-navy-2: #12163a;
  --ash-magenta: #d950c5;
  --ash-violet: #8359ea;
  --ash-gradient: linear-gradient(100deg, #b4329f 0%, #6a3fd6 100%);   /* white text ≥ 5.3:1 */
  --ash-gradient-text: linear-gradient(100deg, #e08ad6 0%, #b59cff 100%); /* on navy ≥ 8:1 */
  --ash-heading-font: "Montserrat", var(--md-text-font-family, sans-serif);

  --ash-shot-border: rgba(0, 0, 0, 0.12);
  --ash-shot-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --ash-pending-bg: rgba(107, 63, 217, 0.05);
  --ash-pending-border: rgba(107, 63, 217, 0.35);
}

[data-md-color-primary="custom"] {
  --md-primary-fg-color: #0a0d21;
  --md-primary-fg-color--light: #1a1e3a;
  --md-primary-fg-color--dark: #000319;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.72);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: #6b3fd9;                     /* on white 6.3:1 */
  --md-accent-fg-color--transparent: rgba(107, 63, 217, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-scheme="default"] {
  --md-typeset-a-color: #6b3fd9;
}

[data-md-color-scheme="slate"] {
  --md-hue: 232;                                      /* tint the dark theme towards the brand navy */
  --md-typeset-a-color: #b59cff;                      /* on slate 7.0:1 */
  --md-accent-fg-color: #c8a8ff;
  --md-accent-fg-color--transparent: rgba(181, 156, 255, 0.12);

  --ash-shot-border: rgba(255, 255, 255, 0.14);
  --ash-shot-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  --ash-pending-bg: rgba(181, 156, 255, 0.06);
  --ash-pending-border: rgba(181, 156, 255, 0.4);
}

/* Headings and the header title in the brand typeface */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__topic,
.md-tabs__link {
  font-family: var(--ash-heading-font);
}

.md-typeset h1 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}

.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
}

/* Terms in definition lists (Glossary, field reference, tour) read as small headings */
.md-typeset dl > dt {
  font-weight: 700;
}

/* Keep "Ashling Documentation" whole in the header on phones */
@media screen and (max-width: 29.9375em) {
  .md-header__topic {
    font-size: 0.8rem;
  }
}

/* The Ashling Activity Bar icon shown inline in text, on a dark chip like VS Code's Activity Bar */
.md-typeset img.ash-activity-icon {
  height: 1.4em;
  padding: 0.15em;
  vertical-align: middle;
  background: #2c2c32;
  border-radius: 4px;
}

/* The logo is a wide wordmark, not a square mark */
.md-header__button.md-logo img {
  height: 1.05rem;
  width: auto;
}

/* A thin brand gradient under the header */
.md-header {
  box-shadow: none;
}

.md-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ash-magenta), var(--ash-violet));
  opacity: 0.85;
}

.md-tabs {
  background-color: var(--ash-navy);
}

/* Framed screenshots: <figure class="shot" markdown> ![..](..) <figcaption>..</figcaption> </figure> */
.md-typeset figure.shot {
  margin: 1.4em auto;
  max-width: 100%;
}

.md-typeset figure.shot img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--ash-shot-border);
  border-radius: 6px;
  box-shadow: var(--ash-shot-shadow);
}

.md-typeset figure.shot figcaption {
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
  max-width: 44rem;
  margin-top: 0.6em;
}

/* Small UI screenshots (pickers, tree rows) should not be stretched, and still shrink on phones */
.md-typeset figure.shot.narrow img {
  max-width: min(38rem, 100%);
}

.md-typeset figure.shot.tiny img {
  max-width: min(22rem, 100%);
}

/* Placeholder for screenshots that are still to be captured */
.md-typeset .shot-pending {
  margin: 1.4em 0;
  padding: 1.1em 1.2em;
  border: 1px dashed var(--ash-pending-border);
  border-radius: 6px;
  background: var(--ash-pending-bg);
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
  text-align: center;
}

.md-typeset .shot-pending::before {
  content: "Screenshot coming soon — ";
  font-weight: 600;
}

/* Exact on-screen labels: <span class="ui">SDK Manager</span> (bold text is used in most places) */
.md-typeset .ui {
  font-weight: 600;
  white-space: nowrap;
}

/* Grid cards: give the icon a little colour and the cards an even height */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  display: flex;
  flex-direction: column;
}

.md-typeset .grid.cards .twemoji.lg,
.md-typeset .grid.cards .lg {
  color: var(--md-accent-fg-color);
}

/* Numbered task steps read better with a little more space */
.md-typeset ol > li + li {
  margin-top: 0.45em;
}

/* Keep wide tables readable on phones */
.md-typeset table:not([class]) {
  font-size: 0.72rem;
}

/* ---------- Release notes (overrides/release.html), after code.visualstudio.com/updates ---------- */

.md-typeset .rn__crumb {
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.md-typeset .rn__crumb a { color: var(--md-accent-fg-color); }

/* Same size and weight as every other page title */
.md-typeset .rn__title {
  margin: 0 0 0.6rem;
}

.md-typeset .rn__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .rn__pill {
  padding: 0.05rem 0.6rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
}

.md-typeset .rn__hint {
  margin: 0.6rem 0 1.6rem;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

/* "Release highlights": the heading and its list share a gradient accent bar on the left */
.md-typeset .rn__body h2#release-highlights,
.md-typeset .rn__body h2#release-highlights + ul {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--ash-magenta), var(--ash-violet)) 1;
}

.md-typeset .rn__body h2#release-highlights {
  margin: 0;
  padding: 0.2rem 0 0.4rem 1rem;
}

.md-typeset .rn__body h2#release-highlights + ul {
  margin: 0;
  padding: 0.2rem 0 0.6rem 2.2rem;
}

.md-typeset .rn__body h2#release-highlights + ul > li {
  margin-bottom: 0.55em;
  line-height: 1.6;
}

.md-typeset .rn__body h2#release-highlights + ul > li strong a,
.md-typeset .rn__body h2#release-highlights + ul > li a strong {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Short pages (e.g. a release note) still fill the window, so the footer never sits beside the sticky sidebar. */
.md-main__inner {
  min-height: calc(100vh - 4.8rem);
}

/* ---------- The current page's sections in the left pane (javascripts/toc-collapse.js) ---------- */

.ash-page-toggle {
  display: none;
}

@media screen and (min-width: 76.25em) {
  /* No "On this page" heading: the sections hang straight off the page's entry */
  .md-nav--primary .md-nav--secondary > .md-nav__title {
    display: none;
  }

  .md-nav--primary .ash-has-sections {
    position: relative;
  }

  .md-nav--primary .ash-has-sections > a.md-nav__link {
    padding-right: 1.4rem;
  }

  .ash-page-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.05em;
    right: 0.25rem;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--md-default-fg-color--light);
    cursor: pointer;
  }

  .ash-page-toggle:hover {
    color: var(--md-accent-fg-color);
  }

  .ash-page-toggle:focus-visible {
    outline: 2px solid var(--md-accent-fg-color);
    outline-offset: 2px;
  }

  /* Specific enough to beat Material's rule that shows the active page's sections */
  .md-nav--primary .md-nav__list .md-nav__item--active > .md-nav--secondary.ash-collapsed {
    display: none;
  }

  /* Points right when collapsed, down when open, like the section chevrons */
  .ash-chevron {
    display: inline-block;
    width: 0.38rem;
    height: 0.38rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 150ms ease;
  }

  .ash-page-toggle[aria-expanded="true"] > .ash-chevron {
    transform: rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ash-chevron { transition: none; }
}

/* ---------- Click-to-zoom screenshots (javascripts/zoom.js) ---------- */

.md-typeset figure.shot img[data-zoom] {
  cursor: zoom-in;
}

/* Set by zoom.js when the image is shown smaller than its real size */
.md-typeset figure.shot--scaled figcaption::after {
  content: " Select the image to see it full size.";
}

.ash-zoom {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(10, 13, 33, 0.88);
  cursor: zoom-out;
}

.ash-zoom img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}