/* ==========================================================================
   Foundation navigation (AB#98949 / AB#98991)
   --------------------------------------------------------------------------
   Loaded by masterFoundation.cshtml only. Every rule is scoped under
   .brand-foundation (the Foundation body class) and the fnd-nav__* classes, so
   nothing here can reach the ASISA, ESD or Academy layouts. The shared rules
   in main.css (.asisaNav, .topnav, .subMenu, .breadcrumbs) are NOT modified.

   Desktop values come from the Figma header frame (file fL3pEfqVg3JdWDyYf1qWPG,
   node 7553:55011, cached in design/foundation-navigation/spec.json): a 1920
   wide frame, 31px utility bar, 70px primary bar, 1320px content column,
   Arial 14/1.5, Grey/100 text. Values still marked "frame estimate" (the
   secondary bar and the mobile menu) have no Figma frame yet and were read
   off the JPEG frames HeyGuys delivered on 5 August 2026.

   Layout: the header is sticky (position: sticky; top: 0), matching the
   current site's fixed nav (decision 2 Sep 2026), but it stays in document
   flow, so its variable height (the secondary bar only appears inside a
   section) needs no page offsets. The offsets main.css adds for the old
   fixed header are reset below. Stacking: z-index 5 like the old .asisaNav,
   below the search modal (.modal, z-index 6) so the modal still covers the
   header and the mobile menu. foundationNavigation.js keeps
   scroll-padding-top equal to the header height for in-page anchors and
   narrows the item padding when the CMS labels are too long for the column.
   ========================================================================== */

.brand-foundation {
  /* Content column: Figma places the header content at x 300..1620 of 1920. */
  --fnd-nav-column: 1320px;

  /* Utility (supplementary) bar */
  --fnd-nav-utility-bg: var(--foundation, #A137B7);       /* ASISA Foundation Signature Colour/100 */
  --fnd-nav-utility-text: #FFFFFF;                         /* ASISA Foundation Secondary Colours/White */
  --fnd-nav-utility-height: 31px;
  --fnd-nav-utility-gap: 16px;                             /* label | divider | label */

  /* Primary bar */
  --fnd-nav-primary-bg: #F8F5EA;                           /* ASISA Foundation Secondary Colours/Cream Linen/100 */
  --fnd-nav-primary-hover-bg: #F2EEDA;                     /* hover and active item block, node 7489:246575 */
  --fnd-nav-primary-height: 70px;
  --fnd-nav-logo-max-width: 138px;                         /* the frame's logo box; a CAP, not a fixed width, see .fnd-nav__logo img */
  --fnd-nav-logo-height: 40px;
  --fnd-nav-logo-to-menu: 145px;                           /* logo right edge to first item box (label lands at x 308 of the column) */
  --fnd-nav-item-pad: 25px;                                /* half the 50px label gap; the hover block spans label + 2 x pad */
  --fnd-nav-icon-size: 24px;

  /* Secondary bar (Figma node 7553:55337, cached in design/foundation-navigation-about-us) */
  --fnd-nav-secondary-bg: #F2EEDA;                         /* INFERENCE: fill not returned before the Figma call limit; same as the active block */
  --fnd-nav-secondary-height: 43px;
  --fnd-nav-secondary-offset: 311px;                       /* first label starts 311px into the column (Figma x 611) */
  --fnd-nav-secondary-pad: 25px;                           /* half the 50px label gap */

  /* Dropdown panel (Why Fund Us open state, screenshot from Michiel Visser, 2 Sep 2026: white panel
     flush under the bar, 34px rows in 13px type, thin rules, text 6px right of the item label) */
  --fnd-nav-dropdown-bg: #FFFFFF;                          /* ASISA Foundation Secondary Colours/White */
  --fnd-nav-dropdown-shadow: 0 4px 12px rgba(38, 38, 38, 0.15); /* ESTIMATE: node 7553:55161 has a drop shadow; its values could not be read (Figma seat call limit, 2 Sep 2026) */
  --fnd-nav-dropdown-rule: #DED8C4;                        /* read off the screenshot */
  --fnd-nav-dropdown-row: 34px;
  --fnd-nav-dropdown-font-size: 13px;
  --fnd-nav-dropdown-pad: 13px;
  --fnd-nav-dropdown-offset: 7px;                          /* panel edge sits 7px left of the item label */

  /* Shared */
  --fnd-nav-text: #262626;                                 /* Grey/100 */
  --fnd-nav-shadow: rgba(0, 0, 0, 0.14);
  --fnd-nav-focus: var(--foundation, #A137B7);
  --fnd-nav-font: Arial, Helvetica, sans-serif;            /* Body/Small/Regular */
  --fnd-nav-font-size: 14px;
  --fnd-nav-line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Header shell and page offset reset
   -------------------------------------------------------------------------- */
.brand-foundation .fnd-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 5;                                              /* below .modal (6), like the old .asisaNav */
  font-family: var(--fnd-nav-font);
  font-size: var(--fnd-nav-font-size);
  line-height: var(--fnd-nav-line-height);
  color: var(--fnd-nav-text);
}

/* The frames show no shadow on the bars or the utility nav. Stated once for every element inside the
   header so nothing in the shared stylesheets, or a browser default, can add one (Michiel Visser
   reported a shadow on the utility nav, 2 Sep 2026). The dropdown panel re-adds its own below. */
.brand-foundation .fnd-header,
.brand-foundation .fnd-header * {
  box-shadow: none;
  text-shadow: none;
}

/* The site's .container is 1190px wide; the Figma header column is 1320px. The header keeps
   its own column so the rest of the page is untouched. Content-box, like the site container. */
.brand-foundation .fnd-header .container {
  box-sizing: content-box;
  width: auto;
  max-width: var(--fnd-nav-column);
  margin: 0 auto;
  padding: 0 20px;
}

/* main.css styles every "li a" as bold with a 2px bottom border (body-copy links) and sets the
   site font and line height on anchors. The nav sits in lists too, so all of that is reset here
   and the header's Arial 14/1.5 flows through. */
.brand-foundation .fnd-header a {
  text-decoration: none;
  color: inherit;
  font-weight: 400;
  border-bottom: 0;
}

/* main.css sets the site font, 16px and a 26px line height on "ul, ol" and 14px/26px on "li a", so
   the header type is set explicitly on every text element rather than inherited. */
.brand-foundation .fnd-header ul,
.brand-foundation .fnd-header li,
.brand-foundation .fnd-header a,
.brand-foundation .fnd-header button,
.brand-foundation .fnd-header p {
  font-family: var(--fnd-nav-font);
  font-size: var(--fnd-nav-font-size);
  line-height: var(--fnd-nav-line-height);
  letter-spacing: 0;                                       /* Body/Small/Regular; main.css tracks anchors by 0.5px */
}

.brand-foundation .fnd-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Programme pages decorate "ul li" with coloured markers via ::before; keep them out of the nav. */
.brand-foundation .fnd-header li {
  margin: 0;
  padding: 0;
  background: none;
}

.brand-foundation .fnd-header li::before {
  content: none;
}

.brand-foundation .fnd-header button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.brand-foundation .fnd-header a:focus-visible,
.brand-foundation .fnd-header button:focus-visible {
  outline: 2px solid var(--fnd-nav-focus);
  outline-offset: 2px;
}

/* main.css pushes page content down to clear the old fixed header (179px, 170px and 90px
   at the breakpoints). The Foundation header is sticky but in flow, so those offsets
   become plain spacing. */
.brand-foundation .breadcrumbs,
.brand-foundation .foundationProgrammesPage .breadcrumbs,
.brand-foundation .breadcrumbs.foundationFAQPageBreadcrumbs {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Breadcrumb global element (AB#98997 visitor, AB#98998 content editor).
   --------------------------------------------------------------------------
   Restyles the shared main.css breadcrumb to the Foundation design: the ASISA
   wordmark first, then title-case crumbs joined by a chevron (not the uppercase
   text and vertical bar main.css draws for the other brands). Foundation-scoped,
   so main.css and the ASISA/ESD/Academy layouts are untouched. Rendered by
   ~/Views/Shared/Components/FoundationBreadcrumb/Default.cshtml.

   The markup is nav > ol > li > a, so the layout rules sit on the list and the
   separator sits on the list item. main.css styles .breadcrumbs as the flex
   container; here .breadcrumbs is the nav and the ol is the flex row inside it.

   Every value below is measured off design/foundation-breadcrumb/reference.jpg,
   the crop attached to feature AB#98952, and then divided by 0.75. The crop is
   1440px wide but the Figma frame is 1920px (design/foundation-navigation/
   spec.json), so it is a three-quarter downscale and every figure read straight
   off it is three-quarters of the real value. That file records each measurement
   and the conversion. Nothing here is an estimate any more.

   There is deliberately no .breadcrumb-header rule: the Foundation breadcrumb is
   the trail only. The crop shows no header text and the component no longer
   renders one (AB#98998).
   -------------------------------------------------------------------------- */
.brand-foundation {
  --fnd-breadcrumb-text: #262626;              /* Grey/100, the same token as the nav */
  --fnd-breadcrumb-gap: 18px;                  /* crop reads 14px and 13px; the crop is 0.75 scale, so 18px */
  --fnd-breadcrumb-logo-height: 18px;          /* wordmark 55px x 14px on the crop, so 73px x 18px at frame scale */
  --fnd-breadcrumb-chevron: 6px;               /* 6px plus the 3px border, so 12.7px tall once rotated */
  --fnd-breadcrumb-chevron-stroke: 3px;        /* the crop's chevron is heavy: 4 of its 7 columns are stroke */
  --fnd-breadcrumb-chevron-squash: 0.7;        /* the crop's chevron is 7px x 10px, narrower than a square's 90 degrees */
}

.brand-foundation .breadcrumbs {
  font-family: var(--fnd-nav-font);
}

.brand-foundation .breadcrumbs .breadcrumb-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fnd-breadcrumb-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-foundation .breadcrumbs .breadcrumb-trail li {
  display: flex;
  align-items: center;
}

/* Chevron between crumbs. On the list item rather than the link, so a screen
   reader does not read it as part of a crumb's name, and drawn from two borders
   rather than set as a glyph: the crop's separator is a heavy angular chevron
   with a 2px stroke, which no guillemet or greater-than sign matches at any
   weight, and a drawn one carries no font dependency. The li is a flex
   container, so the pseudo-element is blockified and its width and height apply
   without an explicit display.

   Two borders rotated 45 degrees give a chevron as wide as it is tall. The
   crop's is 7px x 10px, so the result is squashed horizontally. The scale is
   written before the rotation because CSS applies the outermost function last:
   this rotates first, then squashes the result in the row's own axes, which
   narrows the angle rather than skewing the two arms against each other. */
.brand-foundation .breadcrumbs .breadcrumb-trail li + li::before {
  content: "";
  width: var(--fnd-breadcrumb-chevron);
  height: var(--fnd-breadcrumb-chevron);
  margin-right: var(--fnd-breadcrumb-gap);
  border-top: var(--fnd-breadcrumb-chevron-stroke) solid var(--fnd-breadcrumb-text);
  border-right: var(--fnd-breadcrumb-chevron-stroke) solid var(--fnd-breadcrumb-text);
  transform: scaleX(var(--fnd-breadcrumb-chevron-squash)) rotate(45deg);
}

.brand-foundation .breadcrumbs a {
  border-left: none;                           /* reset the main.css bar separator */
  margin-left: 0;
  padding: 0;
  text-transform: none;                        /* the design is title case */
  align-items: center;
  color: var(--fnd-breadcrumb-text);
  font-size: var(--fnd-nav-font-size);
  line-height: var(--fnd-nav-line-height);
  text-decoration: none;
  font-weight: 400;
}

/* The current page is NOT given a visual distinction, and that is the design
   rather than an omission. On the crop, "Foundation" and the current crumb
   "WageWise" share a weight, a colour and a size; measuring their stems confirms
   it rather than leaving it to the eye. AC 3.4.1 asks for the current page to be
   visually distinct, and the design overrides it under the project rule that the
   designs are the source of truth, so 3.4.1 is Janelle Bolton-Stuart's to amend.
   aria-current="page" stays on the current crumb either way: it is what makes
   the current page distinct to a screen reader, and it is the part of 3.4.1 the
   build still satisfies. */

.brand-foundation .breadcrumbs img {
  height: var(--fnd-breadcrumb-logo-height);
}

/* --------------------------------------------------------------------------
   1. Supplementary (utility) bar: 31px, links right-aligned to the column,
      1px x 12px white divider between them (node 7489:246609).
   -------------------------------------------------------------------------- */
.brand-foundation .fnd-nav__utility {
  background: var(--fnd-nav-utility-bg);
  color: var(--fnd-nav-utility-text);
}

.brand-foundation .fnd-nav__utility-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: var(--fnd-nav-utility-height);
}

.brand-foundation .fnd-nav__utility-list {
  display: flex;
  align-items: center;
  gap: var(--fnd-nav-utility-gap);
}

.brand-foundation .fnd-header .fnd-nav__utility-item {
  display: flex;
  align-items: center;
  gap: var(--fnd-nav-utility-gap);
}

/* Written with .fnd-header so it outranks the generic li::before reset above. */
.brand-foundation .fnd-header .fnd-nav__utility-item + .fnd-nav__utility-item::before {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  background: var(--fnd-nav-utility-text);
}

/* Written with .fnd-header so the white wins over the "a { color: inherit }" reset above, which
   would otherwise pick up the Grey/100 that main.css puts on lists. */
.brand-foundation .fnd-header .fnd-nav__utility-link {
  display: inline-block;
  color: var(--fnd-nav-utility-text);
  white-space: nowrap;                                     /* labels render as typed: "All Learning Resources" */
}

/* No hover state in the Figma frame; the underline is the keyboard/mouse affordance. */
.brand-foundation .fnd-header .fnd-nav__utility-link:hover,
.brand-foundation .fnd-header .fnd-nav__utility-link[aria-current] {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   2. Primary bar: 70px, logo 138x40 at the column start, labels 50px apart
      starting 308px into the column, search icon 24px at the column end.
   -------------------------------------------------------------------------- */
.brand-foundation .fnd-nav__primary {
  background: var(--fnd-nav-primary-bg);
}

.brand-foundation .fnd-nav__primary-inner {
  display: flex;
  align-items: stretch;
  height: var(--fnd-nav-primary-height);
}

.brand-foundation .fnd-nav__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* The artwork is an editor's upload from AB#100718, not the shipped export, so this box cannot be
   fixed in both dimensions. It was `width: 138px; height: 40px` with object-fit defaulting to
   `fill`, which was harmless only while the one image it ever drew was 138 by 40 exactly. Anything
   an editor uploads at another ratio was stretched into that box.

   Height is the constant, because the bar is 70px and the logo has to sit in it. Width follows the
   artwork up to the frame's 138px, and `contain` keeps the ratio if a wider lock-up hits the cap.
   The mobile rules below already do this, and .fnd-nav__back-logo works the same problem out at
   length for the programme lock-ups. */
.brand-foundation .fnd-nav__logo img {
  display: block;
  height: var(--fnd-nav-logo-height);
  width: auto;
  max-width: var(--fnd-nav-logo-max-width);
  object-fit: contain;
  object-position: left center;
}

.brand-foundation .fnd-nav__logo-text {
  font-weight: 700;
}

.brand-foundation .fnd-nav__primary-nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--fnd-nav-logo-to-menu);
}

.brand-foundation .fnd-nav__primary-list {
  display: flex;
  align-items: stretch;
}

/* Written with .fnd-header in the selector so it outranks the generic "li" reset above. */
.brand-foundation .fnd-header .fnd-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 var(--fnd-nav-item-pad);
}

.brand-foundation .fnd-nav__link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-transform: uppercase;                               /* case rule: primary is CAPS */
  letter-spacing: 0;                                       /* Body/Small/Regular: no tracking */
  white-space: nowrap;                                     /* Q#25: nav items never wrap */
}

/* Hover, open and active all use the darker cream block (node 7489:246575). */
.brand-foundation .fnd-nav__item:hover,
.brand-foundation .fnd-nav__item.is-open,
.brand-foundation .fnd-nav__item.is-active {
  background: var(--fnd-nav-primary-hover-bg);
}

/* The active section's label is Body/Small/Bold (Arial 700, 0.3px tracking): in node 7553:55337
   "ABOUT US" measures 74px, the bold width, while the other labels measure their regular widths. */
.brand-foundation .fnd-nav__item.is-active > .fnd-nav__link {
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Caret (Brand Shapes building block rotated 135deg): a 10px wide, 5px tall triangle drawn
   with borders so it inherits the text colour, 8px after the label and centred on the label's
   centre line (Michiel Visser, 2 Sep 2026). */
/* Written with .fnd-header so the 8px gap outranks the generic "button { padding: 0 }" reset above. */
.brand-foundation .fnd-header .fnd-nav__caret {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 0 0 8px;
}

.brand-foundation .fnd-nav__caret-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}

.brand-foundation .has-dropdown.is-open .fnd-nav__caret-icon,
.brand-foundation .fnd-nav__caret[aria-expanded="true"] .fnd-nav__caret-icon,
.brand-foundation .fnd-nav__accordion-toggle[aria-expanded="true"] .fnd-nav__caret-icon {
  transform: rotate(180deg);
}

/* Dropdown panel (primary and tertiary share it): flush under its bar, its left edge just left of
   the item label, as wide as its longest entry. The primary items use the primary padding and the
   secondary items the secondary padding, so each sets --fnd-nav-dropdown-left below. */
.brand-foundation .fnd-nav__dropdown {
  position: absolute;
  top: 100%;
  left: var(--fnd-nav-dropdown-left, 0);
  min-width: calc(100% - var(--fnd-nav-dropdown-left, 0px));
  padding: 0;
  background: var(--fnd-nav-dropdown-bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  z-index: 30;
}

/* The one shadow in the header (Figma node 7553:55161). Written with .fnd-header so it outranks the
   header-wide "box-shadow: none" above. */
.brand-foundation .fnd-header .fnd-nav__dropdown {
  box-shadow: var(--fnd-nav-dropdown-shadow);
}

.brand-foundation .fnd-header .fnd-nav__item {
  --fnd-nav-dropdown-left: calc(var(--fnd-nav-item-pad) - var(--fnd-nav-dropdown-offset));
}

.brand-foundation .fnd-header .fnd-nav__secondary-item {
  --fnd-nav-dropdown-left: calc(var(--fnd-nav-secondary-pad) - var(--fnd-nav-dropdown-offset));
}

.brand-foundation .has-dropdown.is-open > .fnd-nav__dropdown,
.brand-foundation .has-dropdown:focus-within > .fnd-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

@media (hover: hover) {
  .brand-foundation .has-dropdown:hover > .fnd-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .brand-foundation .has-dropdown:hover .fnd-nav__caret-icon {
    transform: rotate(180deg);
  }
}

.brand-foundation .fnd-nav__dropdown-item + .fnd-nav__dropdown-item {
  border-top: 1px solid var(--fnd-nav-dropdown-rule);
}

/* 34px rows: 13px type on a 34px line, 13px side padding; entries never wrap. */
.brand-foundation .fnd-header .fnd-nav__dropdown-link {
  display: block;
  padding: 0 var(--fnd-nav-dropdown-pad);
  font-size: var(--fnd-nav-dropdown-font-size);
  line-height: var(--fnd-nav-dropdown-row);
  white-space: nowrap;
}

.brand-foundation .fnd-nav__dropdown-link:hover,
.brand-foundation .fnd-nav__dropdown-link[aria-current] {
  text-decoration: underline;
}

/* Tools: search (and the hamburger below the breakpoint). The 40px button keeps a usable hit
   area; its negative margin lets the 24px icon end exactly on the column edge (x 1620). */
.brand-foundation .fnd-nav__tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 24px;
}

.brand-foundation .fnd-nav__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.brand-foundation .fnd-nav__search {
  margin-right: -8px;
}

.brand-foundation .fnd-nav__icon-button img {
  display: block;
  width: var(--fnd-nav-icon-size);
  height: var(--fnd-nav-icon-size);
}

.brand-foundation .fnd-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.brand-foundation .fnd-nav__burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   3. Secondary bar: 43px directly under the primary bar, labels 50px apart
      starting 311px into the column, the current page in Body/Small/Bold,
      two 31px social icons 10px apart ending on the column edge (drawn by
      the shared FoundationSocialLinks component, styled in
      foundation-social-links.css).
   -------------------------------------------------------------------------- */
.brand-foundation .fnd-nav__secondary {
  background: var(--fnd-nav-secondary-bg);
}

.brand-foundation .fnd-nav__secondary-inner {
  display: flex;
  align-items: stretch;
  height: var(--fnd-nav-secondary-height);
}

.brand-foundation .fnd-nav__secondary-nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: calc(var(--fnd-nav-secondary-offset) - var(--fnd-nav-secondary-pad));
}

.brand-foundation .fnd-nav__secondary-list {
  display: flex;
  align-items: stretch;
}

/* .fnd-header in the selector so it outranks the generic "li" reset above. */
.brand-foundation .fnd-header .fnd-nav__secondary-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 var(--fnd-nav-secondary-pad);
}

.brand-foundation .fnd-nav__secondary-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;                                     /* labels render as typed: camel case is content */
}

/* No hover state in the Figma frame; the underline is the keyboard/mouse affordance. */
.brand-foundation .fnd-nav__secondary-item:hover > .fnd-nav__secondary-link,
.brand-foundation .fnd-nav__secondary-item.is-open > .fnd-nav__secondary-link {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* The section page being viewed is Body/Small/Bold (Arial 700, 0.3px tracking); every other section
   label stays regular. "Current" means that exact page, not its descendants (Michiel Visser, 2 Sep
   2026: bold only on that specific tab). */
.brand-foundation .fnd-nav__secondary-item.is-current > .fnd-nav__secondary-link {
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* --------------------------------------------------------------------------
   4. Mobile menu (full screen). Values read off the 360px Figma frames
      5474:386581 and 5474:387839 (screenshot cached in
      design/foundation-navigation-mobile, 2 Sep 2026, so sizes are estimates):
      cream 56px header, white body, 16px left padding, labels 16px bold as
      typed in 48px rows with no rules between them, a thin rule before the
      utility links and before Follow, expanded children indented 24px,
      thin chevrons.
   -------------------------------------------------------------------------- */
.brand-foundation {
  --fnd-nav-mobile-bg: #FFFFFF;                            /* ASISA Foundation Secondary Colours/White */
  --fnd-nav-mobile-header-height: 56px;
  --fnd-nav-mobile-logo-height: 36px;                      /* measured from the Nav mobile frame (AB#98993), replaces a 28px screenshot estimate */
  --fnd-nav-mobile-pad: 16px;
  --fnd-nav-mobile-row: 48px;
  --fnd-nav-mobile-font-size: 16px;
  --fnd-nav-mobile-indent: 24px;
  --fnd-nav-mobile-rule: var(--fnd-nav-dropdown-rule);
}

.brand-foundation .fnd-nav__mobile {
  position: fixed;
  inset: 0;
  z-index: 5;                                              /* below .modal (6): search opened from the menu shows on top */
  display: flex;
  flex-direction: column;
  background: var(--fnd-nav-mobile-bg);
  color: var(--fnd-nav-text);
  overflow-y: auto;
}

.brand-foundation .fnd-nav__mobile[hidden] {
  display: none;
}

.brand-foundation.fnd-nav-open {
  overflow: hidden;                                        /* stop the page scrolling under the menu */
}

.brand-foundation .fnd-nav__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--fnd-nav-mobile-header-height);
  padding: 0 var(--fnd-nav-mobile-pad);
  background: var(--fnd-nav-primary-bg);
}

.brand-foundation .fnd-nav__mobile-header .fnd-nav__logo img {
  width: auto;
  height: var(--fnd-nav-mobile-logo-height);
}

.brand-foundation .fnd-nav__mobile-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: -8px;                                      /* 40px buttons; the 24px icons end on the padding edge */
}

.brand-foundation .fnd-nav__close-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}

.brand-foundation .fnd-nav__close-icon::before,
.brand-foundation .fnd-nav__close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.brand-foundation .fnd-nav__close-icon::before {
  transform: rotate(45deg);
}

.brand-foundation .fnd-nav__close-icon::after {
  transform: rotate(-45deg);
}

.brand-foundation .fnd-nav__panels {
  flex: 1 1 auto;
  padding: 12px var(--fnd-nav-mobile-pad) 32px;
}

.brand-foundation .fnd-nav__panel[hidden] {
  display: none;
}

/* Written with .fnd-header so the indent outranks the header-wide "ul { padding: 0 }" reset. */
.brand-foundation .fnd-header .fnd-nav__mobile-list--nested {
  padding-left: var(--fnd-nav-mobile-indent);
}

/* Written with .fnd-header so the row type outranks the header-wide 14px rule. */
.brand-foundation .fnd-header .fnd-nav__mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;                                  /* min-height includes the padding */
  width: 100%;
  min-height: var(--fnd-nav-mobile-row);
  padding: 12px 0;
  font-size: var(--fnd-nav-mobile-font-size);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

.brand-foundation .fnd-nav__mobile-rule {
  height: 1px;
  margin: 12px 0;
  background: var(--fnd-nav-mobile-rule);
}

/* Thin chevron: points down when closed, up when its list is open. */
.brand-foundation .fnd-nav__chevron {
  display: inline-block;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 0 4px 4px 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.brand-foundation [aria-expanded="true"] > .fnd-nav__chevron {
  transform: rotate(-135deg);
  margin: 4px 4px 0 0;
}

/* Section view header: back chevron and the section name, mixed case.

   Block-level and full width, not inline-flex. A button sizes to its content
   even when its display is block, so the percentage cap on .fnd-nav__back-logo
   would otherwise measure the width the logo itself had just set: the logo grew,
   the button grew with it, and 78% of that came out below the 52px height cap,
   drawing every logo about 11% short (Lonwabo Mnyaiza, review of PR 53834).
   Filling the row gives the percentage the panel to measure. The row is a
   larger tap target for the back control as a result, which suits a phone. */
.brand-foundation .fnd-header .fnd-nav__back {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 8px 0 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}

.brand-foundation .fnd-nav__back-chevron {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.brand-foundation .fnd-nav__follow {
  padding: 4px 0 8px;
}

/* .fnd-nav__follow-label and the .fnd-nav__mobile .fnd-nav__social* rules went the same way as
   .fnd-nav__programme-logo below, and for the same reason: the markup they styled is gone. The
   mobile menu's social icons and their heading are drawn by the shared FoundationSocialLinks
   component now, and styled in foundation-social-links.css (AB#98995). */

/* .fnd-nav__programme-logo was removed with the only markup that used it, the logo above
   "Follow [Programme]" in a programme's mobile panel. The desktop wordmark is
   .fnd-nav__logo img, which is a different rule, so nothing else referred to it. If the
   follow-block logo comes back, revert the commit that removed it and this rule returns
   with its markup. */

/* --------------------------------------------------------------------------
   Menu logo (Figma node 5474:412584): a programme's logo in place of its name
   in the heading of its own mobile panel. The first-level list keeps typed
   labels (Michiel Visser, 7 Sep 2026), so this is the menu's only logo.

   ESTIMATED, not measured. The frame could not be read on 5 Sep 2026: the
   Figma MCP token had expired, and the project rule is to stop on a failed
   call rather than retry. See
   design/foundation-navigation-mobile-programme-logos/SOURCE.md. Both numbers
   must be confirmed against the frame once Figma is readable again.

   Height, not width: the artwork varies in aspect ratio, so it is scaled to a
   cap height and left to take whatever width that needs. The width cap keeps
   a wide lockup off the panel's right edge, and only bites on artwork wider
   than about 5:1; it measures the panel because .fnd-nav__back fills the row
   (see the note there).

   An SVG with no viewBox has no aspect ratio, so the height cap alone would
   letterbox it inside the browser's default 300x150. The field description
   asks editors for a viewBox; there is no CSS that can recover a ratio the
   file does not carry.

   52px, well above the 20px heading it replaces. The programme logos in the
   media library are full lockups (hexagon mark, "ASISA FOUNDATION", the
   programme name and a strapline) at roughly 3.3:1, so a box sized to the
   text leaves the name and strapline unreadable. Checked against WageWise,
   Build Up, Flame and RFTE on dev, 7 Sep 2026. If the frame calls for a
   shorter heading, the artwork needs a trimmed menu variant rather than a
   smaller box.
   -------------------------------------------------------------------------- */
.brand-foundation .fnd-nav__back-logo {
  display: block;
  flex: 0 1 auto;
  max-height: 52px;                                        /* ESTIMATED */
  max-width: 78%;                                          /* ESTIMATED */
  width: auto;
  object-fit: contain;
  object-position: left center;                            /* artwork stays on the panel's left edge */
}

/* --------------------------------------------------------------------------
   Breakpoint. 1024px is a working value: no tablet frame has been delivered,
   and eight primary items plus logo and search do not fit below it. Keep in
   step with BREAKPOINT in foundationNavigation.js.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .brand-foundation .fnd-nav__utility,
  .brand-foundation .fnd-nav__primary-nav,
  .brand-foundation .fnd-nav__secondary {
    display: none;
  }

  /* The closed header matches the menu header in the mobile frames: 56px, logo 28px. */
  .brand-foundation .fnd-nav__primary-inner {
    height: var(--fnd-nav-mobile-header-height);
    padding: 0 var(--fnd-nav-mobile-pad);
  }

  .brand-foundation .fnd-nav__logo img {
    width: auto;
    height: var(--fnd-nav-mobile-logo-height);
  }

  .brand-foundation .fnd-nav__burger {
    display: inline-flex;
  }

  .brand-foundation .fnd-nav__search {
    margin-right: 0;
  }

  .brand-foundation .fnd-nav__tools {
    padding-left: 0;
  }
}

@media (min-width: 1025px) {
  .brand-foundation .fnd-nav__mobile {
    display: none;                                         /* never shown on desktop, even if left open */
  }
}