/* ==========================================================================
   Section 11 — footer.

   The last flow block inside #after-deck. Black field, three columns on top
   (support number, link list, social circles), a hairline, then five short
   paragraphs of grey placeholder legal copy.

   Reference geometry @1280 x 720:
     legal type var(--fs-fine) 12px in var(--grey) · legal block max-width 75vw
     social circles ~45px (3.5vw) with a 1px rgba(255,255,255,.3) ring
   ========================================================================== */

.section-footer {
  --footer-gap: 1.9vw;
  --enter-shift: 28px;

  position: relative;
  background: var(--black);
  color: var(--white);
  min-height: 100vh;
  padding:
    clamp(72px, 13vw, 220px)
    max(var(--content-margin), 18px)
    clamp(48px, 7vw, 130px);
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   top row — contact left, links middle, social right
   -------------------------------------------------------------------------- */

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--footer-gap);
  align-items: start;
}

/* --- support number ------------------------------------------------------ */

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.7vw;
}

.footer-phone {
  font-size: clamp(18px, 1.72vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  width: fit-content;
  transition: opacity 300ms var(--ease-out);
}
.footer-phone:hover { opacity: 0.7; }

.footer-hours {
  display: flex;
  flex-direction: column;
}
.footer-hours-line {
  font-size: clamp(13px, 1.09vw, 18px);
  line-height: 1.45;
  color: var(--grey);
}

/* --- link list ----------------------------------------------------------- */

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 1.7vw;
}

.footer-link {
  font-size: clamp(14px, 1.25vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
  width: fit-content;
  transition: opacity 300ms var(--ease-out);
}
.footer-link:hover { opacity: 0.6; }

/* --- social circles ------------------------------------------------------ */

/* The nav is fixed: its Sign up / Log in / menu group stays pinned to the
   top-right corner while the whole footer scrolls up underneath it. Parked hard
   against the right edge, these three circles pass straight behind that group.
   The reference layout ends the social row LEFT of the Sign up pill, so the row
   is inset by the width of the nav group plus a gap.

   Measured (Chrome, footer padding subtracted, 16px gap): the group needs
   228px of clearance at 1024, 254px at 1280, 352px at 1920 — it grows with the
   viewport but its share shrinks, because --fs-nav and the pill min-heights are
   clamped at the small end. max() of the two covers the whole range with room
   to spare; the flat 250px carries the narrow half, the 21vw the wide half. */
.footer-social {
  display: flex;
  gap: 0.7vw;
  justify-self: end;
  margin-right: max(21vw, 250px);
}

.social-circle {
  display: grid;
  place-items: center;
  width: clamp(40px, 3.5vw, 56px);
  height: clamp(40px, 3.5vw, 56px);
  border-radius: 50%;
  border: 1px solid var(--white-30);
  color: var(--white);
  transition:
    background-color 320ms var(--ease-out),
    color 320ms var(--ease-out),
    border-color 320ms var(--ease-out),
    transform 320ms var(--ease-out);
}
.social-circle:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
  transform: translateY(-2px);
}
.social-ico {
  width: 45%;
  height: 45%;
  display: block;
}

/* --------------------------------------------------------------------------
   hairline
   -------------------------------------------------------------------------- */

.footer-rule {
  height: 1px;
  background: var(--white-30);
  margin-top: clamp(64px, 14vw, 230px);
}

/* --------------------------------------------------------------------------
   legal — five short grey paragraphs, fine print scale
   -------------------------------------------------------------------------- */

.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 1.6vw;
  max-width: 75vw;
  margin-top: clamp(28px, 4vw, 72px);
}

.footer-legal-p {
  font-size: var(--fs-fine);
  line-height: 1.6;
  color: var(--grey);
}

/* --------------------------------------------------------------------------
   entrance — columns first, legal copy last
   -------------------------------------------------------------------------- */

.section-footer.entered .footer-contact { transition-delay: 0s; }
.section-footer.entered .footer-nav { transition-delay: 0.07s; }
.section-footer.entered .footer-social { transition-delay: 0.14s; }
.section-footer.entered .footer-legal { transition-delay: 0.22s; }

/* --------------------------------------------------------------------------
   focus
   -------------------------------------------------------------------------- */

.section-footer a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .footer-phone,
  .footer-link,
  .social-circle {
    transition: none;
  }
  .social-circle:hover { transform: none; }
  .section-footer.entered .footer-contact,
  .section-footer.entered .footer-nav,
  .section-footer.entered .footer-social,
  .section-footer.entered .footer-legal {
    transition-delay: 0s;
  }
}

/* --------------------------------------------------------------------------
   narrow viewports — the three columns stack, legal copy goes full width
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* the fixed nav sits over the top of the block, so keep the number clear */
  .section-footer { padding-top: max(96px, 13vw); }
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  /* stacked: the row is on its own line under the links, nowhere near the nav */
  .footer-social { justify-self: start; gap: 10px; margin-right: 0; }
  .footer-links { gap: 14px; }
  .footer-contact { gap: 8px; }
  .footer-rule { margin-top: 56px; }
  .footer-legal {
    max-width: none;
    gap: 16px;
    margin-top: 28px;
  }
}

/* --------------------------------------------------------------------------
   QA-19: touch targets. On handsets the footer links render ~17-20px tall,
   well under the 40px minimum the rest of the site holds. Grow the hit area
   with block padding cancelled by negative margins (the same trick base.css
   uses for .footnote) so nothing moves visually.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .footer-link,
  .footer-phone {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
  }
}