/* =============================================================================
   NAVIGATION
   =============================================================================
   Mobile/desktop breakpoint: 1024px (max-width mobile / min-width desktop).
   If this value ever needs changing, search "1024" and "1025" in this file —
   there are 6 occurrences — and update the matching constant at the top of
   navigation.js at the same time.
   ========================================================================== */


/* ─── Site Header ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  box-sizing: border-box;
  display: grid;
  align-content: start;
  z-index: 1000;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  transition: transform .5s ease-in-out, background-color .5s linear, bottom .5s linear;
  background-color: transparent;
}

.site-header.is-hidden {
  transform: translateY(-110%);
}

.site-header.is-stuck {
  transform: translateY(0);
}

/* ─── Sticky Menu Offset ───────────────────────────────────────────────────── */

:root:has(.site-header),
:root:has(.site-header.is-stuck) {
  --sticky-menu-offset: calc(5rem + var(--announcement-bar-height));
}

:root:has(.site-header.is-hidden) {
  --sticky-menu-offset: 1.5rem;
}


/* ─── Site Header Inner ───────────────────────────────────────────────────── */

.site-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  background: #ffffff;
  padding: .5rem calc(var(--page-gutter) + var(--header-spacer));
  position: relative; /* positioning context for search panel & sub-menus */
  height: 3.5rem;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,0);
  transition: box-shadow 1s ease;
}

.site-header.is-stuck .site-header-inner,
.site-header.is-hidden .site-header-inner {
  box-shadow: 0 .25rem .75rem rgba(0,0,0,0.2)
}

/* ─── Mobile overlay backdrop ────────────────────────────────────────────── */

@media (max-width: 1024px) {

  .site-header::before {
	content: '';
	pointer-events: none;
	height: 0px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	background-color: rgba(234,224,204, .8);
	transition: all .5s linear;
    -webkit-backdrop-filter: saturate(150%) blur(.25em);
    backdrop-filter: saturate(150%) blur(.25em);
  }

  .menu-is-closed .site-header::before {
	opacity: 0;
  }

  .menu-is-open .site-header::before {
	opacity: 1;
	height: 100dvh;
  }

  nav.primary-navigation {
	list-style: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 3.5rem;
  padding-block: 1.5rem;
  max-height: calc(100dvh - 3.5rem - var(--announcement-bar-height, 0px));
  overflow: scroll;
  }
}


/* ─── Desktop nav layout ─────────────────────────────────────────────────── */

@media (min-width: 1025px) {

  nav.primary-navigation {
	display: grid;
	justify-items: center;
  }

  nav.primary-navigation > ul {
	list-style: none;
	display: flex;
	gap: .5rem;
	margin: 0;
	padding: 0;
  }
}


/* ─── Branding ───────────────────────────────────────────────────────────── */

.site-branding {
  z-index: 10;
}

.custom-logo-link img,
.custom-logo-link svg {
  width: auto;
  display: block;
}

.site-header .custom-logo-link img,
.site-header .custom-logo-link svg {
  height: 1.25rem;
}


/* ─── Menu item icons ────────────────────────────────────────────────────── */

.menu-item-icon {
  width: 1.25em;
  height: 1.25em;
  margin-right: .5rem;
  vertical-align: middle;
  display: inline-block;
}


/* ─── Primary menu — top-level items ────────────────────────────────────── */

.primary-menu > .menu-item > a {
  display: inline-block;
  position: relative;
  z-index: 10;
  font-size: 1rem;
  color: currentcolor;
}

.primary-menu > .menu-item {
  border-radius: 3rem;
  line-height: 1rem;
}

.primary-menu > .menu-item:hover,
.primary-menu > .menu-item:focus-visible {
  background: var(--wp--preset--color--gold-10);
}

.primary-menu > .menu-item > a:hover,
.primary-menu > .menu-item > a:focus-visible {
  text-decoration: underline;
}


/* ─── Parent items — <li> is the tap/hover surface ───────────────────────── */
/*
   Desktop: the <li> shows a hover state and the chevron sits after the link.
   Mobile:  the <li> is the full-width tap target. The chevron is on the <li>
			itself (::after). The <a> is pointer-events:none while closed so
			the whole bar registers as one tap — once the sub-menu is open the
			link becomes live again so the user can navigate to it.
*/

/* Desktop: <li> carries the chevron inline after the link text */
@media (min-width: 1025px) {

  .primary-menu > .menu-item:not(.menu-item-has-children) > a {
	padding: .75rem 1.25rem;
  }

  .primary-menu > .menu-item-has-children {
	display: grid;
	grid-template-columns: auto 1rem;
	padding: .75rem 1rem;
	gap: .25rem;
	align-items: center;
  }

  .primary-menu > .menu-item-has-children::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.41 8.12'%3E%3Cpolyline points='.71 .71 6.71 6.71 12.71 .71' style='fill:none;stroke:%23e40034;stroke-miterlimit:10;stroke-width:2px;'/%3E%3C/svg%3E");
	display: grid;
	align-content: center;
	width: 1rem;
	height: 1rem;
	transition: transform 0.22s ease;
	pointer-events: none;
  }

  .primary-menu > .menu-item-has-children.sub-menu-open::after {
	transform: rotate(180deg);
  }
}

/* Mobile: <li> is full-width tap target, carries the chevron on the right */
@media (max-width: 1024px) {
  .primary-menu > .menu-item-has-children {
	display: grid;
	align-items: center;
	cursor: pointer;
  }

  .primary-menu > .menu-item-has-children > a {
	flex: 1;
  }

  /* Chevron on the right of the <li> */
  .primary-menu > .menu-item-has-children::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.41 8.12'%3E%3Cpolyline points='.71 .71 6.71 6.71 12.71 .71' style='fill:none;stroke:%23e40034;stroke-miterlimit:10;stroke-width:2px;'/%3E%3C/svg%3E");
	display: grid;
	align-content: center;
	width: 1rem;
	height: 1rem;
	transition: transform 0.22s ease;
	pointer-events: none;
	position: absolute;
	top: 1rem;
	right: 1.5rem;
  }

  .primary-menu > .menu-item-has-children.sub-menu-open::after {
	transform: rotate(180deg);
  }
}

/* Coarse pointer (touchscreen): link is inert until sub-menu is open,
   so the whole <li> bar acts as the tap target on first touch.
   Fine pointer (mouse): link is always directly clickable. */
@media (pointer: coarse) {
  .primary-menu > .menu-item-has-children > a {
	pointer-events: none;
  }

  .primary-menu > .menu-item-has-children.sub-menu-open > a {
	pointer-events: auto;
  }
}


/* ─── Sub-menu — shared base state ──────────────────────────────────────── */

.menu-item-has-children > .sub-menu {
  opacity: 0;
  pointer-events: none;
  display: grid;
  gap: .5rem;
  transition: opacity .25s ease;
  font-size: var(--wp--preset--font-size--normal);
}

.menu-item-has-children.sub-menu-open > .sub-menu {
  opacity: 1;
  pointer-events: all;
}


/* ─── Sub-menu — mobile: inline accordion ────────────────────────────────── */

@media (max-width: 1024px) {
  .primary-navigation {
    padding-inline: var(--page-gutter);
  }
  .primary-menu {
	display: grid;
	gap: 1rem;
  }

  .primary-menu > .menu-item {
	background: #fff;
	border-radius: .5rem;
  }

  .primary-menu > .menu-item:not(.menu-item-has-children) a {
	padding: 1rem 1.5rem;
	width: 100%;
  }

  .menu-item-has-children {
	padding: 1rem 1.5rem;
  }

  .menu-item-has-children a {
	padding: 0;
	max-width: max-content;
  }

  .menu-item-has-children > .sub-menu {
	max-height: 0;
	margin-top: 0;
	padding-top: 0;
	border-top: solid 1px transparent;
	overflow: hidden;
	transition: max-height .3s ease, opacity .25s ease, margin-top .25s linear, padding-top .25s linear, border-color .25s linear;
	width: 100%;
  }

  .menu-item-has-children.sub-menu-open > .sub-menu {
	max-height: 200vh;
	margin-top: 1rem;
	padding-top: 1rem;
	border-color: var(--wp--preset--color--gold-30);
  }
}


/* ─── Sub-menu — desktop: absolute drop-down ─────────────────────────────── */

@media (min-width: 1025px) {
  .menu-item-has-children {
    position: relative;
  }
  .menu-item-has-children > .sub-menu {
	position: absolute;
  min-width: 250px;
  width: auto;
	max-width: 350px;
    left: 50%;
    transform: translateX(-50%);
	top: 6rem;
	padding: 1.5rem;
	border-radius: var(--card-border-radius);
	background: #ffffff;
	box-shadow: 0 .375rem .75rem rgba(0,0,0,0.2);
	transition: top .2s ease, opacity .25s ease;
    border: solid 1px var(--wp--preset--color--gold-30);
  }
  
  .menu-item-has-children > .sub-menu::before {
    position: absolute;
    content: '';
    top: -1.5rem;
    height: 1.5rem;
    width: 100%;
  }

  .menu-item-has-children.sub-menu-open > .sub-menu {
	top: 4rem;
  }
}


/* ─── Sub-menu — heading-style links (no href) ───────────────────────────── */

.menu-item-has-children > .sub-menu a:not([href]),
.menu-item-has-children > .sub-menu a[href=""] {
  color: var(--wp--preset--color--red);
  font-weight: 700;
  margin-bottom: .5rem;
  display: block;
  cursor: default;
}


.menu-item-has-children.sub-menu-open > .sub-menu a[href]:hover {
	text-decoration: underline;
}

.menu-item-has-children > .sub-menu a:focus-visible {
  outline: 2px solid var(--wp--preset--color--red, #e40034);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ─── Stagger entrance animation ─────────────────────────────────────────── */

@keyframes nav-item-in {
  from {
	opacity: 0;
	transform: translateY(-8px);
  }
  to {
	opacity: 1;
	transform: translateY(0);
  }
}

/* Sub-menu children — desktop + mobile */
.menu-item-has-children.sub-menu-open > .sub-menu > li {
  animation: nav-item-in 0.5s ease both;
}


.menu-item-has-children.sub-menu-open > .sub-menu > li:nth-child(1) { animation-delay: 0.05s; }
.menu-item-has-children.sub-menu-open > .sub-menu > li:nth-child(2) { animation-delay: 0.10s; }
.menu-item-has-children.sub-menu-open > .sub-menu > li:nth-child(3) { animation-delay: 0.15s; }
.menu-item-has-children.sub-menu-open > .sub-menu > li:nth-child(4) { animation-delay: 0.20s; }
.menu-item-has-children.sub-menu-open > .sub-menu > li:nth-child(5) { animation-delay: 0.25s; }
.menu-item-has-children.sub-menu-open > .sub-menu > li:nth-child(6) { animation-delay: 0.30s; }
.menu-item-has-children.sub-menu-open > .sub-menu > li:nth-child(7) { animation-delay: 0.35s; }
.menu-item-has-children.sub-menu-open > .sub-menu > li:nth-child(8) { animation-delay: 0.40s; }

/* Primary-menu top-level items — mobile only */
@media (max-width: 1024px) {
  body.menu-is-open .primary-menu > li {
	animation: nav-item-in 0.5s ease both;
  }

  body.menu-is-open .primary-menu > li:nth-child(1) { animation-delay: 0.05s; }
  body.menu-is-open .primary-menu > li:nth-child(2) { animation-delay: 0.10s; }
  body.menu-is-open .primary-menu > li:nth-child(3) { animation-delay: 0.15s; }
  body.menu-is-open .primary-menu > li:nth-child(4) { animation-delay: 0.20s; }
  body.menu-is-open .primary-menu > li:nth-child(5) { animation-delay: 0.25s; }
  body.menu-is-open .primary-menu > li:nth-child(6) { animation-delay: 0.30s; }
  body.menu-is-open .primary-menu > li:nth-child(7) { animation-delay: 0.35s; }
  body.menu-is-open .primary-menu > li:nth-child(8) { animation-delay: 0.40s; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .menu-item-has-children.sub-menu-open > .sub-menu > li,
  body.menu-is-open .primary-menu > li {
	animation: none;
  }
}


/* ─── Auxiliary menu ─────────────────────────────────────────────────────── */

.auxiliary-menu {
  display: flex;
  gap: .25rem;
  align-items: center;
  z-index: 10;
}

.auxiliary-menu .wc-block-mini-cart__badge {
	width: 1rem;
	height: 1rem;
	min-width: 1rem;
	min-height: 1rem;
	font-size: .65rem;
  background: var(--wp--preset--color--red) !important;
  color: #fff !important;
}

.header-btn {
  color: currentcolor;
}

.header-btn svg {
  height: 2rem;
  width: 2rem;
  padding: .4125rem;
  stroke: currentcolor;
}


.has-menu-icon > a {
  display: flex;
  align-items: center;
}


/* ─── Hamburger icon ─────────────────────────────────────────────────────── */

.hamburger {
  padding: 0;
  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;
  box-sizing: border-box;
}

.hamburger:focus-visible {
  outline: 2px solid var(--wp--preset--color--red, #e40034);
  outline-offset: 3px;
  border-radius: 3px;
}

.hamburger.toggled .hamburger-inner,
.hamburger.toggled .hamburger-inner::before,
.hamburger.toggled .hamburger-inner::after {
  background-color: black;
}

.hamburger-box {
  width: 1.5em;
  height: 1.5em;
  padding-inline: .125rem;
  box-sizing: border-box;
  display: block;
  position: relative;
}

.hamburger-name {
  position: absolute;
  text-indent: -200vw;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -1px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 1.25em;
  height: 2px;
  background-color: black;
  border-radius: 2px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner {
  background: transparent;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -.3em;
}

.hamburger-inner::after {
  bottom: -.3em;
}


/* ─── Hamburger spin animation ───────────────────────────────────────────── */

.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

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

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

body.menu-is-open .hamburger--spin .hamburger-inner::before {
  top: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
  opacity: 0;
}

body.menu-is-open .hamburger--spin .hamburger-inner::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);
}


/* ─── Mobile nav visibility ──────────────────────────────────────────────── */

@media (max-width: 1024px) {

  .primary-navigation {
	display: none;
  }

  body.menu-is-open .primary-navigation {
	display: block;
  }

  .primary-menu .sub-menu {
	position: static;
	width: 100%;
  }

  body.menu-is-open {
	overflow: hidden;
  }
}


/* ─── Hide hamburger on desktop ──────────────────────────────────────────── */

@media (min-width: 1025px) {
  .menu-toggle {
	display: none;
  }
}


/* ─── Search panel ───────────────────────────────────────────────────────── */

.header-search {
  display: flex;
  align-items: center;
  position: absolute;
  inset: 0;
  padding: 0 calc(var(--page-gutter) + var(--header-spacer));
  background: #fff;
  border-radius: .5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.header-search.is-open {
  opacity: 1;
  pointer-events: all;
}

button.search-toggle {
  background: transparent;
  border: none;
  height: 2rem;
  width: 2rem;
  color: currentcolor;
  cursor: pointer;
}

button.search-toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--red, #e40034);
  outline-offset: 3px;
  border-radius: 3px;
}

.wc-block-mini-cart__button {
  padding: 0;
}

.wc-block-mini-cart__button .wc-block-mini-cart__icon {
  width: 2rem;
  height: 2rem;
  padding: .125rem;
}


/* ─── Search form ────────────────────────────────────────────────────────── */

.header-search__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.header-search__input {
  flex: 1;
  border: none;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: 1rem;
  padding: 0.4rem 0.25rem;
  outline: none;
  color: inherit;
}

.header-search__input::placeholder {
  opacity: 0.5;
}

.header-search__submit,
.header-search__close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  color: inherit;
  flex-shrink: 0;
}

.header-search__submit:focus-visible,
.header-search__close:focus-visible {
  outline: 2px solid var(--wp--preset--color--red, #e40034);
  outline-offset: 2px;
  border-radius: 3px;
}


/* ─── Account menu (dropdown in auxiliary area) ─────────────────────────── */
/*
   Reuses .menu-item-has-children / .sub-menu so navigation.js handles open/
   close, ARIA, inert, and keyboard nav identically to the primary menu.
   Differences from primary nav:
     - Right-anchored instead of centered (icon sits at the header edge).
     - Always uses the absolute drop-down pattern, including on mobile —
       the account icon is always visible, never inside the hamburger drawer.
*/

.account-menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-menu > .menu-item-has-children {
  position: relative;
  padding: 0;
}

.account-menu > .menu-item-has-children > .sub-menu {
  position: absolute;
  top: calc(100% + 3.75rem);
  right: -1rem;
  left: auto;
  transform: none;
  transition: top .2s ease, opacity .25s ease;
  min-width: max-content;
  max-width: 200px;
  max-height: none;
  width: auto;
  margin: 0;
  padding: .5rem;
  border: solid 1px var(--wp--preset--color--gold-30);
  border-radius: var(--card-border-radius);
  background: #fff;
  box-shadow: 0 .375rem .75rem rgba(0, 0, 0, 0.2);
  overflow: visible;
  display: grid;
  gap: 0;
}

.account-menu > .menu-item-has-children > .sub-menu::before {
  position: absolute;
  content: '';
  top: -1.5rem;
  height: 1.5rem;
  width: 100%;
}

.account-menu > .menu-item-has-children.sub-menu-open > .sub-menu {
  top: calc(100% + 1.75rem);
  margin-top: 0;
  border-color: var(--wp--preset--color--gold-30);
}

.account-menu .sub-menu a {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem;
  color: currentcolor;
  white-space: nowrap;
  cursor: pointer;
}

.account-menu__icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--wp--preset--color--red);
}

.account-menu .sub-menu a:hover,
.account-menu .sub-menu a:focus-visible {
  text-decoration: none;
  outline: none;
}

/* Coarse pointer: link inert until sub-menu opens, so first tap opens the
   dropdown and a second tap on the icon navigates to the dashboard.
   Mirrors the primary-menu pattern. */
@media (pointer: coarse) {
  .account-menu > .menu-item-has-children > a {
    pointer-events: none;
  }
  .account-menu > .menu-item-has-children.sub-menu-open > a {
    pointer-events: auto;
  }
  
  body.menu-is-open .account-menu > .menu-item-has-children > a {
    pointer-events: auto;
  }
  
}


/* ─── Account menu — drawer variant ──────────────────────────────────── */
/*
   A duplicate rendered inside <nav class="primary-navigation"> so it shows
   up inside the hamburger drawer on mobile. Carries the .primary-menu class
   so it inherits all the existing drawer styling for free.
*/

@media (min-width: 1025px) {
    .account-menu--drawer {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .account-menu--drawer {
        margin-top: 1rem !important;
        animation: nav-item-in 0.5s ease both;
        animation-delay: 0.35s;
    }
}