/* --- SCSS Variables --- */
/* These are the default WordPress Breakpoints */
/* Custom Breakpoints */
/* We code desktop first.
 * First we code the design for 1000+ Pixels (SASS-variable: $mobile-nav-breakpoint).
 * Below we rewrite the default breakpoint behaviour of WordPress to match that new brrakpoint.
 * Then we add the mobile design.
 */
@keyframes htgf__overlay-menu__fade-in-animation {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}
@media (min-width: 1100px) {
  html.has-modal-open:has(.is-menu-open) {
    overflow: auto;
  }
}

:root {
  --above-nav-index: 999999999;
  --mobile-nav-animation-duration: .125s;
  --mobile-nav-animation-duration--meta: .2s;
}

.navigation-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  margin-top: 0;
  z-index: 20;
  background-color: var(--htgf--preset--color--fond--opacity--60);
  backdrop-filter: blur(60px);
  border-bottom: solid 1px var(--wp--preset--color--contrast--opacity--20);
  padding: 0 2.5rem;
}
@media (max-width: 600px) {
  .navigation-header {
    padding: 0 1rem;
  }
  .admin-bar .navigation-header {
    top: 0;
  }
}
.navigation-header .wp-block-group:has(> nav) {
  gap: 5rem;
}
.admin-bar .navigation-header {
  top: 32px;
}
.navigation-header #logo-link-home {
  z-index: var(--above-nav-index);
}
@media (max-width: 1099px) {
  .has-modal-open .navigation-header #logo-link-home {
    transition: filter var(--mobile-nav-animation-duration--meta) ease;
    filter: invert(1);
  }
}
.navigation-header #logo-link-home img {
  height: 1.25rem;
  width: auto;
}
.navigation-header nav {
  font-family: var(--wp--preset--font-family--avantgarde);
  font-weight: 500;
  line-height: 1;
  font-size: 1rem;
}
.navigation-header nav a {
  padding: 0.4rem 0 0 0;
}
.navigation-header nav .wp-block-navigation__container {
  gap: 2.5rem;
}
.navigation-header .wp-block-group:has(> .wp-block-polylang-language-switcher),
.navigation-header .wp-block-group:has(> nav > .wp-block-polylang-language-switcher) {
  gap: 1rem;
  margin-right: 2.4rem;
}
@media (min-width: 1100px) {
  .has-modal-open .navigation-header .wp-block-group:has(> .wp-block-polylang-language-switcher) .wp-block-buttons,
  .has-modal-open .navigation-header .wp-block-group:has(> .wp-block-polylang-language-switcher) .wp-block-polylang-language-switcher,
  .has-modal-open .navigation-header .wp-block-group:has(> nav > .wp-block-polylang-language-switcher) .wp-block-buttons,
  .has-modal-open .navigation-header .wp-block-group:has(> nav > .wp-block-polylang-language-switcher) .wp-block-polylang-language-switcher {
    z-index: 99999;
  }
  .has-modal-open .navigation-header .wp-block-group:has(> .wp-block-polylang-language-switcher) .wp-block-button,
  .has-modal-open .navigation-header .wp-block-group:has(> .wp-block-polylang-language-switcher) .lang-item,
  .has-modal-open .navigation-header .wp-block-group:has(> nav > .wp-block-polylang-language-switcher) .wp-block-button,
  .has-modal-open .navigation-header .wp-block-group:has(> nav > .wp-block-polylang-language-switcher) .lang-item {
    transition: filter var(--mobile-nav-animation-duration--meta) ease;
    filter: invert(1);
  }
  .has-modal-open .navigation-header .wp-block-group:has(> .wp-block-polylang-language-switcher) .wp-block-button:hover,
  .has-modal-open .navigation-header .wp-block-group:has(> .wp-block-polylang-language-switcher) .lang-item:hover,
  .has-modal-open .navigation-header .wp-block-group:has(> nav > .wp-block-polylang-language-switcher) .wp-block-button:hover,
  .has-modal-open .navigation-header .wp-block-group:has(> nav > .wp-block-polylang-language-switcher) .lang-item:hover {
    filter: invert(0);
  }
}
.navigation-header .wp-block-polylang-language-switcher {
  display: flex;
  gap: 0.1rem;
  padding: 0;
}
.navigation-header .wp-block-polylang-language-switcher li {
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  width: 1.8125rem;
  height: 1.8125rem;
}
.navigation-header .wp-block-polylang-language-switcher li:hover::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(../../images/HTGF-Mastergradient-br60.webp);
  background-size: 110% 110%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  mix-blend-mode: multiply;
  animation: button-bg-hover-animation 1s ease;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--wp--preset--color--contrast--opacity--20);
  border-radius: 9999px;
}
@keyframes button-bg-hover-animation {
  0% {
    background-size: 110% 1000%;
  }
  100% {
    background-size: 110% 110%;
  }
}
.navigation-header .wp-block-polylang-language-switcher li:not(.current-lang) {
  pointer-events: all;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--wp--preset--color--contrast);
}
.navigation-header .wp-block-polylang-language-switcher li:not(.current-lang):hover {
  box-shadow: none;
}
.navigation-header .wp-block-polylang-language-switcher a {
  height: 100%;
  display: flex;
  align-items: center;
  font-family: var(--wp--preset--font-family--avantgarde);
  text-transform: uppercase;
  width: calc(2ch + 0.125rem);
  line-height: 1;
  overflow: hidden;
  font-size: var(--htgf--preset--font-size--caption-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
  transform: translateY(1px);
  font-weight: 500;
  padding: 0;
}
.navigation-header .wp-block-buttons {
  gap: 1rem;
}
.navigation-header .current-menu-item {
  background: var(--wp--preset--color--contrast);
  padding: 0.2rem 1.1rem 0.4rem;
  margin: -0.3rem -1.1rem;
  border-radius: 999px;
  color: var(--wp--preset--color--base);
}

/* ---
   Mobile design
*/
/* Rewrite the default CSS to breakpoint 1100px. */
@media (min-width: 1100px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
    width: 100%;
    position: relative;
    z-index: auto;
    background-color: inherit;
  }
}
@media (min-width: 600px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}
/* Add own styling */
/* The "Mobile Navigation" doesn't only show on mobile.
 * It's also the navigation that shows when the user clicks on the hamburger icon.
 */
nav[aria-label=Mobile-Navigation],
nav[aria-label=Mobile-Navigation-en] {
  position: fixed !important;
  right: 2rem;
}
@media (max-width: 600px) {
  nav[aria-label=Mobile-Navigation],
  nav[aria-label=Mobile-Navigation-en] {
    right: 1rem;
  }
}
nav[aria-label=Mobile-Navigation] .is-menu-open,
nav[aria-label=Mobile-Navigation-en] .is-menu-open {
  overflow: visible !important;
  height: 100vh;
  background: black;
}
nav[aria-label=Mobile-Navigation] .wp-block-group:has(> nav),
nav[aria-label=Mobile-Navigation-en] .wp-block-group:has(> nav) {
  width: 100%;
  justify-content: space-between;
}
nav[aria-label=Mobile-Navigation] .wp-block-group:has(> .wp-block-polylang-language-switcher),
nav[aria-label=Mobile-Navigation] .wp-block-group:has(> nav > .wp-block-polylang-language-switcher),
nav[aria-label=Mobile-Navigation-en] .wp-block-group:has(> .wp-block-polylang-language-switcher),
nav[aria-label=Mobile-Navigation-en] .wp-block-group:has(> nav > .wp-block-polylang-language-switcher) {
  position: absolute;
  right: 3.5rem;
  z-index: var(--above-nav-index);
}
.has-modal-open nav[aria-label=Mobile-Navigation] .wp-block-group:has(> .wp-block-polylang-language-switcher),
.has-modal-open nav[aria-label=Mobile-Navigation] .wp-block-group:has(> nav > .wp-block-polylang-language-switcher),
.has-modal-open nav[aria-label=Mobile-Navigation-en] .wp-block-group:has(> .wp-block-polylang-language-switcher),
.has-modal-open nav[aria-label=Mobile-Navigation-en] .wp-block-group:has(> nav > .wp-block-polylang-language-switcher) {
  transition: filter var(--mobile-nav-animation-duration--meta) ease;
  filter: invert(1);
}
nav[aria-label=Mobile-Navigation] .wp-block-navigation__responsive-container.is-menu-open,
nav[aria-label=Mobile-Navigation-en] .wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh;
  background-color: var(--wp--preset--color--contrast) !important;
  color: var(--wp--preset--color--base) !important;
  font-family: var(--wp--preset--font-family--face);
  font-weight: 400;
  font-size: var(--wp--preset--font-size--x-large);
  animation: htgf__overlay-menu__fade-in-animation var(--mobile-nav-animation-duration) ease-out !important;
}
@media (min-width: 601px) and (max-width: 1100px) {
  nav[aria-label=Mobile-Navigation] .wp-block-navigation__responsive-container.is-menu-open,
  nav[aria-label=Mobile-Navigation-en] .wp-block-navigation__responsive-container.is-menu-open {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
nav[aria-label=Mobile-Navigation] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
nav[aria-label=Mobile-Navigation-en] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: min(11vh, 7rem);
  overflow: auto;
}
nav[aria-label=Mobile-Navigation] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul,
nav[aria-label=Mobile-Navigation-en] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul {
  gap: 2.25rem;
}
@media (max-height: 40rem) {
  nav[aria-label=Mobile-Navigation] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul,
  nav[aria-label=Mobile-Navigation-en] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul {
    gap: 1.25rem;
  }
}
nav[aria-label=Mobile-Navigation] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .current-menu-item,
nav[aria-label=Mobile-Navigation-en] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .current-menu-item {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 1px;
}
nav[aria-label=Mobile-Navigation] .wp-block-navigation__responsive-close,
nav[aria-label=Mobile-Navigation] .wp-block-navigation__responsive-dialog,
nav[aria-label=Mobile-Navigation] .wp-block-navigation__responsive-container-content,
nav[aria-label=Mobile-Navigation-en] .wp-block-navigation__responsive-close,
nav[aria-label=Mobile-Navigation-en] .wp-block-navigation__responsive-dialog,
nav[aria-label=Mobile-Navigation-en] .wp-block-navigation__responsive-container-content {
  height: 100%;
}
nav[aria-label=Mobile-Navigation] .wp-block-navigation-submenu > a,
nav[aria-label=Mobile-Navigation-en] .wp-block-navigation-submenu > a {
  display: none;
}
nav[aria-label=Mobile-Navigation] .wp-block-navigation__submenu-container,
nav[aria-label=Mobile-Navigation-en] .wp-block-navigation__submenu-container {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: var(--htgf--preset--font-size--caption-xlarge);
  font-family: var(--wp--preset--font-family--avantgarde);
  font-weight: 500;
  padding: min(6vh, 10rem) 0 0 0 !important;
  gap: 1.25rem !important;
}
nav[aria-label=Mobile-Navigation] .wp-block-navigation__responsive-container-close,
nav[aria-label=Mobile-Navigation-en] .wp-block-navigation__responsive-container-close {
  position: fixed !important;
  top: 1.25rem;
  right: calc(1rem + min(1.25rem, 3vw));
}
@media (max-width: 600px) {
  nav[aria-label=Mobile-Navigation] .wp-block-navigation__responsive-container-close,
  nav[aria-label=Mobile-Navigation-en] .wp-block-navigation__responsive-container-close {
    right: 1rem;
  }
}

/* Handling the double navigation. */
@media (max-width: 1099px) {
  nav[aria-label=Desktop-Navigation],
  nav[aria-label=Main-Navigation-en] {
    display: none !important;
  }
}

@media (min-width: 1100px) {
  .wp-block-navigation__responsive-container {
    left: auto !important;
    min-width: 25rem;
  }
}