/* =========================================================================
   FOOTER COMPONENT STYLES
   Styles for partials/footer.html (the <footer id="contact"> markup loaded
   on every page by js/footer.js).

   NOTE: these rules were extracted from css/site-styles.css (from its
   later, "from index.html", footer block — site-styles.css had the footer
   rules duplicated twice from when the pages were merged; this is the copy
   that was actually winning the cascade) so the footer can be reused/loaded
   independently. They still depend on shared design tokens (--blue-deep,
   etc.) defined in css/site-styles.css, so keep that stylesheet linked too:

     <link rel="stylesheet" href="css/site-styles.css">
     <link rel="stylesheet" href="css/footer.css">

   These rules are also still present inside site-styles.css (left there on
   purpose so nothing on the live pages breaks — the duplication is
   harmless). Remove them from site-styles.css later if you want a single
   source of truth once every page uses the shared footer include.
   ========================================================================= */

footer {
  background: #4a2258; /* LOCKED: original footer colour – intentionally NOT a token, so the site-wide blue rebrand can't change it */
  color: rgba(255, 255, 255, 0.85);
}
footer .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-social-icons {
  display: flex;
  gap: 10px;
}
.footer-social-icons a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition:
    background 0.2s,
    transform 0.2s;
}
.footer-social-icons a:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 64px 0 44px;
}
.footer-brand .logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.footer-brand .logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-brand .logo-mark svg {
  width: 18px;
  height: 18px;
}
.footer-brand .logo-text {
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
}
.footer-brand p {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.94rem;
  max-width: 32ch;
}

footer h4 {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 18px;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer ul li {
  margin-bottom: 12px;
}
footer a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.94rem;
  text-decoration: none;
  transition: color 0.2s;
}
footer a:hover {
  color: #fff;
}
footer span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.94rem;
}

.footer-acknowledgement {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 26px 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.65);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 22px 0 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-bottom span {
  color: rgba(255, 255, 255, 0.6);
}
.footer-bottom-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* "Cookie Preferences" — a <button> (it opens the consent panel, so it isn't a
   navigation link) styled to match the footer links beside it. Wired up by
   js/cookie-consent.js via the data-cookie-preferences attribute. */
.footer-link-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}
.footer-link-btn:hover {
  color: #fff;
}
.footer-link-btn:focus-visible {
  outline: 3px solid var(--blue-bright, #3d94d6);
  outline-offset: 3px;
  border-radius: 4px;
}