/* Mobile nav chrome for pages that do not inline their own.

   WHY THIS FILE EXISTS. The eight hand written pages each paste these rules
   into their own <style> block, and the nav markup is emitted by the two
   generators. The legal pages therefore shipped the markup with none of the
   styling: a permanently open, unstyled list of run-together links stacked
   under the header, next to an OS-grey button that did nothing. On a phone,
   where shared.css hides .nav-links below 820px, that broken list was the only
   navigation those pages had. Legal pages are what an institution's counsel
   opens first.

   Light surface values, matching contact/ and privacy/. The dark hero pages
   keep their own inline overrides and must NOT load this file. */

.nav-toggle{
  display:none;background:transparent;border:0;cursor:pointer;padding:11px;
  color:var(--ink-900);align-items:center;justify-content:center;border-radius:4px;
  /* 44px minimum. At 8px padding around a 22px icon this was 38px, under the
     floor, on the one control that is the only navigation on a phone. */
  min-width:44px;min-height:44px;
}
.nav-toggle:hover{background:var(--ink-50)}
.nav-toggle:focus-visible{outline:var(--focus-outline);outline-offset:var(--focus-outline-offset)}
.nav-toggle svg{width:22px;height:22px;display:block}

.nav-mobile{display:none;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--border);box-shadow:var(--shadow-2)}
.nav-mobile.open{display:flex}
.nav-mobile a{padding:14px 32px;font-size:14px;color:var(--fg-2);font-weight:500;border-top:1px solid var(--border);text-decoration:none}
.nav-mobile a:first-child{border-top:0}
.nav-mobile a:hover{color:var(--ink-900);background:var(--white)}
.nav-mobile a:focus-visible{outline:var(--focus-outline);outline-offset:-2px}
.nav-mobile a.active{color:var(--ink-900);font-weight:600;background:rgba(55,190,176,.10)}
.nav-mobile .nav-waitlist-m{margin:12px 24px 16px;border-top:0;background:var(--accent);color:var(--accent-ink);text-align:center;border-radius:4px;padding:12px 16px;font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase}

@media (max-width:820px){.nav-toggle{display:inline-flex}}