/* Header band: echoes the solid blue band of the printed book, closed by a gold double rule. */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--color-band);
  color: var(--color-on-accent);
  border-block-end: 3px double var(--color-gold);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-inline-size: var(--content-max);
  min-block-size: var(--header-height);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.page--reader .site-header__inner {
  max-inline-size: none;
}

.site-header__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--step-2);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  white-space: nowrap;
}
.site-header__title:hover {
  color: inherit;
}
.site-header__title .ornament {
  color: var(--color-band-ornament);
}

.site-nav {
  margin-inline-start: auto;
}
.site-nav__list {
  display: flex;
  gap: var(--space-1);
  list-style: none;
}
.site-nav__link {
  display: block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-on-accent-muted);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: var(--leading-ui);
  text-decoration: none;
  transition:
    color var(--duration-fast),
    background-color var(--duration-fast);
}
.site-nav__link:hover {
  color: var(--color-on-accent);
  background: rgb(255 255 255 / 0.08);
}
.site-nav__link[aria-current='page'] {
  color: var(--color-on-accent);
  box-shadow: inset 0 -2px 0 var(--color-band-ornament);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.site-header .icon-button {
  color: var(--color-on-accent);
  border-color: rgb(255 255 255 / 0.25);
}
.site-header .icon-button:hover {
  background: rgb(255 255 255 / 0.1);
  color: var(--color-on-accent);
}

/* Language switch: a small pill with the other language's name, set in that language. */
.lang-switch {
  display: flex;
  gap: var(--space-1);
  list-style: none;
}
.lang-switch__link {
  display: block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-pill);
  color: var(--color-on-accent);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  line-height: var(--leading-ui);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast);
}
.lang-switch__link:hover {
  background: rgb(255 255 255 / 0.1);
  color: var(--color-on-accent);
}

/* Theme toggle shows the icon of the mode it switches to. */
.theme-icon {
  display: contents;
}
.theme-icon--sun {
  display: none;
}
:root[data-theme-effective='dark'] .theme-icon--sun {
  display: contents;
}
:root[data-theme-effective='dark'] .theme-icon--moon {
  display: none;
}

@media (max-width: 40em) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    padding-inline: var(--space-4);
    padding-block: var(--space-2) 0;
  }
  .site-header__title {
    font-size: var(--step-1);
    flex: 1;
    min-inline-size: 0;
  }
  .site-header__title span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-nav {
    order: 3;
    flex-basis: 100%;
    margin-inline: calc(-1 * var(--space-3));
  }
  .site-nav__link {
    padding-block: var(--space-2);
    font-size: var(--step--1);
  }
}