/* ==========================================================================
   Connect 2026 - site footer                                            T-08
   --------------------------------------------------------------------------
   NO ARTBOARD DRAWS A FOOTER. All 22 pages end at their last content block,
   so there is nothing to measure against. Everything here comes from the
   token scale rather than from the design file, and it is deliberately quiet:
   navy band, muted links, no accent colour competing with the content above.

   Structure: a back-to-cefpro + social column, three link columns, then a
   legal strip. 4 -> 3 -> 1 columns as the viewport narrows.

   NO LOGO, deliberately - see the note in footer.jsp.

   WHEN A DESIGN ARRIVES this should survive it - the grid is intrinsic, so
   changing the column count or the spacing is a one-line change here.

   DEPENDS ON: tokens.css, shell.css
   ========================================================================== */

/*
   NOTE cn-band--flush IN THE MARKUP. Without it shell.css applies
   `.cn-band > .cn-container { padding-block: var(--cn-space-20) }` to BOTH
   containers in here - the link grid and the legal strip - on top of this
   element's own padding. That stacked up to ~430px of chrome before a single
   link, and the footer measured 868px tall.

   So the vertical rhythm is owned here, once.
*/
.cn-footer {
  margin-top: var(--cn-space-12);
  padding-block: var(--cn-space-10);
  color: var(--cn-ink-invert);
}

/*
   Intrinsic, not a fixed 4-up: the brand column needs more room than the
   link columns, and the whole thing has to fold on a phone without a
   breakpoint per step.
*/
.cn-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--cn-space-6) var(--cn-space-15);
  align-items: start;
}

/* ------------------------------------------------------------ brand --- */

.cn-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cn-space-4);
}

.cn-footer__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--cn-space-6);
  border: 1px solid var(--cn-ink-invert);
  border-radius: var(--cn-radius-pill);
  font-size: var(--cn-text-meta);
  font-weight: var(--cn-fw-medium);
  color: var(--cn-ink-invert);
  transition: background var(--cn-dur) var(--cn-ease),
              color var(--cn-dur) var(--cn-ease);
}

.cn-footer__back:hover,
.cn-footer__back:focus-visible {
  background: var(--cn-ink-invert);
  color: var(--cn-navy);
}

.cn-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-3);
}

/*
   44px targets. These are the smallest controls on the page and they sit at
   the very bottom, which is exactly where a thumb lands on a phone.
*/
.cn-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--cn-ink-invert);
  font-size: 18px;
  transition: background var(--cn-dur) var(--cn-ease);
}

.cn-footer__social a:hover,
.cn-footer__social a:focus-visible { background: var(--cn-cyan); }

/* ------------------------------------------------------- link cols --- */

/*
   A link column. No styling of its own beyond being a grid cell - it exists
   so the responsive rules have something to address, and so a <nav> and a
   plain <div> (Contact Us has no links to navigate to) sit identically.
*/
.cn-footer__col { min-width: 0; }

.cn-footer__heading {
  margin: 0 0 var(--cn-space-4);
  font-size: var(--cn-text-section);
  font-weight: var(--cn-fw-medium);
  line-height: var(--cn-lh-tight);
  color: var(--cn-cyan);
}

.cn-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--cn-space-2);
}

/*
   Links are the full white, not a muted tint. A footer link on navy at 60%
   opacity lands around 4:1, and these are the only route to the legal pages,
   so they do not get to be decorative.
*/
.cn-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--cn-text-meta);
  font-weight: var(--cn-fw-medium);
  line-height: var(--cn-lh-body);
  color: var(--cn-ink-invert);
}

.cn-footer__links a:hover,
.cn-footer__links a:focus-visible { color: var(--cn-cyan-alt); }

/* ----------------------------------------------------------- legal --- */

.cn-footer__legal {
  margin-top: var(--cn-space-6);
  padding-top: var(--cn-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.cn-footer__legal p {
  margin: 0;
  font-size: var(--cn-text-meta);
  color: rgba(255, 255, 255, 0.72);
}

/* =========================================================== RESPONSIVE == */

@media (max-width: 1279px) {
  /*
     TWO COLUMNS FROM HERE DOWN, WITH CONTACT ACROSS THE FULL ROW.

     1279, NOT 1023. Measured with the four-column grid still live at 1024:
     the Contact column was 165px against a phone number needing ~190, so
     the number either wrapped or hung into the gutter. The four-up needs
     about 1280 to give every column room, which is also where the nav
     collapses to its hamburger - so the footer now changes shape at the
     same width the header does, rather than one step later.

     This was three equal columns, and it broke the phone numbers. Measured:
     at 768 each column is 186px and "UK: +44 (0)207 600 3543" needs ~190, so
     it wrapped to two lines - "3543" alone on the second. Same at 375, where
     the two-column phone layout gave Contact Us the LEFT HALF ONLY (160px)
     because it was the third item in a two-track grid. Reported by the test
     team from a phone.

     A phone number split across lines is worse than almost any other wrap on
     the page - it reads as two numbers. So:

       About | Get Involved      share the row
       Contact Us                spans it, below

     Contact then has ~600px on a tablet and 288px even at 320, and the same
     shape holds all the way down, so the footer has ONE layout below 1024
     rather than two. The footer is undesigned (no artboard draws one), so
     this is our call to make, and it is the one that keeps the numbers whole.
  */
  .cn-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-footer__brand,
  .cn-footer__col:last-child { grid-column: 1 / -1; }
}

/*
   AND A NUMBER NEVER BREAKS, at any width. The row above guarantees room;
   this guarantees that even a column that somehow lacks it overflows into
   its gap rather than putting half a phone number on the next line.
*/
.cn-footer__links a[href^="tel:"] { white-space: nowrap; }

@media (max-width: 767px) {
  /*
     TWO COLUMNS ON A PHONE, not one.

     The pointer:coarse floor gives every footer link a 44px target, which is
     right - but stacked in a single column that made the footer 962px tall on
     a 375 screen, taller than the viewport. Two columns halves it without
     touching the target size.

     The back-to-cefpro and social row spans both, because it reads as a block
     rather than as a list.
  */
  .cn-footer { padding-block: var(--cn-space-10); }
  /* The two-column shape and Contact's full-row span come from the 1023
     block above; only the tighter gap is phone-specific. */
  .cn-footer__inner { gap: var(--cn-space-8) var(--cn-space-6); }

  /* Tap targets are handled by the pointer:coarse floor in shell.css, which
     catches a tablet at this width too - a max-width rule would not. */
}

/*
   Tap floor for the footer controls, for the same cascade reason as the
   pager - see the note in shell.css. These are the last thing on the page,
   which on a phone is exactly where a thumb rests, and the links otherwise
   sit at the 24px reading rhythm.
*/
@media (pointer: coarse) {
  .cn-footer__links a,
  .cn-footer__back { min-height: 44px; }

  .cn-footer__social a {
    width: 44px;
    height: 44px;
  }
}