/* ═══════════════════════════════════════════════════════════
   WIKAIR shared footer
   Deep navy, matching nav.css (deep navy #081022 · accent #335DCD
   · mist #A0B4E8). Load from every page:
   <link rel="stylesheet" href="footer.css">
   ═══════════════════════════════════════════════════════════ */

.footer {
  position: relative;
  width: 100%;
  /* same recipe as nav.css: translucent deep navy + blur, so the footer
     reads as the same lighter slate-navy the nav shows on screen rather
     than a much darker solid block */
  background: rgba(8, 16, 34, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(160, 190, 230, 0.08);
  z-index: 2;
  padding: 5rem 4rem 8rem;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 6rem;
}

.footer-logo {
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: #A0B4E8;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  line-height: 1;
  margin-top: 0.2rem;
}

/* Wordmark, one line on what WIKAIR is, and a way to act on it, so the
   footer ends the page with a purpose rather than just a list of links. */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 17rem;
}
.footer-tagline {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(160, 180, 232, 0.75);
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}
/* Home's pill button at footer scale. */
.footer-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1.5rem;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #284AA3, #335DCD);
  color: #F2F6FF;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(51, 93, 205, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.footer-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(51, 93, 205, 0.45);
}

.footer-columns {
  display: flex;
  gap: 5rem;
  flex: 1;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-col-header {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(160, 180, 232, 0.6);
  margin-bottom: 0.6rem;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}

.footer-col-item {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #f0f0f0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}

.footer-col-item a {
  color: #f0f0f0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-col-item a:hover {
  color: #A0B4E8;
}

/* tablets: shrink the gaps and let the columns wrap so nothing
   overflows or gets clipped between the phone and desktop layouts */
@media (max-width: 1100px) {
  .footer {
    padding: 4rem 2.5rem 7rem;
  }
  .footer-inner {
    gap: 3rem;
  }
  .footer-columns {
    gap: 3rem;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 3.5rem 1.25rem 3.5rem;
  }
  .footer-inner {
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    text-align: center;
  }
  .footer-brand {
    align-items: center;
    max-width: 20rem;
  }
  /* Three short columns side by side rather than stacked: stacked, the
     footer ran to ~800px on a phone. Each column is only a few words wide,
     so three fit across even a 320px screen. */
  .footer-columns {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    max-width: 26rem;
    text-align: left;
  }
  .footer-col { gap: 0; }
  .footer-col-header { font-size: 0.85rem; margin-bottom: 0.25rem; }
  .footer-col-item { font-size: 0.95rem; }
}

/* Footer links were 20px tall, which is a fiddly tap on a phone. The extra
   height is padding, so the visual rhythm of the column is unchanged. */
@media (max-width: 768px) {
  .footer-col-item a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}