/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — Law Office of Conrad J. Kuyawa
   Depends on: assets/css/tokens.css, assets/css/components.css
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('./tokens.css');

.footer {
  background-color: var(--color-beige);
  padding-top:    clamp(2.3rem, 4.6vw, 3.45rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  color:          var(--color-blue-darkest);
  overflow:       hidden;
}

.footer__container {
  max-width:      1440px;
  margin:         0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}


/* ─── FOOTER TOP GRID ────────────────────────────────────────────────────── */

.footer__top {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap:                   clamp(2rem, 4vw, 4rem);
  margin-bottom:         clamp(2.25rem, 4.5vw, 3.375rem);
}

/* Branding Column */
.footer__brand {
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   clamp(3rem, 6vw, 5rem);
}

.footer__brand svg {
  display: block;
  height: clamp(43.75px, 38px + 1.439vw, 65.63px);
  width:   auto;
  color:   var(--color-blue);
  transition: opacity 0.3s ease;
}

.footer__brand svg:hover {
  opacity: 0.8;
}

.footer__brand svg:last-child {
  height: clamp(35px, 30.4px + 1.151vw, 52.5px);
}


/* Link Columns */
.footer__nav-group {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.footer__list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            0.1rem;
}

.footer__link {
  font-family:     var(--font-sans);
  font-size:       var(--text-xs);
  font-weight:     var(--fw-regular);
  color:           var(--color-blue-darkest);
  text-decoration: none;
  transition:      color 0.2s ease, transform 0.2s ease;
  display:         inline-block;
}

.footer__link:hover {
  color:     var(--color-red);
  transform: translateX(4px);
}


/* Contact/Social Column */
.footer__contact {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            1rem;
}

.footer__socials {
  display:     flex;
  align-items: center;
}

.footer__social-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           42px;
  height:          42px;
  border-radius:   8px;
  color:           var(--color-red);
  transition:      all 0.3s var(--nav-ease);
}

.footer__social-link:hover {
  background: var(--color-blue-darkest);
  color:      var(--color-white);
  transform:  translateY(-3px);
  box-shadow: 0 8px 20px rgba(13, 13, 29, 0.15);
}

.footer__social-link svg {
  width:  20px;
  height: 20px;
}


/* ─── FOOTER BOTTOM ──────────────────────────────────────────────────────── */

.footer__bottom {
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  gap:            1.5rem;
}

.footer__copyright,
.footer__address {
  font-family: var(--font-sans);
  font-size:   0.625rem;
  color:       rgba(13, 13, 29, 0.5);
  line-height: 1.6;
}

.footer__address {
  text-align: right;
  max-width:  400px;
}

.footer__map-link {
  color:           var(--color-blue-darkest);
  text-decoration: none;
  font-weight:     var(--fw-bold);
  margin-left:     0.5rem;
  border-bottom:   1px solid transparent;
  transition:      border-color 0.2s ease;
}

.footer__map-link:hover {
  border-color: currentColor;
}


/* ─── ANIMATIONS ─────────────────────────────────────────────────────────── */

.footer.is-visible .footer__top > * {
  animation: footerFadeUp 0.8s var(--nav-ease) forwards;
}

.footer__top > * {
  opacity:   0;
  transform: translateY(20px);
}

.footer__top > *:nth-child(1) { animation-delay: 0.1s; }
.footer__top > *:nth-child(2) { animation-delay: 0.2s; }
.footer__top > *:nth-child(3) { animation-delay: 0.3s; }
.footer__top > *:nth-child(4) { animation-delay: 0.4s; }
.footer__top > *:nth-child(5) { animation-delay: 0.5s; }

@keyframes footerFadeUp {
  to {
    opacity:   1;
    transform: translateY(0);
  }
}


/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer__brand {
    grid-column: span 2;
    align-items: center;
    text-align:  center;
    margin-bottom: 1rem;
  }
  
  .footer__address {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .footer__top {
    grid-template-columns: 1fr;
    text-align:           center;
    gap:                  2.5rem;
  }
  
  .footer__brand {
    grid-column: span 1;
  }
  
  .footer__contact {
    align-items: center;
  }
  
  .footer__bottom {
    flex-direction: column;
    text-align:     center;
  }
  
  .footer__address {
    text-align: center;
  }

  .footer__link:hover {
    transform: translateY(-2px);
  }
}