:root {
  --header--background: var(--white);
  --header--text: var(--black);
  --header--link: var(--gray--dark);
  --header--link-hover: var(--black);
  --header--accent: var(--green--dark);
}

.home,
.product-template,
.page-template-template-cwz-page,
.page-template-template-locations-page {
  --header--background: var(--black);
  --header--text: var(--white);
  --header--link: var(--gray);
  --header--link-hover: var(--white);
  --header--accent: var(--green);
}

.home,
.product-template-template-cycle-product {
  /* --header--background: transparent; */
  --header--link: var(--white);
  --header--link-hover: var(--green);
}

header {
  position: relative;
  z-index: 100;
  padding: 0;
  border-top: var(--spacer--sm) solid var(--green);
  background-color: var(--header--background);
  color: var(--header--text);
}

.header__content-wrapper {
  position: relative;
  grid-template-columns: repeat(2, 1fr);
  align-items: end;
  gap: var(--spacer--lg);
}

.header__logo-wrapper {
  grid-column: 1 / 2;
}

.header__navigation__wrapper {
  position: relative;
  z-index: 60;
  grid-column: 2 / 3;
}

.header__navigation__wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: var(--header--background);
  pointer-events: none;
}

.header__secondary__wrapper,
.header__primary__wrapper {
  position: relative;
  z-index: 1;
}

.header__secondary__wrapper {
  display: flex;
  justify-content: flex-end;
}

.header__primary__wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacer--xxxl);
  padding-bottom: var(--spacer--lg);
}

.header__logo-wrapper .logo svg .fill {
  fill: var(--header--text);
}

.nav__header-geolocation {
  margin-left: var(--spacer--xxl);
}

.nav__header-geolocation li {
  position: relative;
}

.nav__header-geolocation li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(var(--spacer--lg) * -0.5);
  width: 2px;
  height: 100%;
  background-color: var(--header--link);
  transform: translateX(50%);
}

.nav__header-primary a,
.nav__header-secondary a,
.nav__header-geolocation a {
  color: var(--header--link);
}

.nav__header-primary a:focus,
.nav__header-primary a:hover,
.nav__header-secondary a:focus,
.nav__header-secondary a:hover,
.nav__header-geolocation a:focus,
.nav__header-geolocation a:hover {
  color: var(--header--link-hover);
}

.nav__header-buttons .nav-menu {
  gap: var(--spacer);
}

.nav__header-buttons a {
  --button--background: var(--header--text);
  --button--text: var(--header--background);
  white-space: nowrap;
}

.nav__header-buttons .button__search .button {
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius--circle);
  border-color: transparent;
}

.nav__header-primary .menu-item-has-children {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacer--sm);
}

@media (min-width: 768px) {
  .nav__header-primary .menu-item-has-children::after {
    font-family: var(--fa-family-classic);
    font-weight: 900;
    content: "\f078";
    font-size: 0.65rem;
    color: var(--header--link);
    transition: var(--transition);
  }
}

.nav__header-primary .menu-item-has-children a,
.nav__header-primary .menu-item-has-children span {
  line-height: 1;
}

.nav__header-primary .menu-item-has-children span {
  cursor: pointer;
  color: var(--header--link);
}

.nav__header-primary .menu-item-has-children span:focus,
.nav__header-primary .menu-item-has-children span:hover {
  color: var(--header--link-hover);
}

@media (min-width: 768px) {
  .nav__header-primary .menu-item-has-children:hover::after {
    transform: scaleY(-1);
  }
}

.nav__header-primary .menu-item-has-children .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--header--background);
  color: var(--header--link);
  padding: var(--spacer--sm);
  border-radius: var(--spacer--sm);
}

.nav__header-primary .menu-item-has-children:hover .sub-menu {
  display: block;
}

.page-template-template-cycle-form header,
.page-template-template-cycle-leaderboard header {
  display: none;
}

/* Mega Menu */
.mega-menu-wrapper {
  position: relative;
  z-index: 100;
  padding-left: var(--spacer--xxl);
}

.subnav-container {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--header--background);
  color: var(--header--link);
  padding: 0 0 var(--spacer--xxl) var(--spacer--lg);
  opacity: 0;
  visibility: hidden;
}

.header__secondary__wrapper::after,
.header__primary__wrapper::after,
.subnav-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: calc(
    (100vw - ((var(--container-max-width) - var(--spacer--lg)))) * 0.5
  );
  height: 100%;
  background-color: var(--header--background);
}

.subnav-grid-wrapper {
  padding: 0 var(--spacer--lg);
}

.subnav-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--spacer--lg);
}

.subnav-container .subnav {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subnav-container .subnav li {
  break-inside: avoid;
  margin-bottom: var(--spacer);
}

.parent-preview {
  border-bottom: 2px solid var(--header--accent);
  margin-bottom: var(--spacer--lg);
  padding: 0 var(--spacer--lg) var(--spacer--lg) var(--spacer--lg);
}

.subnav-link-preview .preview-thumbnail {
  margin-bottom: var(--spacer);
}

.subnav-link-preview .preview-title {
  margin-bottom: var(--spacer--sm);
}

.subnav-link-preview .preview-thumbnail {
  aspect-ratio: 3 / 2;
}

.subnav-link-preview .preview-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .subnav-columns {
    grid-column: 1 / 3;
  }

  .subnav-link-preview {
    grid-column: 3 / 4;
  }
}

.subnav-container .subnav a {
  color: var(--header--link);
  text-decoration: none;
}

.subnav-container .subnav a:focus,
.subnav-container .subnav a:hover {
  color: var(--header--link-hover);
}

/* Mega menu backdrop overlay — single element replaces per-element blur */
.mega-menu-backdrop {
  position: fixed;
  top: var(--spacer--sm);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.admin-bar .mega-menu-backdrop {
  top: calc(var(--spacer--sm) + 32px);
}

/* Mobile Menu */
.header__mobile {
  padding: var(--spacer) 0;
}

.header__desktop {
  display: none;
}

@media (min-width: 768px) {
  .header__mobile {
    display: none;
  }

  .header__desktop {
    display: block;
  }
}

.menu-toggle {
  position: relative;
  z-index: 100;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.menu-toggle-icon {
  width: 100%;
  height: 100%;
}

.menu-toggle-icon path,
.menu-toggle-icon circle {
  fill: var(--header--link);
  transition: var(--transition);
}

.nav__mobile {
  position: relative;
  z-index: 1;
}

.nav__mobile.header__navigation__wrapper {
  height: 0;
  overflow: hidden;
}

.nav__mobile.header__geolocation__wrapper {
  padding-bottom: var(--spacer);
}

.nav__mobile .nav__header-secondary {
  padding-top: var(--spacer);
}

.nav__mobile .nav__header-secondary,
.nav__mobile .nav__header-buttons {
  width: 100%;
}

.nav__mobile.nav__header-secondary ul,
.nav__mobile.nav__header-buttons ul {
  align-items: center;
}

.nav__mobile .nav__header-secondary ul li,
.nav__mobile .nav__header-buttons ul li,
.nav__mobile .nav__header-secondary ul li:first-child:last-child,
.nav__mobile .nav__header-buttons ul li:first-child:last-child {
  margin: 0 auto;
}

.nav__mobile .nav__header-secondary ul li:first-child,
.nav__mobile .nav__header-buttons ul li:first-child {
  margin-left: 0;
}

.nav__mobile .nav__header-secondary ul li:last-child,
.nav__mobile .nav__header-buttons ul li:last-child {
  margin-right: 0;
}

.nav__mobile .header__primary__wrapper {
  padding: var(--spacer--sm);
}

.nav__mobile .nav__header-primary {
  width: 100%;
}

.nav__mobile .nav__header-primary ul {
  display: grid;
  grid-template-columns: repeat(1, auto);
  gap: 0;
}

.nav__mobile .nav__header-primary .menu-item-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacer--sm);
}

.nav__mobile .nav__header-primary .menu-item-parent a,
.nav__mobile .nav__header-primary .menu-item-parent span {
  display: block;
  width: 100%;
  padding: var(--spacer--sm) 0;
  color: var(--header--link);
}

.nav__mobile .nav__header-primary .menu-item.is-open .menu-item-parent a,
.nav__mobile .nav__header-primary .menu-item.is-open .menu-item-parent span {
  color: var(--header--link-hover);
  font-weight: var(--font-weight--semi);
}

.nav__mobile .nav__header-primary .menu-item-parent .accordion-toggle {
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
  color: var(--header--link);
  line-height: 0;
  height: 100%;
}

.nav__mobile .nav__header-primary .menu-item-parent .accordion-toggle svg {
  fill: var(--header--link);
  transition: var(--transition);
  width: 1rem;
  height: 1rem;
}

.nav__mobile .nav__header-primary .accordion-toggle[aria-expanded="true"] svg {
  transform: rotate(-90deg);
  fill: var(--header--link-hover);
}

.nav__mobile .nav__header-primary .menu-item-children {
  height: 0;
  overflow: hidden;
}

.nav__mobile .nav__header-primary .menu-item-children ul {
  list-style: none;
  padding: 0 0 var(--spacer--sm) 0;
  margin: 0;
  border-bottom: 1px solid var(--header--text);
}

.nav__mobile .nav__header-primary .accordion-toggle i {
  display: inline-block;
  transition: transform var(--transition);
}

.nav__mobile .nav__header-primary .accordion-toggle[aria-expanded="true"] i {
  transform: scaleY(-1);
}

.nav__mobile .nav__header-primary .menu-item-children a {
  display: block;
  width: 100%;
  padding: var(--spacer--xs) 0;
}

.nav__desktop.header__logo__wrapper {
  padding: var(--spacer--lg) 0;
}

.nav__desktop.header__secondary__wrapper {
  padding-top: var(--spacer--lg);
  padding-bottom: var(--spacer);
}

.nav__desktop .nav__header-primary {
  margin-left: auto;
}

/* Transparent header */

.home .header__navigation__wrapper::after,
.product-template-template-cycle-product .header__navigation__wrapper::after,
.home .header__navigation__wrapper .header__primary__wrapper::after,
.product-template-template-cycle-product
  .header__navigation__wrapper
  .header__primary__wrapper::after,
.home .header__navigation__wrapper .header__secondary__wrapper::after,
.product-template-template-cycle-product
  .header__navigation__wrapper
  .header__secondary__wrapper::after {
  background-color: transparent;
  transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.home .header__navigation__wrapper.open::after,
.product-template-template-cycle-product
  .header__navigation__wrapper.open::after,
.home .header__navigation__wrapper.open .header__primary__wrapper::after,
.product-template-template-cycle-product
  .header__navigation__wrapper.open
  .header__primary__wrapper::after,
.home .header__navigation__wrapper.open .header__secondary__wrapper::after,
.product-template-template-cycle-product
  .header__navigation__wrapper.open
  .header__secondary__wrapper::after {
  background-color: var(--header--background);
}

.home header,
.product-template-template-cycle-product header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  background: linear-gradient(
    to bottom,
    rgba(34, 35, 39, 0.8) 21.15%,
    rgba(34, 35, 39, 0) 100%
  );
  transition: background-color 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

@media (max-width: 767px) {
  .home header.open,
  .product-template-template-cycle-product header.open {
    background: var(--header--background);
  }
}

.admin-bar.home header,
.admin-bar.product-template-template-cycle-product header {
  top: 32px;
}