/****************************ASISA FOUNDATION FOOTER****************************/
/* Section 3.5 (AB#98999). New component: the cream / linen band that sits above the shared ASISA
   entity band (.footer). Uses the existing --offWhite token, which the palette already documents as
   "off-white (web version of linen)". Prefixed .afFooter throughout so nothing here can collide
   with .footer or .copyRight, which belong to the entity band and must stay untouched. */
.afFooter {
  background-color: var(--offWhite);
  color: var(--text);
  padding: 56px 25px 40px 25px;
}

/* Pure's grid arithmetic assumes border-box: a pure-u-* unit is given a PERCENTAGE width, and any
   padding on it has to sit inside that percentage or the row overflows and the last unit wraps.
   Pure normally sets this itself, but the computed value in this band is content-box, because
   main.css scopes its box-sizing reset to ".LandingPageContent *" and masterFoundation.cshtml does
   not wrap @RenderBody() in that class. Measured on dev, 10 September 2026:

     .afFooter__brand    396.66px (1/3) + 42px padding = 438.66  ]  1232.0 in a 1190 row,
     the columns wrapper 793.33px (2/3) + 0            = 793.33  ]  so the columns wrapped BELOW
                                                                    the brand and the logo sat on
                                                                    top instead of on the left.

     .afFooter__column   198.33px (1/4) + 20px padding = 218.33  x4 = 873.3 in a 793.3 row, so the
                                                                    fourth column wrapped as well.

   One declaration fixes both. The same defect the news band answers with .fnd-news__inner. */
.afFooter .pure-g > [class*="pure-u"],
.afFooter [class*="pure-u"] {
  box-sizing: border-box;
}

.afFooter__top {
  gap: 0;
}

.afFooter__brand {
  padding: 0 42px 32px 0;
}

.afFooter__logo {
  display: inline-block;
  margin-bottom: 20px;
}

  .afFooter__logo img {
    display: block;
    height: 48px;
    width: auto;
  }

.afFooter__tagline {
  margin: 0;
  max-width: 34ch;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
}

.afFooter__column {
  padding: 0 20px 28px 0;
}

/* Follow the Foundation, inside the third column rather than beside it. The gap separates it from
   the links above, which otherwise run straight into the heading (measured 10px on dev). */
.afFooter__follow {
  margin-top: 28px;
}

.afFooter__columnTitle {
  margin: 0 0 14px 0;
  color: var(--primary);
  font-size: 1rem;
  font-weight: 700;
}

.afFooter__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

  .afFooter__links li {
    margin-bottom: 10px;
  }

  /* Two declarations here exist only to undo main.css, and both are load bearing.
     main.css:333 styles "p a, h1 a, h2 a, h3 a, .moreinfo a, li a, ..." as a
     single rule, and these links are li a. It sets font-weight 700 and
     border-bottom 2px, which is what was reported off the live page as bold and
     underlined: the line is a BORDER, not a text-decoration, which is why the
     text-decoration: none below never removed it.

     The design crop is unambiguous. design/foundation-social-links/footer-crop.jpg
     shows "All Learning Resources" and "News & Insights" at regular weight with
     no rule under them; the only bold thing in a column is its title.

     .afFooter__links a is 0,1,1 against main.css's 0,0,2, so plain declarations
     win and nothing here needs !important.

     NOT reset, and named so the next reader knows it was a decision rather than
     an oversight: main.css also leaks letter-spacing 0.5px into these links. The
     crop cannot settle letter spacing at its resolution, so it is left as it is
     rather than changed on a guess. */
  .afFooter__links a {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.4;
    border-bottom: 0;
    text-decoration: none;
    transition: 0.3s;
  }

    /* Hover draws the rule that the resting state no longer has. It has to be a
       border rather than a text-decoration: main.css sets
       "text-decoration: none !important" on that same rule, so the underline this
       block used to ask for could never render. It was a no-op, and replacing it
       with something that works is the point. */
    .afFooter__links a:hover {
      color: var(--foundation);
      border-bottom: 2px solid var(--foundation);
    }

/* The Follow column's icons are drawn by the shared FoundationSocialLinks component and styled in
   foundation-social-links.css (AB#98995). The .afFooter__social and .afFooter__socialIcon rules that
   used to sit here went with the markup they styled. */

.afFooter__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(38, 38, 38, 0.12);
}

  .afFooter__legal a {
    color: var(--text);
    font-size: 0.875rem;
    text-decoration: none;
    transition: 0.3s;
  }

    .afFooter__legal a:hover {
      color: var(--foundation);
      text-decoration: underline;
    }

/* Stack the brand block above the columns, and the columns above one another, on small screens.
   The pure-u-* classes on the markup handle the grid; this only tightens the spacing. */
@media screen and (max-width: 64em) {
  .afFooter__brand {
    padding-right: 0;
  }
}

@media screen and (max-width: 48em) {
  .afFooter {
    padding: 40px 25px 32px 25px;
  }

  .afFooter__column {
    padding-right: 0;
  }

  /* Stacked single column at this width, so the block needs less separation from the links than it
     does when it is the tail of a third. */
  .afFooter__follow {
    margin-top: 20px;
  }
}

/* Visible keyboard focus for the band's links.
   main.css sets `:focus { outline: none }` globally and the file carries no focus-visible rules, so
   without this the roughly thirty links this band adds are a NEW keyboard-inaccessible surface
   rather than an inherited one (WCAG 2.4.7 Focus Visible). Scoped to .afFooter so it cannot change
   focus behaviour anywhere else in the estate.
   focus-visible rather than focus, so a mouse click does not draw a ring. */
.afFooter a:focus-visible {
  outline: 2px solid var(--foundation);
  outline-offset: 2px;
}

/* Fallback for engines without :focus-visible. Kept in its own rule because an unsupported selector
   invalidates the whole rule it appears in. */
.afFooter a:focus {
  outline: 2px solid var(--foundation);
  outline-offset: 2px;
}

.afFooter a:focus:not(:focus-visible) {
  outline: none;
}