.sn-header {
  position: sticky;
  height: var(--header-height);
  top: var(--header-eyebrow-height);
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  z-index: 100;
  background-color: var(--nav-background);

  #block-mobilebotnav {
    display: none;
  }

  #block-themetoggle-m {
    display: none;
  }

  #block-searchtopnav {
    position: absolute;
    top: 1.5rem;
    right: 7rem;
    cursor: pointer;

    .field__item {
      img {
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    .field--name-field-icon {
      display: block;
    }

    .field--name-field-alt-icon {
      display: none;
    }

    &.alt {
      .field--name-field-icon {
        display: none;
      }

      .field--name-field-alt-icon {
        display: block;
      }
    }
  }

  #block-languageswitcher {
    position: absolute;
    background-color: var(--primary);
    box-shadow: 0 0 0.5rem rgb(0, 0, 0, 0.5);
    display: none;
    top: 0;
    right: 7rem;
    &.show {
      display: block;
    }
    ul,
    li {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
      a {
        display: block;
        padding: 0.5rem;
        font-size: var(--text-sm);
        color: #fff;
        &:hover {
          color: var(--primary);
        }
      }
    }
  }

  #block-languageswitcher-mobile,
  #block-languagebuttonmobile {
    display: none;
  }

  &.show-menu {
    .sn-main-nav {
      left: calc(var(--edge) * -1);
    }
  }
}

.region-primary-menu {
  position: relative;
  height: inherit;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr 10rem 1fr;
  padding: 0rem var(--edge);
}

#block-booknowbutton {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translate(0, -50%);
  z-index: 10;
  a {
    padding-inline: 0.5rem;
  }
}

.menu--main,
.menu--main-navigation-chinese {
  position: relative;
  left: calc(-100vw - var(--edge));
  top: 0;
  width: 100%;
  height: auto;
  background-color: var(--nav-background);
  transition:
    250ms background-color var(--ease),
    0.5s left cubic-bezier(0.78, 0.41, 0.36, 0.89);
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
  a {
    text-decoration: none;
  }
  .menu {
    max-width: 550px;
    position: absolute;
    display: block;
    top: calc(var(--header-height) / 2);
    left: 0;
    padding: 2rem 2rem 6rem;
    width: 100vw;
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    background-color: var(--background);
    margin: 0;

    .nav-split-left .menu-item .menu-parent-container {
      left: 0;
    }
    .nav-split-right .menu-item .menu-parent-container {
      right: 0;
      left: auto;
    }
  }
  > .menu {
    > div {
      > .menu-item {
        > a {
          font-weight: 500;
          max-width: max-content;
        }
      }
    }
  }

  .menu-item {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;

    /* > span {
      display: none;
    } */

    a {
      display: block;
      padding: 1rem 0;
      text-transform: uppercase;
      text-align: left;
      /* width: calc(100% - 8rem); */
      &:hover {
        color: var(--primary);
      }

      /* // &:hover  ~ .line-indicator {
						// 	width: 100%;
						// } */
    }

    /* // .line-indicator {
					// 	position: absolute;
					// 	display: block;
					// 	bottom: 0;
					// 	width: 0;
					// 	height: 2px;
					// 	background-color: var(--primary);

					// 	transition: .3s width var(--ease);
					// } */

    &.menu-item--active-trail {
      > a.is-active {
        color: var(--foreground);
      }
      .line-indicator {
        background-color: var(--foreground);
        width: 100%;
      }
    }
  }

  .menu-item:has(.menu-parent-container):after {
    content: "";
    position: absolute;
    display: block;
    top: 0.25rem;
    right: 0rem;
    width: 3rem;
    height: 3rem;
    background-color: transparent;
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231d1c1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
    transform: rotate(0);
    transition-property: transform;
    transition: 0.3s cubic-bezier(0.78, 0.41, 0.36, 0.89);
    cursor: pointer;
  }

  .menu-parent-container {
    max-height: 0;
    transition: 0.3s max-height var(--ease);
    .menu {
      position: static;
      height: auto;
      padding: 0;
      width: 100%;
    }
    > .menu {
      padding-left: 1rem;
      > * {
        display: none;
      }
      > *:nth-child(3) ~ * {
        display: block;
      }
    }
    .menu-item {
      height: auto;
    }
  }

  .menu-item.showed {
    .menu-parent-container {
      max-height: 100vh;
    }
    &:after {
      transform: rotate(180deg);
    }
  }

  .link-container {
    > ul {
      > li {
        > a,
        > span {
          font-weight: 400;
          padding-bottom: 0.25rem;
          max-width: max-content;
          border-bottom: 1px solid var(--accent);
          margin-bottom: 0.5rem;
          display: block;
          margin-top: 0;
          line-height: 1.25;
        }
      }
    }

    .menu-group {
      .menu-group {
        padding-left: 1rem;
        margin: 1rem 0;
      }
    }

    a {
      font-weight: 300;
      padding: 0;
      /* padding-left: 1rem; */
      text-transform: none;
    }
  }
}

.sn-hamburger {
  position: relative;
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  z-index: 99;
  span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--primary);
    transition: 0.3s all cubic-bezier(0.78, 0.41, 0.36, 0.89);
  }
  p {
    position: absolute;
    margin: 0;
    font-size: var(--text-sm);
    left: 2.5rem;
  }
}

#block-solaire-site-branding {
  /* // position: relative;
			// margin-left: 2rem;
			// margin-right: 2rem; */

  position: relative;
  /* margin-top: -2.5rem; */

  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  z-index: 1;

  .sn-logo {
    width: var(--logo-width);

    height: var(--header-height);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    margin: auto;
    background-color: var(--orange);

    .logo-sun {
      display: block;
      margin: 0 auto;
      width: var(--logo-sun);
    }
    .logo-word {
      display: block;
      width: var(--logo-word-width);
      height: var(--logo-word-height);
      margin: 0 auto;
    }
    .logo-mobile {
      display: none;
    }

    /* // img.colored,
				// img.white{
				// 	position: absolute;
				// 	top: 0;
				// 	left: 0;
				// 	display: inline-block;
				// 	width: 100%;
				// }

				// img.colored{
				// 	opacity: 0;
				// }
				// img.white{
				// 	opacity: 1;
				// 	display: none;
				// } */
  }

  .site-name {
    display: none;
  }
}

.dark,
[data-theme="dark"] {
  .menu--main,
  .menu--main-navigation-chinese {
    .menu-item:has(.menu-parent-container):after {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23fbbe75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
    }
  }
}

@media (min-width: 768px) {
  #block-booknowbutton {
    right: var(--edge);
    a {
      padding-inline: 1rem;
    }
  }
}

@media (min-width: 1024px) {
  .sn-hamburger {
    display: none;
  }
  /* test */
  #block-solaire-site-branding {
    top: -2.5rem;
    .sn-logo {
      width: 10rem;
      height: calc(var(--header-height) + var(--header-eyebrow-height));
      .logo-sun {
        width: 3rem;
      }
    }
  }

  .region-primary-menu {
    padding: 0;
  }

  .menu--main,
  .menu--main-navigation-chinese {
    position: absolute;
    background-color: transparent;
    left: 0;
    height: inherit;

    > .menu {
      > div {
        > .menu-item {
          > a {
            font-weight: 300;
          }
        }
      }
    }
    > .menu {
      > div {
        position: absolute;
        display: flex;
        height: inherit;
        gap: 2rem;
        align-items: center;
        padding: var(--edge);
        width: calc(50% - calc(var(--logo-width)) / 2);
      }

      > .menu-item {
        display: none;
      }
    }
    .menu {
      background-color: transparent;
      position: static;
      height: auto;
      height: inherit;
      max-width: none;
      padding: 0;
    }
    .menu-item {
      position: static;
      height: var(--header-height);
      place-content: center;
      a {
        width: auto;
      }
    }

    .menu-item:has([data-drupal-link-system-path="rewards"]) ~ .menu-item {
      display: none;
    }
    .menu-item:hover {
      .menu-parent-container {
        max-height: 50vh;
      }
    }
    .menu-item:has(.menu-parent-container):after {
      display: none;
    }

    .menu-parent-container {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100svw;
      margin: 0;
      padding: 0;
      height: auto;
      max-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      box-shadow: 0 0 0 0 rgb(0, 0, 0, 0.5);
      background-color: var(--background);
      transition: all 0.3s var(--ease);
      &::-webkit-scrollbar {
        width: 0.25rem;
      }

      &::-webkit-scrollbar-thumb {
        /* background-color: blue; */
      }

      > .menu {
        width: var(--container-size);
        margin: auto;
        h4 {
          margin-top: 0;
        }
        > * {
          display: block;
        }
        > *:nth-child(3) ~ * {
          /* align-self: center; */
        }
      }

      > .menu-parent {
        display: flex;
        gap: 2rem;
        padding: 2rem;
        align-items: flex-start;
        justify-content: center;

        .menu-item:has(.separator) {
          display: flex;
          gap: 2rem;
          align-items: flex-start;
          justify-content: space-between;
        }
      }

      .menu-item {
        height: auto;
      }

      .nav-image {
        max-width: 15rem;
        aspect-ratio: 4/3;
      }

      .link-container {
        .menu-group {
          .menu-group {
            margin: 0 0 0.5rem;
            padding-left: 0;
            font-size: var(--text-sm);
          }
        }
      }
    }

    .nav-description {
      max-width: 15rem;
      font-size: var(--text-sm);
      h4 {
        margin-top: 0;
      }
    }

    .separator {
      align-self: stretch;
      height: auto;
      width: 1px;
      background-color: var(--accent);
    }

    .nav-image {
      max-width: 15rem;
      aspect-ratio: 4 / 3;
    }

    .nav-split-left {
      justify-content: flex-end;
    }
    .nav-split-right {
      left: auto;
      right: 0;
      /* left: calc(50% + 4.5rem); */
      /* justify-content: flex-end; */
    }
  }
}

@media (min-width: 1200px) {
  #block-booknowbutton {
    a {
      padding-inline: 1.5rem;
    }
  }
}