body {
}


.header {
  --color: var(--color-dark-blue);
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 100;
  transition: 0.4s ease-out;  
  
}


.header__inner {
  gap: 69px;
  height: 139px;
  transition: 0.3s ease-out;  
}

.site-link {
  margin-inline-end: auto;
  position: relative;
  top: -27px;
}

/* Menu */
.submenu {
  position: absolute;
  display: flex;
  width: max-content;
  flex-direction: column;
  gap: 9px;

  opacity: 0; visibility: hidden;
  transition: 0.25s all;
  padding: 23px;

  margin: 0 -23px -23px -23px;
}

.menu-item__wrapper:focus-within .submenu {
  opacity: 1; visibility: visible;
}

@media (pointer: fine) {
  .menu-item__wrapper:hover .submenu {
     opacity: 1; visibility: visible;
  }
}

.menu--desktop {
  gap: 69px;
}

/* Toggle menu */
@media (pointer:fine) {
  .menu-toggle svg * {
    transition: 0.15s all;
  }

  .menu-toggle:hover svg {
    --color: var(--color-orange);
  }
}

/* Single item */
.menu-item__wrapper {
  position: relative;
}

.menu--desktop .menu-item__wrapper > .menu-item:after {
  content: '';
  background: var(--color-orange);
  height: 3px;
  border-radius: 10px;
  display: block;
  position: absolute;
  margin-top: 5px;
  width: 0; 

  z-index: 2;
  transition: 0.3s cubic-bezier(0.67, 0.19, 0.24, 1.02);
}

.menu-item__wrapper:focus-within > .menu-item:after,
.menu-item__wrapper > .menu-item.current-menu-item:after {
  width: 32px;
}

.menu-item.current-menu-item {
  font-weight: 500;
}

.menu-item {
  color: var(--color, var(--color-dark-blue));
}


@media (pointer: fine) {
 .menu-item__wrapper.is-entering > .menu-item:after {
    width: 32px;
    inset-inline-end: 32px; inset-inline-start: 0;
  } 

 .menu-item__wrapper.is-leaving > .menu-item:after {
   inset-inline-start: 32px; inset-inline-end: 32px; width: 0px;
  } 

  .submenu .menu-item {
    transition: 0.15s all;
  }

  .submenu .menu-item:hover {
    color: var(--color-orange);
  }
}

/* White mode */
.white {
  --color: white;
}

/* Scroll down mode */

.is-down .header {
  background: white;
  --color: var(--color-text);
  filter: drop-shadow(0 1px 5px rgba(0,0,0,0.05));
}

.site-link {
  position: relative;
}

.header__logo-image {
  position: absolute;  
}

html:not(.is-down) .header__logo--down,
.is-down .header__logo--main {
  display: none;
}

.is-down .header__inner {
  height: 120px;
}

.header__logo--down  {
  margin: 17px 0;  
  top: -22px;
  width: auto; height: 84px;
}

.is-down .site-link {
  top: -38px;
}

.is-down .submenu {
  background: white;
  
}

/* Menu panel */
.menu-toggle__button--close {
  position: absolute;
  top: 41px; inset-inline-end: 60px;
}


.menu-panel {
  display: block;
  position: fixed;
  top: 0; inset-inline-end: 0;
  background: #69A7BF;  
  --color: white;
  z-index: 100;

  height: 100vh;
  width: 864px;  

  transition: 0.4s cubic-bezier(0, 0, 0.37, 0.98) transform;
  transform: translateX(100%);

  [dir="rtl"] & {
    transform: translateX(-100%);
  }
}

.menu-panel__inner {
  padding: 22vh 200px 27vh;
  height: 100%;  
}

.is-menu-open .menu-panel {
  transform: none;
}

.menu-panel__popup-menu {
  height: 100%;
}

.menu--popup {
   display: flex; 
  flex-direction: column;
  justify-content: space-between;  
  height: 100%;
}

@media (pointer: fine) {

  .menu-panel .menu-item,
  .menu-toggle__button--close * {
    transition: 0.15s all;
  }

  .menu-toggle__button--close:hover * {
    stroke: var(--color-orange);
  }

  .menu-panel .menu-item:hover {
    color: var(--color-orange);
  }
}

/* Smaller screens */
@media (max-width: 1440px) {
  .menu--desktop {
    gap: 50px;
    font-size: var(--font-size-20);
    padding-inline-start: 111px;
  } 

  .header__inner {
    gap: 50px;
  }
}

@media (max-width: 1300px) {
  .menu--desktop {
    gap: 35px;
    font-size: var(--font-size-16);
    padding-inline-start: 79px;
    white-space: nowrap;
  } 

  .header__logo-image {
    width: 100px;
  }

  .header__inner {
    gap: 35px;
  }
}

/* Mobile version */
@media (max-width: 1200px) {
  .header__inner {
    height: 111px;
  }

  .site-link {
    top: -34px;
    transition: 0.3s all;
  }

  .header__logo-image {
    height: 72px;
    width: auto;
    top: 4px;
  }

  .is-down .header__logo-image {
    height: 41px;
    top: -18px;
  }

  .is-down .header__inner {
    height: 61px
  }

  .is-down .site-link {
    top: -21px;
  }

  /* Popup menu */
  .menu-toggle__button--close {
    top: 25px; inset-inline-end: 36px;
    position: absolute;
  }
  
  .menu-panel {
    width: min(450px, 100%);
  }

  .menu-panel__inner {
    padding: 100px 36px 36px 36px;
    height: 100%;
    overflow: auto;
  }

  .menu-panel .submenu {
    display: none;
  }

  .menu--panel-main,
  .menu--popup {
    justify-content: flex-start;
    gap: 33px;
    display: flex;
    flex-direction: column;
  }

  .menu-panel__popup-menu {
    height: auto;
  }

  .menu--panel-main {
    margin-bottom: 50px;
    gap: 35px;
  }
}