/* OSM brand colour overrides for the Material theme */
:root {
  --md-primary-fg-color:        #0072ce;
  --md-primary-fg-color--light: #338ed8;
  --md-primary-fg-color--dark:  #005ba6;
  --md-accent-fg-color:         #0072ce;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0072ce;
  --md-accent-fg-color:  #338ed8;
}

/* ---- Global OSM top bar (rendered in Material's announcement slot) ----
   The banner inner carries .md-typeset, whose `[dir=ltr] .md-typeset ul/li`
   rules outrank a bare `.osm-topbar ul`. Scope every rule under `.md-banner`
   so it wins, and zero the list margins md-typeset injects. */

/* Compact the banner so it occupies a single slim row. */
.md-banner .md-banner__inner {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

.md-banner .osm-topbar,
.md-banner .osm-topbar ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-banner .osm-topbar {
  justify-content: space-between;
  gap: 1.2rem;
  font-size: 0.62rem;
  line-height: 1;
}

.md-banner .osm-topbar ul {
  gap: 1.2rem;
}

.md-banner .osm-topbar li {
  margin: 0;
}

.md-banner .osm-topbar a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  opacity: 0.85;
  transition: opacity 125ms;
}

.md-banner .osm-topbar a:hover {
  opacity: 1;
}

.md-banner .osm-topbar__links a {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}

/* Material ships brand icons as inline SVG; size and colour them here. */
.md-banner .osm-topbar__social svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

/* On narrow screens drop the text links, keep the social icons. */
@media screen and (max-width: 44.9375em) {
  .md-banner .osm-topbar__links {
    display: none;
  }
  .md-banner .osm-topbar {
    justify-content: flex-end;
  }
}