/* Header: logo | nav | burger. On desktop the nav fills the space between the
   logo and the burger, on phones (<=767) it drops to its own row. */
.site-header {
  position: relative;
  z-index: 20; /* above the page content and the blobs */
  background: transparent;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: space-between;
  column-gap: var(--page-gutter);
  padding-inline: var(--page-gutter);
  padding-block: calc((var(--header-h) - var(--toggle-size)) / 2);
}

.logo {
  order: 1;
  flex: 0 0 auto;
  display: block;
  width: var(--logo-w);
  height: var(--logo-h);
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-btn {
  order: 3;
  flex: 0 0 auto;
  position: relative;
  width: var(--toggle-size);
  height: var(--toggle-size);
}

.menu-btn img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.menu-btn .icon-close,
.menu-btn[aria-expanded="true"] .icon-open {
  display: none;
}

.menu-btn[aria-expanded="true"] .icon-close {
  display: block;
}

.site-header > .wp-block-navigation {
  order: 2;
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(160 * var(--u));
  opacity: 1;
  pointer-events: auto;
}

/* desktop/tablet: hide the burger entirely — the nav is always shown */
@media (min-width: 768px) {
  .menu-btn {
    display: none;
  }

  .wp-block-navigation-item__content {
    font-size: max(var(--font-min), calc(24 * var(--fu)));
  }
}

.site-header > .wp-block-navigation .wp-block-navigation__container {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(160 * var(--u));
}

.wp-block-navigation-item__content {
  font-weight: 400;
  font-size: var(--nav-font);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-black);
}

.wp-block-navigation-item__content:hover {
  color: var(--color-pastel-blood);
}

@media (max-width: 767px) {
  .menu-btn {
    order: 2;
  }

  .site-header > .wp-block-navigation {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(20 * var(--u));
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition:
      max-height 0.45s ease,
      opacity 0.35s ease,
      padding-block 0.45s ease;
  }

  .site-header > .wp-block-navigation .wp-block-navigation__container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(20 * var(--u));
  }

  .site-header > .wp-block-navigation.is-open {
    max-height: calc(400 * var(--u));
    opacity: 1;
    pointer-events: auto;
    padding-block: calc(24 * var(--u));
  }
}

/* after scrolling the header gets a frosted bar */
.site-header.is-scrolled {
  background: rgba(253, 243, 236, 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* The header sits inside a template-part wrapper, so the wrapper is what stays on screen. */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 20;
}
body.admin-bar .wp-site-blocks > header {
  top: 32px;
}

/* Smooth show/hide: the header slides up while scrolling down and back down when scrolling up */
.wp-site-blocks > header {
  transition: transform 0.4s ease;
}
.wp-site-blocks > header.is-hidden {
  transform: translateY(-100%);
}
.site-header {
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}