:root,
[ks-theme],
[ks-inverted] {
  --dsa-header--height: calc(var(--dsa-logo--height) + var(--dsa-header--spacing-vertical) * 2);
  --dsa-header--spacing-vertical: var(--ks-spacing-inset-m);
  --dsa-header--spacing-horizontal: var(--ks-spacing-inset-xl);
  --dsa-header_floating--spacing-horizontal: var(--ks-spacing-inset-l);
  --dsa-header_open--shadow: 0 0 0 100px var(--ks-color-fg-alpha-3);
}
@media (min-width: 62em) {
  :root,
  [ks-theme],
  [ks-inverted] {
    --dsa-header--spacing-horizontal: var(--dsa-content--horizontal-spacing);
  }
}

.dsa-header {
  --dsa-header--max-width: var(--dsa-content--width_wide);
  --dsa-header--background: var(--ks-background-color-default);
  --dsa-header_floating--background: var(--dsa-overlay-box_opaque--background-color);
  --dsa-header_floating--backdrop-filter: var(--dsa-overlay-box_opaque--backdrop-filter);
  --dsa-header__logo--height: var(--dsa-logo--height);
}

.dsa-header {
  z-index: 999;
  background: var(--dsa-header--background, var(--ks-background-color-default));
  width: 100%;
  display: flex;
  padding: var(--dsa-header--spacing-vertical) 0;
  transition: height var(--ks-transition-collapse);
  height: calc(var(--dsa-logo--height) + var(--dsa-header--spacing-vertical) * 2);
  justify-content: center;
}
.dsa-header--overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  width: 100vw;
  height: 100vh;
  background-color: var(--ks-color-fg-alpha-3);
  opacity: 0;
  transition: opacity var(--ks-transition-fade);
  pointer-events: none;
}
.overlay-open .dsa-header--overlay {
  opacity: 1;
}
.overlay-open .dsa-header {
  height: 100vh;
}
.dsa-header--floating {
  width: calc(100vw - var(--dsa-header_floating--spacing-horizontal) * 2);
  max-width: calc(var(--dsa-header--max-width) + var(--dsa-header_floating--spacing-horizontal) * 2);
  top: 10px;
  padding: var(--dsa-header--spacing-vertical) 0;
  left: 50%;
  transform: translate(-50%, 0);
  background: var(--dsa-header_floating--background, var(--dsa-overlay-box_opaque--background-color));
  backdrop-filter: var(--dsa-header_floating--backdrop-filter, blur(10px));
  position: absolute;
  border-radius: var(--ks-border-radius-surface);
}
.overlay-open .dsa-header--floating {
  background: var(--dsa-header--background, var(--ks-background-color-default));
  height: 95%;
}
.dsa-header--floating .c-nav-main__link {
  text-shadow: 0 0 10px var(--ks-color-bg-alpha-5);
}
.dsa-header__content {
  padding: 0 var(--dsa-header--spacing-horizontal);
  max-width: calc(var(--dsa-header--max-width) + var(--dsa-header--spacing-horizontal) * 2);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media (min-width: 62rem) {
  .dsa-header__content {
    align-items: center;
  }
}
.dsa-header--floating .dsa-header__content {
  max-width: calc(var(--dsa-header--max-width) + var(--dsa-header_floating--spacing-horizontal) * 2);
  padding: 0 var(--dsa-header_floating--spacing-horizontal);
}

.dsa-header--spacer {
  display: none;
}
@media (min-width: 640px) {
  .dsa-header--spacer {
    display: block;
    height: var(--dsa-header--height);
    z-index: -1;
    position: relative;
    background-color: var(--ks-background-color-default);
  }
}