/* ============================================================
   Jersey Jump — Footer
   ============================================================ */

.site-footer {
  background-color: var(--color-primary);
  color: var(--color-white);
  /* Fluid, no breakpoints — 30px on mobile up to 40px on desktop, same
     top and bottom. */
  padding-block: clamp(1.875rem, 5vw, 2.5rem);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
}

/* ============================================================
   MENUS (left)
   ============================================================ */
.footer-menus {
  display: flex;
  gap: 48px;
}

.footer-menu-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-menu a {
  color: var(--color-white);
  opacity: 0.85;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.2s ease;
}

.footer-menu a:hover,
.footer-menu a:focus-visible {
  opacity: 1;
}

/* ============================================================
   LOGO + COPYRIGHT + COPYRIGHT MENU (center)
   ============================================================ */
.footer-logo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

.footer-logo-img {
  width: clamp(100px, 16vw, 170px);
  height: clamp(100px, 16vw, 170px);
}

.footer-logo-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-white);
}

.footer-copyright-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-copyright {
  font-size: 13px;
  opacity: 0.75;
}

/* Divider between the copyright text and menu once they sit side by
   side (desktop) — same "|" treatment as .copyright-menu's own items.
   A standalone element (not a ::after on .footer-copyright) so it
   isn't also affected by that element's own opacity: 0.75. */
.footer-copyright-divider {
  opacity: 0.5;
}

.copyright-menu {
  display: flex;
  gap: 8px;
}

.copyright-menu li:not(:last-child)::after {
  content: "|";
  margin-left: 8px;
  opacity: 0.5;
}

.copyright-menu a {
  font-size: 13px;
  color: var(--color-white);
  opacity: 0.75;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.copyright-menu a:hover,
.copyright-menu a:focus-visible {
  opacity: 1;
}

/* ============================================================
   BOOK YOUR PARTY / PHONE + SOCIAL (right) — same label + number as the header
   ============================================================ */
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

/* Groups the phone box + social icons so the icon row can center under
   the box's own width, while this group as a whole stays flush right
   (.footer-contact's align-items) within its column. */
.footer-contact-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Same box as .header-phone (header.css), just with rounded corners */
.footer-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  flex-shrink: 0;
  background-color: #013B8D;
  padding: 0.5rem 2.5rem;
  height: var(--header-height);
  border-radius: 16px;
}

.footer-phone-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.footer-phone-number {
  font-family: var(--font-accent);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-yellow);
  text-decoration: none;
}

.footer-contact .social-links {
  margin-top: 20px;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-white-a55);
  color: var(--color-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  background-color: var(--color-cta);
  color: var(--color-white);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer-menus {
    justify-content: center;
    gap: 24px;
    text-align: center;
  }

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

  .footer-copyright-row {
    flex-direction: column;
    gap: 4px;
  }

  .footer-copyright-divider {
    display: none;
  }
}