/* ==========================================================================
   AC MEGA NAV — hover/focus dropdown panels under the desktop header nav
   (2026-09-10)
   ==========================================================================
   Markup: parts/header.html. One .ac-mega panel per section that has one
   (firm, capabilities, industries, insights). "Free Build" is a single page
   and deliberately has no panel.

   LIGHT PANEL ON A DARK BAR
   The card is the site's light surface (--lt-surface) with --lt-ink type,
   hanging off a pill that is dark on most pages and light on the homepage
   past the hero. It reads as the same object in both places because it
   carries its own border and shadow rather than borrowing the pill's.

   The --lt-* tokens are declared in ac-homepage-light.css, which loads on the
   front page and the five location templates ONLY. The header is site-wide,
   so every token here is written var(--lt-x, <the same value>) — the token
   when the page has it, an identical literal everywhere else. Retuning the
   light system moves those six pages; the rest hold at the fallback.

   WHY THE PANELS ARE NESTED INSIDE THEIR <li>
   Tab order. A panel parked after </nav> would put its links behind the CTA
   and the hamburger, so a keyboard user tabbing off "CAPABILITIES" would land
   on "INDUSTRIES" and meet the capability links several stops later, out of
   context. Nested, the DOM order IS the reading order and no focus management
   is needed: the closed panel is visibility:hidden, so its links are not
   focusable at all until the trigger opens it.

   THE COST, AND WHERE IT IS PAID — §0 below
   Nesting puts every panel link inside `.ac-nav__list a`, which is 16px/600
   uppercase WHITE. White ink on a white card is invisible, so §0 is not
   cosmetic — without it the panels ship blank on every page but the homepage.
   Each panel-link rule carries a `.ac-nav__list` prefix to match (0,2,0) and
   win on cascade order, and ac-homepage-light.css's past-hero ink flip, which
   is !important at (0,5,1), gets an explicit answer at (0,6,1).

   TYPE
   Inter throughout (--font-primary), because a nav panel is UI chrome, not
   reading text. ac-typography.css enforces that for `.ac-nav__list a` already;
   the eyebrows are <p>, which that file would otherwise hand to Source Sans 3,
   so they are classed `__eyebrow` to land in its UI-chrome selector list
   instead of its `p, li` one. Link rows sit at 1.05rem against the footer's
   1.1rem link columns — the same family of list, one notch tighter.

   POSITIONING
   `left` is written by JS (initMegaNav in parts/header.html): the panel is
   centred under its trigger, then clamped to the pill's padding box so a wide
   panel near the right edge cannot overhang the CTA. The <li> is left static
   on purpose, so .ac-header-pill (position:relative) stays the containing
   block and `max-width:100%` means "no wider than the pill".

   The maths is done in offsetLeft/offsetWidth — CSS px — never
   getBoundingClientRect, because body{zoom:0.80} makes rects device px and
   mixing the two mis-clamps silently. That zoom also means every px and rem
   here renders at 0.8x: 1.05rem is 16.8 CSS px and about 13.4 on screen.

   HOVER BRIDGE
   The panel's top edge sits at `top:100%` — flush with the pill's bottom edge
   — and the visible card is inset by --ac-mega-gap of transparent padding. So
   the visual gap costs no hover continuity: the pointer never crosses dead
   space between the nav row and the card.

   MOBILE
   .ac-nav is display:none below 769px and the drill-down mobile menu in
   parts/header.html takes over. The panels are inside .ac-nav, so that rule
   already hides them; the media query at the bottom is belt and braces and
   the script refuses to wire anything below that width.
   ========================================================================== */

:root {
  --ac-mega-gap: 12px;        /* transparent bridge between pill and card */
  --ac-mega-pad: 26px;
  --ac-mega-col: 272px;
  --ac-mega-col-wide: 340px;  /* columns whose rows carry a description */
}

/* --------------------------------------------------------------------------
   §0 UNDO THE NAV-LINK INHERITANCE
   Everything a panel link must NOT inherit from `.ac-nav__list a` — the white
   ink above all. Matched at (0,2,0) and later in the cascade, so it wins
   without !important; the exception is the homepage past-hero flip, which is
   !important at (0,5,1) and needs an !important answer at (0,6,1).
   -------------------------------------------------------------------------- */
.ac-nav__list .ac-mega__link,
.ac-nav__list .ac-mega__all {
  font-family: var(--font-primary);
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  opacity: 1;
}

body.ac-homepage .ac-header-wrap.past-hero .ac-nav__list .ac-mega__link {
  color: var(--lt-ink, #08222E) !important;
}

body.ac-homepage .ac-header-wrap.past-hero .ac-nav__list .ac-mega__all,
body.ac-homepage .ac-header-wrap.past-hero .ac-nav__list .ac-mega__all:hover,
body.ac-homepage .ac-header-wrap.past-hero .ac-nav__list .ac-mega__all:focus-visible {
  color: var(--lt-brand-ink, #0B6F88) !important;
}

/* --------------------------------------------------------------------------
   §1 PANEL SHELL
   -------------------------------------------------------------------------- */
.ac-nav__item {
  position: static; /* keep .ac-header-pill as the panel's containing block */
}

.ac-mega {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: 100%;
  padding-top: var(--ac-mega-gap);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease,
              transform 0.18s ease,
              visibility 0s linear 0.18s;
}

/* Pre-JS / no-JS state. initMegaNav strips the attribute once it has wired
   the triggers, so a script failure leaves the panels out of the document
   rather than stranded open. */
.ac-mega[hidden] {
  display: none !important;
}

.ac-mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.18s ease,
              transform 0.18s ease,
              visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .ac-mega,
  .ac-mega.is-open {
    transition: none;
    transform: none;
  }
}

/* No backdrop-filter: the card is opaque, so blurring what is behind it is
   paint cost for nothing. The border does the work on the homepage past the
   hero, where a white card meets a white pill. */
.ac-mega__inner {
  display: flex;
  flex-direction: column;
  padding: var(--ac-mega-pad);
  border-radius: var(--ac-r-xl, 16px);
  background: var(--lt-surface, #FFFFFF);
  border: 1px solid var(--lt-border, rgba(9, 32, 42, 0.10));
  box-shadow: 0 22px 60px rgba(4, 20, 28, 0.28),
              0 2px 8px rgba(4, 20, 28, 0.08);
}

/* --------------------------------------------------------------------------
   §2 COLUMNS AND ROWS
   -------------------------------------------------------------------------- */
.ac-mega__cols {
  display: flex;
  gap: 28px;
}

.ac-mega__col {
  width: var(--ac-mega-col);
  flex: 0 0 auto;
}

/* Rows that carry a description need the extra measure. */
.ac-mega__col--wide {
  width: var(--ac-mega-col-wide);
}

/* One eyebrow over a list that splits itself into two tracks — used where the
   items resist being grouped into two honestly-named columns. */
.ac-mega__col--auto {
  width: auto;
}

/* Classed __eyebrow, not __label, so ac-typography.css hands it the Inter UI
   face rather than the Source Sans 3 it gives every other <p>. */
.ac-mega__eyebrow {
  margin: 0 0 10px;
  padding: 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lt-brand-ink, #0B6F88);
}

.ac-mega__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ac-mega__list--2col {
  display: grid;
  grid-template-columns: repeat(2, var(--ac-mega-col));
  column-gap: 28px;
  row-gap: 1px;
}

.ac-nav__list .ac-mega__link {
  display: block;
  padding: 10px 12px;
  border-radius: var(--ac-r-sm, 8px);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lt-ink, #08222E);
  text-decoration: none;
  background: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.ac-nav__list .ac-mega__link:hover,
.ac-nav__list .ac-mega__link:focus-visible {
  background: var(--lt-tint, #E9F3F7);
  color: var(--lt-brand-ink, #0B6F88);
}

.ac-nav__list .ac-mega__link:focus-visible {
  outline: 2px solid var(--lt-brand-ink, #0B6F88);
  outline-offset: 1px;
}

/* Full ink at a smaller size and lighter weight rather than a grey: the light
   system deliberately darkened --lt-ink-soft / --lt-muted to the primary ink
   so no greyish text remains anywhere on white (a11y pass 2026-08-03). The
   hierarchy here is size and weight, not colour. */
.ac-mega__desc {
  display: block;
  margin-top: 3px;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--lt-ink-soft, #08222E);
}

/* --------------------------------------------------------------------------
   §3 FOOT — one closing row per panel
   -------------------------------------------------------------------------- */
.ac-mega__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--lt-border, rgba(9, 32, 42, 0.10));
}

.ac-nav__list .ac-mega__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--ac-r-sm, 8px);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lt-brand-ink, #0B6F88);
  text-decoration: none;
  background: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.ac-nav__list .ac-mega__all:hover,
.ac-nav__list .ac-mega__all:focus-visible {
  background: var(--lt-tint, #E9F3F7);
  color: var(--lt-ink, #08222E);
}

.ac-nav__list .ac-mega__all:focus-visible {
  outline: 2px solid var(--lt-brand-ink, #0B6F88);
  outline-offset: 1px;
}

.ac-mega__all svg {
  display: block;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

.ac-nav__list .ac-mega__all:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   §4 TRIGGER STATE
   The chevron is a child of the nav link, so it inherits currentColor and
   follows the homepage's past-hero ink flip for free.
   -------------------------------------------------------------------------- */
.ac-nav__list a[aria-expanded] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ac-nav__chev {
  display: block;
  flex: 0 0 auto;
  opacity: 0.75;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.ac-nav__list a[aria-expanded="true"] .ac-nav__chev {
  transform: rotate(180deg);
  opacity: 1;
}

.ac-nav__list a[aria-expanded="true"]:not(.active) {
  background: rgba(7, 169, 209, 0.16);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   §5 PILL GLASS WHILE A PANEL IS OPEN

   At scroll-top the pill drops its background (ac-site-system.css, "State
   A0"), which would leave a solid card hanging off an invisible bar. This
   restores the glass for as long as a panel is open.

   The rule it has to beat is
     body .ac-header-wrap:not(.scrolled):not(.past-hero)
          .ac-header-pill:not(:has(.ac-hamburger.active))
   at (0,6,1) with !important, so this selector is padded to the same (0,6,1)
   and wins on cascade order — this file is enqueued at priority 103, after
   ac-site-system (101) and ac-radius-system (102).

   :not(.past-hero) so the homepage's light nav past the hero is left alone;
   it is already opaque there and a navy tint would erase its dark ink.
   -------------------------------------------------------------------------- */
body .ac-header-wrap.ac-mega-open:not(.past-hero) .ac-header-pill:not(:has(.ac-hamburger.active)) {
  background: var(--ac-nav-glass) !important;
  -webkit-backdrop-filter: var(--ac-nav-glass-filter) !important;
          backdrop-filter: var(--ac-nav-glass-filter) !important;
  box-shadow: var(--ac-nav-glass-shadow) !important;
}

/* --------------------------------------------------------------------------
   §6 NARROW DESKTOP / TABLET
   Gutters step to 3rem at 1200px and the pill narrows with them. Capabilities
   is the widest panel (three columns); trim the column, the type and the
   padding so it still clears the pill at the 769px floor, where the pill is
   about 905 CSS px and the panel comes to 3*230 + 2*20 + 2*20 = 770.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1200px) {
  :root {
    --ac-mega-pad: 20px;
    --ac-mega-col: 230px;
    --ac-mega-col-wide: 285px;
  }

  .ac-mega__cols {
    gap: 20px;
  }

  .ac-mega__list--2col {
    column-gap: 20px;
  }

  .ac-nav__list .ac-mega__link {
    font-size: 1rem;
    padding: 9px 10px;
  }

  .ac-mega__desc {
    font-size: 0.875rem;
  }
}

/* Phones use the drill-down mobile menu; .ac-nav is display:none there. */
@media (max-width: 768px) {
  .ac-mega {
    display: none !important;
  }
}