/* ==========================================================================
   Footer — Noir background, 3-column grid, bottom row
   Spec: ASAL-SITE-COMPLETE.txt § Shared Footer
   ========================================================================== */

/* ── Container ───────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  background: var(--color-noir);
  color: #fff;
  padding: var(--space-16) var(--space-6) var(--space-8);
  border-top: none;
  overflow: hidden;
}

/* ── Animated aura background — magenta-burgundy / crimson palette ────────── */
/* Palette: #9f1d56 · #9f1d4b · #9f1d40 · #9f1d35 · #9f1d2a · #9f1d1f · #9f261d */
.site-footer::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 55% at 20% 35%, rgba(159, 29, 86, 0.40) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 75% 55%, rgba(159, 29, 53, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 50% 70%, rgba(159, 29, 31, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 40% 20%, rgba(159, 38, 29, 0.30) 0%, transparent 65%);
  animation: footerAura 14s ease-in-out infinite alternate;
  filter: blur(40px);
}

.site-footer::after {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 65% 25%, rgba(159, 29, 75, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 55% at 25% 65%, rgba(159, 29, 42, 0.30) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 80% 75%, rgba(159, 29, 64, 0.30) 0%, transparent 60%);
  animation: footerAura2 18s ease-in-out 3s infinite alternate;
  filter: blur(50px);
}

@keyframes footerAura {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(3%, -3%) scale(1.06) rotate(2deg); }
}

@keyframes footerAura2 {
  0%   { transform: translate(0, 0) scale(1.04) rotate(-1deg); }
  100% { transform: translate(-3%, 2%) scale(0.96) rotate(1.5deg); }
}

/* Ensure all footer content sits above the aura */
.footer-grid,
.footer-bottom {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer::before,
  .site-footer::after {
    animation: none;
  }
}

@media (min-width: 768px) {
  .site-footer {
    padding: var(--space-16) var(--space-16) var(--space-8);
  }
}

@media (min-width: 1024px) {
  .site-footer {
    padding: var(--space-16) var(--space-24) var(--space-8);
  }
}

/* ── 3-Column Grid ───────────────────────────────────────────────────────── */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--space-8);
  }
}

/* ── Column Label (Navigate / Follow) ────────────────────────────────────── */
.footer-col-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: rgba(255, 255, 255, 0.50);
  margin-bottom: var(--space-4);
}

/* ── Col 1: Brand ────────────────────────────────────────────────────────── */
.footer-monogram {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-monogram:hover {
  color: var(--color-accent);
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
  margin-top: var(--space-2);
}

/* ── Col 2: Navigation Links ─────────────────────────────────────────────── */
.footer-links nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-links a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  padding: var(--space-1) 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer-links a[aria-current="page"] {
  color: var(--color-accent);
}

/* ── Col 3: Social Icons ─────────────────────────────────────────────────── */
.footer-social-icons {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.footer-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-social-icons a:hover {
  color: var(--color-accent);
}

.footer-social-icons a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Bottom Row ──────────────────────────────────────────────────────────── */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-width: 1200px;
  margin: var(--space-12) auto 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.50);
}

.footer-bottom-link {
  color: rgba(255, 255, 255, 0.50);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-bottom-link:hover {
  color: var(--color-accent);
}

.footer-bottom-dot {
  color: rgba(255, 255, 255, 0.15);
}

/* Push copyright + privacy to the right on desktop */
.footer-bottom-spacer {
  display: none;
}

@media (min-width: 768px) {
  .footer-bottom-spacer {
    display: block;
    flex: 1;
  }
}

/* ── Mobile: center-align everything ─────────────────────────────────────── */
@media (max-width: 767px) {
  .site-footer {
    padding-bottom: calc(64px + 0.5rem + env(safe-area-inset-bottom));
  }

  .footer-grid {
    text-align: center;
  }

  .footer-social-icons {
    justify-content: center;
  }

  .footer-links nav {
    align-items: center;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
    margin-bottom: 0;
    position: relative;
    z-index: 1000;
  }

  .footer-bottom-dot {
    display: none;
  }

  .footer-links nav a[href="links.html"] {
    display: none;
  }
}