/* site-footer.css — the one place the site footer is styled.
   Loaded last on every page so it wins over the legacy per-section footer
   rules still sitting in styles.css / trekking.css / articles.css /
   enquire.css / karakoram.css / adventure-landing.css.
   Markup comes from js/site-footer.js (and the identical static fallback). */

.site-footer {
  display: grid;
  grid-template-columns: 1.15fr .9fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
  padding: 5rem clamp(1.25rem, 6vw, 7rem) 4.2rem;
  background: #09182c;
  color: #fff;
}

/* Activity hubs tint their own footer green via .activity-page; keep the
   whole site on one footer surface. */
.activity-page .site-footer { background: #09182c; }

.site-footer a { text-decoration: none; }

/* Same lockup as the header, in its reversed cut: identical traced shapes, with
   the wordmark in cream so it survives the navy surface. Sized to the header's
   logo so the two read as one mark. */
.site-footer .brand img { height: 72px; width: auto; filter: none; }

.footer-brand-block p {
  max-width: 28ch;
  margin: 1.3rem 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: 1rem;
  line-height: 1.55;
}

.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

.footer-links div { display: flex; flex-direction: column; gap: .6rem; }

.footer-links strong {
  margin-bottom: .45rem;
  color: #a8c7d9;
  font-family: var(--serif, "Brygada 1918", Georgia, serif);
  font-size: 1.3rem;
  font-weight: 500;
}

.footer-links a { color: rgba(255, 255, 255, .84); font-size: .9rem; font-weight: 600; }

.footer-links a:hover,
.footer-top:hover { text-decoration: underline; text-underline-offset: .3em; }

.footer-action { align-self: center; }

.footer-action p {
  max-width: 17ch;
  margin: 0 0 1.2rem;
  font-family: var(--serif, "Brygada 1918", Georgia, serif);
  font-size: clamp(1.65rem, 2.2vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.04em;
}

/* Two classes so this beats the blanket `.site-footer a { color: inherit }`
   that used to leave white text on a white button. */
.site-footer .footer-cta {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: .9rem 1.2rem;
  background: #fff;
  color: #0b1f3a;
  font-family: var(--sans, "Onest", Arial, sans-serif);
  font-size: .9rem;
  font-weight: 700;
}

.site-footer .footer-cta:hover { background: #e7ecf1; }

.site-footer .footer-top {
  grid-column: 1 / -1;
  margin-top: 2rem;
  color: rgba(255, 255, 255, .65);
  font-size: .82rem;
  font-weight: 700;
}

@media (max-width: 800px) {
  .site-footer { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .footer-action { grid-column: 1 / -1; }
  .site-footer .footer-top { margin-top: 0; }
}

@media (max-width: 600px) {
  .site-footer { grid-template-columns: 1fr; gap: 2.8rem; padding: 4rem 5vw 3rem; }
  .footer-links { gap: 1.5rem; }
  .footer-action { grid-column: auto; }
  .site-footer .brand img { height: 56px; }
}
