/*
  TODO
  - hook events (toggle)
  - add some transition on toggle (optional)
  - apply styles desktop vs touch
 */

.scroll-down #header {
  transform: translate(0, calc(-100 * 100vw / var(--page-width)));
}

@media only screen and (min-width: 768px) {
  .scroll-down #header {
    transform: translate(0, calc(-100 * 100vw / var(--page-lg-width)));
  }
}

#header {
  left: 0;
  padding: calc(22 * 100vw / var(--page-width)) 0;
  position: fixed;
  top: 0;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease-out;
  width: 100%;
  z-index: 2;
}

@media only screen and (min-width: 768px) {
  #header {
    padding-bottom: calc(33 * 100vw / var(--page-lg-width));
    padding-top: calc(33 * 100vw / var(--page-lg-width));
  }
}

#mainNav {
  align-items: center;
  background-color: var(--color-main-bg);
  display: flex;
  flex-direction: column;
  gap: calc(80 * 100vw / var(--page-width));
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  display: none;
  z-index: 2;
}

@media only screen and (min-width: 768px) {
  #mainNav {
    background-color: transparent;
    display: flex;
    flex-direction: row;
    gap: calc(68 * 100vw / var(--page-lg-width));
    height: auto;
    margin: 0 auto;
    position: relative;
    width: calc(1400 * 100vw / var(--page-lg-width));
  }

  #mainNav div {
    flex-grow: 1;
    text-align: right;
  }
}

#mainNav .page-label p {
  color: var(--color-light);
}

.site-navigation-toggle {
  background-color: transparent;
  cursor: pointer;
  height: calc(22 * 100vw / var(--page-width));
  padding: 0;
  position: absolute;
  right: calc(20 * 100vw / var(--page-width));
  top: calc(20 * 100vw / var(--page-width));
  width: calc(22 * 100vw / var(--page-width));
  z-index: 1;
}

#mainNav .page-label p {
  color: var(--color-light);
}

@media only screen and (min-width: 768px) {
  .site-navigation-toggle {
    display: none;
  }
}

#mainNav .page-label {
  border-bottom: 2px solid var(--color-alt-bg);
  box-sizing: border-box;
  height: calc(58 * 100vw / var(--page-width));
  padding-top: calc(20 * 100vw / var(--page-width));
  position: relative;
  top: 0;
}

@media only screen and (min-width: 768px) {
  #mainNav .page-label {
    display: none;
  }
}

.nav-link {
  color: var(--color-light);
  position: relative;
}

.nav-link::after {
  background-color: var(--color-accent-sun);
  border-radius: 50%;
  content: '';
  height: calc(8 * 100vw / var(--page-width));
  left: 50%;
  position: absolute;
  top: calc(-24 * 100vw / var(--page-width));
  transition:
    transform 0.15s ease-in,
    filter 0.15s ease-in;
  width: calc(8 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .nav-link::after {
    filter: blur(3px);
    height: calc(10 * 100vw / var(--page-lg-width));
    left: 50%;
    position: absolute;
    top: calc(-50 * 100vw / var(--page-lg-width));
    transition:
      transform 0.15s ease-in,
      filter 0.15s ease-in;
    width: calc(10 * 100vw / var(--page-lg-width));
  }
}

.nav-link:hover::after {
  filter: blur(0px);
  transform: translate(0, calc(30 * 100vw / var(--page-lg-width)));
}

.nav-link-2::after {
  background-color: var(--color-accent-grass);
}

.nav-link-3::after {
  background-color: var(--color-accent-sky);
}

.nav-link-4::after {
  background-color: var(--color-accent-mud);
}

.page-label {
  display: flex;
  justify-content: center;
  pointer-events: none; /* Prevents overlap with other nav items */
  width: 100%;
  z-index: 3;
}

@media only screen and (min-width: 768px) {
  .page-label {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(33 * 100vw / var(--page-lg-width));
  }
}

.page-label p {
  color: var(--color-accent-mud);
  display: flex;
  gap: calc(14 * 100vw / var(--page-width));
  margin: 0;
  pointer-events: visible; /* Add interactions removed due to overlap */
}

@media only screen and (min-width: 768px) {
  .page-label p {
    gap: calc(28 * 100vw / var(--page-lg-width));
  }
}

.page-label span:nth-child(even) {
  margin-top: calc(10 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .page-label span:nth-child(even) {
    margin-top: calc(16 * 100vw / var(--page-lg-width));
  }
}

.page-label-inverted p > span:nth-child(even) {
  margin-top: 0 !important;
}

.page-label-inverted p > span:nth-child(odd) {
  margin-top: calc(10 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .page-label-inverted p > span:nth-child(odd) {
    margin-top: calc(16 * 100vw / var(--page-lg-width));
  }
}

/* Themes */
[data-theme='c_light'] .site-navigation-toggle path {
  fill: var(--color-light);
}

[data-theme='c_light'] .page-label p {
  color: var(--color-light);
}

[data-theme='dark'] .site-navigation-toggle path {
  fill: var(--color-dark);
}

[data-theme='c_dark'] .page-label p {
  color: var(--color-dark);
}

@media only screen and (min-width: 768px) {
  [data-theme='c_light'] .nav-link {
    color: var(--color-light);
  }

  [data-theme='c_dark'] .nav-link {
    color: var(--color-dark);
  }
}

/* Toggle visibility (Specific to case studies). */
.hide-nav header {
  opacity: 0;
}