/* Brand palette, matching the landing page: a near-black header so the
   orange logo tile stands out. Links use a darker orange on white, where
   #F98029 falls short of AA contrast. */
:root {
  --md-primary-fg-color: #0B0B0C;
  --md-primary-fg-color--light: #1C1C1E;
  --md-primary-fg-color--dark: #000000;
  --md-accent-fg-color: #F98029;
}

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

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #F98029;
}

/* Site name styled like the portal sidebar's brand (ui-shell SidebarFrame):
   Tailwind's default sans stack, font-semibold text-sm tracking-wide. */
.md-header__title {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.7rem;
  letter-spacing: 0.025em;
}

.md-header__topic:first-child {
  font-weight: 600;
}

/* Tabs sit inline in the header (overrides/partials/header.html). The site
   name sizes to its text so the tabs follow it; below Material's tabs
   breakpoint the tabs are hidden and the name grows to fill the row again. */
.md-header__topic {
  position: static;
}

.md-header__inner .md-tabs {
  flex-grow: 1;
  width: auto;
  background-color: transparent;
}

.md-header__inner .md-tabs__item {
  display: flex;
  align-items: center;
}

.md-header__inner .md-tabs__link {
  margin-top: 0;
}

/* Portal's 28px logo with a 10px gap to the name. Only at this width:
   below it Material swaps the logo for the drawer button. */
@media screen and (min-width: 76.25em) {
  .md-header__title {
    flex-grow: 0;
  }

  .md-header__button.md-logo img {
    height: 1.4rem;
  }

  /* Trimmed vertical margin keeps the header at Material's 2.4rem. */
  [dir="ltr"] .md-header__button.md-logo {
    margin: 0.1rem 0 0.1rem 0.2rem;
    padding-right: 0;
  }

  [dir="ltr"] .md-header__title {
    margin-left: 0.5rem;
  }
}

/* A variant of Material's grid cards that stacks a single column, for
   content where order matters (e.g. sequential steps) rather than a
   browsable grid of unordered items. */
.md-typeset .grid.stepper {
  grid-template-columns: 1fr;
}