/**
 * F1GMAT APU Theme · colors.css
 * Color-specific rules that complement style.css.
 * All values reference palette variables defined in style.css :root.
 *
 * Note (2026-05-09): the previous version declared
 * `border-bottom: 0.5px solid var(--fg-hairline)` on both #navbar-top
 * and #navbar-main. They produced two stacked hairlines above the
 * breadcrumb that were difficult to override from style.css due to
 * cascade order (colors.css loads after style.css). Borders removed
 * at source. If a single subtle separator below the entire header is
 * wanted, add it on `header#header` instead.
 */

#page,
#main-wrapper {
  background: var(--fg-paper);
}

#navbar-top {
  background-color: var(--fg-paper);
}

#navbar-main {
  background-color: var(--fg-paper);
}

.region-primary-menu .menu-item a.is-active,
.region-primary-menu .menu-item--active-trail a {
  background: transparent;
  color: var(--fg-teal);
}

.tabs ul.primary li a.is-active,
.tabs ul.primary li.is-active a {
  background-color: var(--fg-paper);
  border-bottom-color: var(--fg-paper);
  color: var(--fg-ink);
}

.page-item.active .page-link {
  background-color: var(--fg-ink);
  border-color: var(--fg-ink);
  color: var(--fg-paper);
}

.page-link,
.page-link:hover {
  color: var(--fg-ink);
}

.region-header,
.region-header a,
.region-header li a.is-active,
.region-header .site-branding,
.region-header .site-branding__text,
.region-header .site-branding__text a,
.region-header .site-branding a,
.region-secondary-menu .menu-item a,
.region-secondary-menu .menu-item a.is-active {
  color: var(--fg-ink);
}