/* ============================================================
   footer.css — Site Footer + FooterLink

   All spacing, colour, and typography values use CSS custom
   properties defined in styles/tokens.css.
   Mobile responsiveness is handled entirely by token overrides
   in tokens.css (@media max-width: 767px) — no media queries
   needed here.
   ============================================================ */


/* ============================================================
   FooterLink — reusable <a> element
   Text style: Body/Regular → Avance Pro Regular, type-size-body-lg
   Underline present on both states. Only colour changes on hover.
   ============================================================ */

.footer-link {
  font-family: var(--type-family-nav);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-semibold);
  line-height: 1;
  color: var(--color-text-default);
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
}

.footer-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(1);
}

.footer-link:hover::after {
  animation: underline-swipe 0.6s ease forwards;
}

@keyframes underline-swipe {
  0%   { transform: scaleX(1); transform-origin: right; }
  50%  { transform: scaleX(0); transform-origin: right; }
  50.1% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}


/* ============================================================
   Footer — outer container
   Vertical flex stack, all children centred.
   Background: color-surface-page (white).
   Padding T/B: space-component-4xl — 120px desktop, 100px mobile.
   Padding L/R: space-component-2xl — 80px desktop, 44px mobile.
   Gap:         space-component-xl  — 44px desktop, 24px mobile.
   Token overrides in tokens.css handle all mobile values.
   ============================================================ */

.site-footer {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-component-3xl);
  padding-top: var(--space-component-5xl);
  padding-bottom: var(--space-component-5xl);
  padding-left: var(--space-component-2xl);
  padding-right: var(--space-component-2xl);
  background-color: var(--color-surface-page);
  box-sizing: border-box;
}


/* ============================================================
   Tagline
   Text style: Heading/H3 — Avance Pro Regular at type-size-h2.
   Note: the Figma "Heading/H3" text style references the
   type-size-h2 token (40px desktop / 24px mobile), not type-size-h3.
   ============================================================ */

.footer-tagline {
  font-family: var(--type-family-body);
  font-size: var(--type-size-h2);
  font-weight: var(--type-weight-regular);
  line-height: 1;
  color: var(--color-text-default);
  text-align: center;
  margin: 0;
}


/* ============================================================
   Nav row
   Horizontal wrapping flex row. Wraps naturally on tablet/mobile
   — no breakpoint override needed.
   ============================================================ */

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-component-xl);
}


/* ============================================================
   Instagram icon link
   Fixed size 125 × 125px — intrinsic asset dimension, not a
   spacing token.
   ============================================================ */

.footer-instagram-link {
  display: block;
  line-height: 0;
}

.footer-instagram-link img {
  display: block;
  width: 125px;
  height: 125px;
  filter: drop-shadow(var(--shadow-card));
}


/* ============================================================
   Partnership line
   Same text style as tagline: Heading/H3 — NOT bold.
   ============================================================ */

.footer-partnership {
  font-family: var(--type-family-body);
  font-size: var(--type-size-h2);
  font-weight: var(--type-weight-regular);
  line-height: 1;
  color: var(--color-text-default);
  text-align: center;
  margin: 0;
}


/* ============================================================
   Cookie notice
   Text style: Body/Regular → Avance Pro Regular, type-size-body-lg.
   Two <p> lines, zero gap between them.
   ============================================================ */

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

.footer-cookie p {
  font-family: var(--type-family-nav);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-regular);
  line-height: 1;
  color: var(--color-text-default);
  margin: 0;
}