/* ==========================================================================
   Header Styles (shared between homepage and blog)
   ========================================================================== */

/* Override theme's flex styles on header and nav */
header {
  flex-wrap: nowrap !important;
  flex-direction: row !important;
}

header nav {
  flex-wrap: nowrap !important;
}

/* Header Layout
   ========================================================================== */
.blog-body .blog-wrapper header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0.75rem 2rem;
  padding-left: calc(2rem + 5px);
  margin: 0;
  box-sizing: border-box;
  z-index: 100;
  display: flex;
  flex-wrap: nowrap !important;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg-light);
  line-height: 1.5;
  transform: translateY(-200%);
  transition: transform 0.2s ease-out;
}

.blog-body .blog-wrapper header.header-visible {
  transform: translateY(0);
}

.blog-body .blog-wrapper header::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 0;
  right: 0;
  height: 200px;
  background: var(--color-bg-light);
}

html.dark .blog-body .blog-wrapper header,
html.dark .blog-body .blog-wrapper header::before {
  background: var(--color-bg-dark);
}

.blog-body .blog-wrapper header nav {
  flex-wrap: nowrap !important;
}

/* Nav Icons
   ========================================================================== */
.icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  display: inline-block;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}