/* COM3 navigation: rounded capsule header and controls. */
header .header {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: #fffffffc;
  border: 1px solid #dfe5ef;
  border-radius: 999px;
  box-shadow: 0 5px 24px #1e1f3d16;
  filter: none;
}

header .header::before,
header .header::after {
  content: none;
}

header .header > .button,
header .language-switch,
header .language-switch a,
header .menubutton { border-radius: 999px; }
header .language-switch img { border-radius: 2px; }
header .navdrop > div { border-radius: 18px; }
header .mega-group a { border-radius: 10px; }
header .mobilenav { border-radius: 22px; }

header .header > .button {
  min-height: 44px;
  padding-inline: 18px;
}

header .language-switch {
  padding: 3px;
  background: #ffffff;
}

header .language-switch a {
  min-height: 38px;
}

header .header .navdrop > .mega {
  border-top: 2px solid var(--cyan);
}

header .mobilenav {
  border-top: 2px solid var(--cyan);
}

header .mobilenav .navdrop > .mega {
  border-top: 0;
}

header .menubutton {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--pale);
}

header .menubutton:hover,
header .menubutton[aria-expanded="true"] {
  background: #eaf0f9;
  border-color: var(--blue);
}

@media (max-width: 680px) {
  header .header {
    padding-inline: 14px;
  }

  header .language-switch a {
    min-height: 38px;
    padding-inline: 6px;
  }

  header .mobilenav {
    padding-inline: 18px;
  }
}

@media (max-width: 360px) {
  header .header {
    gap: 7px;
    padding-inline: 11px;
  }

  header .header .brand {
    width: 104px;
  }

  header .language-switch a {
    padding-inline: 5px;
    gap: 3px;
  }
}

@media (forced-colors: active) {
  header .header {
    filter: none;
    background: Canvas;
    border: 1px solid CanvasText;
  }

  header .header::before,
  header .header::after {
    display: none;
  }
}