/*
  footer.css
  Dark blue site footer: logo and strapline on the left, four link columns,
  then the copyright line.
  Needs css/base.css.
*/

.fm-footer { padding-block: var(--fm-section) 1.75rem; background: var(--fm-blue-deep); color: #b9cfdd; font-size: var(--fm-t-sm); }
.fm-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Phones: logo on its own row, then the link columns two across */
.fm-footer__grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(2, 1fr); }
.fm-footer__brand { grid-column: 1 / -1; }

/* The logo file is dark blue, so this turns it white for the dark background */
.fm-footer__brand img { height: 2.5rem; width: auto; filter: brightness(0) invert(1); }
.fm-footer__brand p { margin-top: 1rem; max-width: 24rem; line-height: 1.5; }

/* Column titles use the sans font, not the serif the other headings get */
.fm-footer h2 { margin-bottom: 1rem; font-family: var(--fm-sans); font-size: var(--fm-t-sm); font-weight: 700; letter-spacing: 0; color: #fff; }
.fm-footer li + li { margin-top: 0.55rem; }

.fm-footer__legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.15); font-size: var(--fm-t-xs); }

/* Desktop: brand column is wider, link columns sit in one row */
@media (min-width: 62rem) {
  .fm-footer__grid { grid-template-columns: 2fr repeat(4, 1fr); }
  .fm-footer__brand { grid-column: auto; }
}