/* ============================================================
   Navbar
   ============================================================ */

.header {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  z-index: 100;
  height: var(--nav-height);
  background-color: transparent;
  margin-top: 0.4rem;
}

.header--scrolled {
  background-color: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(8px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--space-sm);
  max-width: var(--max-width-section);
  margin: 0 auto;
}

.nav__logo {
  display: flex;
  align-items: center;
  -webkit-user-drag: none;
  position: relative;
}

/* Orange overlay image – fades in on hover */
.nav__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateY(-8px);
  background: url("../../assets/img/04_Hero/vw-logo-vectorized.svg") center / contain no-repeat;
  filter: brightness(0) saturate(100%) invert(85%) sepia(60%) saturate(740%) hue-rotate(347deg) brightness(97%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.nav__logo:hover::after {
  opacity: 1;
}

.nav__logo-img {
  height: 45px;
  transform: translateY(-8px);
  width: 45px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(27%) sepia(82%) saturate(1800%) hue-rotate(218deg) brightness(107%);
  transition: opacity 400ms ease;
  cursor: pointer;
  -webkit-user-drag: none;
}

.nav__logo:hover .nav__logo-img {
  opacity: 0;
}

.nav__links {
  display: none;
  gap: var(--space-lg);
}

.nav__link {
  font-family: var(--font-base);
  font-size: 1.125rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-text-light);
  transition: opacity var(--transition-base);
  -webkit-user-drag: none;
}

.nav__link:hover {
  opacity: 1;
}

/* About Me – hand-drawn circle hover */
.nav__link--about {
  position: relative;
}

.nav__link--about::after {
  content: "";
  position: absolute;
  inset: calc(-0.3em - 5px) -0.7em;
  background: url("../../assets/img/00_Hand-drawn lines/00_Header/Color option 1/1.png") center / 100% 100% no-repeat;
  clip-path: inset(0 0 100% 0);
  transform: translateY(-0.15rem);
  transition: clip-path 300ms ease;
  pointer-events: none;
}

.nav__link--about:hover::after {
  clip-path: inset(0 0 0% 0);
}

/* Skills – hand-drawn underline hover */
.nav__link--skills {
  position: relative;
}

.nav__link--skills::after {
  content: "";
  position: absolute;
  bottom: -0.65em;
  left: -0.9em;
  right: -0.9em;
  height: 2.4em;
  background: url("../../assets/img/00_Hand-drawn lines/00_Header/Color option 1/2.png") left center / 100% 100%
    no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 300ms ease;
  pointer-events: none;
}

.nav__link--skills:hover::after {
  clip-path: inset(0 0% 0 0);
}

/* Projects – hand-drawn underline hover */
.nav__link--projects {
  position: relative;
}

.nav__link--projects::after {
  content: "";
  position: absolute;
  bottom: -1.4em;
  left: -0.3em;
  right: -0.3em;
  height: 2.4em;
  background: url("../../assets/img/00_Hand-drawn lines/00_Header/Color option 1/4.png") left center / 100% 100%
    no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 300ms ease;
  pointer-events: none;
  transform: scaleX(1.3);
  transform-origin: left start;
}

.nav__link--projects:hover::after {
  clip-path: inset(0 0% 0 0);
}

/* Contact – hand-drawn underline hover */
.nav__link--contact {
  position: relative;
}

.nav__link--contact::after {
  content: "";
  position: absolute;
  bottom: -0.7em;
  left: -0.7em;
  right: -0.7em;
  height: 2.4em;
  background: url("../../assets/img/00_Hand-drawn lines/00_Header/Color option 1/3.png") left center / 100% 100%
    no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 300ms ease;
  pointer-events: none;
}

.nav__link--contact:hover::after {
  clip-path: inset(0 0% 0 0);
}

/* Language Switch */
.lang-switch {
  display: none;
  align-items: center;
  gap: var(--space-sm);
}

.lang-switch__btn {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: 600;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-text-light);
  opacity: 1;
  cursor: pointer;
  transition: color var(--transition-base);
  position: relative;
}

/* Hand-drawn frame – only on inactive buttons */
.lang-switch__btn:not(.lang-switch__btn--active)::after {
  content: "";
  position: absolute;
  inset: -0.3em -0.4em;
  background: url("../../assets/img/00_Hand-drawn lines/00_Header/Color option 1/Toggle.png") center / 100% 100%
    no-repeat;
  clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
  transition: clip-path 300ms ease;
  pointer-events: none;
}

.lang-switch__btn--de:not(.lang-switch__btn--active)::after {
  transform: scaleX(-1) scaleY(-1);
}

.lang-switch__btn:not(.lang-switch__btn--active):hover::after {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Active state: orange, no pointer, no hover frame */
.lang-switch__btn--active {
  color: #e8593d;
  cursor: default;
}

/* Toggle Track */
.lang-switch__toggle {
  position: relative;
  width: 32px;
  height: 8px;
  background-color: #e8593d;
  border-radius: 999px;
  border: 1.5px solid var(--color-off-white);
  cursor: pointer;
  flex-shrink: 0;
}

/* Enlarged invisible hit area — the visual track is only 8px tall and sits
   right next to the EN/DE letters with just var(--space-sm) of gap, so the
   pointer cursor was dropping out between them. This closes that gap and
   matches the letters' own height without changing the track's look. */
.lang-switch__toggle::before {
  content: "";
  position: absolute;
  inset: -6px -10px;
}

/* Toggle Knob */
.lang-switch__knob {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 16px;
  height: 16px;
  background-color: var(--color-blue);
  border-radius: 50%;
  border: 1.5px solid var(--color-off-white);
  transition: transform var(--transition-base);
  pointer-events: none;
}

.lang-switch--de .lang-switch__knob {
  transform: translate(16px, -50%);
}

.lang-switch--en .lang-switch__knob {
  transform: translate(0, -50%);
}

/* Burger Menu */
.nav__burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-sm);
  align-self: flex-start;
}

.nav__burger-icon {
  width: 1.8rem;
  height: auto;
  display: block;
}

.nav__burger-icon--hover {
  display: none;
}

.nav__burger[aria-expanded="true"] .nav__burger-icon--default {
  display: none;
}

.nav__burger[aria-expanded="true"] .nav__burger-icon--hover {
  display: block;
}

/* From 620px: show links, hide burger */
@media (min-width: 620px) {
  .nav {
    padding: 0 var(--space-md);
  }
  .nav__links {
    display: flex;
    gap: 3.5vw;
  }

  .lang-switch {
    display: flex;
  }

  .nav__burger {
    display: none;
  }

  .nav__logo-img {
    height: 60px;
    width: 60px;
  }

  .header {
    margin-top: 0.8rem;
  }
}


/* Compact range: 720px – 1100px */
@media (min-width: 720px) and (max-width: 1100px) {
  .nav {
    padding: 0 var(--space-lg);
  }
}

/* Full desktop layout: from 1100px */
@media (min-width: 1100px) {
  .nav {
    padding: 0 var(--space-xl);
  }
}

/* Stepped nav link gap: 650px – 1440px */
@media (min-width: 650px) and (max-width: 899px) {
  .nav__links {
    gap: 6vw;
  }
}

@media (min-width: 900px) and (max-width: 949px) {
  .nav__links {
    gap: 11.5vw;
  }
}

@media (min-width: 950px) and (max-width: 989px) {
  .nav__links {
    gap: 12.5vw;
  }
}

@media (min-width: 990px) and (max-width: 1440px) {
  .nav__links {
    gap: 13vw;
  }
}

/* Beyond 1440px .nav is pinned to --max-width-section, so freeze the gap
   at its 1440px value instead of letting vw keep growing past the container */
@media (min-width: 1440px) {
  .nav__links {
    gap: 13rem;
  }
}

/* ============================================================
   Mobile Nav Overlay
   ============================================================ */

.nav__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 656px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-sm);
  background-image: url("../../assets/img/01_Background/Design Size Relation@3x/01_Hero.png");
  background-size: cover;
  background-position: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
  transition:
    opacity 350ms ease,
    visibility 350ms ease,
    transform 350ms ease;
}

.nav__overlay--open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.nav__overlay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  flex-shrink: 0;
}

.nav__overlay-logo-link {
  cursor: default;
  display: flex;
  align-items: center;
  position: relative;
}

/* Orange overlay image – fades in on hover (same technique as .nav__logo / .site-footer__logo-link) */
.nav__overlay-logo-link::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../../assets/img/04_Hero/vw-logo-vectorized.svg") center / contain no-repeat;
  filter: brightness(0) saturate(100%) invert(85%) sepia(60%) saturate(740%) hue-rotate(347deg) brightness(97%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.nav__overlay-logo-link:hover::after {
  opacity: 1;
}

.nav__overlay-logo-link:hover .nav__overlay-logo-img {
  opacity: 0;
}

.nav__overlay-logo-img {
  height: 45px;
  transform: translateY(-8px);
  width: 45px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(27%) sepia(82%) saturate(1800%) hue-rotate(218deg) brightness(107%);
  transition: opacity 400ms ease;
}

.nav__overlay-close {
  cursor: pointer;
  padding-right: 4px;
  margin-top: -8px;
  background: none;
  border: none;
}

.nav__overlay-close-icon {
  width: 1.8rem;
  height: auto;
  display: block;
}

.nav__overlay-close-icon--hover {
  display: none;
}

.nav__overlay-close:active .nav__overlay-close-icon--default {
  display: none;
}

.nav__overlay-close:active .nav__overlay-close-icon--hover {
  display: block;
}

.nav__overlay-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__overlay-link {
  font-family: var(--font-base);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-light);
  text-decoration: none;
}

.nav__overlay .lang-switch {
  display: flex;
  justify-content: center;
  margin-bottom: 4.2rem;
}

.nav__overlay-social {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: 6.2rem;
}

.nav__overlay-social a {
  cursor: pointer;
}

@media (min-width: 620px) {
  .nav__overlay {
    display: none;
  }
}