/* ABF 2026 navigation information architecture.
 * Source of truth for the staged analytics-led header proposal.
 */

/* Desktop utilities live above the primary masthead so Africa, Contact, and
 * Search remain available without competing with mission-critical pathways. */
.abf-utility-bar {
  background: var(--wp--preset--color--deep-teal);
  color: var(--wp--preset--color--off-white);
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.abf-utility-inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  padding-top: 4px;
  padding-bottom: 4px;
}

.abf-utility-links {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.abf-utility-bar a {
  color: var(--wp--preset--color--off-white);
  text-decoration: none;
}

.abf-utility-bar a:hover,
.abf-utility-bar a:focus {
  color: var(--wp--preset--color--goldenrod);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.abf-utility-search {
  display: flex;
  align-items: stretch;
  width: 160px;
  margin: 0;
}

.abf-utility-search input[type="search"] {
  min-width: 0;
  width: 125px;
  height: 28px;
  margin: 0;
  padding: 3px 8px;
  color: var(--wp--preset--color--off-white);
  background: rgba(255, 253, 235, 0.08);
  border: 1px solid rgba(255, 253, 235, 0.55);
  border-right: 0;
  border-radius: 2px 0 0 2px;
  font-family: inherit;
  font-size: 0.75rem;
}

.abf-utility-search input[type="search"]::placeholder {
  color: rgba(255, 253, 235, 0.78);
  opacity: 1;
}

.abf-utility-search button[type="submit"] {
  width: 35px;
  height: 28px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--wp--preset--color--deep-teal);
  background: var(--wp--preset--color--goldenrod);
  border: 1px solid var(--wp--preset--color--goldenrod);
  border-radius: 0 2px 2px 0;
  font-size: 1rem;
  line-height: 1;
}

.abf-utility-search button[type="submit"]:hover,
.abf-utility-search button[type="submit"]:focus {
  color: var(--wp--preset--color--deep-teal);
  background: var(--wp--preset--color--off-white);
  border-color: var(--wp--preset--color--off-white);
}

/* Apply and Donate are actions, not ordinary content labels. Their shape and
 * contrast persist even when GeneratePress clears generic nav backgrounds. */
.main-navigation .main-nav > ul > li.abf-nav-action > a {
  min-height: 40px;
  margin: 10px 4px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border: 2px solid var(--wp--preset--color--deep-teal);
  border-radius: 2px;
  line-height: 1.1;
}

.main-navigation .main-nav > ul > li.abf-nav-apply > a {
  color: var(--wp--preset--color--deep-teal);
  background: transparent;
}

.main-navigation .main-nav > ul > li.abf-nav-donate > a,
.main-navigation .main-nav > ul > li.abf-nav-donate:hover > a,
.main-navigation .main-nav > ul > li.abf-nav-donate:focus-within > a {
  color: var(--wp--preset--color--off-white);
  background: var(--wp--preset--color--deep-teal);
}

.main-navigation .main-nav > ul > li.abf-nav-apply:hover > a,
.main-navigation .main-nav > ul > li.abf-nav-apply:focus-within > a {
  color: var(--wp--preset--color--mulberry);
  border-color: var(--wp--preset--color--mulberry);
}

.main-navigation .main-nav > ul > li.abf-nav-donate:hover > a,
.main-navigation .main-nav > ul > li.abf-nav-donate:focus-within > a {
  background: var(--wp--preset--color--mulberry);
  border-color: var(--wp--preset--color--mulberry);
}

/* Apply/Donate use the button treatment instead of the current-page underline. */
.main-navigation
  .main-nav
  > ul
  > li.abf-nav-action[class*="current-menu-"]
  > a::after {
  display: none;
}

/* Mobile utility copies are part of the accessible menu reading order but do
 * not duplicate the desktop utility bar visually. */
.main-navigation .main-nav > ul > li.abf-mobile-utility {
  display: none;
}

@media (min-width: 1025px) {
  /* Scholarships is the only menu dense enough to warrant a mega-menu. Its
   * children remain one semantic list; column classes change only layout. */
  .main-navigation .inside-navigation,
  .main-navigation .main-nav,
  .main-navigation .main-nav > ul {
    position: relative;
  }

  .main-navigation .main-nav > ul > li.abf-mega-menu {
    position: static;
  }

  /* GeneratePress reserves 30px of horizontal padding around every dropdown
   * chevron. With five section menus, that alone forced Donate onto a second
   * row at common desktop widths. The whole parent link remains clickable, so
   * a compact chevron gutter keeps the header on one row without shrinking the
   * labels or action buttons. */
  .main-navigation
    .main-nav
    > ul
    > li.menu-item-has-children
    > a
    > .dropdown-menu-toggle {
    padding-left: 7px;
    padding-right: 12px;
  }

  .main-navigation .main-nav > ul > li.abf-mega-menu > ul.sub-menu {
    left: auto;
    right: 0;
    width: min(920px, calc(100vw - 40px));
    max-width: none;
    padding: 18px 16px 20px;
    display: block;
    columns: 4;
    column-gap: 14px;
  }

  .main-navigation .main-nav > ul > li.abf-mega-menu > ul.sub-menu > li {
    width: auto;
    float: none;
    break-inside: avoid;
  }

  .main-navigation
    .main-nav
    > ul
    > li.abf-mega-menu
    > ul.sub-menu
    > li.abf-menu-heading:not(.abf-menu-col-1) {
    break-before: column;
  }

  .main-navigation .main-nav > ul > li.abf-mega-menu > ul.sub-menu > li > a {
    white-space: normal;
  }

  .main-navigation
    .main-nav
    > ul
    > li.abf-mega-menu
    > ul.sub-menu
    > li.abf-menu-heading
    > a {
    padding-top: 7px;
    padding-bottom: 7px;
    color: var(--wp--preset--color--deep-teal);
    border-bottom: 1px solid rgba(0, 55, 70, 0.3);
    font-size: 0.73rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .main-navigation
    .main-nav
    > ul
    > li.abf-mega-menu
    > ul.sub-menu
    > li.abf-menu-heading:not(:first-child)
    > a {
    margin-top: 0;
  }
}

@media (min-width: 1025px) and (max-width: 1120px) {
  /* Preserve a single header row until GeneratePress switches to its mobile
   * treatment. The action shapes stay intact; spacing carries the reduction. */
  .main-navigation .main-nav > ul > li > a {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
  }

  .main-navigation .main-nav > ul > li.abf-nav-action > a {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 11px;
    padding-right: 11px;
  }

  .site-logo img,
  .header-image {
    max-width: 210px;
  }
}

@media (max-width: 1024px) {
  .abf-utility-bar {
    display: none;
  }

  .main-navigation.toggled .main-nav > ul {
    display: flex;
    flex-direction: column;
  }

  /* Actions lead the mobile decision path, the five sections follow, and the
   * secondary utilities close the menu. */
  .main-navigation.toggled .main-nav > ul > li.abf-nav-action {
    order: -1;
    padding: 0 20px;
  }

  .main-navigation.toggled .main-nav > ul > li.abf-nav-action > a {
    min-height: 46px;
    margin: 8px 0 0;
    justify-content: center;
  }

  .main-navigation.toggled .main-nav > ul > li.abf-mobile-utility {
    display: list-item;
    order: 2;
  }

  .main-navigation.toggled .main-nav > ul > li.abf-mobile-utility-first {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 55, 70, 0.22);
  }

  .main-navigation.toggled .main-nav > ul > li.abf-mobile-utility > a {
    min-height: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--wp--preset--color--deep-teal);
    font-size: 0.78rem;
    font-weight: 500;
  }

  .main-navigation.toggled
    .main-nav
    > ul
    > li.abf-mega-menu
    > ul.sub-menu
    > li.abf-menu-heading
    > a {
    padding-top: 14px;
    padding-bottom: 6px;
    color: var(--wp--preset--color--mulberry);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .main-navigation.toggled
    .main-nav
    > ul
    > li.abf-mega-menu
    > ul.sub-menu
    > li:not(.abf-menu-heading)
    > a {
    padding-left: 52px;
  }
}

/* Keep the homepage KPIs prominent without letting the large numerals dominate
 * the section. */
.abf-stat-number {
  font-weight: 500;
}

/* Hub pages introduced by the new IA use the existing brand system while
 * clearly distinguishing pathways from ordinary article content. */
.abf-nav-hub-intro {
  margin-bottom: 2rem;
}

.abf-nav-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 920px !important;
}

.abf-nav-hub-card {
  min-width: 0;
  width: 100%;
  margin: 0 !important;
  padding: 1.5rem;
  background: var(--abf-surface-raised);
  border-top: 4px solid var(--wp--preset--color--mulberry);
  box-shadow: 0 8px 22px rgba(0, 55, 70, 0.08);
}

.abf-nav-hub-card h2,
.abf-nav-hub-card h3 {
  margin-top: 0;
}

.abf-nav-hub-card p:last-child {
  margin-bottom: 0;
}

.abf-nav-hub-card a {
  font-family: var(--wp--preset--font-family--brand-sans);
  font-weight: 700;
}

@media (max-width: 700px) {
  .abf-nav-hub-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}