/*
  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);
}

/* Mobile menu animation: the panel wipes down from the top, then its
   contents fade up out of a blur one after another. Closing runs the same
   motion back without the stagger, so it gets out of the way quickly. */
@media only screen and (max-width: 767px) {
  #mainNav {
    clip-path: inset(0 0 100% 0);
    display: flex;
    transition:
      clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1),
      visibility 0s linear 0.7s;
    visibility: hidden;
  }

  #mainNav.is-open {
    clip-path: inset(0 0 0 0);
    transition:
      clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1),
      visibility 0s;
    visibility: visible;
  }

  #mainNav > * {
    filter: blur(6px);
    opacity: 0;
    transform: translate(0, 24px);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      filter 0.3s ease;
  }

  #mainNav.is-open > * {
    filter: blur(0);
    opacity: 1;
    transform: translate(0, 0);
    transition:
      opacity 0.6s ease,
      transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.6s ease;
  }

  #mainNav.is-open > :nth-child(1) { transition-delay: 0.45s; }
  #mainNav.is-open > :nth-child(2) { transition-delay: 0.3s; }
  #mainNav.is-open > :nth-child(3) { transition-delay: 0.4s; }
  #mainNav.is-open > :nth-child(4) { transition-delay: 0.5s; }
  #mainNav.is-open > :nth-child(5) { transition-delay: 0.6s; }
}

@media only screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #mainNav,
  #mainNav.is-open,
  #mainNav > *,
  #mainNav.is-open > * {
    transition: none;
  }
}

.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;
}

/* Language switch (Brazil / US flags) */
.lang-switch {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  line-height: 0;
  text-decoration: none;
}

.lang-flag {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.35);
  height: 14px;
  opacity: 0.4;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  width: 20px;
}

.lang-flag.is-active {
  opacity: 1;
}

.lang-switch:hover .lang-flag,
.lang-switch:focus-visible .lang-flag {
  opacity: 1;
}

.lang-switch:hover .lang-flag:not(.is-active),
.lang-switch:focus-visible .lang-flag:not(.is-active) {
  transform: translate(0, -2px);
}

/* Phones: in the header bar, left of the menu button. */
.lang-switch-mobile {
  position: absolute;
  right: calc(58 * 100vw / var(--page-width));
  top: calc(23 * 100vw / var(--page-width));
  z-index: 1;
}

.lang-switch-desktop {
  display: none;
}

@media only screen and (min-width: 768px) {
  .lang-switch-mobile {
    display: none;
  }

  /* Desktop: inline, just left of the last nav link. */
  .lang-switch-desktop {
    display: inline-flex;
    margin-right: calc(40 * 100vw / var(--page-lg-width));
    vertical-align: middle;
  }
}