:root {
  --top: -10px;
  --first-width: 729px;
  --first-height: 392px;
  --transition-duration: 300ms;
  --guestnet-logo-color: #040407;
  --hamburger-layer-color: #040407;
}

body.dark {
  --guestnet-logo-color: #fff;
  --hamburger-layer-color: #fff;
}

header {
  transition:
    border-color var(--transition-duration),
    background-color var(--transition-duration);
}

.header {
  perspective: 2000px;
}

[data-submenu-link] {
  cursor: default;
  border: 0;
  font-size: 16px;
  font-weight: 900;
  margin: 12px auto;
}

[data-mobile-submenu-link]::after,
[data-submenu-link]::after {
  content: url("../icons/chevron-down-cbd6709f846780c19fa57801d46ce6c9.svg");
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  width: 12px;
  height: 24px;
  transition: transform 0.25s ease-in-out;
}

[data-mobile-submenu-link][aria-expanded="true"]::after,
[data-submenu-link][aria-expanded="true"]::after {
  transform: rotate(180deg);
}

body.dark [data-mobile-submenu-link]::after,
body.dark [data-submenu-link]::after {
  content: url("../icons/chevron-down-dark-84c0eaa315928624743347b1dea4431e.svg");
}

[data-mobile-submenu-link].active::after {
  transform: rotateX(180deg);
}

.popover {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  transform-origin: center -20px;
  transform: rotateX(-15deg);
  transition:
    transform var(--transition-duration),
    opacity var(--transition-duration);
  display: inline-block;
  will-change: transform;
}

.popover.open {
  opacity: 1;
  transform: rotateX(0);
  transition:
    transform var(--popover-transition-duration),
    opacity var(--transition-duration);
}

.arrow {
  position: absolute;
  top: calc(var(--top) - 6px);
  left: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: white;
  transform: rotate(45deg);
  transition:
    transform var(--popover-transition-duration),
    opacity var(--transition-duration);
  will-change: transform;
}

.background {
  position: absolute;
  top: var(--top);
  left: 0;
  width: var(--first-width);
  height: var(--first-height);
  padding: 0;
  background: white;
  transform-origin: 0 0;
  transition:
    transform var(--popover-transition-duration),
    opacity var(--popover-transition-duration);
  will-change: transform;
}

.content {
  position: absolute;
  overflow: hidden;
  z-index: 1;
  top: var(--top);
  left: 0;
  padding: 0;
  transition:
    transform var(--popover-transition-duration),
    opacity var(--transition-duration);
  will-change: transform;
}

[data-submenu-content] {
  position: absolute;
  opacity: 0;
  transition: opacity var(--popover-transition-duration);
}

[data-submenu-content].active {
  opacity: 1;
  z-index: 2;
}

[data-mobile-submenu-content] {
  height: 0;
  overflow: hidden;
  transition: height var(--transition-duration) ease;
}

[data-mobile-submenu-content].active {
  height: var(--custom-height);
  transition: height var(--transition-duration) ease;
}