/* The site footer, shared by the homepage and the document pages (privacy, terms,
   not found): brand, navigation, legal and contact columns, then the copyright bar.
   Contact details are filled from Settings when the page is rendered. */

.site-footer {
  display: block;
  background: #0b0b0c;
  color: #f4f3f1;
  padding: 64px 4.2vw 0;
  font-family: var(--body, "Manrope", system-ui, sans-serif);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.25fr;
  gap: 40px;
  padding-bottom: 56px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

.footer-symbol { width: 34px; height: 37px; flex: 0 0 auto; }
.footer-symbol img { width: 100%; height: 100%; display: block; object-fit: contain; }

.footer-logo b {
  font: 600 16px/.94 var(--display, "Space Grotesk", system-ui, sans-serif);
  letter-spacing: .08em;
}

.footer-brand p {
  max-width: 250px;
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.75;
  color: #9d9d9b;
}

.footer-heading {
  margin: 0 0 18px;
  font: 500 10px var(--mono, "DM Mono", ui-monospace, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8c8c8a;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.footer-col a,
.footer-col address {
  font-size: 13px;
  font-style: normal;
  line-height: 1.6;
  color: #f4f3f1;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer-col a:hover,
.footer-col a:focus-visible { color: #ff4a55; }

.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-contact .footer-heading { margin-bottom: 6px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 20px 0 24px;
  border-top: 1px solid #262628;
  font: 10px var(--mono, "DM Mono", ui-monospace, monospace);
  letter-spacing: .06em;
  color: #8c8c8a;
}


/* Tablet: the brand across the top, then the three lists side by side. Four
   columns is too narrow here, one column is needlessly long. */
@media (max-width: 900px) {
  .footer-top { grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: 420px; }
}

/* Phone: Navigate and Legal stay side by side rather than stacking, which is
   what turned this into a screen and a half of scrolling. Contact runs full
   width underneath, because an address wraps badly in half a phone. */
@media (max-width: 560px) {
  .site-footer { padding: 46px 20px 0; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-bottom: 34px; }
  .footer-brand,
  .footer-contact { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; }

  /* Every link its own full-height tap target. 44px is the size a fingertip
     actually hits; 13px text with a little padding is about 31px, which is why
     footer links on phones so often take two goes. */
  .footer-col ul { gap: 0; }
  .footer-col ul a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-contact { gap: 2px; }
  .footer-contact a { display: flex; align-items: center; min-height: 44px; }
  .footer-contact address { margin-bottom: 6px; }

  /* Centred, because two short lines hugging the left edge of a phone read as a
     column that ran out rather than as a deliberate end to the page. */
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.6;
    padding: 18px 0 26px;
  }
}

/* --- The short footer ---------------------------------------------------------
   partials/footer_slim.html, on the pages behind the nav. One row on a desktop,
   stacked on a phone. The full footer keeps the site map; this keeps the point
   of contact. */

.site-footer.slim {
  /* Four of the five pages now end on a dark band, and the footer is darker
     again: without an edge the two run together as one black mass and the page
     looks cut off rather than finished. */
  border-top: 1px solid #2d2d2f;
  display: flex;
  align-items: center;
  gap: 20px 38px;
  flex-wrap: wrap;
  padding: 26px 4.2vw;
}

.site-footer.slim .footer-top,
.site-footer.slim .footer-bottom { display: none; }

.site-footer.slim .footer-logo { margin: 0; flex: 0 0 auto; }

.slim-reach {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font: 10px var(--mono, monospace);
  letter-spacing: .05em;
}

.slim-reach a { color: #d7d7d4; border-bottom: 1px solid #3a3a3c; padding-bottom: 2px; }
.slim-reach a:hover { color: #fff; border-color: var(--red, #e30613); }

/* Pushed right, so the row reads: who, how to reach them, then the small print. */
.slim-links {
  margin-left: auto;
  display: flex;
  gap: 22px;
  font: 9px var(--mono, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.slim-links a { color: #9a9a98; }
.slim-links a:hover { color: #fff; }

.slim-rights {
  font: 8px var(--mono, monospace);
  letter-spacing: .07em;
  color: #76766f;
  flex: 0 0 auto;
}

@media (max-width: 800px) {
  .site-footer.slim { padding: 24px 20px; gap: 16px 24px; }
  .slim-links { margin-left: 0; width: 100%; }
  .slim-rights { width: 100%; }
  /* Finger-sized, like every other link on a phone. */
  .slim-reach a,
  .slim-links a { display: inline-flex; align-items: center; min-height: 44px; }
}