/* ==========================================================================
   Foundation social media icons (AB#98951 / AB#98995)
   --------------------------------------------------------------------------
   Loaded by masterFoundation.cshtml only. Every rule is scoped under
   .brand-foundation (the Foundation body class) and the fnd-social__* classes,
   so nothing here can reach the ASISA, ESD or Academy layouts, and nothing in
   main.css is modified.

   One component, three placements. The markup is identical in all three; only
   the size, the spacing and whether the heading is drawn change, which is why
   the differences below are three short modifier blocks rather than three
   components.

   Sizes and their basis are recorded in design/foundation-social-links/SOURCE.md:

     Secondary bar   22px icon in a 31px box, boxes 10px apart.
                     From the cached Figma spec for node 7553:55337, confirmed
                     against the design crop: a 22px glyph centred in a 31px box
                     with 10px between boxes puts 19px between the glyph edges,
                     and the crop measures 19.

     Footer          22px icon, 22px between icon boxes. ESTIMATE, measured off
                     footer-crop.jpg. The Figma read for the footer node was
                     blocked by the View-seat tool call limit and was not
                     retried.

     Mobile menu     24px icon, 24px apart. ESTIMATE, carried over unchanged
                     from the navigation stylesheet so the mobile menu does not
                     change appearance in this story.

   The icons are black artwork drawn for the Foundation (see SOURCE.md), so
   there is no filter: brightness(0) here. The navigation needed that filter
   because it was reusing the shared white SVGs; this stylesheet replaces those
   rules and the filter goes with them.
   ========================================================================== */

.brand-foundation .fnd-social {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--fnd-social-gap, 10px);
}

.brand-foundation .fnd-social__item {
  display: block;
  margin: 0;
  padding: 0;
}

/* main.css styles every "li a" as a body-copy link: bold, 14px, a 26px line height and a 2px
   bottom border. The icons are anchors inside list items, so all four reach them and draw a rule
   under every icon. The navigation resets the same rule under .fnd-header, which is why this was
   invisible until the component moved into the footer. Reset it on the component itself, so it is
   right wherever the component is placed rather than only where a host stylesheet happens to
   compensate. */
.brand-foundation .fnd-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fnd-social-box, auto);
  height: var(--fnd-social-box, auto);
  border-bottom: 0;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}

/* Height is set and width follows the aspect ratio, because the tiles are not
   all the same shape: the frames draw five square tiles and a wider, shorter
   one for YouTube, and forcing them to one width would distort it.

   Each canvas is cropped to its own tile, so the rendered width IS the glyph
   width: 22px for the five squares, 27px for YouTube. That is what makes the
   gap tokens below mean what they say. They previously shared one 27-wide
   canvas, which padded each square tile with 2.5px of clear space per side
   and quietly added 5px to every gap between two of them (Lonwabo, review of
   7 September 2026). */
.brand-foundation .fnd-social__icon {
  display: block;
  height: var(--fnd-social-size, 22px);
  width: auto;
}

/* The icons are links in a cream band, so the focus ring has to be visible
   without changing anything the frames define. Same treatment as the
   navigation links. */
.brand-foundation .fnd-social__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Secondary bar: right-aligned, ending on the content column edge.
   The margin-left and padding-left move here from .fnd-nav__social, which this
   component replaces.
   -------------------------------------------------------------------------- */
.brand-foundation .fnd-social--secondary-bar {
  --fnd-social-size: 22px;
  --fnd-social-box: 31px;
  --fnd-social-gap: 10px;
  margin-left: auto;
  padding-left: 24px;
}

/* --------------------------------------------------------------------------
   Footer: the "Follow the Foundation" column of the footer band. The column
   heading is the editable afFooterFollowTitle field, rendered by
   FoundationFooter.cshtml, so only the icon row is styled here.
   -------------------------------------------------------------------------- */
.brand-foundation .fnd-social--footer {
  --fnd-social-size: 22px;
  --fnd-social-gap: 22px;
  flex-wrap: wrap;
  row-gap: 16px;
}

/* --------------------------------------------------------------------------
   Mobile menu: under a "Follow the Foundation" or "Follow [Programme]" label,
   at the foot of the menu and of each programme panel.
   -------------------------------------------------------------------------- */
.brand-foundation .fnd-social--mobile-menu {
  --fnd-social-size: 24px;
  --fnd-social-gap: 24px;
  flex-wrap: wrap;
  row-gap: 16px;
}

/* The heading only ever renders inside the mobile menu, so it reads the navigation's own token
   rather than repeating its value. The token is declared on .brand-foundation, the body class, so it
   is always in scope here; the 16px fallback covers a page that somehow loads this stylesheet without
   foundation-navigation.css. Hardcoding 16px matched the token today and would have drifted from it. */
.brand-foundation .fnd-social__heading {
  margin: 0 0 12px;
  font-size: var(--fnd-nav-mobile-font-size, 16px);
  font-weight: 700;
  line-height: 1.5;
}