.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.c-menu-toggle {
	--mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 94.61H113.79V77H512zm0 322.78H113.79V435H512zm-.02-170.19H0v17.61h511.98z'/%3E%3C/svg%3E");

  background: transparent;
  padding: 0.5rem 0.75rem;
  font: inherit;
  border-radius: 0.5rem;

	&[aria-expanded="true"i] {
		--mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12' /%3E%3C/svg%3E%0A");
	}
}

@media (min-width: 64rem) {
  .c-menu-toggle { display: none; }
  .c-menu-panel { display: block !important; }
}

@media (max-width: 63.9375rem) {
  .temp-header .c-cluster { gap: 0.75rem; }
  .c-menu-panel[hidden] { display: none !important; }
  .c-menu-panel, .c-menu-layout { inline-size: 100%; }
  .c-menu-panel > ul {
    flex-direction: column;
    gap: 0;
  }
}

.temp-header ul {
  text-transform: var(--c--typography--mark--case);
  font-family: var(--c--typography--mark--family);
  line-height: var(--c--typography--mark--line-height);
  font-size: 0.75rem;
  font-style: var(--c--typography--mark--style);
  letter-spacing: var(--c--typography--mark--tracking);
  font-weight: var(--c--typography--mark--weight);

  display: flex;
  list-style: none;
  column-gap: 0.25rem;
  row-gap: 0.5rem;
}

.temp-header li {
  position: relative;
}

.temp-header ul ul {
  background-color: var(--c--color--ecru-white, white);
  display: none;
	position: absolute;
  flex-direction: column;
  list-style: none;
  inline-size: 17rem;
  inset-block-start: 2.75rem;
  gap: 0px;
  border: 1px solid var(--c--color--button);
  z-index: 1;
}

.temp-header li:is(:hover, :focus-within) ul {
  display: flex;
	justify-content: center;
}

.temp-header ul :any-link:not([data-type]) {
  padding-block: 1rem;
  padding-inline: 0.75rem;
  display: block;

  &:is(:hover, :focus-within),
  &:has(~ :hover, ~ :focus-within) {
    background-color: var(--c--color--green-white);
  }
}

.temp-header .red {
  color: #8D241B;
}

.menu-icon {
  background-color: currentcolor;
  display: block;
  block-size: 32px;
  inline-size: 32px;
  pointer-events: none;
  mask-image: var(--mask-image);
  mask-size: 100%;
}

@media (max-width: 63.9375rem) {
  .c-box:has(.temp-header nav > button[aria-expanded="true"i]) {
    --c-box--place--block: start;
    --c-box--color--canvas: var(--c--color--ecru-white);
    min-block-size: 100svb;
  }

  html:has([data-variant="site-header"i] button[aria-expanded="true"i]) {
    overflow: hidden;
  }
}

@media (min-width: 64rem) {
  .submenu-toggle { display: none; }

  .temp-header ul ul {
    display: none;
  }
  .temp-header li:hover > ul { display: flex; }
}

@media (max-width: 63.9375rem) {
  .temp-header li:hover > ul { display: none; }

  .temp-header ul ul[data-submenu] {
    position: static;
    inset: auto;
    display: none;
    border: 0;
    inline-size: 100%;
    background: transparent;
  }

  .temp-header li.is-open ul[data-submenu] {
    display: flex;
    flex-direction: column;
		justify-content: center;
    gap: 0;
    padding-inline-start: 1.5rem;
  }

  .temp-header .c-menu-hero {
    display: none;
  }

  .temp-header .c-submenu-layout {
    position: static;
		border-width: 0px !important;
		display: block;
  }

  .submenu-toggle {
    margin-inline-start: 0.25rem;
    padding: 0.25rem;
    background: none;
    border: 0;
    inline-size: 2rem;
    block-size: 2rem;
  }

  .submenu-toggle {
    position: relative;
  }
  .submenu-toggle::before {
    content: "";
    display: block;
    inline-size: 1em;
    block-size: 1em;
    margin: 0 auto;
    background-color: currentcolor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.22 5.97a.75.75 0 0 1 1.06 0L8 9.69l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 7.03a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    transition: transform 150ms ease;
  }
  li.is-open > .submenu-toggle::before {
    transform: rotate(180deg);
  }

  .temp-header ul {
    flex-direction: column;
    gap: 0;
  }

  .temp-header li.has-children > a {
    flex: 1 1 auto;
  }
  .temp-header li.has-children {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 63.9375rem) {
  .temp-header li.has-children {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .temp-header li.has-children > a {
    grid-column: 1;
  }
  .temp-header li.has-children > .submenu-toggle {
    grid-column: 2;
    justify-self: end;
    margin-inline-start: .25rem;
    padding: .25rem;
    background: none;
    border: 0;
    inline-size: 2rem;
    block-size: 2rem;
  }

  .temp-header ul ul[data-submenu] {
    grid-column: 1 / -1;
    position: static;
    display: none;
    inline-size: 100%;
    background: transparent;
    border: 0;
  }
  .temp-header li.is-open ul[data-submenu] {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .temp-header li:hover ul { display: none; }

	.temp-header .c-menu-hero_item {
		display: none;
	}

  .submenu-toggle::before {
    content: "";
    display: block;
    inline-size: 1em;
    block-size: 1em;
    background-color: currentcolor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.22 5.97a.75.75 0 0 1 1.06 0L8 9.69l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 7.03a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    transition: transform 150ms ease;
  }

  li.is-open > .submenu-toggle::before { transform: rotate(180deg); }

  .temp-header .c-menu-panel > ul {
    margin-block-start: 1rem;

    & > li {
      border-block-start: 1px solid #BEBFB2;
  
      & > a {
        text-transform: var(--c--typography--display--case);
        font-family: var(--c--typography--display--family);
        line-height: var(--c--typography--display--line-height);
        font-size: 2rem;
        font-style: var(--c--typography--display--style);
        letter-spacing: var(--c--typography--display--tracking);
        font-weight: var(--c--typography--display--weight);
      }

      & ul {
        margin-block-end: 1rem;
      }
    }
  }
}

.c-submenu-layout {
  border: 1px solid var(--c--color--button);
	display: flex;
	inset-inline-end: 0px;
	opacity: 0;
	position: absolute;
	transition-duration: 250ms;
	transition-timing-function: ease;
	transition-property: opacity;
	visibility: hidden;

	li:first-child > & {
		inset-inline-end: auto;
	}
}

.temp-header li:is(:hover, :focus-within) .c-submenu-layout {
	opacity: 1;
	visibility: visible;
}

.temp-header .c-submenu-layout ul {
	position: static;
	text-wrap: nowrap;
	border-width: 0px;
}

.c-menu-hero {
	background-color: rgb(241 238 224);
	inline-size: 20rem;
}

.c-menu-hero_item img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 50% 50%;
	overflow: clip;
}

.c-menu-hero_detail {
	padding: 2rem;
	display: flex;
	align-items: center;
	flex-direction: column;
	text-align: center;
	gap: 1rem;
	border-inline-start: 1px solid var(--c--color--button);

	& div {
		text-transform: var(--c--typography--display--case);
    font-family: var(--c--typography--display--family);
    line-height: var(--c--typography--display--line-height);
    font-size: 1.5rem;
    font-style: var(--c--typography--display--style);
    letter-spacing: var(--c--typography--display--tracking);
    font-weight: var(--c--typography--display--weight);
	}
}

[data-type="cavalree/button"i] {
  --c-box--color--border: currentcolor;
  --c-box--border--size: 0px;
  --c-box--padding--block: 1.125em;
  --c-box--padding--inline: 2em;
  --c-box--place: center;
  --c-box--typography--align: center;
  --c-box--typography--case: var(--c--typography--mark--case);
  --c-box--typography--family: var(--c--typography--mark--family);
  --c-box--typography--line-height: var(--c--typography--mark--line-height);
  --c-box--typography--size: 0.75rem;
  --c-box--typography--style: var(--c--typography--mark--style);
  --c-box--typography--tracking: var(--c--typography--mark--tracking);
  --c-box--typography--weight: var(--c--typography--mark--weight);
}

[data-type="cavalree/button"]:is(:not([data-variant]), [data-variant="default"i]) {
  --border--image: linear-gradient(var(--c--color--button), var(--c--color--button));
  --border--size: 1px;
  --border--offset: 4.5px;

  background-image:
    var(--border--image),
    var(--border--image),
    var(--border--image),
    var(--border--image);

  background-size:
    100% var(--border--size),
    100% var(--border--size),
    var(--border--size) 100%,
    var(--border--size) 100%;

  background-position:
    0% var(--border--offset),
    0% calc(100% - var(--border--offset)),
    var(--border--offset) 100%,
    calc(100% - var(--border--offset)) 0%;

  transition: background-position 250ms ease-out;

	&:hover {
		--border--offset: 0px;
	}
}
