/*
 * THE SITE FOOTER, ONE STYLESHEET FOR BOTH SITES (owner, 6 October 2026).
 *
 * The SPA imports this file from src/client/src/index.css; the marketing site copies it to
 * /assets/site-footer.css at build time and links it after site.css. A change here reaches
 * both. The markup is NOT shared: the SPA's is src/client/src/components/organisms/Footer.tsx
 * and the marketing site's is src/marketing/src/_includes/layout.njk. Change one, change the
 * other, under the class names this file styles.
 *
 * THREE THINGS EACH SITE SUPPLIES:
 * - `--app-rem`. Every length is `calc(n * var(--app-rem, 1rem))`. The SPA does not set it, so
 *   n is in rem and follows the SPA's responsive root. The marketing site sets it to 14px - the
 *   SPA's root at its widest tier - because its own root is 16px.
 * - `--site-footer-band-image`, the url() of legacy's footer-bg.jpg. Each site serves the image
 *   from its own path, and a url() written here would resolve differently on each.
 * - The colour tokens, under the names both sites already share. `--color-border-light` exists
 *   only in the SPA, so the feedback strip falls back to the grey step it resolves to there.
 *
 * Literal weights rather than `--font-weight-*`: the marketing site has no weight tokens, and
 * 600 and 700 are what the SPA's resolve to.
 */

/* A feedback strip, a navy band on legacy's footer-bg.jpg, then a darker copyright bar (legacy
   _Footer.cshtml, owner, 27 September 2026). Text on the band and the bar is paper or the 100
   step, which clear 4.5:1 on its navy (#0d4262 dominant). */
.site-footer {
  margin-top: calc(2 * var(--app-rem, 1rem));
  font-size: calc(0.875 * var(--app-rem, 1rem));
}

.site-footer-container {
  /* 1600px, as the top bar is (owner, 10 October 2026). */
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 calc(1.5 * var(--app-rem, 1rem));
}

.site-footer-feedback {
  background: var(--color-primary-50);
  border-top: 1px solid var(--color-border-light, var(--color-gray-200));
  padding: calc(0.75 * var(--app-rem, 1rem)) 0;
}

.site-footer-feedback a {
  color: var(--color-primary-700);
  text-decoration: none;
}

.site-footer-feedback a:hover {
  text-decoration: underline;
}

.site-footer-band {
  background: var(--color-primary-800) var(--site-footer-band-image, none) center / cover no-repeat;
  color: var(--color-primary-100);
  padding: calc(2.5 * var(--app-rem, 1rem)) 0;
}

.site-footer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(2 * var(--app-rem, 1rem));
}

.site-footer-about {
  flex: 1 1 calc(22 * var(--app-rem, 1rem));
  max-width: calc(34 * var(--app-rem, 1rem));
}

/* The logo's own 332 by 85. */
.site-footer-logo {
  display: block;
  width: auto;
}

.site-footer-about p,
.site-footer-call p {
  margin: 0 0 var(--app-rem, 1rem);
  line-height: 1.6;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.5 * var(--app-rem, 1rem)) calc(1.25 * var(--app-rem, 1rem));
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer-band a,
.site-footer-bar a {
  color: var(--color-background-primary);
  text-decoration: none;
}

.site-footer-band a:hover,
.site-footer-bar a:hover {
  text-decoration: underline;
}

.site-footer-call {
  flex: 0 1 calc(26 * var(--app-rem, 1rem));
}

/* Legacy set this as an h2. It is a paragraph here: a heading in the footer would enter every
   page's outline under whatever section came last. */
.site-footer-call .site-footer-call-heading {
  color: var(--color-background-primary);
  font-family: var(--font-heading);
  font-size: calc(1.5 * var(--app-rem, 1rem));
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: calc(0.75 * var(--app-rem, 1rem));
}

/* The call to action on a navy ground: outlined in paper, because the brand-blue fill every
   other primary action uses would vanish here. */
.site-footer-band .site-footer-cta {
  display: inline-block;
  padding: calc(0.5 * var(--app-rem, 1rem)) calc(1.25 * var(--app-rem, 1rem));
  border: 1px solid var(--color-background-primary);
  border-radius: calc(0.25 * var(--app-rem, 1rem));
  font-weight: 600;
}

.site-footer-band .site-footer-cta:hover {
  background: var(--color-background-primary);
  color: var(--color-primary-800);
  text-decoration: none;
}

.site-footer-bar {
  background: var(--color-primary-900);
  color: var(--color-primary-100);
  padding: var(--app-rem, 1rem) 0;
  font-size: calc(0.75 * var(--app-rem, 1rem));
}

.site-footer-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(0.75 * var(--app-rem, 1rem)) calc(1.5 * var(--app-rem, 1rem));
}

.site-footer-copyright {
  margin: 0 0 calc(0.25 * var(--app-rem, 1rem));
}

/* A UK limited company identifies itself on its website, so the address is not decorative. It
   runs as one line, comma-separated, rather than legacy's four. */
.site-footer-address {
  display: flex;
  flex-wrap: wrap;
  font-style: normal;
}

/* The comma closes the part before it rather than opening the part after it. It was the other
   way round until 5 October 2026, and on a phone the line broke as "London" / ", NW4 4DJ". A
   flex row wraps between items, so the comma has to belong to the item it follows. */
.site-footer-address span:not(:last-child)::after {
  content: ', ';
  white-space: pre;
}

/* Centred against the two-line copyright and address block beside it. */
.site-footer-legal {
  align-self: center;
}

.site-footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.5 * var(--app-rem, 1rem)) var(--app-rem, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The application's Cookie settings control (owner, 18 October 2026). A <button>, because it
   opens the consent banner rather than going anywhere, dressed as the links beside it. Two
   classes, so it beats the SPA's bare `button` rule, which carries a height, padding and margin. */
.site-footer-bar .site-footer-cookie-settings {
  display: inline;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-background-primary);
  font: inherit;
  cursor: pointer;
}

.site-footer-bar .site-footer-cookie-settings:hover {
  text-decoration: underline;
}