/* Australia Awards Africa brand layer. Sections follow the spec. */

:root {
  --aa-navy: #003150;
  --aa-teal: #00759A;
  --aa-aqua: #3CB6CE;
  --aa-sky: #C1E2E5;
  --aa-sand: #A79E70;
  --aa-cream: #C8B18B;
  --aa-light-grey: #E0E1DD;
  --aa-grey: #747678;
  --aa-grey-dark: #5F6264;
  --aa-ink: #1F2A33;
  --aa-white: #FFFFFF;
  --aa-band: #F6F6F5;
  --aa-line: #D8D8D8;
  --aa-focus: #FFA100;
  --aa-diploma: #FFA100;
  --aa-undergrad: #B2541A;
  --aa-postgrad: #AA272F;
  --aa-research: #5E172D;
  --aa-profdev: #A17AAA;
  --aa-serif: "Times New Roman", Times, Georgia, serif;
  --aa-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --aa-container: 1200px;
  --aa-gutter: 24px;
  --aa-radius: 0;
  --aa-shadow: 0 1px 2px rgba(0, 49, 80, .08), 0 12px 32px rgba(0, 49, 80, .08);
}

*, *::before, *::after { box-sizing: border-box; }

body.aaa-brand {
  margin: 0;
  background: var(--aa-white);
  color: var(--aa-ink);
  font-family: var(--aa-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Long unbroken URLs and plugin captions must wrap rather than widen the
     page at narrow viewports. `break-word` leaves min-content sizing alone,
     so grid/flex tracks are not collapsed. */
  overflow-wrap: break-word;
}

/* Last-resort media guard. `:where()` keeps this at element specificity, so
   component rules (hero, card crop, video embeds) still own their sizing. */
body.aaa-brand :where(img, svg, video, iframe) { max-width: 100%; }
/* Height follows the intrinsic ratio so a fixed attribute height cannot
   distort media at narrow widths. Deliberately omits `svg` (the hero angle
   is an inline SVG sized by its component rule); component rules still own
   their height via higher specificity (hero image) or later source order
   (video block, video embeds). */
body.aaa-brand :where(img, video, iframe) { height: auto; }

body.aaa-brand h1,
body.aaa-brand h2,
body.aaa-brand h3,
body.aaa-brand h4 {
  font-family: var(--aa-serif);
  font-weight: 400;
  color: var(--aa-navy);
  letter-spacing: 0;
  line-height: 1.1;
}
body.aaa-brand h1 { font-size: clamp(40px, 5vw, 64px); }
body.aaa-brand h2 { font-size: clamp(30px, 3.5vw, 44px); }
body.aaa-brand h3 { font-size: 24px; line-height: 1.25; }
body.aaa-brand h4 { font-size: 20px; line-height: 1.3; }

body.aaa-brand p { margin: 0 0 1.2em; }
body.aaa-brand a:not(.aa-btn) { color: var(--aa-teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.aaa-brand a:not(.aa-btn):hover { color: var(--aa-navy); }

body.aaa-brand :focus-visible {
  outline: 2px solid var(--aa-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--aa-navy);
}

.aa-container {
  width: min(100% - (var(--aa-gutter) * 2), var(--aa-container));
  margin-inline: auto;
}

.aa-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

body.aaa-brand a.aa-skip {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--aa-white); color: var(--aa-navy);
  padding: 12px 20px; font-weight: 700; text-decoration: none;
}
body.aaa-brand a.aa-skip:focus { top: 16px; }

.aa-btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 48px; padding: 14px 26px;
  border: 1px solid transparent; border-radius: var(--aa-radius);
  background: var(--aa-navy); color: var(--aa-white);
  font: 700 15px/1.2 var(--aa-sans); text-decoration: none;
  cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.aa-btn:hover, .aa-btn:focus-visible { background: #00253d; color: var(--aa-white); }
.aa-btn--aqua { background: var(--aa-aqua); color: var(--aa-navy); }
.aa-btn--aqua:hover, .aa-btn--aqua:focus-visible { background: var(--aa-sky); color: var(--aa-navy); }
/* Shared sky CTA, used by the header Apply button and the hero CTA so both
   read sky/navy at rest and invert to navy/sky on hover and keyboard focus. */
.aa-btn--sky { background: var(--aa-sky); color: var(--aa-navy); }
/* The white border makes the hover/focus inversion visible even when the
   button sits on a navy header. */
.aa-btn--sky:hover, .aa-btn--sky:focus-visible {
  background: var(--aa-navy); color: var(--aa-sky); border-color: var(--aa-white);
}
.aa-btn--teal { background: var(--aa-teal); color: var(--aa-white); }
.aa-btn--teal:hover, .aa-btn--teal:focus-visible { background: #005c79; color: var(--aa-white); }
.aa-btn--ghost { background: transparent; border-color: var(--aa-white); color: var(--aa-white); }
.aa-btn--ghost:hover, .aa-btn--ghost:focus-visible { background: var(--aa-white); color: var(--aa-navy); }

/* The parent theme's generic `a:focus` colour out-specifies the bare
   `.aa-btn--*` classes, so mouse focus can otherwise turn the text navy on
   navy. Give every button variant an explicit focus colour, then let the
   active states win while the pointer is held down. */
body.aaa-brand .aa-btn:focus { background: var(--aa-navy); color: var(--aa-white); }
body.aaa-brand .aa-btn--aqua:focus { background: var(--aa-aqua); color: var(--aa-navy); }
/* Mouse focus keeps the rest colour; keyboard focus (:focus-visible, which also
   matches :focus) keeps the inverted hover colour. Both out-rank the generic
   `body.aaa-brand .aa-btn:focus` rule above. */
body.aaa-brand .aa-btn--sky:focus { background: var(--aa-sky); color: var(--aa-navy); }
body.aaa-brand .aa-btn--sky:focus-visible {
  background: var(--aa-navy); color: var(--aa-sky); border-color: var(--aa-white);
}
body.aaa-brand .aa-btn--teal:focus { background: var(--aa-teal); color: var(--aa-white); }
body.aaa-brand .aa-btn--ghost:focus { background: transparent; color: var(--aa-white); }

body.aaa-brand .aa-btn:active { background: #00253d; color: var(--aa-white); }
body.aaa-brand .aa-btn--aqua:active { background: var(--aa-sky); color: var(--aa-navy); }
body.aaa-brand .aa-btn--sky:active { background: var(--aa-navy); color: var(--aa-sky); }
body.aaa-brand .aa-btn--teal:active { background: #005c79; color: var(--aa-white); }
body.aaa-brand .aa-btn--ghost:active { background: var(--aa-white); color: var(--aa-navy); }
.aa-btn--arrow { padding-right: 58px; position: relative; }
.aa-btn--arrow::after {
  content: "\2026"; position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%); font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
  body.aaa-brand * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

body.aaa-brand .aa-main { display: block; }

.aa-header { background: var(--aa-navy); color: var(--aa-white); position: relative; z-index: 60; }
.aa-header__inner {
  display: flex; align-items: center; gap: 5px; min-height: 120px;
}
.aa-header__brand { flex: 0 0 auto; display: block; }
.aa-header__brand img { display: block; width: 120px; height: auto; }
/* Country label beside the crest, mirroring the Myanmar site's serif country
   name. Aqua on navy is 5.64:1; the serif keeps it distinct from the nav. */
.aa-header__country {
  flex: 0 0 auto; margin-right: 6px;
  font: 400 clamp(20px, 1.8vw, 26px)/1 var(--aa-serif);
  color: var(--aa-aqua);
  white-space: nowrap;
}

.aa-nav { margin-left: auto; }
.aa-menu { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.aa-menu > li { position: relative; }
.aa-menu > li > a {
  display: inline-block; padding: 10px 0; color: var(--aa-white);
  font: 700 14px/1.2 var(--aa-sans); text-decoration: none;
  white-space: nowrap;
}
/* The global `body.aaa-brand a:not(.aa-btn)` rules out-specify the bare nav
   selectors, so the header links render teal at rest and navy-on-navy on
   hover. Raise specificity instead of relying on source order. */
body.aaa-brand .aa-menu > li > a { color: var(--aa-white); }
body.aaa-brand .aa-menu > li.current-menu-item > a {
  color: var(--aa-white); text-decoration: underline; text-underline-offset: 6px;
}
body.aaa-brand .aa-menu > li > a:hover,
body.aaa-brand .aa-menu > li > a:focus-visible { color: var(--aa-aqua); }

.aa-menu .sub-menu {
  position: absolute; top: calc(100% + 10px); left: -18px; z-index: 70;
  min-width: 280px; margin: 0; padding: 12px 0; list-style: none;
  background: var(--aa-white); box-shadow: var(--aa-shadow); display: none;
}
/* The 10px gap between the trigger and the panel is outside the li's hover
   area, so the panel vanished while the pointer crossed it. The transparent
   ::before bridge (desktop only, where the panel is absolute) spans the gap;
   brand.js also keeps .is-open on the parent briefly on mouseleave. */
@media (min-width: 1201px) {
  .aa-menu .sub-menu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
    background: transparent;
  }
}
.aa-menu li:hover > .sub-menu,
.aa-menu li.is-open > .sub-menu,
.aa-menu li:focus-within > .sub-menu { display: block; }
.aa-menu .sub-menu a {
  display: block; padding: 10px 22px; color: var(--aa-navy);
  font: 400 15px/1.35 var(--aa-sans); text-decoration: none;
}
body.aaa-brand .aa-menu .sub-menu a { color: var(--aa-navy); }
body.aaa-brand .aa-menu .sub-menu a:hover,
body.aaa-brand .aa-menu .sub-menu a:focus-visible {
  background: var(--aa-band); color: var(--aa-navy); text-decoration: underline;
}

.aa-header__ctas { display: flex; gap: 4px; flex: 0 0 auto; }
.aa-header__ctas .aa-btn { min-height: 44px; padding: 10px 6px; font-size: 13px; }
/* The 1200px desktop row is already full, so clear space between "Contact"
   and the CTA group by widening the header container slightly rather than
   squeezing the nav item gaps or the buttons. 5px flex gap + 44px margin
   gives ~49px at 1441px+; the 1201-1280px row uses a 24px margin (~29px). */
@media (min-width: 1281px) {
  .aa-header__inner { --aa-container: 1260px; }
  .aa-header__ctas { margin-left: 44px; }
}
@media (min-width: 1201px) and (max-width: 1280px) {
  .aa-header__ctas { margin-left: 24px; }
}

/* Drawer-only CTAs: hidden while the primary nav is horizontal. */
.aa-nav__ctas { display: none; }

.aa-menu-toggle {
  background: transparent; border: 0; color: var(--aa-white);
  width: 44px; height: 44px; cursor: pointer;
  display: none;
}
.aa-menu-toggle__bars,
.aa-menu-toggle__bars::before,
.aa-menu-toggle__bars::after {
  display: block; width: 24px; height: 2px; margin-inline: auto;
  background: currentColor; content: "";
}
.aa-menu-toggle__bars { position: relative; }
.aa-menu-toggle__bars::before { position: absolute; top: -7px; }
.aa-menu-toggle__bars::after { position: absolute; top: 7px; }
/* Open state reads as a close (X), so the control state is visible without
   relying on colour alone. */
body.aaa-brand .aa-menu-toggle[aria-expanded="true"] .aa-menu-toggle__bars {
  background: transparent;
}
body.aaa-brand .aa-menu-toggle[aria-expanded="true"] .aa-menu-toggle__bars::before {
  top: 0; transform: rotate(45deg);
}
body.aaa-brand .aa-menu-toggle[aria-expanded="true"] .aa-menu-toggle__bars::after {
  top: 0; transform: rotate(-45deg);
}
/* The toggle sits on navy: the global orange outline is the visible focus
   indicator, with a white inner ring for contrast against the dark header. */
body.aaa-brand .aa-menu-toggle:focus-visible {
  outline: 2px solid var(--aa-focus);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px var(--aa-white);
}

.aa-ticker { background: var(--aa-cream); color: var(--aa-navy); height: 56px; }
.aa-ticker__inner { display: flex; align-items: center; gap: 24px; height: 100%; }
.aa-ticker__label {
  flex: 0 0 auto; display: inline-flex; align-items: center; align-self: stretch;
  padding: 0 20px; background: var(--aa-navy); color: var(--aa-white);
  font: 700 12px/1 var(--aa-sans); letter-spacing: .08em; text-transform: uppercase;
}
.aa-ticker__viewport { flex: 1; min-width: 0; overflow: hidden; }
.aa-ticker__items { list-style: none; margin: 0; padding: 0; }
.aa-ticker__item { display: none; }
.aa-ticker__item.is-active { display: block; }
.aa-ticker__item a {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--aa-navy); text-decoration: none; font: 400 15px/1.2 var(--aa-sans);
}
/* Navy on cream is 6.51:1; the old teal hover was only 2.52:1. */
.aa-ticker__item a:hover,
.aa-ticker__item a:focus-visible { color: var(--aa-navy); text-decoration: underline; }
/* Higher specificity than `body.aaa-brand a:not(.aa-btn)` so the ticker links
   stay navy instead of inheriting the global teal link colour. */
body.aaa-brand .aa-ticker__item a { color: var(--aa-navy); }
body.aaa-brand .aa-ticker__item a:hover,
body.aaa-brand .aa-ticker__item a:focus-visible {
  color: var(--aa-navy); text-decoration: underline;
}
.aa-ticker__toggle {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--aa-navy); background: transparent; color: var(--aa-navy);
  font: 700 11px/1 var(--aa-sans); cursor: pointer;
}
.aa-ticker__toggle:hover,
.aa-ticker__toggle:focus-visible { background: var(--aa-navy); color: var(--aa-white); }
.aa-ticker__toggle[hidden] { display: none; }
@media (max-width: 600px) {
  .aa-ticker__inner { gap: 12px; }
  .aa-ticker__label { padding: 0 12px; }
}

/* The container is capped at 1200px, so the desktop row must fit that width
   at every viewport above it. Tighten the row just above the cap. */
@media (max-width: 1280px) {
  .aa-menu { gap: 13px; }
}
/* Below the 1200px container the desktop row no longer fits on one line
   (labels would wrap and the CTAs would overflow), so switch to the drawer.
   The compact rules above therefore apply to every desktop width and there
   is no upper-width cliff. */
@media (max-width: 1200px) {
  .aa-header__inner { gap: 8px; min-height: 82px; flex-wrap: wrap; }
  .aa-header__country { margin-right: 0; }
  .aa-menu-toggle { display: block; order: 2; margin-left: auto; }
  .aa-header__brand img { width: 120px; }
  .aa-nav {
    order: 5; flex-basis: 100%; display: none; margin: 0;
    padding: 8px 0 20px; border-top: 1px solid rgba(255,255,255,.2);
  }
  .aa-nav.is-open { display: block; }
  .aa-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .aa-menu > li > a {
    padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12);
    white-space: normal;
  }
  .aa-menu .sub-menu {
    position: static; display: block; box-shadow: none; padding: 4px 0 10px 16px;
    background: transparent;
  }
  body.aaa-brand .aa-menu .sub-menu a {
    color: var(--aa-white); padding: 8px 0; font-size: 14px;
  }
  body.aaa-brand .aa-menu .sub-menu a:hover,
  body.aaa-brand .aa-menu .sub-menu a:focus-visible {
    background: transparent; color: var(--aa-aqua); text-decoration: none;
  }
  .aa-nav__ctas {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 0 4px;
  }
  .aa-nav__ctas .aa-btn { justify-content: center; }
  .aa-header__ctas { order: 3; }
}
@media (max-width: 600px) {
  .aa-header__ctas { display: none; }
}

/* Footer. Every rule that sets colour/type is prefixed with `body.aaa-brand`
   so it out-specifies the base `body.aaa-brand h2/h3` and
   `body.aaa-brand a:not(.aa-btn)` rules above. Layout rules are untouched. */
body.aaa-brand .aa-footer { color: var(--aa-white); }
body.aaa-brand .aa-footer h2,
body.aaa-brand .aa-footer h3 { color: var(--aa-white); }

body.aaa-brand .aa-footer__contact { background: var(--aa-navy); padding: 48px 0; }
.aa-footer__contact-inner {
  display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start;
}
body.aaa-brand .aa-footer__contact h2 {
  color: var(--aa-white); font-size: 28px; margin: 0 0 16px;
}
body.aaa-brand .aa-footer__contact p { margin: 0; color: var(--aa-sky); max-width: 60ch; }
body.aaa-brand .aa-footer__contact a { color: var(--aa-white); }
/* Higher specificity than `body.aaa-brand a:not(.aa-btn):hover` above, so the
   contact links stay light on the navy band instead of turning navy-on-navy. */
body.aaa-brand .aa-footer__contact a:hover,
body.aaa-brand .aa-footer__contact a:focus-visible {
  color: var(--aa-sky);
  text-decoration: underline;
}
body.aaa-brand .aa-footer__social { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
body.aaa-brand .aa-footer__social a {
  display: inline-block; padding: 10px 16px; border: 1px solid var(--aa-sky);
  color: var(--aa-white); text-decoration: none; font-size: 14px;
}
body.aaa-brand .aa-footer__social a:hover { background: var(--aa-white); color: var(--aa-navy); }

body.aaa-brand .aa-footer__columns { background: var(--aa-light-grey); color: var(--aa-navy); padding: 56px 0; }
body.aaa-brand .aa-footer__columns h3 {
  color: var(--aa-navy); font: 700 13px/1.2 var(--aa-sans);
  letter-spacing: .08em; text-transform: uppercase; margin: 0 0 18px;
}
.aa-footer__columns-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
body.aaa-brand .aa-footer__links { list-style: none; margin: 0; padding: 0; }
body.aaa-brand .aa-footer__links li { margin-bottom: 9px; }
body.aaa-brand .aa-footer__links a,
body.aaa-brand .aa-footer__legal a { color: var(--aa-navy); text-decoration: none; }
body.aaa-brand .aa-footer__links a { font-size: 15px; }
body.aaa-brand .aa-footer__links a:hover,
body.aaa-brand .aa-footer__links a:focus-visible,
body.aaa-brand .aa-footer__legal a:hover,
body.aaa-brand .aa-footer__legal a:focus-visible {
  color: var(--aa-navy); text-decoration: underline;
}

body.aaa-brand .aa-footer__legal { background: var(--aa-cream); color: var(--aa-navy); padding: 20px 0; }
.aa-footer__legal-inner {
  display: flex; justify-content: space-between; gap: 24px; align-items: center;
  font-size: 13px;
}
body.aaa-brand .aa-footer__legal p { margin: 0; }
body.aaa-brand .aa-footer__legal ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }

@media (max-width: 992px) {
  .aa-footer__contact-inner { grid-template-columns: 1fr; gap: 28px; }
  .aa-footer__columns-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .aa-footer__columns-inner { grid-template-columns: 1fr; gap: 28px; }
  .aa-footer__legal-inner { flex-direction: column; align-items: flex-start; }
  .aa-footer__legal ul { flex-wrap: wrap; }
}

/* Myanmar-style hero: 32% gradient copy panel, 68% slider/photo, flush edges.
   The 460px minimum keeps the split balanced on desktop; the copy panel and
   media stretch together when the headline wraps to more lines. */
.aa-hero { padding: 56px 0 0; background: var(--aa-white); }
.aa-hero__grid {
  display: grid; grid-template-columns: 32% 68%; align-items: stretch;
  /* Navy backing keeps the translucent copy panel legible: white text sits
     over 88% teal/navy over navy, not over the page's white background. */
  background: var(--aa-navy);
}
.aa-hero__copy {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  min-height: 460px; padding: 48px 40px 40px;
  background: linear-gradient(to bottom, rgba(0, 117, 154, .88), rgba(0, 49, 80, .88));
  color: var(--aa-white);
}
body.aaa-brand .aa-hero__copy h1 {
  color: var(--aa-white); font-size: clamp(30px, 2.5vw, 40px);
  line-height: 1.12; margin: 0 0 20px; max-width: 18ch;
}
body.aaa-brand .aa-hero__copy p { color: var(--aa-white); margin: 0 0 28px; max-width: 38ch; }
.aa-hero__copy .aa-btn { margin-top: auto; }

.aa-hero__media { position: relative; overflow: hidden; min-height: 460px; background: var(--aa-navy); }
.aa-hero__media > img:first-child {
  width: 100%; height: 100%; min-height: 460px; object-fit: cover; display: block;
}

/* MetaSlider fills the media half. The plugin prints a bounded, centred
   wrapper inline, so the fill relies on absolute positioning rather than
   relying on percentage heights resolving against the grid item. Captions,
   arrows and pager are hidden: the hero is decorative and carries no
   controls of its own. */
.aa-hero__media .metaslider {
  position: absolute; inset: 0; width: auto !important; max-width: none !important;
  margin: 0 !important; height: auto;
}
.aa-hero__media .metaslider > div {
  position: absolute; inset: 0; width: auto; height: auto;
}
.aa-hero__media .metaslider .rslides { position: absolute; inset: 0; height: 100%; }
.aa-hero__media .metaslider .rslides li { height: 100%; }
.aa-hero__media .metaslider .rslides img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.aa-hero__media .metaslider .caption-wrap,
.aa-hero__media .metaslider .caption,
.aa-hero__media .metaslider .rslides_nav,
.aa-hero__media .metaslider .rslides_tabs,
.aa-hero__media .metaslider .flex-control-nav,
.aa-hero__media .metaslider .flex-direction-nav,
.aa-hero__media .metaslider .metaslider-controls { display: none !important; }

.aa-hero__angle {
  position: absolute; top: 0; right: 0; height: 100%; width: auto;
  aspect-ratio: 138.31 / 380; pointer-events: none;
}
/* Matches the rendered .aa-hero__angle box exactly, so the star's percentage
   and offset resolve against the angle width/height rather than the stage. */
.aa-hero__angle-box {
  position: absolute; top: 0; right: 0; height: 100%;
  aspect-ratio: 138.31 / 380; pointer-events: none;
}
/* The star sits on the teal diagonal near the angle's bottom-right corner
   (white on teal is 5.24:1), inside the angle box rather than over the photo. */
.aa-hero__star {
  position: absolute; right: 28px; bottom: 46px;
  width: 28px; height: auto; z-index: 2;
}

.aa-intro { background: var(--aa-cream); padding: 56px 0; margin-top: 56px; }
.aa-intro__grid {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: start;
}
.aa-intro h2 { margin: 0; color: var(--aa-navy); max-width: 14ch; }
.aa-intro p { color: var(--aa-navy); max-width: 70ch; }
.aa-intro .aa-btn { background: var(--aa-navy); color: var(--aa-white); }

@media (max-width: 992px) {
  .aa-hero__grid { grid-template-columns: 1fr; }
  .aa-hero__copy { min-height: 0; padding: 36px 28px; }
  .aa-hero__media { min-height: 320px; }
  .aa-hero__media > img:first-child { min-height: 320px; }
  .aa-intro__grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .aa-hero { padding-top: 24px; }
  .aa-hero__copy { padding: 28px 22px; }
  body.aaa-brand .aa-hero__copy h1 { font-size: 30px; }
  .aa-hero__media { min-height: 280px; }
  .aa-hero__media > img:first-child { min-height: 280px; }
}

/*
 * The star sits in .aa-hero__angle-box beside .aa-hero__media (not inside it)
 * so the media keeps a single <img>. The angle box tracks the rendered angle,
 * and the stage is the positioning context shared by both.
 */
.aa-hero__stage { position: relative; }

.aa-section { padding: 64px 0; }
.aa-section--news { background: var(--aa-band); }
.aa-section--video { background: var(--aa-white); padding-top: 0; }
.aa-section--ctas { background: var(--aa-band); }

.aa-section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  margin-bottom: 32px;
}
.aa-section__head h2 { margin: 0; }
.aa-section__link {
  font: 700 14px/1.2 var(--aa-sans); color: var(--aa-teal); text-decoration: none;
  white-space: nowrap;
}
.aa-section__link span { margin-left: 8px; }

.aa-grid { display: grid; gap: 28px; }
.aa-grid--3 { grid-template-columns: repeat(3, 1fr); }

.aa-card { background: var(--aa-white); display: flex; flex-direction: column; }
.aa-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--aa-sky); }
.aa-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The older Latest News photos are portrait crops; bias the 3:2 window
   upward (showing more of the top) so the subjects' faces stay in frame. */
.aa-section--news .aa-card__media img { object-position: center 30%; }
.aa-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--aa-sky), var(--aa-aqua)); }
.aa-card__body { padding: 20px 0 0; display: flex; flex-direction: column; flex: 1; }
.aa-card h3 { margin: 10px 0 10px; font-size: 24px; }
.aa-card h3 a { color: var(--aa-navy); text-decoration: none; }
.aa-card h3 a:hover { color: var(--aa-teal); }
.aa-card p { color: var(--aa-grey); font-size: 16px; }
.aa-card__link {
  margin-top: auto; font: 700 14px/1.2 var(--aa-sans); color: var(--aa-teal);
  text-decoration: none;
}
.aa-card__link span { margin-left: 8px; }

/* News cards sit on the #F6F6F5 band, so they need a defined white surface,
   hairline border and shadow to read as separate cards. */
.aa-card--news {
  border: 1px solid var(--aa-line);
  box-shadow: var(--aa-shadow);
}
.aa-card--news .aa-card__body { padding: 20px; }
.aa-card__date {
  display: block; margin: 0 0 10px;
  font: 400 13px/1.2 var(--aa-sans); color: var(--aa-grey);
}

/* Latest news feature: navy content panel beside the story image. */
.aa-featured-news {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  margin-bottom: 28px; background: var(--aa-white); box-shadow: var(--aa-shadow);
}
.aa-featured-news__content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 44px 48px; background: var(--aa-navy); color: var(--aa-white);
}
.aa-featured-news__eyebrow {
  margin: 0 0 14px; font: 700 13px/1.2 var(--aa-sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--aa-sky);
}
body.aaa-brand .aa-featured-news__title {
  margin: 0 0 10px; font: 400 clamp(26px, 3vw, 40px)/1.08 var(--aa-serif);
  color: var(--aa-white);
}
body.aaa-brand .aa-featured-news__title a { color: var(--aa-white); text-decoration: none; }
body.aaa-brand .aa-featured-news__title a:hover,
body.aaa-brand .aa-featured-news__title a:focus-visible { color: var(--aa-sky); }
body.aaa-brand .aa-featured-news .aa-card__date {
  margin-bottom: 16px; color: var(--aa-sky);
}
.aa-featured-news__excerpt {
  margin: 0 0 22px; color: var(--aa-white); font-size: 17px; max-width: 60ch;
}
body.aaa-brand a.aa-featured-news__link {
  margin-top: 4px; align-self: flex-start;
  font: 700 14px/1.2 var(--aa-sans); color: var(--aa-sky); text-decoration: none;
}
body.aaa-brand a.aa-featured-news__link:hover,
body.aaa-brand a.aa-featured-news__link:focus-visible { color: var(--aa-white); }
.aa-featured-news__media {
  display: block; height: 100%; min-height: 320px;
  overflow: hidden; background: var(--aa-sky);
}
.aa-featured-news__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aa-featured-news__placeholder {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--aa-sky), var(--aa-aqua));
}

.aa-pills { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.aa-pill {
  display: inline-block; padding: 4px 9px; font: 700 11px/1.2 var(--aa-sans);
  letter-spacing: .03em; text-transform: uppercase;
  background: var(--aa-sky); color: var(--aa-navy);
}

.aa-video-block {
  position: relative; display: block; min-height: 420px; overflow: hidden;
  background: var(--aa-navy); text-decoration: none;
}
.aa-video-block img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; opacity: .55; }
/* Navy gradient scrim behind the copy. Over a worst-case white poster pixel
   the 92% navy base keeps white (10.7:1) and sky (7.8:1) above 4.5:1. */
.aa-video-block::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 49, 80, 0) 30%, rgba(0, 49, 80, .92) 100%);
}
.aa-video-block__copy {
  position: absolute; inset: auto 0 0 0; z-index: 2; display: block;
  padding: 40px; color: var(--aa-white);
}
.aa-video-block__eyebrow { display: block; font: 700 13px/1.2 var(--aa-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--aa-sky); }
.aa-video-block__title { display: block; margin-top: 10px; font: 400 clamp(26px, 3vw, 40px)/1.1 var(--aa-serif); max-width: 22ch; }
.aa-video-block__play {
  position: absolute; right: 40px; bottom: 40px; width: 64px; height: 64px;
  display: grid; place-items: center; border: 2px solid var(--aa-white);
  border-radius: 50%; font-size: 20px;
}

.aa-cta-card {
  display: flex; flex-direction: column; min-height: 260px; padding: 32px;
  text-decoration: none; color: var(--aa-white);
}
.aa-cta-card h2 { color: var(--aa-white); margin: 0 0 12px; font-size: 30px; }
.aa-cta-card p { color: var(--aa-white); opacity: .9; margin: 0 0 24px; }
.aa-cta-card__link { margin-top: auto; font: 700 14px/1.2 var(--aa-sans); }
.aa-cta-card--navy { background: var(--aa-navy); }
.aa-cta-card--teal { background: var(--aa-teal); }
.aa-cta-card--aqua { background: var(--aa-aqua); color: var(--aa-navy); }
.aa-cta-card--aqua h2, .aa-cta-card--aqua p { color: var(--aa-navy); }
/* Darkening on hover increases contrast; brightening reduced the teal card
   to 4.76:1. 0.94 gives teal/white 5.77:1 and aqua/navy 5.0:1. */
.aa-cta-card:hover { filter: brightness(0.94); }

/*
 * The global brand rules `body.aaa-brand h2` and
 * `body.aaa-brand a:not(.aa-btn)` are more specific than the component
 * selectors above, so the cards and their link spans need matching-or-higher
 * specificity to keep readable colours.
 */
body.aaa-brand a.aa-cta-card { color: var(--aa-white); }
body.aaa-brand a.aa-cta-card--aqua { color: var(--aa-navy); }
body.aaa-brand .aa-cta-card h2,
body.aaa-brand .aa-cta-card p { color: inherit; }
body.aaa-brand .aa-cta-card__link { color: inherit; }
body.aaa-brand a.aa-cta-card:hover { color: var(--aa-white); }
body.aaa-brand a.aa-cta-card--aqua:hover { color: var(--aa-navy); }
body.aaa-brand .aa-card h3 a { color: var(--aa-navy); }
body.aaa-brand .aa-card h3 a:hover,
body.aaa-brand .aa-card h3 a:focus-visible { color: var(--aa-teal); }

@media (max-width: 992px) {
  .aa-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .aa-section { padding: 44px 0; }
  .aa-grid--3 { grid-template-columns: 1fr 1fr; }
  .aa-video-block__play { right: 20px; bottom: 20px; width: 52px; height: 52px; }
  /* Feature stacks content-first, then the image. */
  .aa-featured-news { grid-template-columns: 1fr; }
  .aa-featured-news__content { padding: 32px 28px; }
  .aa-featured-news__media { min-height: 240px; }
}
@media (max-width: 520px) {
  .aa-grid--3 { grid-template-columns: 1fr; }
  .aa-section__head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .aa-cta-card { min-height: 0; }
  .aa-featured-news__content { padding: 26px 20px; }
}

/* Interior page shell. Colour/type rules carry a `body.aaa-brand` prefix so
   they out-specify the base `body.aaa-brand h1/h2/h3` and
   `body.aaa-brand a:not(.aa-btn)` rules above. Layout rules are untouched. */
.aa-page-header {
  position: relative; background: var(--aa-band); padding: 40px 0 36px;
  border-bottom: 1px solid var(--aa-line);
}
.aa-page-header--image { background: var(--aa-navy); color: var(--aa-white); overflow: hidden; }
body.aaa-brand .aa-page-header__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .35;
}
/* Scrim over the photo so the white h1, sky breadcrumb and star keep their
   contrast even when the image is bright. The 92% navy base over the lightest
   possible composite (white at 35% over navy) gives white 12.5:1 and sky
   9.1:1. The angle SVG stays above it (same z-index, later in tree order). */
.aa-page-header--image::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 49, 80, .15) 0%, rgba(0, 49, 80, .92) 100%);
}
.aa-page-header--image .aa-page-header__inner { position: relative; z-index: 2; }
.aa-page-header__star {
  display: block; width: 24px; height: 24px; margin-bottom: 10px;
  background-color: var(--aa-teal);
  -webkit-mask: url('../img/aa-star-white.png') center / contain no-repeat;
  mask: url('../img/aa-star-white.png') center / contain no-repeat;
}
.aa-page-header--image .aa-page-header__star { background-color: var(--aa-white); }
.aa-page-header__angle {
  position: absolute; top: 0; right: 0; height: 100%; width: auto;
  aspect-ratio: 138.31 / 380; z-index: 1; pointer-events: none;
}
body.aaa-brand .aa-page-header h1 {
  margin: 10px 0 0; color: var(--aa-navy); max-width: 20ch;
}
body.aaa-brand .aa-page-header--image h1 { color: var(--aa-white); }
.aa-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--aa-grey-dark); }
body.aaa-brand .aa-breadcrumb a { color: var(--aa-teal); text-decoration: none; }
body.aaa-brand .aa-page-header--image .aa-breadcrumb,
body.aaa-brand .aa-page-header--image .aa-breadcrumb a { color: var(--aa-sky); }

.aa-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px;
  padding: 56px 0 72px; align-items: start;
}
/* No section sidebar: collapse the empty grid track and centre the measure.
   `width: 100%` + `justify-self` keeps the item stretched to the track before
   the 760px cap; `margin-inline: auto` would make it shrink-to-fit instead. */
.aa-layout--full { grid-template-columns: minmax(0, 1fr); }
.aa-layout--full .aa-content {
  width: 100%; max-width: 760px; justify-self: center;
}
.aa-content { min-width: 0; max-width: 760px; }
.aa-content h2 { margin-top: 1.4em; }
.aa-content h3 { margin-top: 1.2em; }
.aa-content img { max-width: 100%; height: auto; }
/* Raw content embeds (YouTube, slide decks) have no wrapper of their own:
   reserve a 16:9 box so the iframe scales with the reading column. */
body.aaa-brand .aa-content iframe { aspect-ratio: 16 / 9; width: 100%; }
.aa-content a { overflow-wrap: anywhere; }
.aa-content ul, .aa-content ol { padding-left: 1.2em; }
.aa-content blockquote {
  margin: 1.6em 0; padding: 20px 24px; border-left: 4px solid var(--aa-aqua);
  background: var(--aa-band); color: var(--aa-navy); font-family: var(--aa-serif); font-size: 22px;
}
.aa-content table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.aa-content th { background: var(--aa-navy); color: var(--aa-white); text-align: left; padding: 10px 12px; }
.aa-content td { padding: 10px 12px; border-bottom: 1px solid var(--aa-line); }
.aa-content tr:nth-child(even) td { background: var(--aa-band); }

.aa-sidebar { position: sticky; top: 24px; }
body.aaa-brand .aa-sidebar__title {
  font: 700 13px/1.2 var(--aa-sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--aa-navy); margin: 0 0 12px;
}
.aa-sidebar__nav { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--aa-line); }
.aa-sidebar__nav li { border-bottom: 1px solid var(--aa-line); }
body.aaa-brand .aa-sidebar__nav a {
  display: block; padding: 11px 0; color: var(--aa-navy);
  text-decoration: none; font-size: 15px;
}
body.aaa-brand .aa-sidebar__nav a:hover { color: var(--aa-teal); }
body.aaa-brand .aa-sidebar__nav .current_page_item > a { color: var(--aa-teal); font-weight: 700; }

@media (max-width: 992px) {
  .aa-layout { grid-template-columns: 1fr; gap: 36px; }
  .aa-sidebar { position: static; }
  .aa-content { max-width: 100%; }
}

/* Alumni sidebar box (rendered by the parent page templates on Alumni/news
   pages). The parent paints it with a brown #bf5b1f/#8b4317 gradient and
   turns links navy on hover; replace both with the brand palette. */
body.aaa-brand .box__alumni-icon-box {
  background: linear-gradient(to left top, var(--aa-teal), var(--aa-navy));
  border-radius: 0;
  box-shadow: var(--aa-shadow);
}
body.aaa-brand .box__alumni-icon-box a { color: var(--aa-white); }
body.aaa-brand .box__alumni-icon-box a:hover,
body.aaa-brand .box__alumni-icon-box a:focus-visible { color: var(--aa-sky); }
body.aaa-brand .box__alumni-icon-box .fa-li,
body.aaa-brand .box__alumni-icon-box svg { color: var(--aa-white); }
/* The legacy header CTA is unused by the child header, but remap it so the
   brown gradient cannot reappear if the parent header is ever restored. */
body.aaa-brand .action-btn__alumni {
  background: linear-gradient(to right top, var(--aa-teal), var(--aa-navy));
}
body.aaa-brand .action-btn__alumni a { color: var(--aa-white); }

/* Awards landing content (ported from the parent template into the shell). */
body.aaa-brand .aa-awards > h2 { margin-top: 2em; }
.aa-awards-hero { background: var(--aa-band); padding: 28px; margin-bottom: 8px; }
body.aaa-brand .aa-awards-hero h2 {
  margin: 0 0 20px; font-size: clamp(28px, 3vw, 38px); line-height: 1.15;
}
.aa-awards-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 28px;
  align-items: start;
}
body.aaa-brand .aa-awards-hero__links {
  list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--aa-line);
}
.aa-awards-hero__links li { border-bottom: 1px solid var(--aa-line); }
body.aaa-brand .aa-awards-hero__links a {
  display: block; padding: 12px 0; color: var(--aa-teal);
  font: 700 16px/1.3 var(--aa-sans); text-decoration: none;
}
body.aaa-brand .aa-awards-hero__links a:hover,
body.aaa-brand .aa-awards-hero__links a:focus-visible {
  color: var(--aa-navy); text-decoration: underline;
}

.aa-video-embed { position: relative; aspect-ratio: 16 / 9; background: var(--aa-navy); }
.aa-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

body.aaa-brand .aa-awards .aa-lead {
  font-size: 21px; line-height: 1.5; color: var(--aa-navy); max-width: 65ch;
}

.aa-details { margin: 8px 0 32px; }
.aa-details summary {
  display: inline-block; cursor: pointer; list-style: none;
  padding: 10px 18px; border: 1px solid var(--aa-teal);
  color: var(--aa-teal); background: transparent;
  font: 700 14px/1.2 var(--aa-sans); letter-spacing: .04em; text-transform: uppercase;
}
.aa-details summary::-webkit-details-marker { display: none; }
.aa-details summary:hover,
.aa-details summary:focus-visible { background: var(--aa-teal); color: var(--aa-white); }
.aa-details__body { margin-top: 20px; }
.aa-details__body > :last-child { margin-bottom: 0; }

.aa-awards-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
body.aaa-brand .aa-content .aa-cta-card { min-height: 220px; }
body.aaa-brand .aa-content .aa-cta-card h2 {
  margin: 0 0 12px; font-size: 26px; line-height: 1.15; color: inherit;
}
body.aaa-brand .aa-content .aa-cta-card p { margin: 0 0 24px; color: inherit; }

@media (max-width: 760px) {
  .aa-awards-hero { padding: 22px; }
  .aa-awards-hero__grid, .aa-awards-cards { grid-template-columns: 1fr; }
  body.aaa-brand .aa-awards .aa-lead { font-size: 19px; }
}

/* News listing. The filter is a flex row so the search field absorbs the
   space and the actions sit at the end even when the news CPT exposes no
   public taxonomies (the taxonomy fields simply are not rendered). */
.aa-news-list { padding: 40px 0 72px; }
.aa-news-list__intro { max-width: 760px; margin-bottom: 28px; }
.aa-news-list__title { margin: 0 0 24px; }
.aa-filter {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  padding: 20px; margin-bottom: 36px; background: var(--aa-band);
  border-top: 3px solid var(--aa-navy);
}
.aa-filter__field { flex: 1 1 220px; }
.aa-filter__field--search { flex: 2 1 320px; }
.aa-filter__field label {
  display: block; margin-bottom: 6px;
  font: 700 12px/1.2 var(--aa-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--aa-navy);
}
.aa-filter input, .aa-filter select {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid #C9CFD3; border-radius: 0; background: var(--aa-white);
  color: var(--aa-ink); font: 400 16px/1.2 var(--aa-sans);
}
.aa-filter__actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.aa-filter__actions .aa-btn { margin: 0; }
.aa-filter__clear { color: var(--aa-teal); font-size: 14px; }

.aa-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 28px; }
.aa-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 44px; }
.aa-pagination a, .aa-pagination span {
  display: inline-block; min-width: 42px; padding: 10px 12px; text-align: center;
  border: 1px solid var(--aa-line); text-decoration: none; font-size: 15px;
}
/* `body.aaa-brand` prefix out-specifies the base link colour rules. */
body.aaa-brand .aa-pagination a,
body.aaa-brand .aa-pagination span { color: var(--aa-navy); }
body.aaa-brand .aa-pagination .current {
  background: var(--aa-navy); color: var(--aa-white); border-color: var(--aa-navy);
}
body.aaa-brand .aa-pagination a:hover,
body.aaa-brand .aa-pagination a:focus-visible {
  border-color: var(--aa-teal); color: var(--aa-teal);
}
.aa-news-list__empty { padding: 32px; background: var(--aa-band); }

@media (max-width: 768px) {
  .aa-filter__field, .aa-filter__actions { flex: 1 1 100%; }
  .aa-news-grid { grid-template-columns: 1fr; }
}

.aa-article { max-width: 760px; }
/* The single templates wrap the full-width title band, so the article element
   itself must not be clamped; the reading measure lives on .aa-content. */
.aa-article--single { max-width: none; }
.aa-article__meta {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
  color: var(--aa-grey); font-size: 14px;
}
.aa-article__image { margin: 0 0 28px; }
.aa-article__image img { width: 100%; height: auto; display: block; }
.aa-related { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--aa-line); }
.aa-related li { border-bottom: 1px solid var(--aa-line); }
body.aaa-brand .aa-related a { display: block; padding: 12px 0; color: var(--aa-navy); text-decoration: none; font-size: 15px; }
body.aaa-brand .aa-related a:hover { color: var(--aa-teal); }

/* Search, archive and 404 states. */
.aa-search-results, .aa-archive { padding: 40px 0 72px; }
.aa-search-results__count {
  margin: 0 0 28px; color: var(--aa-grey); font: 700 13px/1.2 var(--aa-sans);
  letter-spacing: .08em; text-transform: uppercase;
}
.aa-search-results__empty { padding: 32px; background: var(--aa-band); }
/* Core nests the search input in its <label>, so the flex sizing belongs to
   the label (and to the input inside it), not to the form directly. */
body.aaa-brand .aa-search-results .search-form {
  display: flex; gap: 12px; align-items: stretch;
}
body.aaa-brand .aa-search-results .search-form label {
  display: flex; flex: 1 1 240px; min-width: 0; margin: 0;
}
body.aaa-brand .aa-search-results .search-field { flex: 1; min-width: 0; }
body.aaa-brand .aa-search-results .search-submit { flex: 0 0 auto; }
.aa-search-results .search-field {
  min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--aa-grey); border-radius: 0;
  color: var(--aa-navy); font: inherit; line-height: 1.2;
}
/* The UA submit chrome was 12px aqua text on white (2.25:1). Make it a
   proper brand button so the recovery action is readable and tappable. */
body.aaa-brand .aa-search-results .search-submit {
  appearance: none; min-height: 48px; margin: 0; padding: 14px 26px;
  border: 0; border-radius: 0;
  background: var(--aa-navy); color: var(--aa-white);
  font: 700 15px/1.2 var(--aa-sans); cursor: pointer;
}
body.aaa-brand .aa-search-results .search-submit:hover,
body.aaa-brand .aa-search-results .search-submit:focus,
body.aaa-brand .aa-search-results .search-submit:focus-visible,
body.aaa-brand .aa-search-results .search-submit:active {
  background: #00253d; color: var(--aa-white);
}
@media (max-width: 480px) {
  body.aaa-brand .aa-search-results .search-form { flex-wrap: wrap; }
  body.aaa-brand .aa-search-results .search-form label { flex-basis: 100%; }
  body.aaa-brand .aa-search-results .search-submit { width: 100%; }
}
.aa-archive__description { margin-top: 16px; color: var(--aa-grey-dark); max-width: 68ch; }
.aa-archive__description p:last-child { margin-bottom: 0; }

.aa-404 { background: var(--aa-navy); color: var(--aa-white); padding: 96px 0; }
.aa-404__inner { max-width: 720px; }
.aa-404__code {
  margin: 0; font: 400 120px/1 var(--aa-serif); color: var(--aa-aqua);
}
/* `body.aaa-brand p` (0,1,2) out-specifies the bare `.aa-404__code` (0,1,0),
   leaving a 144px gap under the numeral. */
body.aaa-brand .aa-404 .aa-404__code { margin: 0; }
/* Navy on navy was invisible. Aqua/navy is 5.64:1 and matches the brand CTA
   treatment; sky/navy is higher still. */
body.aaa-brand .aa-404 .aa-btn--arrow {
  background: var(--aa-aqua); color: var(--aa-navy);
}
body.aaa-brand .aa-404 .aa-btn--arrow:hover,
body.aaa-brand .aa-404 .aa-btn--arrow:focus,
body.aaa-brand .aa-404 .aa-btn--arrow:focus-visible,
body.aaa-brand .aa-404 .aa-btn--arrow:active {
  background: var(--aa-sky); color: var(--aa-navy);
}
/* `body.aaa-brand h1` (0,1,2) otherwise out-specifies `.aa-404 h1` (0,1,1)
   and the heading turns navy on navy. */
body.aaa-brand .aa-404 h1 { color: var(--aa-white); margin: 8px 0 16px; }
body.aaa-brand .aa-404 p:not(.aa-404__code) { color: var(--aa-sky); }
.aa-404__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.aa-404 .aa-btn--ghost { border-color: var(--aa-white); }

/* Legacy parent content. The staging Contact page still renders the parent
   theme's page-contact.php, whose `.blue-txt` accent is #00bddd (2.25:1 on
   white). Brand teal is 5.23:1 and keeps the emphasis. */
body.aaa-brand .blue-txt { color: var(--aa-teal); }

/* --------------------------------------------------------------------------
   Plugin and page-builder components
   Elementor, Envira, Fluent Forms, Ninja Tables and MetaSlider are styled
   with `body.aaa-brand` prefixes so their own stylesheets do not win. Only
   the components that exist on staging are exercised by tests/components.mjs;
   the rest ship ready for when the markup is enabled.
   -------------------------------------------------------------------------- */

/* Elementor text widgets and headings. Elementor prints font-family inline
   on its text-editor paragraphs, so !important is required to enforce the
   brand sans stack there. */
body.aaa-brand .elementor-widget-text-editor,
body.aaa-brand .elementor-widget-text-editor p {
  font-family: var(--aa-sans) !important;
}
/* Legacy Elementor copy carries an inline #7a7a7a (4.29:1 on white). The
   brand ink is ~13:1, so it wins over the inline style via !important.
   Scoped to the offending grey so intentional colours in other widgets
   (e.g. white copy on dark sections) are left alone. */
body.aaa-brand .elementor-widget-text-editor p[style*="#7a7a7a"],
body.aaa-brand .elementor-widget-text-editor p[style*="rgb(122, 122, 122)"] {
  color: var(--aa-ink) !important;
}
body.aaa-brand .elementor-widget-heading .elementor-heading-title {
  font-family: var(--aa-serif);
  font-weight: 400;
  color: var(--aa-navy);
}
/* Elementor pages (About) own their internal column grid. Let the widget area
   use the full grid column instead of the 760px reading measure; the 300px
   section sidebar (when present) still sits beside it. */
body.aaa-brand .aa-content:has(.elementor) { max-width: 100%; }
body.aaa-brand .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1200px; }

/* Elementor buttons (future-facing). */
body.aaa-brand .elementor-button {
  min-height: 48px; padding: 14px 26px;
  border: 0; border-radius: 0;
  background: var(--aa-navy); color: var(--aa-white);
  font-family: var(--aa-sans); font-weight: 700;
}
body.aaa-brand .elementor-button:hover,
body.aaa-brand .elementor-button:focus,
body.aaa-brand .elementor-button:focus-visible,
body.aaa-brand .elementor-button:active {
  background: #00253d; color: var(--aa-white);
}

/* Forms. Scoped to page content and known form plugins so the theme's own
   search overlay, news filter and search-results controls keep their
   dedicated treatment. */
body.aaa-brand .aa-content input[type="text"],
body.aaa-brand .aa-content input[type="email"],
body.aaa-brand .aa-content input[type="tel"],
body.aaa-brand .aa-content input[type="number"],
body.aaa-brand .aa-content input[type="date"],
body.aaa-brand .aa-content input[type="url"],
body.aaa-brand .aa-content input[type="search"],
body.aaa-brand .aa-content select,
body.aaa-brand .aa-content textarea,
body.aaa-brand #EligibilityForm input[type="text"],
body.aaa-brand #EligibilityForm input[type="email"],
body.aaa-brand #EligibilityForm input[type="tel"],
body.aaa-brand #EligibilityForm input[type="number"],
body.aaa-brand #EligibilityForm input[type="date"],
body.aaa-brand #EligibilityForm input[type="search"],
body.aaa-brand #EligibilityForm select,
body.aaa-brand #EligibilityForm textarea,
body.aaa-brand .fluentform input[type="text"],
body.aaa-brand .fluentform input[type="email"],
body.aaa-brand .fluentform input[type="tel"],
body.aaa-brand .fluentform input[type="number"],
body.aaa-brand .fluentform input[type="date"],
body.aaa-brand .fluentform input[type="url"],
body.aaa-brand .fluentform input[type="search"],
body.aaa-brand .fluentform select,
body.aaa-brand .fluentform textarea,
body.aaa-brand .wpcf7 input[type="text"],
body.aaa-brand .wpcf7 input[type="email"],
body.aaa-brand .wpcf7 input[type="tel"],
body.aaa-brand .wpcf7 input[type="search"],
body.aaa-brand .wpcf7 select,
body.aaa-brand .wpcf7 textarea,
body.aaa-brand .gform_wrapper input[type="text"],
body.aaa-brand .gform_wrapper input[type="email"],
body.aaa-brand .gform_wrapper input[type="tel"],
body.aaa-brand .gform_wrapper input[type="search"],
body.aaa-brand .gform_wrapper select,
body.aaa-brand .gform_wrapper textarea,
body.aaa-brand .comment-form input[type="text"],
body.aaa-brand .comment-form input[type="email"],
body.aaa-brand .comment-form input[type="url"],
body.aaa-brand .comment-form input[type="search"],
body.aaa-brand .comment-form textarea {
  min-height: 48px; padding: 12px 14px;
  border: 1px solid #C9CFD3; border-radius: 0; box-shadow: none;
  background: var(--aa-white); color: var(--aa-ink);
  font: 400 16px/1.4 var(--aa-sans);
}
body.aaa-brand .aa-content textarea,
body.aaa-brand #EligibilityForm textarea,
body.aaa-brand .fluentform textarea,
body.aaa-brand .wpcf7 textarea,
body.aaa-brand .gform_wrapper textarea,
body.aaa-brand .comment-form textarea { min-height: 140px; }

body.aaa-brand .aa-content form label,
body.aaa-brand #EligibilityForm label,
body.aaa-brand .fluentform label,
body.aaa-brand .wpcf7 label,
body.aaa-brand .gform_wrapper label,
body.aaa-brand .comment-form label {
  font: 700 14px/1.3 var(--aa-sans); color: var(--aa-navy);
}

body.aaa-brand .aa-content input[type="submit"],
body.aaa-brand .aa-content button[type="submit"],
body.aaa-brand #EligibilityForm input[type="submit"],
body.aaa-brand #EligibilityForm button[type="submit"],
body.aaa-brand .fluentform .ff-btn-submit,
body.aaa-brand .fluentform input[type="submit"],
body.aaa-brand .fluentform button[type="submit"],
body.aaa-brand .wpcf7 input[type="submit"],
body.aaa-brand .gform_wrapper input[type="submit"],
body.aaa-brand .comment-form .submit {
  min-height: 48px; padding: 14px 26px;
  border: 0; border-radius: 0;
  background: var(--aa-navy); color: var(--aa-white);
  font: 700 15px/1.2 var(--aa-sans); cursor: pointer;
}
body.aaa-brand .aa-content input[type="submit"]:hover,
body.aaa-brand .aa-content input[type="submit"]:focus,
body.aaa-brand #EligibilityForm input[type="submit"]:hover,
body.aaa-brand #EligibilityForm input[type="submit"]:focus,
body.aaa-brand .fluentform .ff-btn-submit:hover,
body.aaa-brand .fluentform .ff-btn-submit:focus,
body.aaa-brand .fluentform input[type="submit"]:hover,
body.aaa-brand .fluentform input[type="submit"]:focus,
body.aaa-brand .wpcf7 input[type="submit"]:hover,
body.aaa-brand .wpcf7 input[type="submit"]:focus,
body.aaa-brand .gform_wrapper input[type="submit"]:hover,
body.aaa-brand .gform_wrapper input[type="submit"]:focus,
body.aaa-brand .comment-form .submit:hover,
body.aaa-brand .comment-form .submit:focus {
  background: #00253d; color: var(--aa-white);
}

/* Ninja Tables (future-facing). */
body.aaa-brand .ninja_table_wrapper table thead th {
  background: var(--aa-navy); color: var(--aa-white);
  font-family: var(--aa-sans); font-weight: 700;
}
body.aaa-brand .ninja_table_wrapper table tbody tr:nth-child(even) td { background: var(--aa-band); }

/* Envira galleries and MetaSlider (future-facing where absent). */
body.aaa-brand .envira-gallery-item img,
body.aaa-brand .envira-gallery-image { border-radius: 0; }
body.aaa-brand .envira-album-caption { font-family: var(--aa-sans); }
body.aaa-brand .metaslider .flexslider { border-radius: 0; }
body.aaa-brand .metaslider .caption { font-family: var(--aa-sans); }

/* Wide tables scroll inside the reading column rather than forcing the page
   to overflow. */
body.aaa-brand .aa-content table,
body.aaa-brand .ninja_table_wrapper { display: block; max-width: 100%; overflow-x: auto; }

/* FAQ Concertina (/contact/faq/). The page ships inline slate rules
   (#616d7e / #e5e4e2); body.aaa-brand specificity keeps them overridden. */
body.aaa-brand .faq_item {
  background: #fff;
  border: 1px solid var(--aa-line);
}
body.aaa-brand .faq_q {
  background: var(--aa-navy);
  color: #fff;
  padding: 14px 18px;
  font: 700 16px/1.4 var(--aa-sans);
}
body.aaa-brand .faq_q:hover,
body.aaa-brand .faq_q:focus-visible,
body.aaa-brand .faq_q[aria-expanded="true"],
body.aaa-brand .faq_q.faq_is_open {
  background: var(--aa-teal);
  color: #fff;
}
body.aaa-brand .faq_q:before { border-color: currentColor; }
body.aaa-brand .faq_a { color: var(--aa-navy); }
body.aaa-brand .faq_a_content { background: #fff; color: var(--aa-navy); }

/* Long <option> labels (the legacy alumni registration country and
   institution selects) forced the page 66px wider than a 390px viewport.
   Keep content selects inside their column and let the browser truncate the
   closed control. */
body.aaa-brand #countries,
body.aaa-brand #university,
body.aaa-brand #scholar_type,
body.aaa-brand .aa-content select,
body.aaa-brand .entry-content select,
body.aaa-brand #alumni_loggedinform select,
body.aaa-brand #EligibilityForm select {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Final accessibility overrides (axe retry).

   Legacy content and page-builder output still carry inline colours and
   plugin styles that out-specify (or are emitted after) the brand layer.
   These rules are deliberately narrow: each one targets a colour or control
   that the retry flagged, and inline declarations only win where the legacy
   markup uses a style attribute (hence !important).
   -------------------------------------------------------------------------- */

/* Legacy #7a7a7a copy is 4.29:1 on white. Brand grey-dark is 6.0:1. The
   `font[color]` attribute and the equivalent inline style are both in use,
   in the child reading column, parent entry content and Elementor widgets. */
body.aaa-brand .aa-content font[color="#7a7a7a"],
body.aaa-brand .aa-content [style*="color: #7a7a7a"],
body.aaa-brand .aa-content [style*="color:#7a7a7a"],
body.aaa-brand .entry-content font[color="#7a7a7a"],
body.aaa-brand .entry-content [style*="color: #7a7a7a"],
body.aaa-brand .entry-content [style*="color:#7a7a7a"],
body.aaa-brand .elementor-widget-text-editor font[color="#7a7a7a"],
body.aaa-brand .elementor-widget-text-editor [style*="color: #7a7a7a"],
body.aaa-brand .elementor-widget-text-editor [style*="color:#7a7a7a"] {
  color: var(--aa-grey-dark) !important;
}

/* Legacy cyan #00ccff is 2.08:1 on white. Brand teal keeps the emphasis at
   5.23:1 (and matches the rest of the theme's link/accent colour). */
body.aaa-brand .aa-content font[color="#00ccff"],
body.aaa-brand .aa-content [style*="color: #00ccff"],
body.aaa-brand .aa-content [style*="color:#00ccff"],
body.aaa-brand .entry-content font[color="#00ccff"],
body.aaa-brand .entry-content [style*="color: #00ccff"],
body.aaa-brand .entry-content [style*="color:#00ccff"],
body.aaa-brand .elementor-widget-text-editor font[color="#00ccff"],
body.aaa-brand .elementor-widget-text-editor [style*="color: #00ccff"],
body.aaa-brand .elementor-widget-text-editor [style*="color:#00ccff"] {
  color: var(--aa-teal) !important;
}

/* Legacy article call-outs. The content ships `.highlight-box` with a
   #004d7a background, but `body.aaa-brand h3` out-specifies `.highlight-box
   h3`, leaving navy headings on the dark panel (1.5:1). Re-assert the brand
   navy surface and white copy for every heading level and paragraph. */
body.aaa-brand .highlight-box {
  background: var(--aa-navy) !important;
}
body.aaa-brand .highlight-box h1,
body.aaa-brand .highlight-box h2,
body.aaa-brand .highlight-box h3,
body.aaa-brand .highlight-box h4,
body.aaa-brand .highlight-box p {
  color: var(--aa-white);
}

/* Ajax Load More. The plugin renders a bare button, so it inherits the
   parent's #787878 body copy (4.41:1 on white). Give it a brand surface,
   navy label and the hairline border used by the theme's own controls. */
body.aaa-brand .alm-load-more-btn {
  background: var(--aa-white);
  color: var(--aa-navy);
  border: 1px solid var(--aa-line);
}
body.aaa-brand .alm-load-more-btn:hover,
body.aaa-brand .alm-load-more-btn:focus,
body.aaa-brand .alm-load-more-btn:focus-visible {
  background: var(--aa-navy);
  color: var(--aa-white);
  border-color: var(--aa-navy);
}

/* Elementor buttons. The builder emits per-element colours with a
   higher-specificity stylesheet, which left teal labels on aqua fills
   (2.18:1). !important is required to keep the brand navy/white pair; the
   theme's own `.aa-btn` CTAs are not Elementor and are unaffected. */
body.aaa-brand .elementor-button {
  background: var(--aa-navy) !important;
  color: #fff !important;
}
body.aaa-brand .elementor-button .elementor-button-text {
  color: #fff !important;
}
body.aaa-brand .elementor-button:hover,
body.aaa-brand .elementor-button:focus,
body.aaa-brand .elementor-button:focus-visible,
body.aaa-brand .elementor-button:active {
  background: #00253d !important;
  color: #fff !important;
}
body.aaa-brand .elementor-button:hover .elementor-button-text,
body.aaa-brand .elementor-button:focus .elementor-button-text,
body.aaa-brand .elementor-button:focus-visible .elementor-button-text,
body.aaa-brand .elementor-button:active .elementor-button-text {
  color: #fff !important;
}

/* Placeholders. The parent theme inherits a light grey placeholder and
   reduces its opacity, which falls below 4.5:1. */
body.aaa-brand input::placeholder,
body.aaa-brand textarea::placeholder {
  color: var(--aa-grey-dark);
  opacity: 1;
}
body.aaa-brand input::-webkit-input-placeholder,
body.aaa-brand textarea::-webkit-input-placeholder {
  color: var(--aa-grey-dark);
  opacity: 1;
}
body.aaa-brand input::-moz-placeholder,
body.aaa-brand textarea::-moz-placeholder {
  color: var(--aa-grey-dark);
  opacity: 1;
}

/* The legacy alumni registration form is parent-template markup, so the
   `.aa-content` form rules above do not reach it. Its text inputs inherit
   #ccc and its selects #787878 (1.6:1 and 3.83:1) — reset both to brand ink
   on white. */
body.aaa-brand #alumni_loggedinform input[type="text"],
body.aaa-brand #alumni_loggedinform input[type="email"],
body.aaa-brand #alumni_loggedinform input[type="tel"],
body.aaa-brand #alumni_loggedinform select,
body.aaa-brand #alumni_loggedinform textarea {
  color: var(--aa-ink);
  background-color: var(--aa-white);
}