/* Header layout */
.Header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1200;
  transition: transform 0.3s ease;
  will-change: transform;
  height: var(--header-height);
}

.Header:is(.bg-grey, .bg-green) {
  color: var(--wp--preset--color--yellow);
}

.Header-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-inline: var(--px-24);
}

.Header-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--px-16);
}

.Header-logo-image {
  display: block;
  width: 79px;
  height: 20px;
}

.Header-logo-tagline {
  display: none;

  @media (min-width: 75rem) {
    display: block;
  }
}

.Header-right {
  display: flex;
  gap: var(--px-16);
  align-items: center;
}

.HeaderMenu {
  display: none;

  @media (min-width: 62rem) {
    display: block;
  }
}

.HeaderMenu ul {
  display: flex;
  gap: var(--px-24);
}

.HeaderMenu ul li {
  position: relative;
  font-size: var(--px-14);
}

.HeaderMenu ul .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: var(--px-6);
  cursor: pointer;
}

.HeaderMenu ul .menu-item-has-children > a:hover {
  text-decoration: none;
}

.HeaderMenu ul .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 6px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  line-height: 1;
  transition: transform 0.2s ease;
}

.Header:has(.bg-grey, .bg-green) .HeaderMenu ul .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 6px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.HeaderMenu ul .menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}

.HeaderMenu ul .menu-item-has-children ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: calc(var(--px-10) * -1);
  background: #FFFFFF;
  padding: var(--px-16);
  text-align: right;
  border-radius: var(--px-4);
  z-index: 1001;
}

.HeaderMenu ul .menu-item-has-children:hover > ul.sub-menu {
  display: block;
}

.HeaderMenu ul .sub-menu li {
  display: block;
  font-size: var(--px-14);
}

.HeaderMenu ul .sub-menu li a {
  display: block;
  padding: var(--px-3) var(--px-16);
  white-space: nowrap;
  color: var(--wp--preset--color--contrast);
}

.HeaderMenu li a:hover {
  text-decoration: underline;
}

.Header-burger {
  background: transparent;
  border: 0;
  cursor: pointer;

  @media (min-width: 62rem) {
    display: none;
  }
}

.Header-burger span {
  display: block;
  background: var(--wp--preset--color--primary-text);
  width: var(--px-24);
  height: 1.5px;
  margin: 5px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.Header-burger.is-active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.Header-burger.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.Header-burger.is-active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.Header:is(.bg-grey, .bg-green) .Header-burger span {
  background: var(--wp--preset--color--yellow);
}

.Header:is(.bg-grey, .bg-green) .HeaderMenu li:not(.sub-menu li) > a {
  text-decoration-color: inherit;
}

/* Language switcher */
.Header:is(.bg-grey, .bg-green) .trp-language-switcher .trp-language-item-name {
  color: inherit;
}

.Header:is(.bg-grey, .bg-green) .trp-language-switcher .trp-shortcode-arrow {
  filter: brightness(0) saturate(100%) invert(76%) sepia(68%) saturate(643%) hue-rotate(337deg) brightness(103%);
}

.Header .trp-language-switcher .trp-language-item-name {
  font-weight: 400;
  font-size: var(--px-14);
  font-family: var(--wp--preset--font-family--suisse-intl);
}

.Header .trp-language-switcher .trp-shortcode-overlay {
  margin-top: 4px;
}

.Header .trp-shortcode-switcher {
  padding: 0;
  margin-top: var(--px-8);
}

.Header .trp-switcher-dropdown-list {
  background: #FFFFFF;
  border-radius: var(--px-4);
  margin-top: -7px;
}

.Header .trp-switcher-dropdown-list .trp-language-item {
  justify-content: end;
  padding-block: 1px;
}

.Header .trp-switcher-dropdown-list .trp-language-item:hover {
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--contrast);
}

.Header .trp-switcher-dropdown-list .trp-language-item:first-child {
  padding-top: var(--px-16);
}

.Header .trp-switcher-dropdown-list .trp-language-item:last-child {
  padding-bottom: var(--px-16);
}

.Header:is(.bg-grey, .bg-green) .trp-language-switcher .trp-switcher-dropdown-list .trp-language-item-name {
  color: var(--wp--preset--color--contrast);
}

.Header .trp-current-language-item__wrapper:not(.trp-hide-arrow) {
  padding-right: 0;
}

.Header .trp-shortcode-arrow {
  display: none;
}

.Header .trp-language-item__current::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 6px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  line-height: 1;
  transition: transform 0.2s ease;
  position: relative;
}

.Header .trp-language-switcher:hover .trp-language-item__current::after {
   transform: rotate(180deg);
}

/* Mobile menu overlay */
.MobileMenu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;

  @media (min-width: 62rem) {
    display: none;
  }
}

.MobileMenu:is(.bg-grey, .bg-green) {
  color: var(--wp--preset--color--yellow);
}

.MobileMenu.is-open {
  visibility: visible;
  opacity: 1;
}

.MobileMenu-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-inline: var(--px-24);
  padding-bottom: var(--px-48);
  margin-top: var(--px-48);
}

.MobileMenu-list {
  margin-top: var(--px-36);
  text-align: right;
}

.MobileMenu-item, .MobileMenu-subitem {
  margin-bottom: var(--px-16);
}

.MobileMenu-link, .MobileMenu-sublink {
  font-family: var(--wp--preset--font-family--phytaxis-bold);
  font-weight: 700;
  font-size: var(--px-30);
}

.MobileMenu-link:hover,
.MobileMenu-sublink:hover {
  text-decoration: underline;
}

/* WordPress admin bar offset */
.admin-bar .Header {
  top: var(--px-32);

  @media screen and (max-width: 782px) {
    top: 46px;
  }
}

.admin-bar .MobileMenu {
  top: var(--px-32);

  @media screen and (max-width: 782px) {
    top: 46px;
  }
}