[data-type="cavalree/section"i][data-variant="site-header"i] {
  --c-box--padding--block: 1rem;
  --c-box--padding--inline: 1rem;
  margin-block-end: -100%;

  .block-editor & {
    display: none !important;
  }
}

.block-editor {
  [aria-label="Block: Header"] {
    display: none;
  }
}

:root:has(.hamburger[aria-expanded="true"i]) {
  overflow: clip;
}

.c-nav {
  contain: paint;
  background-color: var(--c--color--midnight);
  color: var(--c--color--white);
  font-family: var(--c-text--family--acme-gothic-condensed);
  font-size: 2rem;
  font-style: var(--c-text--style--acme-gothic-condensed);
  font-weight: var(--c-text--weight--acme-gothic-condensed);
  letter-spacing: var(--c-text--tracking--acme-gothic-condensed);
  line-height: var(--c-text--line-height--acme-gothic-condensed);
  text-transform: uppercase;

  position: absolute; /* so it stays pinned to viewport */
  inline-size: clamp(20rem, 100cqi, 30rem);
  inset-block: 0;
  inset-inline-end: 0;
  padding-block-start: 9rem;
  z-index: 3; /* above backdrop and hamburger */

  transition: inline-size 300ms ease;

	& [data-type="cavalree/button"i][data-variant="default"i] {
		--c-box--color--text: var(--c--color--buttercup);

		&:is(:hover, :focus) {
			--c-box--color--border: var(--c--color--transparent);
			--c-box--color--canvas: var(--c--color--buttercup);
			--c-box--color--text: var(--c--color--midnight);
		}
	}

	& [data-type="cavalree/button"i][data-variant="default"i] {
		--c-box--color--text: var(--c--color--buttercup);

		&:is(:hover, :focus) {
			--c-box--color--border: var(--c--color--transparent);
			--c-box--color--canvas: var(--c--color--buttercup);
			--c-box--color--text: var(--c--color--midnight);
		}
	}

  & .c-nav_list {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-wrap: nowrap;

		& :any-link:not([class]) {
			border-block-end-color: var(--c--color--transparent);
			border-block-end-width: 3px;

			&:is(:hover, :focus) {
				border-block-end-color: currentcolor;
			}
		}
  }

  &[hidden] {
    display: block;
    inline-size: 0 !important;
    pointer-events: none;
  }
}

.c-nav_backdrop {
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 0.50);
  z-index: 2; /* above page content, below button + nav */
}

.c-nav_backdrop[hidden] {
  display: none;
}

:any-link {
  cursor: pointer;
}

.hamburger {
  scale: 0.75;
  padding-block-start: 28.75px;
  padding-block-end: 21.25px;
  padding-inline: 20px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: currentcolor; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: currentcolor;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }
    
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

	&::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
	}

  &::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}
}

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  &::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
	}

  &::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
}

.hamburger {
  border-radius: 9999px;
  background-color: rgb(0 0 0 / 0.5);
  color: white;
  display: block;
  margin-inline-start: auto;
  z-index: 10; 
}

#decoration {
  block-size: 12rem;
  position: absolute;
  inset-inline-end: -3rem;
  inset-block-end: -3rem;
  fill: var(--c--color--buttercup);
  z-index: -1;
}