/*
 * Drupal Blue (#009CDE), the primary color in Drupal's media kit
 * (https://www.drupal.org/about/media-kit/logos), in place of the theme's
 * blue. The shades follow the theme's own blue palette: one lighter, one
 * darker, with white text on the primary color. The accent, which links and
 * controls take on hover, is the lighter shade, as the theme's accents are
 * brighter than its primary colors.
 */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #009cde;
  --md-primary-fg-color--light: hsl(198, 100%, 50%);
  --md-primary-fg-color--dark: #0077a8;
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: #ffffffb3;
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: hsl(198, 100%, 50%);
  --md-accent-fg-color--transparent: hsla(198, 100%, 50%, 0.1);
  --md-accent-bg-color: #fff;
  --md-accent-bg-color--light: #ffffffb3;
}

/*
 * The header and the tabs take the primary color. The modern theme draws them
 * in a translucent shade of the page background.
 */
.md-header,
.md-tabs {
  color: var(--md-primary-bg-color);
  background-color: var(--md-primary-fg-color);
}

.md-tabs__item--active {
  border-bottom-color: currentcolor;
}

/*
 * The logo takes most of the header's 2.4rem height, so the details of the
 * hat show. The padding around it shrinks by as much as the logo grows, which
 * keeps the header at the same height.
 */
.md-header__button.md-logo {
  padding: 0.3rem;
  margin: 0 0.2rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.8rem;
}

/*
 * The search button in the header is white on a translucent white, instead of
 * the page's text color on a translucent shade of it.
 */
.md-header .md-search__button {
  color: var(--md-primary-bg-color--light);
  background-color: #ffffff26;
}

.md-header .md-search__button:focus,
.md-header .md-search__button:hover {
  color: var(--md-primary-bg-color);
  background-color: #ffffff40;
}

.md-header .md-search__button::before {
  background-color: currentcolor;
}

.md-header .md-search__button::after {
  background-color: #ffffff26;
}

/*
 * Tables take the full width of the content area, so a column of long text
 * isn't squeezed next to short ones. The theme sizes a table to its content.
 * The wrapper scrolls a table that is still wider than the page.
 */
.md-typeset__table {
  display: block;
  overflow-x: auto;
}

.md-typeset table:not([class]) {
  display: table;
  width: 100%;
}

/*
 * The Coder pages give a sniff and what handles it columns of the same width.
 * An empty `coder-table` span in the header marks these tables.
 */
.md-typeset table:not([class]):has(.coder-table) {
  table-layout: fixed;
}

/*
 * An empty `unbroken-first-column` span in the header marks a table whose
 * first column stays on one line.
 */
.md-typeset table:not([class]):has(.unbroken-first-column) td:first-child,
.md-typeset table:not([class]):has(.unbroken-first-column) td:first-child code {
  white-space: nowrap;
  word-break: normal;
}