/**
 * Header of the subpages: logo and hand-cut menu links in the blue band.
 * The active page carries the sound wave from the logo.
 *
 * Many declarations reset older rules from klingtgut.css on the menu links,
 * some of which use !important.
 */
.kj-header {
  --kj-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Cpath d='M0 5 6 1 12 5 18 9 24 5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  background: #0088aa;
  border-bottom: 2px solid #000;
  padding: 10px 0;
}
.kj-logo { display: block; flex: none; }
.kj-logo img { display: block; height: 30px; width: auto; }

.kj-header .navbar-toggler { border: 0; padding: 4px; }
.kj-header .navbar-toggler-icon { filter: invert(1) brightness(2); }
.kj-header .navbar-toggler:focus,
.kj-header .nav-link:focus-visible { box-shadow: none; outline: 2px solid #fff; outline-offset: 2px; }

.kj-header .menu.navbar-nav,
.kj-header .menu.menu--main.nav.navbar-nav {
  background-color: transparent !important;
  font-size: inherit;
  height: auto;
  margin: 0;
  position: static;
}
.kj-header .nav > li,
.kj-header .nav > li.first { margin: 0 !important; padding: 0; }

.kj-header .navbar-nav a.nav-link {
  background: none !important;
  border: 0;
  color: #fff;
  font-family: 'Klingtjut', ubuntu, sans-serif;
  font-size: 34px;
  height: auto;
  line-height: 1 !important;
  padding: 0 0 12px;
  position: static;
  text-decoration: none !important;
  width: fit-content;
}
.kj-header .navbar-nav a.nav-link::before { content: none !important; display: none; }
.kj-header .navbar-nav a.nav-link:hover { color: #f4f1e4; }
.kj-header .navbar-nav a.is-active,
.kj-header .navbar-nav a.active-trail,
.kj-header .navbar-nav a.nav-link:hover {
  background: var(--kj-wave) repeat-x left bottom !important;
}

.kj-header .region-navigation-collapsible { display: flex; flex-direction: column; }
.kj-header #block-klingtgut5-main-menu { order: 1; }
.kj-header #block-klingtgut5-account-menu { order: 2; }

/* Phone and tablet: the opened menu continues the blue band. */
@media (max-width: 991.98px) {
  .kj-header .navbar-nav { gap: 8px; padding-top: 12px; }
}

/* klingtgut.css hides this link from 768px; its empty item must go as well,
   otherwise it still takes up a place in the row. */
@media (min-width: 768px) {
  .kj-header .nav > li:has(> .mobileOnly) { display: none; }
  .kj-header .menu--account { bottom: auto !important; display: flex; }
}

/* All links in one row. The sizes follow the steps of the Bootstrap container,
   not the screen width, so that the row always fits next to the logo. */
@media (min-width: 992px) {
  .kj-logo img { height: 80px; }
  .kj-header > .container { align-items: flex-end; }
  .kj-header .navbar-collapse { justify-content: flex-end; }
  .kj-header .region-navigation-collapsible {
    align-items: flex-end;
    flex-direction: row;
    gap: 20px;
    padding-bottom: 6px;
  }
  .kj-header .navbar-nav { flex-wrap: nowrap; gap: 20px; }
  .kj-header .navbar-nav a.nav-link { font-size: 24px; white-space: nowrap; }
}

@media (min-width: 1200px) {
  .kj-header .region-navigation-collapsible,
  .kj-header .navbar-nav { gap: 26px; }
  .kj-header .navbar-nav a.nav-link { font-size: 30px; }
}