/* Main menu and header button (MB-29, from Alexander Group AG-3), Views/Partials/site/header-menu.cshtml. Loaded only on
   pages whose header shows them. Tokens only; plain like the rest of the starter (a project restyles it). Phone first:
   below 992 px the menu is a drawer opened by the Menu button (js/site/menu.js adds .is-ready); without script the menu
   is a wrapped list and drop-downs open on hover or keyboard focus. Below 600 px the header button moves into the drawer
   (MB-76). MB-113's options (pointing, wide drawer, sliding panels, phone numbers, cards, pages under each link) are at
   the end; each keys on its own class, so a menu without them looks exactly as before. */
.site-header--menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 12px) var(--space-6, 24px);
}
.site-header--menu .site-header__name { margin-right: auto; }

.site-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 12px) var(--space-6, 24px);
}

.site-nav__list,
.site-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px) var(--space-4, 16px);
}
.site-nav__item { position: relative; }

.site-nav__link,
.site-nav__sublink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-height: var(--tap-min, 44px);
  padding: 0 var(--space-1, 4px);
  color: var(--color-text, #111111);
  font: inherit;
  font-weight: var(--fw-semibold, 600);
  text-decoration: none;
}
.site-nav__link:hover,
.site-nav__sublink:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.site-nav__item.is-current > .site-nav__link,
.site-nav__sublink[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

.site-nav__toggle {
  border: 0;
  background: none;
  cursor: pointer;
}
.site-nav__chevron { flex: none; transition: transform var(--motion-fast, 0.2s) var(--motion-ease, ease); }
.site-nav__toggle[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }

/* Drop-down list: under its item. Without script it opens on hover or keyboard focus; with script on click only. */
.site-nav__sub {
  display: none;
  min-width: 14rem;
  padding: var(--space-2, 8px) 0;
  background: var(--color-page, #ffffff);
  border: var(--border-width, 1px) solid var(--color-hairline, #d0d0d0);
  border-radius: var(--radius-sm, 4px);
}
.site-nav__sublink {
  display: flex;
  padding: 0 var(--space-4, 16px);
  font-weight: var(--fw-regular, 400);
}
.site-nav__item--parent:hover > .site-nav__sub,
.site-nav__item--parent:focus-within > .site-nav__sub {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
}
.site-menu.is-ready .site-nav__parent-link { display: none; }
.site-menu.is-ready .site-nav__item--parent:hover > .site-nav__sub,
.site-menu.is-ready .site-nav__item--parent:focus-within > .site-nav__sub { display: none; }
.site-menu.is-ready .site-nav__item--parent.is-open > .site-nav__sub { display: block; }

/* Menu button (phones and tablets, with script). */
.site-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-height: var(--tap-min, 44px);
  padding: 0 var(--space-3, 12px);
  border: var(--border-width, 1px) solid var(--color-border, #4a4a4a);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-page, #ffffff);
  color: var(--color-text, #111111);
  font: inherit;
  font-weight: var(--fw-semibold, 600);
  cursor: pointer;
}
.site-menu__toggle[hidden],
.site-nav__toggle[hidden] { display: none; }
.site-menu__bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.site-menu__bars span { display: block; height: 2px; background: currentColor; }

@media (max-width: 991.98px) {
  .site-menu.is-ready .site-nav {
    display: none;
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 2000; /* above the cookie banner and announcement bar while open */
    width: min(22rem, 86vw);
    overflow-y: auto;
    padding: calc(var(--tap-min, 44px) + var(--space-8, 32px)) var(--space-6, 24px) var(--space-6, 24px);
    background: var(--color-page, #ffffff);
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.45);
  }
  .site-menu.is-drawer-open .site-nav { display: block; }
  .site-menu.is-drawer-open .site-menu__toggle { position: fixed; top: var(--space-4, 16px); right: var(--space-4, 16px); z-index: 2001; }
  .site-menu.is-ready .site-nav__list { flex-direction: column; gap: 0; }
  .site-menu.is-ready .site-nav__link { width: 100%; justify-content: space-between; text-align: start; } /* a wrapped name in a button stays left (UX-MB-113 U2) */
  .site-menu.is-ready .site-nav__item--parent.is-open > .site-nav__sub {
    position: static;
    border: 0;
    padding: 0 0 var(--space-2, 8px) var(--space-3, 12px);
  }
}
@media (min-width: 992px) {
  .site-menu__toggle { display: none; }
  .site-menu__toggle:not([hidden]) { display: none; }
  .site-menu.is-ready .site-nav__item--parent.is-open > .site-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav__chevron { transition: none; }
}

/* Header button in the phone drawer (MB-76, from Boyd's phone menu). The drawer holds a copy of the header button
   (header-menu.cshtml), full width at the bottom in the main button's look. Below 600 px, with script, the header shows
   only the site name and the Menu button and the button is reached in the drawer; from 600 px, and without script, the
   copy is hidden and the header button stays in the header as before. */
.site-menu .site-nav__button { display: none; }
@media (max-width: 599.98px) {
  .site-menu--drawer-button.is-ready > .site-menu__button { display: none; }
  .site-menu--drawer-button.is-ready .site-nav__button {
    display: flex;
    width: 100%;
    margin-top: var(--space-6, 24px);
  }
}

/* Menu panel (MB-32, #136, from Boyd's mega menu, in master's plain look): a menu item with an intro or a photo opens its
   drop-down as a wide panel under the whole header from 992 px: intro (item name and one line), the links, the photo.
   In the phone drawer and without script it is the plain list: intro and photo hidden. */
.site-nav__panel-intro,
.site-nav__panel-photo { display: none; }
.site-nav__panel-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 992px) {
  .site-header--menu { position: relative; }
  .site-menu.is-ready .site-nav__item--panel { position: static; }
  .site-menu.is-ready .site-nav__item--panel.is-open > .site-nav__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6, 24px) var(--space-8, 32px);
    position: absolute;
    top: 100%;
    left: var(--space-4, 16px);
    right: var(--space-4, 16px);
    z-index: 50;
    padding: var(--space-8, 32px);
  }
  .site-menu.is-ready .site-nav__item--panel.is-open > .site-nav__panel--no-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .site-menu.is-ready .site-nav__panel-intro { display: block; }
  .site-menu.is-ready .site-nav__panel-photo { display: block; }
  .site-nav__panel-title {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--fs-h4, 1.125rem);
    font-weight: var(--fw-semibold, 600);
    line-height: var(--lh-heading, 1.2);
  }
  .site-nav__panel-text {
    margin: 0;
    color: var(--color-muted, #4a4a4a);
    line-height: var(--lh-body, 1.5);
  }
  .site-nav__panel .site-nav__sublink { padding: 0; }
  .site-nav__panel-photo { overflow: hidden; border-radius: var(--radius-media, 8px); }
  .site-nav__panel-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* MB-113 (#135, from an imported site's big drop-down; header-menu.cshtml, menu.js). Every rule keys on an option's class or on
   markup only an option writes, so a menu without them is exactly as before. menu.js sets .is-drawer while the drawer is
   in use (below 992 px, or below 1200 px with site-menu--wide-drawer). */
.site-nav__back-item,
.site-nav__cards,
.site-nav__phones { display: none; }

/* Phone numbers in the header (site-menu--phones): beside the menu; in the drawer a copy at the bottom; up to 550 px, with
   script, only in the drawer (as the imported site, from 550 px down). */
.site-menu__phones,
.site-nav__phones {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-menu__phones {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4, 16px);
}
.site-menu--phones.is-drawer .site-menu__phones { order: -1; }
.site-menu__phone,
.site-nav__phone {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  color: var(--color-text, #111111);
  font-weight: var(--fw-semibold, 600);
  text-decoration: none;
}
a.site-menu__phone:hover,
a.site-nav__phone:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.site-menu--phones.is-ready.is-drawer .site-nav__phones { display: block; margin-top: var(--space-6, 24px); }
@media (max-width: 550px) {
  .site-menu--phones.is-ready > .site-menu__phones { display: none; }
}

/* Open drop-downs when pointed at (site-menu--hover), computers: the item's words are a link again and the arrow beside
   them is the button (its words kept for screen readers); the drop-down has no overview link and opens and closes at once
   (menu.js); the arrow doesn't turn; ::before bridges the gap down to the drop-down (menu.js measures it). */
.site-menu--hover.is-ready:not(.is-drawer) .site-nav__item--parent { display: flex; align-items: center; }
.site-menu--hover.is-ready:not(.is-drawer) .site-nav__item--parent > .site-nav__parent-link { display: inline-flex; }
.site-menu--hover.is-ready:not(.is-drawer) .site-nav__subitem > .site-nav__parent-link { flex: 1 1 auto; }
/* The arrow's tap area reaches 12 px into the gap after it (30 x 44 px, WCAG 2.5.8) with a matching negative margin, so
   nothing moves (UX-MB-113 U1). */
.site-menu--hover.is-ready:not(.is-drawer) .site-nav__item--parent > .site-nav__toggle {
  flex: none;
  width: auto;
  margin-right: calc(-1 * var(--space-3, 12px));
  padding: 0 calc(var(--space-1, 4px) + var(--space-3, 12px)) 0 var(--space-1, 4px);
}
.site-menu--hover.is-ready:not(.is-drawer) .site-nav__toggle-words {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.site-menu--hover.is-ready:not(.is-drawer) .site-nav__overview { display: none; }
.site-menu--hover.is-ready:not(.is-drawer) .site-nav__toggle[aria-expanded="true"] .site-nav__chevron { transform: none; }
.site-menu--hover.is-ready:not(.is-drawer) .site-nav__item--parent.is-open > .site-nav__sub::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--site-nav-bridge, 0px);
}

/* Pages under each drop-down link (site-nav__subitem): on computers a flyout beside the drop-down, level with its top; in
   the drawer a nested list under the link (or a further panel with site-menu--slide). */
.site-menu.is-ready:not(.is-drawer) .site-nav__subitem > .site-nav__toggle .site-nav__chevron,
.site-menu.is-ready:not(.is-drawer) .site-nav__subitem > .site-nav__toggle[aria-expanded="true"] .site-nav__chevron { transform: rotate(-90deg); }
.site-menu.is-ready:not(.is-drawer) .site-nav__sub:not(.site-nav__panel) > .site-nav__subitem { position: static; }
.site-menu.is-ready:not(.is-drawer) .site-nav__sub .site-nav__subitem.is-open > .site-nav__sub {
  top: calc(-1 * var(--border-width, 1px));
  left: 100%;
  width: max-content;
  max-width: min(44rem, 60vw);
}
.site-menu.is-ready:not(.is-drawer) .site-nav__panel .site-nav__subitem.is-open > .site-nav__sub { top: 0; }
.site-nav__subitem > .site-nav__toggle { width: 100%; justify-content: space-between; }

/* Show the pages as cards (site-nav__panel--cards), computers: the panel shows its intro (if any), the overview link
   (not when pointing opens it) and a row of cards: the page's card image, its name and "Learn more". The drawer keeps the
   plain list. */
.site-menu.is-ready:not(.is-drawer) .site-nav__item--panel.is-open > .site-nav__panel--cards { display: block; }
.site-menu.is-ready:not(.is-drawer) .site-nav__panel--cards .site-nav__panel-intro { margin-bottom: var(--space-6, 24px); }
.site-menu.is-ready:not(.is-drawer) .site-nav__panel--cards .site-nav__panel-links > li:not(.site-nav__overview) { display: none; }
.site-menu.is-ready:not(.is-drawer) .site-nav__panel--cards .site-nav__panel-links { margin-bottom: var(--space-4, 16px); }
.site-menu.is-ready:not(.is-drawer) .site-nav__panel--cards .site-nav__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  color: var(--color-text, #111111);
  text-decoration: none;
}
.site-nav__card-photo {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-media, 8px);
  background: var(--color-hairline, #d0d0d0);
}
.site-nav__card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.site-nav__card-name {
  font-size: var(--fs-h4, 1.125rem);
  font-weight: var(--fw-semibold, 600);
  line-height: var(--lh-heading, 1.2);
}
.site-nav__card-more { color: var(--color-muted, #4a4a4a); }
.site-nav__card:hover .site-nav__card-more { text-decoration: underline; text-underline-offset: 0.2em; }

/* Where the menu button starts: 1200 px (site-menu--wide-drawer): from 992 to 1199 px the drawer rules above,
   repeated for .is-drawer, and the computer-only panel rules undone. */
.site-menu--wide-drawer.is-ready.is-drawer .site-nav {
  display: none;
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 2000;
  width: min(22rem, 86vw);
  overflow-y: auto;
  padding: calc(var(--tap-min, 44px) + var(--space-8, 32px)) var(--space-6, 24px) var(--space-6, 24px);
  background: var(--color-page, #ffffff);
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.45);
}
.site-menu--wide-drawer.is-drawer-open.is-drawer .site-nav { display: block; }
.site-menu--wide-drawer.is-drawer .site-menu__toggle:not([hidden]) { display: inline-flex; }
.site-menu--wide-drawer.is-drawer-open.is-drawer .site-menu__toggle { position: fixed; top: var(--space-4, 16px); right: var(--space-4, 16px); z-index: 2001; }
.site-menu--wide-drawer.is-ready.is-drawer .site-nav__list { flex-direction: column; gap: 0; }
.site-menu--wide-drawer.is-ready.is-drawer .site-nav__link { width: 100%; justify-content: space-between; text-align: start; }
.site-menu--wide-drawer.is-ready.is-drawer .site-nav__item--parent.is-open > .site-nav__sub {
  display: block;
  position: static;
  border: 0;
  padding: 0 0 var(--space-2, 8px) var(--space-3, 12px);
}
.site-menu--wide-drawer.is-ready.is-drawer .site-nav__item--panel { position: relative; }
.site-menu--wide-drawer.is-ready.is-drawer .site-nav__panel-intro,
.site-menu--wide-drawer.is-ready.is-drawer .site-nav__panel-photo { display: none; }
.site-menu--wide-drawer.is-ready.is-drawer .site-nav__panel .site-nav__sublink { padding: 0 var(--space-4, 16px); }

/* Phone menu: sub-menus slide in (site-menu--slide), in the drawer: a drop-down is a panel over the whole drawer that
   slides in from the right with its opacity, 0.35 s ease-in-out (as the imported site: translateX(500%) to 0, opacity 0 to 1), and
   back out the same way; Back first, the overview link shows the item's name only, arrows point right. Pages under a
   link slide in over the panel the same way. */
.site-menu--slide.is-ready.is-drawer .site-nav { overflow-x: hidden; }
.site-menu--slide.is-ready.is-drawer .site-nav__item { position: static; }
.site-menu--slide.is-ready.is-drawer .site-nav__back-item { display: block; }
.site-nav__back { border: 0; background: none; cursor: pointer; }
.site-menu--slide.is-ready.is-drawer .site-nav__overview-word { display: none; }
.site-menu--slide.is-ready.is-drawer .site-nav__toggle .site-nav__chevron,
.site-menu--slide.is-ready.is-drawer .site-nav__toggle[aria-expanded="true"] .site-nav__chevron { transform: rotate(-90deg); }
.site-menu.site-menu--slide.is-ready.is-drawer .site-nav__item--parent > .site-nav__sub {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: calc(var(--tap-min, 44px) + var(--space-8, 32px)) var(--space-6, 24px) var(--space-6, 24px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: var(--color-page, #ffffff);
  opacity: 0;
  visibility: hidden;
  transform: translateX(500%);
  transition: all 0.35s ease-in-out;
}
.site-menu.site-menu--slide.is-ready.is-drawer .site-nav__item--parent.is-open > .site-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(0%);
}
@media (prefers-reduced-motion: reduce) {
  .site-menu.site-menu--slide.is-ready.is-drawer .site-nav__item--parent > .site-nav__sub { transition: none; }
}