/* Copyright 2025-2026 Renofy Ltd. All rights reserved. */
/* === Footer === */
/* Mobile-first styles */
.footer {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
  padding: 1rem;
  gap: 0.75rem;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
}

/* === Footer Left (Location/Contact/Social) === */
.footer__left {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
}

.footer__left-location,
.footer__left-contact,
.footer__left-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* === Footer Right (Nav Links + Legal Line) === */
.footer__right {
  text-align: center;
}

/* === Footer Legal (Statutory Company Disclosures) ===
   Companies Act 2006 + Trading Disclosures Regs 2015 require the company
   name, number, and place of registration on the website. Sits directly
   under the nav links so the short legal line lives in the same column
   without creating a separate band on desktop. */
.footer__legal {
  margin: 0.5rem 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.footer__link-separator {
  margin: 0 0.5rem;
}

/* Group a separator with its sibling link so they wrap as one unit — used by
   "Cookie preferences" to avoid leaving an orphan pipe on the previous row. */
.footer__link-group {
  white-space: nowrap;
}

.footer__link {
  font-size: var(--font-size-sm);
}

/* Button-styled footer link (e.g. Cookie preferences trigger) — strip the
   browser's <button> chrome so it sits inline with adjacent <a> links.
   Colour and text-decoration are left to .link--pink so the button matches
   the sibling anchor links. */
.footer__link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

/* === Social Links === */
.footer__social-links {
  display: flex;
  gap: 0.75rem;
}

.footer__social-link {
  margin-top: 2px; /* Optical alignment with adjacent text */
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}

.footer__social-link:hover {
  color: var(--color-pink);
}

/* === Desktop Styles === */
@media (min-width: 640px) {
  .footer {
    grid-template-columns: auto auto;
    justify-content: space-between;
    text-align: left;
    padding: 1rem 2rem;
    gap: 3rem;
  }

  .footer__left {
    justify-content: flex-start;
    gap: 2.5rem;
  }

  .footer__left-location,
  .footer__left-contact,
  .footer__left-social {
    align-items: flex-start;
    text-align: left;
  }

  .footer__right {
    text-align: right;
  }
}

/* Body bg switches from --color-white to --color-bg-light at 821px;
   match the footer so they read as a single surface. */
@media (min-width: 821px) {
  .footer {
    background-color: var(--color-bg-light);
  }
}