@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

/* Headings on both sites and in the API reference (api/index.md) use the
   brand's Montserrat, loaded here; the content-security policy allows
   Google Fonts. */
.md-typeset :is(h1, h2, h3, h4, h5, h6),
.api-ref .sl-elements :is(h1, h2, h3, h4) {
    font-family: "Montserrat", var(--md-text-font-family), sans-serif;
}

.md-typeset :is(h1, h2, h3, h4, h5, h6) {
    color: var(--expeto-heading-color);
    font-weight: normal;
}

.md-typeset h1 {
    font-size: 1.6em;
    font-weight: bold;
}
.md-typeset h2 {
    font-size: 1.4em;
}
.md-typeset h3 {
    font-size: 1.2em;
}
.md-typeset h4 {
    font-size: 1.0em;
}
.md-typeset h5,
.md-typeset h6 {
    font-size: 0.8em;
}


.md-tabs__link {
  font-weight: bold;
}

.md-tabs__item--active {
    background-color: var(--md-primary-fg-color--light);
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}

/* Tabs that leave the docs (target="_blank", e.g. Support): pushed to the
   far right and drawn as an outlined button with an external-link arrow.
   The theme's .md-tabs__list is a flex row, so margin-left: auto does the
   pushing; browsers without :has() keep the tab inline but still get the
   button-and-arrow treatment. */
.md-tabs__item:has(> .md-tabs__link[target="_blank"]) {
    margin-left: auto;
}

.md-tabs__link[target="_blank"] {
    /* Default link: margin-top .8rem, no border/padding. Border (.05rem)
       plus padding (.1rem) is taken off the margin to keep the label on the
       same baseline as the other tabs. */
    margin-top: .65rem;
    padding: .1rem .6rem;
    border: .05rem solid currentcolor;
    border-radius: 1rem;
    opacity: .9;
}

.md-tabs__link[target="_blank"]::after {
    content: "↗";
    margin-left: .3rem;
    font-weight: bold;
}

/* Reserve the scrollbar's width on pages that do not scroll (the API
   reference), so the viewport is the same width on every page. */
html {
    scrollbar-gutter: stable;
}

/* Every grid (header, tabs, main, footer) spans the viewport, so the tabs,
   search and navigation sit at the left and the page's table of contents
   at the right edge on every page. */
.md-grid {
    max-width: none;
}

/* The page text keeps a reading width; pages flagged by
   hooks/wide-tables.py (tables wider than that) use the full column. */
.md-content__inner {
    max-width: 50rem;
}

body[data-md-wide-tables] .md-content__inner {
    max-width: none;
}

.md-nav__link--active {
    background-color: var(--expeto-nav-active-bg);
    padding: 0.2em;
    border-radius: .2em;
}

/* Dark scheme: the active entry's text takes the header text colour, for
   contrast on its blue background. */
[data-md-color-scheme="slate"] .md-nav__link--active {
    color: var(--md-primary-bg-color);
}

.md-nav__list {
    background-color: var(--expeto-nav-bg);
    padding-top: 0.4em;
}

.md-typeset .tabbed-set {
    border-radius: .2em;
    border: 0.5px solid var(--md-default-fg-color--lightest);
}

.md-typeset .tabbed-content {
    padding-left: 1rem;
    padding-right: 1rem;
}

.admonition::before {
    margin-left: -5rem;
}

.md-typeset .admonition {
    border-left: 5px solid;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

.md-typeset__table {
    width: 100%;
  }

.md-typeset__table table:not([class]) {
    display: table;
    height: .5rem;
}

.md-typeset__table table:not([class]) th {
    background-color: var(--expeto-table-head-bg);
}

/* Light and dark palettes, from the xControl frontend (spruce) theme tokens
   in modules/frontend/src/styles/theme.css. The configs select them with
   primary/accent "custom" and toggle between the two schemes. */
[data-md-color-scheme="default"] {
    --md-primary-fg-color:        #147ec1; /* --blue-9 */
    --md-primary-fg-color--light: #61afeb; /* --blue-8 */
    --md-primary-fg-color--dark:  #0070b2; /* --blue-10 */
    --md-primary-bg-color:        #ffffff; /* --blue-contrast */
    --md-accent-fg-color:         #0070b2; /* --blue-10 */
    --md-typeset-a-color:         #0073b5; /* --blue-11 */
    --md-default-bg-color:        #fafdff; /* --gray-1, --surface-primary */
    --md-default-fg-color:        #1f2632; /* --slate-12, --label-primary */
    --md-code-bg-color:           #ecf0f5; /* --gray-3 */
    --expeto-heading-color:       #0073b5; /* --blue-11 */
    --expeto-nav-bg:              #f6f9fd; /* --gray-2 */
    --expeto-nav-active-bg:       #d1edff; /* --blue-4 */
    --expeto-table-head-bg:       #ecf0f5; /* --gray-3 */
}

[data-md-color-scheme="slate"] {
    --md-hue: 232;
    --md-primary-fg-color:        #282a39; /* --gray-3, --surface-primary */
    --md-primary-fg-color--light: #363950; /* --gray-5 */
    --md-primary-fg-color--dark:  #1a1b22; /* --gray-1 */
    --md-primary-bg-color:        #e8ebfd; /* --gray-12 */
    --md-accent-fg-color:         #71c1ff; /* --blue-11 */
    --md-typeset-a-color:         #71c1ff; /* --blue-11 */
    --md-default-bg-color:        #1a1b22; /* --gray-1, --background */
    --md-code-bg-color:           #282a39; /* --gray-3 */
    --expeto-heading-color:       #71c1ff; /* --blue-11 */
    --expeto-nav-bg:              #202129; /* --gray-2 */
    --expeto-nav-active-bg:       #08649b; /* --blue-7 */
    --expeto-table-head-bg:       #282a39; /* --gray-3 */
}

/* "API:" cross-reference lines closing a user-guide section, linking the
   API Reference operations that do the same task. */
.md-typeset .api-xref {
    margin-top: 0.8em;
    padding: 0.35em 0.7em;
    border-left: 0.2rem solid var(--md-primary-fg-color);
    border-radius: 0 0.2rem 0.2rem 0;
    background-color: var(--expeto-nav-bg);
    color: var(--md-default-fg-color--light);
    font-size: 0.7rem;
    line-height: 1.6;
}

.md-typeset .api-xref strong {
    margin-right: 0.3em;
    color: var(--md-primary-fg-color);
    letter-spacing: 0.04em;
}

[data-md-color-scheme="slate"] .md-typeset .api-xref strong {
    color: var(--md-accent-fg-color);
}

/* The PDF guides have no API Reference to link to. */
@media print {
    .md-typeset .api-xref {
        display: none;
    }
}