/* ============================================================
   Site Footer
   ============================================================ */

.site-footer {
  width: 100%;
  max-width: var(--max-width-section);
  margin: 0 auto;
  padding: 0 7.5rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.1rem;
  min-height: 160px;
}

.site-footer__inner {
  display: contents;
}

.site-footer__logo-link {
  position: relative;
  display: inline-block;
  margin-left: -0.5rem;
  transform: translateY(-0.5rem);
}

.site-footer__logo-link::after {
  content: "";
  position: absolute;
  inset: 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;
}

.site-footer__logo-link:hover::after {
  opacity: 1;
}

.site-footer__logo {
  height: 60px;
  width: 60px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(27%) sepia(82%) saturate(1800%) hue-rotate(218deg) brightness(107%);
  transition: opacity 400ms ease;
  -webkit-user-drag: none;
}

.site-footer__logo-link:hover .site-footer__logo {
  opacity: 0;
}

.site-footer__copyright {
  font-family: var(--font-base);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-text-light);
  margin: 0;
  white-space: nowrap;
}

.site-footer__copy-symbol {
  display: inline-block;
  transform: translateY(-1.5px);
}

/* ── Footer Nav ─────────────────────────────────────────── */

.footer__nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

/* Legal Notice – text link with hand-drawn underline */
.footer__nav-link--legal {
  font-family: var(--font-base);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-text-light);
  text-decoration: none;
  position: relative;
}

.footer__nav-link--legal::after {
  content: "";
  position: absolute;
  bottom: -0.7em;
  left: 0.5em;
  width: 5em;
  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;
}

.footer__nav-link--legal:hover::after {
  clip-path: inset(0 0% 0 0);
}

/* GitHub / LinkedIn / Email items */
.footer__nav-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
}

@keyframes footer-icon-roll {
  0%   { transform: translateX(-50%) rotate(-180deg); opacity: 0; animation-timing-function: ease-out; }
  12%  { opacity: 1; }
  58%  { transform: translateX(22px) rotate(20deg);   opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translateX(22px) rotate(0deg);    opacity: 1; }
}

.footer__nav-icon {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  width: 40px;
  height: 40px;
  display: block;
  transform: translateX(-50%) rotate(-180deg);
  opacity: 0;
  pointer-events: none;
  clip-path: circle(44% at center);
  -webkit-user-drag: none;
}

.footer__nav-item:hover .footer__nav-icon {
  animation: footer-icon-roll 600ms ease forwards;
}

@keyframes footer-icon-roll--email {
  0%   { transform: translateX(-50%) rotate(-180deg); opacity: 0; animation-timing-function: ease-out; }
  12%  { opacity: 1; }
  58%  { transform: translateX(14px) rotate(20deg);   opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translateX(14px) rotate(0deg);    opacity: 1; }
}

.footer__nav-item--email:hover .footer__nav-icon {
  animation: footer-icon-roll--email 600ms ease forwards;
}

/* Pill button */
.footer__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease;
  height: 40px;
  padding: 0 1.5rem;
  border-radius: 100px;
  font-family: var(--font-base);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-text-light);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.footer__nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-blue);
  border-radius: 100px;
  opacity: 0;
  transition: opacity 350ms ease;
}

.footer__nav-btn-text {
  position: relative;
  z-index: 1;
}

.footer__nav-item:hover .footer__nav-btn::before {
  opacity: 1;
}

/* ── Responsive (≤ 900px) ───────────────────────────────────
   Logo top-left; copyright + Legal Notice stacked top-right;
   GitHub / LinkedIn / Email as a full-width row below. */

@media (max-width: 900px) {
  .site-footer {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-md) 50px;
    min-height: 0;
  }

  .site-footer__logo-link {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    transform: translateY(-2.5rem);
  }

  .site-footer__copyright {
    grid-column: 1 / 4;
    grid-row: 1;
    min-width: 0;
    text-align: right;
    transform: translateY(-1.5rem);
  }

  .footer__nav {
    display: contents;
  }

  .footer__nav-link--legal {
    grid-column: 1 / 4;
    grid-row: 2;
    min-width: 0;
    text-align: right;
    margin-top: var(--space-md);
    transform: translateY(-2rem);
  }

  .footer__nav-link--legal::after {
    left: auto;
    right: 0.5em;
  }

  .footer__nav-item {
    grid-row: 3;
    align-self: center;
    align-items: center;
  }

  .footer__nav-item:nth-of-type(1) {
    grid-column: 1;
    justify-self: start;
    margin-left: 1rem;
  }

  .footer__nav-item:nth-of-type(2) {
    grid-column: 2;
    justify-self: center;
  }

  .footer__nav-item--email {
    grid-column: 3;
    justify-self: end;
    margin-right: 1rem;
  }

  .footer__nav-btn {
    height: 2rem;
    padding: 1rem 1rem;
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 620px) {
  .site-footer__logo {
    height: 45px;
    width: 45px;
  }
}