@primer/react-brand 0.75.2-rc.26bd444b → 0.76.0-rc.73295f51

package/esm/SubdomainNavBar/SubdomainNavBar.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubdomainNavBar.module.js","names":[],"sources":["../../src/SubdomainNavBar/SubdomainNavBar.module.css"],"sourcesContent":["/*\n * Main styles for the subdomain navigation bar.\n */\n.SubdomainNavBar {\n  --SubdomainNavBar-height: var(--base-size-64);\n\n  position: relative;\n  z-index: 90;\n  font-weight: 550;\n  background: var(--brand-color-canvas-default);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  height: var(--SubdomainNavBar-height);\n}\n\n.SubdomainNavBar::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-start: calc(100% + var(--brand-borderWidth-thin));\n  height: var(--brand-borderWidth-thin);\n  background-color: var(--brand-color-text-emphasized);\n  pointer-events: none;\n}\n\n/*\n * Outer container\n */\n.SubdomainNavBar-outer-container {\n  --SubdomainNavBar-height: var(--base-size-64);\n\n  z-index: 90;\n}\n\n@media screen and (max-width: 47.99rem) {\n  .SubdomainNavBar-outer-container {\n    --SubdomainNavBar-height: calc(var(--base-size-64) - var(--base-size-8));\n  }\n}\n\n.SubdomainNavBar-outer-container:not(.SubdomainNavBar-outer-container--fixed) {\n  position: relative;\n}\n\n.SubdomainNavBar-outer-container--fixed {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n}\n\n/*\n * Inner container\n */\n.SubdomainNavBar-inner-container {\n  display: flex;\n  padding: 4px 28px;\n}\n\n.SubdomainNavBar-inner-container--centered {\n  max-width: 1280px;\n  margin: 0 auto;\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-inner-container {\n    padding: 4px 32px;\n  }\n}\n\n.SubdomainNavBar-inner-container--search-open {\n  animation: fade-out 150ms;\n}\n\n/*\n * Logo and title area\n */\n.SubdomainNavBar-title-area {\n  display: inline-flex;\n  list-style-type: none;\n  align-items: center;\n  gap: var(--base-size-8);\n  padding: 0;\n  margin: 0;\n  max-width: 340px;\n  color: var(--brand-color-text-default);\n  padding: var(--base-size-16) 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SubdomainNavBar-title-area {\n    gap: var(--base-size-16);\n  }\n}\n\n.SubdomainNavBar-logo-mark,\n.SubdomainNavBar-title {\n  display: inline-flex;\n  align-items: center;\n  color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-logo-mark {\n  position: relative;\n}\n\n.SubdomainNavBar-back-arrow {\n  position: absolute;\n  inset-inline-start: calc(-1 * var(--base-size-24) + var(--base-size-4));\n  color: var(--brand-color-text-muted);\n  opacity: 0;\n  transform: translateX(var(--base-size-4));\n  transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast) ease;\n}\n\n.SubdomainNavBar-logo-mark:hover .SubdomainNavBar-back-arrow {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n.SubdomainNavBar-logo-mark svg {\n  width: 32px;\n  height: 32px;\n}\n\n.SubdomainNavBar-title {\n  line-height: var(--base-size-32);\n  text-decoration: none;\n  padding-right: var(--base-size-16);\n  white-space: nowrap;\n}\n\n.SubdomainNavBar-title:hover {\n  text-decoration: none;\n}\n\n.SubdomainNavBar-title-prefix {\n  color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-title-label {\n  color: var(--brand-color-text-muted);\n}\n\n.SubdomainNavBar-leading-component,\n.SubdomainNavBar-trailing-component {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.SubdomainNavBar-leading-component {\n  margin-inline-end: var(--base-size-16);\n}\n\n.SubdomainNavBar-trailing-component {\n  margin-inline-start: var(--base-size-16);\n}\n\n/*\n * Primary navigation link area\n */\n.SubdomainNavBar-primary-nav {\n  display: inline-flex;\n  list-style-type: none;\n  align-items: center;\n  flex: 1 1 0;\n  min-width: 0;\n  padding: 0;\n  margin: 0;\n}\n\n.SubdomainNavBar-primary-nav-list {\n  list-style-type: none;\n}\n\n@media screen and (max-width: 767px) {\n  .SubdomainNavBar-primary-nav-list {\n    display: none;\n  }\n\n  .SubdomainNavBar-primary-nav-list--invisible {\n    display: none;\n  }\n\n  .SubdomainNavBar-primary-nav-list--visible {\n    display: block;\n    margin: 0;\n    padding: 0;\n  }\n\n  .SubdomainNavBar-leading-component,\n  .SubdomainNavBar-trailing-component {\n    flex: none;\n    width: 100%;\n    box-sizing: border-box;\n    padding-block: var(--base-size-16);\n    padding-inline: var(--base-size-16);\n  }\n\n  .SubdomainNavBar-leading-component {\n    margin-inline-end: 0;\n  }\n\n  .SubdomainNavBar-trailing-component {\n    margin-inline-start: 0;\n  }\n\n  .SubdomainNavBar-menu-wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    overflow-y: auto;\n    position: absolute;\n    top: var(--SubdomainNavBar-height);\n    left: 0;\n    right: 0;\n    z-index: 2;\n    background-color: var(--brand-color-canvas-default);\n    width: 100%;\n    max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n    animation: fade-in-down 500ms;\n    animation-timing-function: var(--brand-animation-easing-default);\n  }\n\n  .SubdomainNavBar-menu-wrapper--close {\n    display: none;\n  }\n\n  .SubdomainNavBar-menu-wrapper-footer {\n    flex: none;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-primary-nav-overflow {\n    display: flex;\n    align-items: center;\n    flex: 1 1 0;\n    min-width: 0;\n    margin: 0 var(--base-size-24) 0 0;\n  }\n\n  .SubdomainNavBar-primary-nav-list {\n    display: flex;\n    align-items: center;\n    flex: 1 1 auto;\n    flex-wrap: nowrap;\n    min-width: 0;\n    block-size: var(--base-size-48);\n    max-block-size: var(--base-size-48);\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n  }\n}\n\n.SubdomainNavBar-primary-nav-list-item {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n@media screen and (max-width: 767px) {\n  .SubdomainNavBar-primary-nav-list-item {\n    animation-name: fade-in-down-staggered;\n    animation-duration: 500ms;\n    animation-delay: calc(var(--animation-order) * 80ms);\n    animation-fill-mode: both;\n    animation-timing-function: var(--brand-animation-easing-default);\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-primary-nav-list-item--overflowed {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  .SubdomainNavBar-primary-nav-list-item--overflow {\n    display: flex;\n    align-items: center;\n    flex: 0 0 auto;\n    position: absolute;\n    inset-inline-end: 0;\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  .SubdomainNavBar-primary-nav-overflow--has-overflow .SubdomainNavBar-primary-nav-list-item--overflow {\n    position: relative;\n    visibility: visible;\n    pointer-events: auto;\n  }\n}\n\n.SubdomainNavBar-link {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--base-size-8);\n  color: var(--brand-color-text-default);\n  font-family: var(--brand-heading-fontFamily);\n  font-weight: var(--base-text-weight-normal);\n  font-size: var(--base-size-20);\n  line-height: var(--base-size-20);\n  padding: var(--base-size-8) var(--base-size-16) var(--base-size-16) var(--base-size-28);\n  text-decoration: none;\n}\n\n.SubdomainNavBar-link:hover {\n  text-decoration: none;\n}\n\n.SubdomainNavBar-link-text {\n  position: relative;\n}\n\n.SubdomainNavBar-link-content {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-8);\n}\n\n@media screen and (max-width: 767px) {\n  .SubdomainNavBar-link:first-of-type {\n    padding-top: var(--base-size-24);\n  }\n\n  .SubdomainNavBar-link--title {\n    font-weight: var(--base-text-weight-medium);\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-link {\n    font-family: var(--brand-heading-fontFamily);\n    font-weight: var(--base-text-weight-normal);\n    font-size: var(--base-size-16);\n    line-height: var(--base-size-16);\n    padding: var(--base-size-16) var(--base-size-16);\n  }\n\n  .SubdomainNavBar-link-text::after {\n    content: '';\n    position: absolute;\n    bottom: -6px;\n    left: 0;\n    width: 100%;\n    height: 2px;\n    background-color: var(--brand-SubdomainNavBar-border-nav-default);\n    opacity: 0;\n    transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);\n    transform: scale(0);\n    transform-origin: center;\n  }\n\n  .SubdomainNavBar-link:hover .SubdomainNavBar-link-text::after,\n  .SubdomainNavBar-link:focus .SubdomainNavBar-link-text::after {\n    opacity: 1;\n    transform: scale(0.75);\n  }\n\n  .SubdomainNavBar-link:active .SubdomainNavBar-link-text::after {\n    background-color: var(--brand-SubdomainNavBar-border-nav-pressed);\n    transform: scale(0.75);\n  }\n\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {\n    transition: background-color var(--brand-animation-easing-default) 250ms;\n    background-color: var(--brand-SubdomainNavBar-canvas-overflow-default);\n    color: var(--brand-SubdomainNavBar-fg-overflow-default);\n  }\n\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link .SubdomainNavBar-link-text::after {\n    display: none;\n  }\n\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover {\n    background-color: var(--brand-SubdomainNavBar-canvas-overflow-hover);\n  }\n\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n    box-shadow: inset 0px 0px 0px 2px var(--brand-color-focus);\n    outline: none;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SubdomainNavBar-link {\n    padding: var(--base-size-16) var(--base-size-24);\n  }\n}\n\n.SubdomainNavBar-more-link {\n  display: none;\n}\n\n.SubdomainNavBar-more-link[aria-expanded='true']:hover::after,\n.SubdomainNavBar-more-link[aria-expanded='true']:focus::after {\n  display: none;\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-more-link {\n    cursor: pointer;\n    appearance: none;\n    border: none;\n    background-color: transparent;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--base-size-4);\n  }\n}\n\n.SubdomainNavBar-overflow-menu {\n  position: absolute;\n  z-index: 100;\n  right: auto;\n  background-color: var(--base-color-scale-white-0);\n  border-radius: var(--brand-borderRadius-large);\n  animation: fade-in-down 0.25s, enlarge-shadow 250ms forwards;\n  animation-timing-function: var(--brand-animation-easing-default);\n  box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n  overflow: hidden;\n}\n\n.SubdomainNavBar-overflow-menu-list {\n  display: grid;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  width: max-content;\n}\n\n/*\n * Toolbar actions area for search and mobile menu\n */\n\n.SubdomainNavBar-secondary-nav {\n  display: flex;\n  align-items: center;\n  flex: 0 1 auto;\n  min-width: 0;\n  margin-left: auto;\n}\n.SubdomainNavBar-search-trigger {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SubdomainNavBar-search-trigger {\n    --SubdomainNavBar-search-input-width: calc(var(--base-size-128) * 2 + var(--base-size-24));\n\n    flex: 0 9999 var(--SubdomainNavBar-search-input-width);\n    width: var(--SubdomainNavBar-search-input-width);\n    max-width: 100%;\n    min-width: calc(var(--base-size-128) + var(--base-size-32));\n  }\n}\n\n.SubdomainNavBar-menu-button {\n  position: relative;\n  cursor: pointer;\n  appearance: none;\n  background-color: transparent;\n  border: var(--brand-borderWidth-thick) solid transparent;\n  color: var(--brand-color-text-default);\n  width: calc(48px - var(--brand-borderWidth-thick));\n  height: calc(48px - var(--brand-borderWidth-thick));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border 250ms var(--brand-animation-easing-default), box-shadow 250ms ease;\n  border-radius: var(--brand-borderRadius-medium);\n  box-shadow: 0 0 0 2px transparent;\n  gap: 0;\n}\n\n.SubdomainNavBar-menu-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n.SubdomainNavBar-search-input-button {\n  cursor: pointer;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-16);\n  width: 100%;\n  block-size: var(--base-size-32);\n  min-block-size: var(--base-size-32);\n  padding: var(--base-size-4) var(--base-size-4) var(--base-size-4) calc(var(--base-size-8) + var(--base-size-2));\n  overflow: hidden;\n  color: var(--brand-color-text-muted);\n  background-color: var(--brand-color-canvas-subtle);\n  border: 0;\n  border-radius: var(--brand-borderRadius-medium);\n  font-family: var(--brand-body-fontFamily);\n  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n    box-shadow var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.SubdomainNavBar-search-input-button:hover {\n  box-shadow: inset 0 0 0 var(--brand-borderWidth-thin) var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-input-button:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.SubdomainNavBar-search-input-button:active {\n  box-shadow: inset 0 0 0 var(--brand-borderWidth-thin) var(--brand-color-border-default);\n}\n\n.SubdomainNavBar-search-input-button-placeholder {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  min-width: 0;\n  overflow: hidden;\n  color: var(--brand-color-text-muted);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-normal);\n  line-height: 1.2;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.SubdomainNavBar-search-input-button-placeholder svg {\n  flex: none;\n}\n\n.SubdomainNavBar-search-input-button-placeholder span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.SubdomainNavBar-search-input-button-shortcut {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  align-self: stretch;\n  min-width: var(--base-size-24);\n  padding-inline: var(--base-size-8);\n  color: var(--brand-color-text-default);\n  background-color: var(--brand-color-canvas-default);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-radius: calc(var(--brand-borderRadius-medium) / 2);\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-normal);\n  line-height: 1.6;\n}\n\n@media screen and (max-width: 47.99rem) {\n  .SubdomainNavBar-search-trigger {\n    flex: 0 0 var(--base-size-48);\n    justify-content: center;\n    width: var(--base-size-48);\n  }\n\n  .SubdomainNavBar-search-input-button {\n    justify-content: center;\n    gap: 0;\n    width: var(--base-size-32);\n    padding: var(--base-size-8);\n    background-color: transparent;\n  }\n\n  .SubdomainNavBar-search-input-button-placeholder {\n    gap: 0;\n  }\n\n  .SubdomainNavBar-search-input-button-placeholder span,\n  .SubdomainNavBar-search-input-button-shortcut {\n    display: none;\n  }\n}\n\n.SubdomainNavBar-menu-button {\n  display: inline-flex;\n  align-items: center;\n  align-self: center;\n}\n\n.SubdomainNavBar-menu-button-icon {\n  display: inline-flex;\n  flex-direction: column;\n  gap: calc(var(--base-size-4) - var(--brand-borderWidth-thin));\n}\n\n.SubdomainNavBar-menu-button-label {\n  display: none;\n}\n\n.SubdomainNavBar-menu-button-bar {\n  width: 22px;\n  height: 2px;\n  background-color: var(--brand-color-text-default);\n  margin: var(--base-size-4) auto;\n  border-radius: var(--brand-borderRadius-large);\n  display: block;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .SubdomainNavBar-menu-button-bar {\n    transition-timing-function: var(--brand-animation-easing-default);\n    transition-duration: 500ms;\n    transition-property: opacity, transform;\n  }\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n  transform-origin: bottom right;\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n  transform-origin: top right;\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n  transform: rotate(-45deg) translateY(-3px);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(2) {\n  opacity: 0;\n  transform: scale(0);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n  transform: rotate(45deg) translateY(3px);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close {\n  position: relative;\n  z-index: 3;\n  background-color: var(--brand-color-canvas-muted);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close:focus-visible {\n  outline: none;\n  box-shadow: none;\n  transition: none;\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close:focus-visible::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  border: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  inset-inline: 0;\n  inset-block-end: calc(var(--brand-borderWidth-thin) * -2);\n  height: calc(var(--brand-borderWidth-thin) * 2);\n  background-color: var(--brand-color-canvas-muted);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SubdomainNavBar-menu-button:hover {\n    background-color: transparent;\n    border: var(--brand-borderWidth-thick) solid var(--brand-SubdomainNavBar-border-button-hover);\n  }\n\n  .SubdomainNavBar-menu-button:active {\n    background-color: transparent;\n    box-shadow: 0 0 0 1px var(--brand-SubdomainNavBar-border-button-hover);\n  }\n\n  .SubdomainNavBar-mobile-menu-button {\n    display: none;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .SubdomainNavBar-primary-nav {\n    display: none;\n  }\n\n  .SubdomainNavBar-secondary-nav {\n    position: relative;\n    flex: 0 0 auto;\n    align-self: stretch;\n  }\n\n  .SubdomainNavBar-search-trigger {\n    --SubdomainNavBar-tablet-search-width: calc(var(--base-size-128) * 2 + var(--base-size-2));\n\n    flex: 0 0 var(--SubdomainNavBar-tablet-search-width);\n    width: var(--SubdomainNavBar-tablet-search-width);\n    padding-inline: var(--base-size-8);\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar-search-input-button {\n    width: 100%;\n  }\n\n  .SubdomainNavBar-mobile-menu-button {\n    align-self: stretch;\n    flex: none;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: var(--base-size-8);\n    width: max-content;\n    min-width: calc(var(--base-size-64) + var(--base-size-32));\n    height: 100%;\n    padding-inline: var(--base-size-16);\n    color: var(--brand-color-text-default);\n    border: 0;\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    border-radius: 0;\n    overflow: visible;\n    font-family: var(--brand-body-fontFamily);\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-100);\n  }\n\n  .SubdomainNavBar-menu-button-label {\n    display: inline-flex;\n    align-items: center;\n    white-space: nowrap;\n  }\n\n  .SubdomainNavBar-menu-button-icon {\n    flex: none;\n    align-items: stretch;\n    justify-content: center;\n    width: var(--base-size-16);\n    height: var(--base-size-16);\n    overflow: visible;\n  }\n\n  .SubdomainNavBar-menu-button-icon .SubdomainNavBar-menu-button-bar {\n    width: var(--base-size-16);\n    height: var(--base-size-2);\n    margin: 0;\n    transform-origin: center;\n  }\n\n  .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n    transform: translateY(calc(var(--base-size-6) - var(--brand-borderWidth-thin))) rotate(45deg);\n  }\n\n  .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n    transform: translateY(calc(var(--brand-borderWidth-thin) - var(--base-size-6))) rotate(-45deg);\n  }\n\n  .SubdomainNavBar-menu-wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    overflow-y: auto;\n    position: absolute;\n    inset-inline: 0;\n    top: var(--SubdomainNavBar-height);\n    z-index: 2;\n    box-sizing: border-box;\n    width: 100%;\n    max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n    background-color: var(--brand-color-canvas-default);\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    animation: fade-in-down var(--brand-animation-duration-default);\n    animation-timing-function: var(--brand-animation-easing-default);\n  }\n\n  .SubdomainNavBar-menu-wrapper--close {\n    display: none;\n  }\n\n  .SubdomainNavBar-primary-nav-list--visible {\n    display: grid;\n    gap: var(--brand-borderWidth-thin);\n    margin: 0;\n    padding: var(--base-size-8) var(--base-size-16);\n  }\n\n  .SubdomainNavBar-menu-wrapper-footer {\n    flex: none;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link {\n    box-sizing: border-box;\n    width: 100%;\n    min-height: var(--base-size-40);\n    padding: var(--base-size-8) var(--base-size-12);\n    color: var(--brand-color-text-muted);\n    background-color: var(--brand-color-canvas-default);\n    border-radius: var(--brand-borderRadius-medium);\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item) {\n    width: 100%;\n    height: auto;\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link {\n    padding: var(--base-size-8) var(--base-size-12);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link\n    > .SubdomainNavBar-link-content {\n    width: 100%;\n    padding: 0;\n    background-color: transparent;\n    border-radius: 0;\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:hover\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus-visible\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:active\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link[aria-current]:not([aria-current='false'])\n    > .SubdomainNavBar-link-content {\n    background-color: transparent;\n    outline: none;\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:hover,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus-visible,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:active,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link[aria-current]:not([aria-current='false']) {\n    color: var(--brand-color-text-default);\n    background-color: var(--brand-color-canvas-subtle);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus-visible {\n    box-shadow: inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);\n    outline: none;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link--title {\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .SubdomainNavBar-menu-wrapper .SubdomainNavBar-leading-component,\n  .SubdomainNavBar-menu-wrapper .SubdomainNavBar-trailing-component {\n    box-sizing: border-box;\n    flex: none;\n    width: 100%;\n    height: auto;\n    margin-inline: 0;\n    padding: var(--base-size-16);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area {\n    display: flex;\n    width: 100%;\n    height: auto;\n    padding: 0;\n  }\n\n  .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area-inner {\n    box-sizing: border-box;\n    flex-direction: column;\n    width: 100%;\n    margin-block: var(--base-size-24);\n    padding-inline: var(--base-size-16);\n  }\n}\n\n.SubdomainNavBar .SubdomainNavBar-menu-wrapper-footer--has-leading-item,\n.SubdomainNavBar\n  .SubdomainNavBar-menu-wrapper\n  .SubdomainNavBar-leading-component\n  + .SubdomainNavBar-primary-nav-list--visible,\n.SubdomainNavBar\n  .SubdomainNavBar-menu-wrapper-footer\n  .SubdomainNavBar-trailing-component\n  + .SubdomainNavBar-button-area {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-button-area {\n  display: inline-flex;\n  gap: var(--base-size-16);\n  align-items: center;\n  min-width: 0;\n}\n\n.SubdomainNavBar-button-area-inner {\n  display: flex;\n  gap: var(--base-size-8);\n  min-width: 0;\n}\n\n@media screen and (max-width: 48rem) {\n  .SubdomainNavBar-button-area {\n    display: none;\n  }\n\n  .SubdomainNavBar-button-area--visible {\n    display: flex;\n    left: 0;\n    z-index: 99;\n    width: 100%;\n    height: auto;\n    animation-name: fade-in-down-staggered;\n    animation-duration: 500ms;\n    animation-delay: calc(10 * 80ms);\n    animation-fill-mode: both;\n    animation-timing-function: var(--brand-animation-easing-default);\n  }\n\n  .SubdomainNavBar-inner-container--search-open .SubdomainNavBar-button-area--visible {\n    display: none;\n  }\n\n  .SubdomainNavBar-button-area-inner {\n    width: 100%;\n    box-sizing: border-box;\n    flex-direction: column;\n    margin-block: var(--base-size-24);\n    padding-inline: var(--base-size-24);\n    min-width: 0;\n  }\n}\n\n.SubdomainNavBar-cta-button {\n  white-space: nowrap;\n}\n\n.SubdomainNavBar .SubdomainNavBar-menu-wrapper {\n  top: var(--SubdomainNavBar-height);\n  height: auto;\n  max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n}\n\n.SubdomainNavBar-menu-backdrop {\n  position: fixed;\n  inset-block-start: calc(var(--SubdomainNavBar-height) + var(--SubdomainNavBar-menu-offset-block-start, 0px));\n  inset-block-end: 0;\n  inset-inline: 0;\n  z-index: 1;\n  background-color: var(--brand-SubdomainNavBar-searchDialog-backdropColor);\n  animation: fade-in var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.SubdomainNavBar .SubdomainNavBar-inner-container--search-open {\n  animation: none;\n}\n\n@media screen and (max-width: 47.99rem) {\n  .SubdomainNavBar {\n    --SubdomainNavBar-height: calc(var(--base-size-64) - var(--base-size-8));\n    --SubdomainNavBar-mobile-control-size: var(--base-size-48);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-inner-container {\n    height: 100%;\n    padding: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title-area {\n    height: 100%;\n    max-width: none;\n    gap: 0;\n    padding: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title-area > li {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    padding-inline: 0 var(--base-size-16);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title-area > li:first-child {\n    justify-content: center;\n    width: auto;\n    padding-inline: var(--base-size-16) var(--base-size-8);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-logo-mark {\n    justify-content: center;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-logo-mark svg {\n    width: var(--base-size-24);\n    height: var(--base-size-24);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title {\n    padding-inline-end: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title > * {\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-100);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-secondary-nav {\n    height: 100%;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-search-trigger {\n    flex: 0 0 var(--SubdomainNavBar-mobile-control-size);\n    justify-content: center;\n    width: var(--SubdomainNavBar-mobile-control-size);\n    height: 100%;\n    padding-inline: 0;\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-search-input-button,\n  .SubdomainNavBar .SubdomainNavBar-mobile-menu-button {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex: 0 0 var(--SubdomainNavBar-mobile-control-size);\n    width: var(--SubdomainNavBar-mobile-control-size);\n    flex-direction: column;\n    height: 100%;\n    padding-inline: var(--base-size-16);\n    border-radius: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-mobile-menu-button {\n    gap: calc(var(--base-size-4) - var(--brand-borderWidth-thin));\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-button-bar {\n    width: var(--base-size-16);\n    height: var(--base-size-2);\n    margin: 0 auto;\n    transform-origin: center;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n    transform: translateY(calc(var(--base-size-6) - var(--brand-borderWidth-thin))) rotate(45deg);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n    transform: translateY(calc(var(--brand-borderWidth-thin) - var(--base-size-6))) rotate(-45deg);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link {\n    padding: var(--base-size-16);\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-100);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link--title {\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-100);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area-inner {\n    padding-inline: var(--base-size-16);\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar .SubdomainNavBar-inner-container {\n    height: 100%;\n    max-width: none;\n    padding: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title-area {\n    height: 100%;\n    max-width: none;\n    gap: 0;\n    padding: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title-area > li {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    padding-inline: 0 var(--base-size-16);\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title-area > li:first-child {\n    justify-content: center;\n    width: auto;\n    padding-inline: var(--base-size-16) var(--base-size-8);\n    border-inline-end: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-logo-mark {\n    justify-content: center;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-logo-mark svg {\n    width: var(--base-size-24);\n    height: var(--base-size-24);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title {\n    padding-inline-end: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title > * {\n    font-size: var(--base-size-16);\n    line-height: var(--base-size-16);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-primary-nav,\n  .SubdomainNavBar .SubdomainNavBar-primary-nav-overflow,\n  .SubdomainNavBar .SubdomainNavBar-primary-nav-list,\n  .SubdomainNavBar .SubdomainNavBar-secondary-nav,\n  .SubdomainNavBar .SubdomainNavBar-button-area,\n  .SubdomainNavBar .SubdomainNavBar-leading-component,\n  .SubdomainNavBar .SubdomainNavBar-trailing-component {\n    height: 100%;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-leading-component,\n  .SubdomainNavBar .SubdomainNavBar-trailing-component {\n    padding-inline: var(--base-size-16);\n    margin-inline: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-leading-component {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-primary-nav-list {\n    align-items: stretch;\n    margin: 0;\n    block-size: 100%;\n    max-block-size: 100%;\n    padding-inline-start: var(--base-size-16);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-primary-nav-overflow {\n    margin: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-primary-nav-list-item {\n    display: flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-link {\n    align-items: center;\n    height: 100%;\n    padding: 0 var(--base-size-16);\n    color: var(--brand-color-text-muted);\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link,\n  .SubdomainNavBar .SubdomainNavBar-more-link {\n    padding-inline: var(--base-size-4);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar .SubdomainNavBar-more-link > .SubdomainNavBar-link-content {\n    gap: var(--base-size-4);\n    padding: var(--base-size-4) var(--base-size-12);\n    background-color: transparent;\n    border-radius: var(--brand-borderRadius-full);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:hover\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:active\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link[aria-current]:not([aria-current='false'])\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar .SubdomainNavBar-more-link:hover > .SubdomainNavBar-link-content,\n  .SubdomainNavBar .SubdomainNavBar-more-link:active > .SubdomainNavBar-link-content,\n  .SubdomainNavBar .SubdomainNavBar-more-link[aria-expanded='true'] > .SubdomainNavBar-link-content {\n    background-color: var(--brand-SubdomainNavBar-color-link-bgColor);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus-visible,\n  .SubdomainNavBar .SubdomainNavBar-more-link:focus-visible {\n    outline: none;\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus-visible\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar .SubdomainNavBar-more-link:focus-visible > .SubdomainNavBar-link-content {\n    outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n    outline-offset: var(--base-size-2);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-link-text::after {\n    display: none;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-overflow-menu {\n    animation: fade-in-down-overflow var(--brand-animation-duration-faster);\n    animation-timing-function: var(--brand-animation-easing-default);\n    border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n    border-end-start-radius: var(--brand-borderRadius-medium);\n    border-end-end-radius: var(--brand-borderRadius-medium);\n    box-shadow: none;\n    min-width: calc(var(--base-size-128) + var(--base-size-32));\n    transform: translateY(calc(0px - var(--base-size-4)));\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-overflow-menu-list {\n    gap: var(--brand-borderWidth-thin);\n    padding: var(--base-size-8);\n    width: 100%;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {\n    width: 100%;\n    min-height: var(--base-size-40);\n    padding: var(--base-size-8) var(--base-size-12);\n    color: var(--brand-color-text-muted);\n    background-color: var(--brand-color-canvas-default);\n    border-radius: var(--brand-borderRadius-medium);\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover,\n  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n    color: var(--brand-color-text-default);\n    background-color: var(--brand-color-canvas-subtle);\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    .SubdomainNavBar\n      .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n      > .SubdomainNavBar-link\n      > .SubdomainNavBar-link-content,\n    .SubdomainNavBar .SubdomainNavBar-more-link > .SubdomainNavBar-link-content {\n      transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n    }\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-search-trigger {\n    height: 100%;\n    padding-inline: var(--base-size-16);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-search-trigger--has-trailing-item {\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-button-area {\n    align-items: center;\n    padding-inline: var(--base-size-16);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-button-area--has-leading-item {\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SubdomainNavBar .SubdomainNavBar-search-trigger {\n    --SubdomainNavBar-search-input-width: clamp(\n      calc(var(--base-size-128) + var(--base-size-32)),\n      28.5vw,\n      calc(var(--base-size-128) * 3 + var(--base-size-36))\n    );\n\n    align-self: stretch;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .SubdomainNavBar-cta-button--secondary {\n    display: inline-flex;\n  }\n}\n\n/*\n * Search dialog control area\n */\n.SubdomainNavBar-search-form {\n  display: flex;\n  width: 100%;\n}\n\n.SubdomainNavBar-search-input-area {\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  width: 100%;\n}\n\n.SubdomainNavBar-search-close-button {\n  cursor: pointer;\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  min-block-size: var(--base-size-32);\n  padding: var(--base-size-8) var(--base-size-12);\n  color: var(--brand-color-text-default);\n  background-color: var(--brand-color-canvas-subtle);\n  border: 0;\n  border-radius: var(--brand-borderRadius-medium);\n  font-family: var(--brand-body-fontFamily);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--base-size-14);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-close-button:hover {\n  background-color: var(--brand-color-canvas-inset);\n}\n\n.SubdomainNavBar-search-close-button:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.SubdomainNavBar-search-dialog-control-area {\n  height: var(--base-size-40);\n  max-width: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  background: transparent;\n}\n\n.SubdomainNavBar-search-text-input {\n  border-color: transparent;\n}\n\n.SubdomainNavBar-search-results-area {\n  width: 100%;\n}\n\n.SubdomainNavBar-search-results-container {\n  animation: fade-in-down 500ms;\n  padding: var(--base-size-24);\n  background-color: var(--base-color-scale-white-0);\n  border-radius: var(--brand-borderRadius-large);\n  box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n  max-height: 514px;\n  height: 70vh;\n  max-width: 570px;\n  margin: 0 auto;\n  width: 80%;\n}\n\n.SubdomainNavBar-search-results {\n  overflow-y: scroll;\n  list-style: none;\n  padding: 0 var(--base-size-24) 0 0;\n  margin: 0;\n  height: 90%;\n}\n\n.SubdomainNavBar-search-results-heading {\n  display: block;\n  font-weight: var(--brand-heading-weight-600);\n  font-size: var(--base-size-20);\n  line-height: var(--base-size-24);\n  margin-bottom: var(--base-size-20);\n  padding: 0 var(--base-size-8);\n  color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-result-group,\n.SubdomainNavBar-search-result-group-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.SubdomainNavBar-search-result-group + .SubdomainNavBar-search-result-group {\n  margin-block-start: var(--base-size-24);\n}\n\n.SubdomainNavBar-search-result-group-heading {\n  display: block;\n  margin: 0 0 var(--base-size-20);\n  padding: 0 var(--base-size-8);\n  color: var(--brand-color-text-muted);\n  font-weight: var(--brand-heading-weight-600);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n}\n\n.SubdomainNavBar-search-result-item {\n  padding: var(--base-size-16) var(--base-size-8);\n  border-bottom: solid var(--brand-borderWidth-thin, 1px)\n    var(--brand-SubdomainNavBar-search-results-border-default, #b7bfc7);\n}\n\n.SubdomainNavBar-search-result-item-container a[aria-selected='true'] {\n  outline: var(--brand-color-focus) auto var(--brand-borderWidth-thick);\n}\n\n.SubdomainNavBar-search-result-item-container {\n  letter-spacing: var(--brand-heading-letterSpacing-400);\n  font-size: var(--brand-text-size-400);\n}\n\n.SubdomainNavBar-search-result-item-container a {\n  display: block;\n  color: var(--base-color-scale-black-0);\n  text-decoration: none;\n  margin: 0 0 var(--base-size-12);\n  font-size: var(--base-size-16);\n  font-weight: var(--brand-heading-weight-400);\n  font-family: var(--brand-heading-fontFamily);\n  line-height: var(--brand-text-lineHeight-400);\n}\n\n.SubdomainNavBar-search-result-item-container a svg {\n  flex: none;\n}\n\n.SubdomainNavBar-search-result-item-container a:hover {\n  text-decoration: none;\n}\n\n.SubdomainNavBar-search-result-item-desc {\n  color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-dialog {\n  position: fixed;\n  inset-block-start: calc(var(--base-size-64) + var(--base-size-8));\n  inset-block-end: auto;\n  inset-inline: calc(var(--base-size-64) + var(--base-size-8));\n  z-index: 99;\n  width: min(\n    calc(100vw - ((var(--base-size-64) + var(--base-size-8)) * 2)),\n    calc((var(--base-size-128) * 6) + var(--base-size-36))\n  );\n  max-height: calc(100vh - ((var(--base-size-64) + var(--base-size-8)) * 2));\n  height: auto;\n  margin-inline: auto;\n  padding: var(--base-size-16);\n  overflow: hidden;\n  color: var(--brand-color-text-default);\n  background-color: var(--brand-color-canvas-default);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-large);\n  box-shadow: 0 0 calc(var(--base-size-32) + var(--base-size-2)) var(--brand-SubdomainNavBar-searchDialog-shadowColor);\n}\n\n.SubdomainNavBar-search-dialog--has-results {\n  padding-block-end: var(--base-size-32);\n}\n\n.SubdomainNavBar-search-dialog::backdrop {\n  background-color: var(--brand-SubdomainNavBar-searchDialog-backdropColor);\n  -webkit-backdrop-filter: blur(var(--base-size-24));\n  backdrop-filter: blur(var(--base-size-24));\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-input-area {\n  gap: var(--base-size-16);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-form {\n  min-width: 0;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-form section > span:focus-within {\n  border-color: transparent;\n  box-shadow: none;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-text-input {\n  color: var(--brand-color-text-default);\n  font-size: calc(var(--base-size-16) + var(--base-size-2));\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--brand-text-lineHeight-300);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-close-button {\n  background-color: var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-area--visible {\n  margin-block-start: var(--base-size-24);\n  padding-block-start: var(--base-size-24);\n  border-block-start: var(--brand-borderWidth-thin) dashed var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-container {\n  width: 100%;\n  height: auto;\n  max-width: none;\n  max-height: calc(100vh - (((var(--base-size-64) + var(--base-size-8)) * 2) + var(--base-size-128)));\n  padding: 0;\n  margin: 0;\n  overflow-y: auto;\n  background-color: transparent;\n  border-radius: 0;\n  box-shadow: none;\n  animation: none;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results {\n  height: auto;\n  padding: 0;\n  margin: 0;\n  overflow: visible;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-heading,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-group-heading {\n  margin-block-end: var(--base-size-20);\n  padding: 0;\n  color: var(--brand-color-text-muted);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--brand-heading-weight-600);\n  line-height: var(--brand-text-lineHeight-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-group + .SubdomainNavBar-search-result-group {\n  margin-block-start: var(--base-size-24);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item {\n  padding: var(--base-size-16) var(--base-size-4);\n  border-block-end: 0;\n  border-block-start: var(--brand-borderWidth-thin) dashed var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog\n  .SubdomainNavBar-search-result-group-list\n  > .SubdomainNavBar-search-result-item:first-child,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results > .SubdomainNavBar-search-result-item:first-child {\n  padding-block-start: var(--base-size-12);\n  border-block-start: 0;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container {\n  font-size: var(--brand-text-size-300);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container a {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--base-size-8) + var(--base-size-2));\n  width: 100%;\n  margin: 0;\n  color: var(--brand-color-text-default);\n  font-size: var(--brand-text-size-300);\n  font-weight: var(--brand-heading-weight-600);\n  line-height: var(--brand-text-lineHeight-300);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container a span {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-desc,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-meta {\n  display: none;\n}\n\n@media screen and (max-width: 47.99rem) {\n  .SubdomainNavBar-search-dialog {\n    inset-block-start: var(--base-size-16);\n    inset-block-end: auto;\n    inset-inline: var(--base-size-16);\n    width: calc(100vw - (var(--base-size-16) * 2));\n    max-height: calc(100vh - (var(--base-size-16) * 2));\n    height: auto;\n  }\n}\n\n.SubdomainNavBar-skip-to-content {\n  position: absolute;\n  inset-block-start: calc(var(--SubdomainNavBar-height) / 2);\n  inset-inline-start: var(--base-size-16);\n  z-index: 100;\n  transform: translateY(-50%);\n}\n\n/*\n * Reusable animations\n */\n@keyframes fade-in-down {\n  0% {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-in-down-overflow {\n  0% {\n    opacity: 0;\n    transform: translateY(calc(0px - var(--base-size-24)));\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(calc(0px - var(--base-size-4)));\n  }\n}\n\n@keyframes fade-out {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n@keyframes enlarge-shadow {\n  0% {\n    scale: 0.98;\n    box-shadow: 0px 8px 0 rgba(1, 4, 9, 0.15);\n  }\n  100% {\n    scale: 1;\n    box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n  }\n}\n\n@keyframes fade-in-down-staggered {\n  0% {\n    opacity: 0;\n    transform: scale(0.6) translateY(-8px);\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .SubdomainNavBar,\n  .SubdomainNavBar::before,\n  .SubdomainNavBar::after,\n  .SubdomainNavBar * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SubdomainNavBar.module.js","names":[],"sources":["../../src/SubdomainNavBar/SubdomainNavBar.module.css"],"sourcesContent":["/*\n * Main styles for the subdomain navigation bar.\n */\n.SubdomainNavBar {\n  position: relative;\n  z-index: 90;\n  font-weight: 550;\n  background: var(--brand-color-canvas-default);\n  height: var(--SubdomainNavBar-height);\n}\n\n.SubdomainNavBar::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-start: 100%;\n  height: var(--brand-borderWidth-thin);\n  background-color: var(--brand-color-text-emphasized);\n  pointer-events: none;\n}\n\n/*\n * Outer container\n */\n.SubdomainNavBar-outer-container {\n  --SubdomainNavBar-height: var(--base-size-64);\n\n  z-index: 90;\n}\n\n@media screen and (max-width: 47.99rem) {\n  .SubdomainNavBar-outer-container {\n    --SubdomainNavBar-height: calc(var(--base-size-64) - var(--base-size-8));\n  }\n}\n\n.SubdomainNavBar-outer-container:not(.SubdomainNavBar-outer-container--fixed) {\n  position: relative;\n}\n\n.SubdomainNavBar-outer-container--fixed {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n}\n\n/*\n * Inner container\n */\n.SubdomainNavBar-inner-container {\n  display: flex;\n  padding: 4px 28px;\n}\n\n.SubdomainNavBar-inner-container--centered {\n  max-width: 1280px;\n  margin: 0 auto;\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-inner-container {\n    padding: 4px 32px;\n  }\n}\n\n.SubdomainNavBar-inner-container--search-open {\n  animation: fade-out 150ms;\n}\n\n/*\n * Logo and title area\n */\n.SubdomainNavBar-title-area {\n  display: inline-flex;\n  list-style-type: none;\n  align-items: center;\n  gap: var(--base-size-8);\n  padding: 0;\n  margin: 0;\n  max-width: 340px;\n  color: var(--brand-color-text-default);\n  padding: var(--base-size-16) 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SubdomainNavBar-title-area {\n    gap: var(--base-size-16);\n  }\n}\n\n.SubdomainNavBar-logo-mark,\n.SubdomainNavBar-title {\n  display: inline-flex;\n  align-items: center;\n  color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-logo-mark {\n  position: relative;\n}\n\n.SubdomainNavBar-back-arrow {\n  position: absolute;\n  display: flex;\n  inset-inline-start: calc(-1 * var(--base-size-24) + var(--base-size-4));\n  inset-block-start: 50%;\n  color: var(--brand-color-text-muted);\n  opacity: 0;\n  transform: translate(var(--base-size-4), -50%);\n  transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast) ease;\n}\n\n.SubdomainNavBar-logo-mark:hover .SubdomainNavBar-back-arrow {\n  opacity: 1;\n  transform: translate(0, -50%);\n}\n\n.SubdomainNavBar-logo-mark svg {\n  width: 32px;\n  height: 32px;\n}\n\n.SubdomainNavBar-title {\n  line-height: var(--base-size-32);\n  text-decoration: none;\n  padding-right: var(--base-size-16);\n  white-space: nowrap;\n}\n\n.SubdomainNavBar-title:hover {\n  text-decoration: none;\n}\n\n.SubdomainNavBar--variant-featured .SubdomainNavBar-title-prefix {\n  color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-title-label {\n  color: inherit;\n}\n\n.SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-area > li:first-child {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n}\n\n.SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-area > li:first-child::after {\n  content: '';\n  box-sizing: border-box;\n  align-self: center;\n  flex: none;\n  width: var(--brand-borderWidth-thin);\n  height: var(--SubdomainNavBar-height);\n  margin-inline: var(--base-size-16);\n  background-color: var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-leading-component,\n.SubdomainNavBar-trailing-component {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.SubdomainNavBar-leading-component {\n  margin-inline-end: var(--base-size-16);\n}\n\n.SubdomainNavBar-trailing-component {\n  margin-inline-start: var(--base-size-16);\n}\n\n/*\n * Primary navigation link area\n */\n.SubdomainNavBar-primary-nav {\n  display: inline-flex;\n  list-style-type: none;\n  align-items: center;\n  flex: 1 1 0;\n  min-width: 0;\n  padding: 0;\n  margin: 0;\n}\n\n.SubdomainNavBar-primary-nav-list {\n  list-style-type: none;\n}\n\n@media screen and (max-width: 767px) {\n  .SubdomainNavBar-primary-nav-list {\n    display: none;\n  }\n\n  .SubdomainNavBar-primary-nav-list--invisible {\n    display: none;\n  }\n\n  .SubdomainNavBar-primary-nav-list--visible {\n    display: block;\n    margin: 0;\n    padding: 0;\n  }\n\n  .SubdomainNavBar-leading-component,\n  .SubdomainNavBar-trailing-component {\n    flex: none;\n    width: 100%;\n    box-sizing: border-box;\n    padding-block: var(--base-size-16);\n    padding-inline: var(--base-size-16);\n  }\n\n  .SubdomainNavBar-leading-component {\n    margin-inline-end: 0;\n  }\n\n  .SubdomainNavBar-trailing-component {\n    margin-inline-start: 0;\n  }\n\n  .SubdomainNavBar-menu-wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    overflow-y: auto;\n    position: absolute;\n    top: var(--SubdomainNavBar-height);\n    left: 0;\n    right: 0;\n    z-index: 2;\n    background-color: var(--brand-color-canvas-default);\n    width: 100%;\n    max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n    animation: fade-in-down 500ms;\n    animation-timing-function: var(--brand-animation-easing-default);\n  }\n\n  .SubdomainNavBar-menu-wrapper--close {\n    display: none;\n  }\n\n  .SubdomainNavBar-menu-wrapper-footer {\n    flex: none;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-primary-nav-overflow {\n    display: flex;\n    align-items: center;\n    flex: 1 1 0;\n    min-width: 0;\n    margin: 0 var(--base-size-24) 0 0;\n  }\n\n  .SubdomainNavBar-primary-nav-list {\n    display: flex;\n    align-items: center;\n    flex: 1 1 auto;\n    flex-wrap: nowrap;\n    min-width: 0;\n    block-size: var(--base-size-48);\n    max-block-size: var(--base-size-48);\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n  }\n}\n\n.SubdomainNavBar-primary-nav-list-item {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n@media screen and (max-width: 767px) {\n  .SubdomainNavBar-primary-nav-list-item {\n    animation-name: fade-in-down-staggered;\n    animation-duration: 500ms;\n    animation-delay: calc(var(--animation-order) * 80ms);\n    animation-fill-mode: both;\n    animation-timing-function: var(--brand-animation-easing-default);\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-primary-nav-list-item--overflowed {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  .SubdomainNavBar-primary-nav-list-item--overflow {\n    display: flex;\n    align-items: center;\n    flex: 0 0 auto;\n    position: absolute;\n    inset-inline-end: 0;\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  .SubdomainNavBar-primary-nav-overflow--has-overflow .SubdomainNavBar-primary-nav-list-item--overflow {\n    position: relative;\n    visibility: visible;\n    pointer-events: auto;\n  }\n}\n\n.SubdomainNavBar-link {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--base-size-8);\n  color: var(--brand-color-text-default);\n  font-family: var(--brand-heading-fontFamily);\n  font-weight: var(--base-text-weight-normal);\n  font-size: var(--base-size-20);\n  line-height: var(--base-size-20);\n  padding: var(--base-size-8) var(--base-size-16) var(--base-size-16) var(--base-size-28);\n  text-decoration: none;\n}\n\n.SubdomainNavBar-link:hover {\n  text-decoration: none;\n}\n\n.SubdomainNavBar-link-text {\n  position: relative;\n}\n\n.SubdomainNavBar-link-content {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-8);\n}\n\n@media screen and (max-width: 767px) {\n  .SubdomainNavBar-link:first-of-type {\n    padding-top: var(--base-size-24);\n  }\n\n  .SubdomainNavBar-link--title {\n    font-weight: var(--base-text-weight-medium);\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-link {\n    font-family: var(--brand-heading-fontFamily);\n    font-weight: var(--base-text-weight-normal);\n    font-size: var(--base-size-16);\n    line-height: var(--base-size-16);\n    padding: var(--base-size-16) var(--base-size-16);\n  }\n\n  .SubdomainNavBar-link-text::after {\n    content: '';\n    position: absolute;\n    bottom: -6px;\n    left: 0;\n    width: 100%;\n    height: 2px;\n    background-color: var(--brand-SubdomainNavBar-border-nav-default);\n    opacity: 0;\n    transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);\n    transform: scale(0);\n    transform-origin: center;\n  }\n\n  .SubdomainNavBar-link:hover .SubdomainNavBar-link-text::after,\n  .SubdomainNavBar-link:focus .SubdomainNavBar-link-text::after {\n    opacity: 1;\n    transform: scale(0.75);\n  }\n\n  .SubdomainNavBar-link:active .SubdomainNavBar-link-text::after {\n    background-color: var(--brand-SubdomainNavBar-border-nav-pressed);\n    transform: scale(0.75);\n  }\n\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {\n    transition: background-color var(--brand-animation-easing-default) 250ms;\n    background-color: var(--brand-SubdomainNavBar-canvas-overflow-default);\n    color: var(--brand-SubdomainNavBar-fg-overflow-default);\n  }\n\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link .SubdomainNavBar-link-text::after {\n    display: none;\n  }\n\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover {\n    background-color: var(--brand-SubdomainNavBar-canvas-overflow-hover);\n  }\n\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n    box-shadow: inset 0px 0px 0px 2px var(--brand-color-focus);\n    outline: none;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SubdomainNavBar-link {\n    padding: var(--base-size-16) var(--base-size-24);\n  }\n}\n\n.SubdomainNavBar-more-link {\n  display: none;\n}\n\n.SubdomainNavBar-more-link[aria-expanded='true']:hover::after,\n.SubdomainNavBar-more-link[aria-expanded='true']:focus::after {\n  display: none;\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar-more-link {\n    cursor: pointer;\n    appearance: none;\n    border: none;\n    background-color: transparent;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--base-size-4);\n  }\n}\n\n.SubdomainNavBar-overflow-menu {\n  position: absolute;\n  z-index: 100;\n  right: auto;\n  background-color: var(--brand-color-canvas-default);\n  border-radius: var(--brand-borderRadius-large);\n  animation: fade-in-down 0.25s, enlarge-shadow 250ms forwards;\n  animation-timing-function: var(--brand-animation-easing-default);\n  box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n  overflow: hidden;\n}\n\n.SubdomainNavBar-overflow-menu-list {\n  display: grid;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  width: max-content;\n}\n\n/*\n * Toolbar actions area for search and mobile menu\n */\n\n.SubdomainNavBar-secondary-nav {\n  display: flex;\n  align-items: center;\n  flex: 0 1 auto;\n  min-width: 0;\n  margin-left: auto;\n}\n.SubdomainNavBar-search-trigger {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SubdomainNavBar-search-trigger {\n    --SubdomainNavBar-search-input-width: calc(var(--base-size-128) * 2 + var(--base-size-24));\n\n    flex: 0 9999 var(--SubdomainNavBar-search-input-width);\n    width: var(--SubdomainNavBar-search-input-width);\n    max-width: 100%;\n    min-width: calc(var(--base-size-128) + var(--base-size-32));\n  }\n}\n\n.SubdomainNavBar-menu-button {\n  position: relative;\n  cursor: pointer;\n  appearance: none;\n  background-color: transparent;\n  border: var(--brand-borderWidth-thick) solid transparent;\n  color: var(--brand-color-text-default);\n  width: calc(48px - var(--brand-borderWidth-thick));\n  height: calc(48px - var(--brand-borderWidth-thick));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border 250ms var(--brand-animation-easing-default), box-shadow 250ms ease;\n  border-radius: var(--brand-borderRadius-medium);\n  box-shadow: 0 0 0 2px transparent;\n  gap: 0;\n}\n\n.SubdomainNavBar-menu-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n.SubdomainNavBar-search-input-button {\n  cursor: pointer;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-16);\n  width: 100%;\n  block-size: var(--base-size-32);\n  min-block-size: var(--base-size-32);\n  padding: var(--base-size-4) var(--base-size-4) var(--base-size-4) calc(var(--base-size-8) + var(--base-size-2));\n  overflow: hidden;\n  color: var(--brand-color-text-muted);\n  background-color: var(--brand-color-canvas-subtle);\n  border: 0;\n  border-radius: var(--brand-borderRadius-medium);\n  font-family: var(--brand-body-fontFamily);\n  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n    box-shadow var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.SubdomainNavBar-search-input-button:hover {\n  box-shadow: inset 0 0 0 var(--brand-borderWidth-thin) var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-input-button:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.SubdomainNavBar-search-input-button:active {\n  box-shadow: inset 0 0 0 var(--brand-borderWidth-thin) var(--brand-color-border-default);\n}\n\n.SubdomainNavBar-search-input-button-placeholder {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  min-width: 0;\n  overflow: hidden;\n  color: var(--brand-color-text-muted);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-normal);\n  line-height: 1.2;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.SubdomainNavBar-search-input-button-placeholder svg {\n  flex: none;\n}\n\n.SubdomainNavBar-search-input-button-placeholder span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.SubdomainNavBar-search-input-button-shortcut {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  align-self: stretch;\n  min-width: var(--base-size-24);\n  padding-inline: var(--base-size-8);\n  color: var(--brand-color-text-default);\n  background-color: var(--brand-color-canvas-default);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-radius: calc(var(--brand-borderRadius-medium) / 2);\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-normal);\n  line-height: 1.6;\n}\n\n@media screen and (max-width: 47.99rem) {\n  .SubdomainNavBar-search-trigger {\n    flex: 0 0 var(--base-size-48);\n    justify-content: center;\n    width: var(--base-size-48);\n  }\n\n  .SubdomainNavBar-search-input-button {\n    justify-content: center;\n    gap: 0;\n    width: var(--base-size-32);\n    padding: var(--base-size-8);\n    background-color: transparent;\n  }\n\n  .SubdomainNavBar-search-input-button-placeholder {\n    gap: 0;\n  }\n\n  .SubdomainNavBar-search-input-button-placeholder span,\n  .SubdomainNavBar-search-input-button-shortcut {\n    display: none;\n  }\n}\n\n.SubdomainNavBar-menu-button {\n  display: inline-flex;\n  align-items: center;\n  align-self: center;\n}\n\n.SubdomainNavBar-menu-button-icon {\n  display: inline-flex;\n  flex-direction: column;\n  gap: calc(var(--base-size-4) - var(--brand-borderWidth-thin));\n}\n\n.SubdomainNavBar-menu-button-label {\n  display: none;\n}\n\n.SubdomainNavBar-menu-button-bar {\n  width: 22px;\n  height: 2px;\n  background-color: var(--brand-color-text-default);\n  margin: var(--base-size-4) auto;\n  border-radius: var(--brand-borderRadius-large);\n  display: block;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .SubdomainNavBar-menu-button-bar {\n    transition-timing-function: var(--brand-animation-easing-default);\n    transition-duration: 500ms;\n    transition-property: opacity, transform;\n  }\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n  transform-origin: bottom right;\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n  transform-origin: top right;\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n  transform: rotate(-45deg) translateY(-3px);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(2) {\n  opacity: 0;\n  transform: scale(0);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n  transform: rotate(45deg) translateY(3px);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close {\n  position: relative;\n  z-index: 3;\n  background-color: var(--brand-color-canvas-muted);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close:focus-visible {\n  outline: none;\n  box-shadow: none;\n  transition: none;\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close:focus-visible::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  border: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  inset-inline: 0;\n  inset-block-end: calc(var(--brand-borderWidth-thin) * -2);\n  height: calc(var(--brand-borderWidth-thin) * 2);\n  background-color: var(--brand-color-canvas-muted);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SubdomainNavBar-menu-button:hover {\n    background-color: transparent;\n    border: var(--brand-borderWidth-thick) solid var(--brand-SubdomainNavBar-border-button-hover);\n  }\n\n  .SubdomainNavBar-menu-button:active {\n    background-color: transparent;\n    box-shadow: 0 0 0 1px var(--brand-SubdomainNavBar-border-button-hover);\n  }\n\n  .SubdomainNavBar-mobile-menu-button {\n    display: none;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .SubdomainNavBar-primary-nav {\n    display: none;\n  }\n\n  .SubdomainNavBar-secondary-nav {\n    position: relative;\n    flex: 0 0 auto;\n    align-self: stretch;\n  }\n\n  .SubdomainNavBar-search-trigger {\n    --SubdomainNavBar-tablet-search-width: calc(var(--base-size-128) * 2 + var(--base-size-2));\n\n    flex: 0 0 var(--SubdomainNavBar-tablet-search-width);\n    width: var(--SubdomainNavBar-tablet-search-width);\n    padding-inline: var(--base-size-8);\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar-search-input-button {\n    width: 100%;\n  }\n\n  .SubdomainNavBar-mobile-menu-button {\n    align-self: stretch;\n    flex: none;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: var(--base-size-8);\n    width: max-content;\n    min-width: calc(var(--base-size-64) + var(--base-size-32));\n    height: 100%;\n    padding-inline: var(--base-size-16);\n    color: var(--brand-color-text-default);\n    border: 0;\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    border-radius: 0;\n    overflow: visible;\n    font-family: var(--brand-body-fontFamily);\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-100);\n  }\n\n  .SubdomainNavBar-menu-button-label {\n    display: inline-flex;\n    align-items: center;\n    white-space: nowrap;\n  }\n\n  .SubdomainNavBar-menu-button-icon {\n    flex: none;\n    align-items: stretch;\n    justify-content: center;\n    width: var(--base-size-16);\n    height: var(--base-size-16);\n    overflow: visible;\n  }\n\n  .SubdomainNavBar-menu-button-icon .SubdomainNavBar-menu-button-bar {\n    width: var(--base-size-16);\n    height: var(--base-size-2);\n    margin: 0;\n    transform-origin: center;\n  }\n\n  .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n    transform: translateY(calc(var(--base-size-6) - var(--brand-borderWidth-thin))) rotate(45deg);\n  }\n\n  .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n    transform: translateY(calc(var(--brand-borderWidth-thin) - var(--base-size-6))) rotate(-45deg);\n  }\n\n  .SubdomainNavBar-menu-wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    overflow-y: auto;\n    position: absolute;\n    inset-inline: 0;\n    top: var(--SubdomainNavBar-height);\n    z-index: 2;\n    box-sizing: border-box;\n    width: 100%;\n    max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n    background-color: var(--brand-color-canvas-default);\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    animation: fade-in-down var(--brand-animation-duration-default);\n    animation-timing-function: var(--brand-animation-easing-default);\n  }\n\n  .SubdomainNavBar--variant-default .SubdomainNavBar-menu-wrapper {\n    inset-inline-start: auto;\n    min-width: calc(var(--base-size-128) * 3);\n  }\n\n  .SubdomainNavBar-menu-wrapper--close {\n    display: none;\n  }\n\n  .SubdomainNavBar-primary-nav-list--visible {\n    display: grid;\n    gap: var(--brand-borderWidth-thin);\n    margin: 0;\n    padding: var(--base-size-8) var(--base-size-16);\n  }\n\n  .SubdomainNavBar-menu-wrapper-footer {\n    flex: none;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link {\n    box-sizing: border-box;\n    width: 100%;\n    min-height: var(--base-size-40);\n    padding: var(--base-size-8) var(--base-size-12);\n    color: var(--brand-color-text-muted);\n    background-color: var(--brand-color-canvas-default);\n    border-radius: var(--brand-borderRadius-medium);\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item) {\n    width: 100%;\n    height: auto;\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link {\n    padding: var(--base-size-8) var(--base-size-12);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link\n    > .SubdomainNavBar-link-content {\n    width: 100%;\n    padding: 0;\n    background-color: transparent;\n    border-radius: 0;\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:hover\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus-visible\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:active\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link[aria-current]:not([aria-current='false'])\n    > .SubdomainNavBar-link-content {\n    background-color: transparent;\n    outline: none;\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:hover,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus-visible,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:active,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link[aria-current]:not([aria-current='false']) {\n    color: var(--brand-color-text-default);\n    background-color: var(--brand-color-canvas-subtle);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus,\n  .SubdomainNavBar\n    .SubdomainNavBar-menu-wrapper\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus-visible {\n    box-shadow: inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);\n    outline: none;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link--title {\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .SubdomainNavBar-menu-wrapper .SubdomainNavBar-leading-component,\n  .SubdomainNavBar-menu-wrapper .SubdomainNavBar-trailing-component {\n    box-sizing: border-box;\n    flex: none;\n    width: 100%;\n    height: auto;\n    margin-inline: 0;\n    padding: var(--base-size-16);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area {\n    display: flex;\n    width: 100%;\n    height: auto;\n    padding: 0;\n  }\n\n  .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area-inner {\n    box-sizing: border-box;\n    flex-direction: column;\n    width: 100%;\n    margin-block: var(--base-size-24);\n    padding-inline: var(--base-size-16);\n  }\n}\n\n.SubdomainNavBar .SubdomainNavBar-menu-wrapper-footer--has-leading-item,\n.SubdomainNavBar\n  .SubdomainNavBar-menu-wrapper\n  .SubdomainNavBar-leading-component\n  + .SubdomainNavBar-primary-nav-list--visible,\n.SubdomainNavBar\n  .SubdomainNavBar-menu-wrapper-footer\n  .SubdomainNavBar-trailing-component\n  + .SubdomainNavBar-button-area {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-button-area {\n  display: inline-flex;\n  gap: var(--base-size-16);\n  align-items: center;\n  min-width: 0;\n}\n\n.SubdomainNavBar-button-area-inner {\n  display: flex;\n  gap: var(--base-size-8);\n  min-width: 0;\n}\n\n@media screen and (max-width: 48rem) {\n  .SubdomainNavBar-button-area {\n    display: none;\n  }\n\n  .SubdomainNavBar-button-area--visible {\n    display: flex;\n    left: 0;\n    z-index: 99;\n    width: 100%;\n    height: auto;\n    animation-name: fade-in-down-staggered;\n    animation-duration: 500ms;\n    animation-delay: calc(10 * 80ms);\n    animation-fill-mode: both;\n    animation-timing-function: var(--brand-animation-easing-default);\n  }\n\n  .SubdomainNavBar-inner-container--search-open .SubdomainNavBar-button-area--visible {\n    display: none;\n  }\n\n  .SubdomainNavBar-button-area-inner {\n    width: 100%;\n    box-sizing: border-box;\n    flex-direction: column;\n    margin-block: var(--base-size-24);\n    padding-inline: var(--base-size-24);\n    min-width: 0;\n  }\n}\n\n.SubdomainNavBar-cta-button {\n  white-space: nowrap;\n}\n\n.SubdomainNavBar .SubdomainNavBar-menu-wrapper {\n  top: var(--SubdomainNavBar-height);\n  height: auto;\n  max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n}\n\n.SubdomainNavBar-menu-backdrop {\n  position: fixed;\n  inset-block-start: calc(var(--SubdomainNavBar-height) + var(--SubdomainNavBar-menu-offset-block-start, 0px));\n  inset-block-end: 0;\n  inset-inline: 0;\n  z-index: 1;\n  background-color: var(--brand-SubdomainNavBar-searchDialog-backdropColor);\n  animation: fade-in var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.SubdomainNavBar .SubdomainNavBar-inner-container--search-open {\n  animation: none;\n}\n\n@media screen and (max-width: 47.99rem) {\n  .SubdomainNavBar {\n    --SubdomainNavBar-mobile-control-size: var(--base-size-48);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-inner-container {\n    height: 100%;\n    padding: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title-area {\n    height: 100%;\n    max-width: none;\n    gap: 0;\n    padding: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title-area > li {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    padding-inline: 0 var(--base-size-16);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title-area > li:first-child {\n    justify-content: center;\n    width: auto;\n    padding-inline: var(--base-size-16) var(--base-size-8);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-logo-mark {\n    justify-content: center;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-logo-mark svg {\n    width: var(--base-size-24);\n    height: var(--base-size-24);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title {\n    padding-inline-end: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title > * {\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-100);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-secondary-nav {\n    height: 100%;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-search-trigger {\n    flex: 0 0 var(--SubdomainNavBar-mobile-control-size);\n    justify-content: center;\n    width: var(--SubdomainNavBar-mobile-control-size);\n    height: 100%;\n    padding-inline: 0;\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-search-input-button,\n  .SubdomainNavBar .SubdomainNavBar-mobile-menu-button {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex: 0 0 var(--SubdomainNavBar-mobile-control-size);\n    width: var(--SubdomainNavBar-mobile-control-size);\n    flex-direction: column;\n    height: 100%;\n    padding-inline: var(--base-size-16);\n    border-radius: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-mobile-menu-button {\n    gap: calc(var(--base-size-4) - var(--brand-borderWidth-thin));\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-button-bar {\n    width: var(--base-size-16);\n    height: var(--base-size-2);\n    margin: 0 auto;\n    transform-origin: center;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n    transform: translateY(calc(var(--base-size-6) - var(--brand-borderWidth-thin))) rotate(45deg);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n    transform: translateY(calc(var(--brand-borderWidth-thin) - var(--base-size-6))) rotate(-45deg);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link {\n    padding: var(--base-size-16);\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-100);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link--title {\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-100);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area-inner {\n    padding-inline: var(--base-size-16);\n  }\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar .SubdomainNavBar-inner-container {\n    height: 100%;\n    max-width: none;\n    padding: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title-area {\n    height: 100%;\n    max-width: none;\n    gap: 0;\n    padding: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title-area > li {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    padding-inline: 0 var(--base-size-16);\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title-area > li:first-child {\n    justify-content: center;\n    width: auto;\n    padding-inline: var(--base-size-16) var(--base-size-8);\n    border-inline-end: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-logo-mark {\n    justify-content: center;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-logo-mark svg {\n    width: var(--base-size-24);\n    height: var(--base-size-24);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title {\n    padding-inline-end: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-title > * {\n    font-size: var(--base-size-16);\n    line-height: var(--base-size-16);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-primary-nav,\n  .SubdomainNavBar .SubdomainNavBar-primary-nav-overflow,\n  .SubdomainNavBar .SubdomainNavBar-primary-nav-list,\n  .SubdomainNavBar .SubdomainNavBar-secondary-nav,\n  .SubdomainNavBar .SubdomainNavBar-button-area,\n  .SubdomainNavBar .SubdomainNavBar-leading-component,\n  .SubdomainNavBar .SubdomainNavBar-trailing-component {\n    height: 100%;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-leading-component,\n  .SubdomainNavBar .SubdomainNavBar-trailing-component {\n    padding-inline: var(--base-size-16);\n    margin-inline: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-leading-component {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-primary-nav-list {\n    align-items: stretch;\n    margin: 0;\n    block-size: 100%;\n    max-block-size: 100%;\n    padding-inline-start: var(--base-size-16);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-primary-nav-overflow {\n    margin: 0;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-primary-nav-list-item {\n    display: flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-link {\n    align-items: center;\n    height: 100%;\n    padding: 0 var(--base-size-16);\n    color: var(--brand-color-text-muted);\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link,\n  .SubdomainNavBar .SubdomainNavBar-more-link {\n    padding-inline: var(--base-size-4);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar .SubdomainNavBar-more-link > .SubdomainNavBar-link-content {\n    gap: var(--base-size-4);\n    padding: var(--base-size-4) var(--base-size-12);\n    background-color: transparent;\n    border-radius: var(--brand-borderRadius-full);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:hover\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:active\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link[aria-current]:not([aria-current='false'])\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar .SubdomainNavBar-more-link:hover > .SubdomainNavBar-link-content,\n  .SubdomainNavBar .SubdomainNavBar-more-link:active > .SubdomainNavBar-link-content,\n  .SubdomainNavBar .SubdomainNavBar-more-link[aria-expanded='true'] > .SubdomainNavBar-link-content {\n    background-color: var(--brand-SubdomainNavBar-color-link-bgColor);\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus-visible,\n  .SubdomainNavBar .SubdomainNavBar-more-link:focus-visible {\n    outline: none;\n  }\n\n  .SubdomainNavBar\n    .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n    > .SubdomainNavBar-link:focus-visible\n    > .SubdomainNavBar-link-content,\n  .SubdomainNavBar .SubdomainNavBar-more-link:focus-visible > .SubdomainNavBar-link-content {\n    outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n    outline-offset: var(--base-size-2);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-link-text::after {\n    display: none;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-overflow-menu {\n    animation: fade-in-down-overflow var(--brand-animation-duration-faster);\n    animation-timing-function: var(--brand-animation-easing-default);\n    border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n    border-end-start-radius: var(--brand-borderRadius-medium);\n    border-end-end-radius: var(--brand-borderRadius-medium);\n    box-shadow: none;\n    min-width: calc(var(--base-size-128) + var(--base-size-32));\n    transform: translateY(calc(0px - var(--base-size-4)));\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-overflow-menu-list {\n    gap: var(--brand-borderWidth-thin);\n    padding: var(--base-size-8);\n    width: 100%;\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {\n    width: 100%;\n    min-height: var(--base-size-40);\n    padding: var(--base-size-8) var(--base-size-12);\n    color: var(--brand-color-text-muted);\n    background-color: var(--brand-color-canvas-default);\n    border-radius: var(--brand-borderRadius-medium);\n    font-size: var(--brand-text-size-100);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover,\n  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n    color: var(--brand-color-text-default);\n    background-color: var(--brand-color-canvas-subtle);\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    .SubdomainNavBar\n      .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n      > .SubdomainNavBar-link\n      > .SubdomainNavBar-link-content,\n    .SubdomainNavBar .SubdomainNavBar-more-link > .SubdomainNavBar-link-content {\n      transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n    }\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-search-trigger {\n    height: 100%;\n    padding-inline: var(--base-size-16);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-search-trigger--has-trailing-item {\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-button-area {\n    align-items: center;\n    padding-inline: var(--base-size-16);\n  }\n\n  .SubdomainNavBar .SubdomainNavBar-button-area--has-leading-item {\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .SubdomainNavBar .SubdomainNavBar-search-trigger {\n    --SubdomainNavBar-search-input-width: clamp(\n      calc(var(--base-size-128) + var(--base-size-32)),\n      28.5vw,\n      calc(var(--base-size-128) * 3 + var(--base-size-36))\n    );\n\n    align-self: stretch;\n  }\n\n  .SubdomainNavBar--variant-default.SubdomainNavBar--has-primary-nav {\n    border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    height: calc(var(--SubdomainNavBar-height) + var(--base-size-48));\n  }\n\n  .SubdomainNavBar--variant-default::after {\n    inset-block-start: var(--SubdomainNavBar-height);\n  }\n\n  .SubdomainNavBar--variant-default .SubdomainNavBar-inner-container {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) auto;\n    grid-template-rows: var(--SubdomainNavBar-height);\n  }\n\n  .SubdomainNavBar--variant-default.SubdomainNavBar--has-primary-nav .SubdomainNavBar-inner-container {\n    grid-template-rows: var(--SubdomainNavBar-height) var(--base-size-48);\n  }\n\n  .SubdomainNavBar--variant-default .SubdomainNavBar-title-navigation {\n    grid-column: 1;\n    grid-row: 1;\n    min-width: 0;\n  }\n\n  .SubdomainNavBar--variant-default .SubdomainNavBar-primary-nav {\n    grid-column: 1 / -1;\n    grid-row: 2;\n    min-width: 0;\n    border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .SubdomainNavBar--variant-default .SubdomainNavBar-primary-nav-list {\n    padding-inline-start: calc(var(--base-size-64) + var(--brand-borderWidth-thin));\n  }\n\n  .SubdomainNavBar--variant-default .SubdomainNavBar-inner-container > .SubdomainNavBar-leading-component {\n    grid-column: 2;\n    grid-row: 1;\n    justify-self: start;\n    border-inline-start: 0;\n  }\n\n  .SubdomainNavBar--variant-default .SubdomainNavBar-inner-container > .SubdomainNavBar-secondary-nav {\n    grid-column: 3;\n    grid-row: 1;\n  }\n\n  .SubdomainNavBar--variant-default .SubdomainNavBar-search-trigger {\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button {\n  justify-content: center;\n  gap: 0;\n  width: var(--base-size-32);\n  padding: var(--base-size-8);\n  background-color: transparent;\n}\n\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button-placeholder {\n  gap: 0;\n}\n\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button-placeholder-text,\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button-shortcut {\n  display: none;\n}\n\n@media screen and (min-width: 48rem) {\n  .SubdomainNavBar--variant-default .SubdomainNavBar-search-trigger {\n    flex: 0 0 var(--base-size-48);\n    width: var(--base-size-48);\n    min-width: var(--base-size-48);\n  }\n\n  .SubdomainNavBar--variant-default .SubdomainNavBar-search-trigger {\n    padding-inline: 0;\n  }\n\n  .SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button {\n    width: 100%;\n    block-size: 100%;\n    padding-inline: var(--base-size-16);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .SubdomainNavBar-cta-button--secondary {\n    display: inline-flex;\n  }\n}\n\n/*\n * Search dialog control area\n */\n.SubdomainNavBar-search-form {\n  display: flex;\n  width: 100%;\n}\n\n.SubdomainNavBar-search-input-area {\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  width: 100%;\n}\n\n.SubdomainNavBar-search-close-button {\n  cursor: pointer;\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  min-block-size: var(--base-size-32);\n  padding: var(--base-size-8) var(--base-size-12);\n  color: var(--brand-color-text-default);\n  background-color: var(--brand-color-canvas-subtle);\n  border: 0;\n  border-radius: var(--brand-borderRadius-medium);\n  font-family: var(--brand-body-fontFamily);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--base-size-14);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-close-button:hover {\n  background-color: var(--brand-color-canvas-inset);\n}\n\n.SubdomainNavBar-search-close-button:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.SubdomainNavBar-search-dialog-control-area {\n  height: var(--base-size-40);\n  max-width: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  background: transparent;\n}\n\n.SubdomainNavBar-search-text-input {\n  border-color: transparent;\n}\n\n.SubdomainNavBar-search-results-area {\n  width: 100%;\n}\n\n.SubdomainNavBar-search-results-container {\n  animation: fade-in-down 500ms;\n  padding: var(--base-size-24);\n  background-color: var(--base-color-scale-white-0);\n  border-radius: var(--brand-borderRadius-large);\n  box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n  max-height: 514px;\n  height: 70vh;\n  max-width: 570px;\n  margin: 0 auto;\n  width: 80%;\n}\n\n.SubdomainNavBar-search-results {\n  overflow-y: scroll;\n  list-style: none;\n  padding: 0 var(--base-size-24) 0 0;\n  margin: 0;\n  height: 90%;\n}\n\n.SubdomainNavBar-search-results-heading {\n  display: block;\n  font-weight: var(--brand-heading-weight-600);\n  font-size: var(--base-size-20);\n  line-height: var(--base-size-24);\n  margin-bottom: var(--base-size-20);\n  padding: 0 var(--base-size-8);\n  color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-result-group,\n.SubdomainNavBar-search-result-group-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.SubdomainNavBar-search-result-group + .SubdomainNavBar-search-result-group {\n  margin-block-start: var(--base-size-24);\n}\n\n.SubdomainNavBar-search-result-group-heading {\n  display: block;\n  margin: 0 0 var(--base-size-20);\n  padding: 0 var(--base-size-8);\n  color: var(--brand-color-text-muted);\n  font-weight: var(--brand-heading-weight-600);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n}\n\n.SubdomainNavBar-search-result-item {\n  padding: var(--base-size-16) var(--base-size-8);\n  border-bottom: solid var(--brand-borderWidth-thin, 1px)\n    var(--brand-SubdomainNavBar-search-results-border-default, #b7bfc7);\n}\n\n.SubdomainNavBar-search-result-item-container a[aria-selected='true'] {\n  outline: var(--brand-color-focus) auto var(--brand-borderWidth-thick);\n}\n\n.SubdomainNavBar-search-result-item-container {\n  letter-spacing: var(--brand-heading-letterSpacing-400);\n  font-size: var(--brand-text-size-400);\n}\n\n.SubdomainNavBar-search-result-item-container a {\n  display: block;\n  color: var(--base-color-scale-black-0);\n  text-decoration: none;\n  margin: 0 0 var(--base-size-12);\n  font-size: var(--base-size-16);\n  font-weight: var(--brand-heading-weight-400);\n  font-family: var(--brand-heading-fontFamily);\n  line-height: var(--brand-text-lineHeight-400);\n}\n\n.SubdomainNavBar-search-result-item-container a svg {\n  flex: none;\n}\n\n.SubdomainNavBar-search-result-item-container a:hover {\n  text-decoration: none;\n}\n\n.SubdomainNavBar-search-result-item-desc {\n  color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-dialog {\n  position: fixed;\n  inset-block-start: calc(var(--base-size-64) + var(--base-size-8));\n  inset-block-end: auto;\n  inset-inline: calc(var(--base-size-64) + var(--base-size-8));\n  z-index: 99;\n  width: min(\n    calc(100vw - ((var(--base-size-64) + var(--base-size-8)) * 2)),\n    calc((var(--base-size-128) * 6) + var(--base-size-36))\n  );\n  max-height: calc(100vh - ((var(--base-size-64) + var(--base-size-8)) * 2));\n  height: auto;\n  margin-inline: auto;\n  padding: var(--base-size-16);\n  overflow: hidden;\n  color: var(--brand-color-text-default);\n  background-color: var(--brand-color-canvas-default);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-large);\n  box-shadow: 0 0 calc(var(--base-size-32) + var(--base-size-2)) var(--brand-SubdomainNavBar-searchDialog-shadowColor);\n}\n\n.SubdomainNavBar-search-dialog--has-results {\n  padding-block-end: var(--base-size-32);\n}\n\n.SubdomainNavBar-search-dialog::backdrop {\n  background-color: var(--brand-SubdomainNavBar-searchDialog-backdropColor);\n  -webkit-backdrop-filter: blur(var(--base-size-24));\n  backdrop-filter: blur(var(--base-size-24));\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-input-area {\n  gap: var(--base-size-16);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-form {\n  min-width: 0;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-form section > span:focus-within {\n  border-color: transparent;\n  box-shadow: none;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-text-input {\n  color: var(--brand-color-text-default);\n  font-size: calc(var(--base-size-16) + var(--base-size-2));\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--brand-text-lineHeight-300);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-close-button {\n  background-color: var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-area--visible {\n  margin-block-start: var(--base-size-24);\n  padding-block-start: var(--base-size-24);\n  border-block-start: var(--brand-borderWidth-thin) dashed var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-container {\n  width: 100%;\n  height: auto;\n  max-width: none;\n  max-height: calc(100vh - (((var(--base-size-64) + var(--base-size-8)) * 2) + var(--base-size-128)));\n  padding: 0;\n  margin: 0;\n  overflow-y: auto;\n  background-color: transparent;\n  border-radius: 0;\n  box-shadow: none;\n  animation: none;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results {\n  height: auto;\n  padding: 0;\n  margin: 0;\n  overflow: visible;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-heading,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-group-heading {\n  margin-block-end: var(--base-size-20);\n  padding: 0;\n  color: var(--brand-color-text-muted);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--brand-heading-weight-600);\n  line-height: var(--brand-text-lineHeight-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-group + .SubdomainNavBar-search-result-group {\n  margin-block-start: var(--base-size-24);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item {\n  padding: var(--base-size-16) var(--base-size-4);\n  border-block-end: 0;\n  border-block-start: var(--brand-borderWidth-thin) dashed var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog\n  .SubdomainNavBar-search-result-group-list\n  > .SubdomainNavBar-search-result-item:first-child,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results > .SubdomainNavBar-search-result-item:first-child {\n  padding-block-start: var(--base-size-12);\n  border-block-start: 0;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container {\n  font-size: var(--brand-text-size-300);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container a {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--base-size-8) + var(--base-size-2));\n  width: 100%;\n  margin: 0;\n  color: var(--brand-color-text-default);\n  font-size: var(--brand-text-size-300);\n  font-weight: var(--brand-heading-weight-600);\n  line-height: var(--brand-text-lineHeight-300);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container a span {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-desc,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-meta {\n  display: none;\n}\n\n@media screen and (max-width: 47.99rem) {\n  .SubdomainNavBar-search-dialog {\n    inset-block-start: var(--base-size-16);\n    inset-block-end: auto;\n    inset-inline: var(--base-size-16);\n    width: calc(100vw - (var(--base-size-16) * 2));\n    max-height: calc(100vh - (var(--base-size-16) * 2));\n    height: auto;\n  }\n}\n\n.SubdomainNavBar-skip-to-content {\n  position: absolute;\n  inset-block-start: calc(var(--SubdomainNavBar-height) / 2);\n  inset-inline-start: var(--base-size-16);\n  z-index: 100;\n  transform: translateY(-50%);\n}\n\n/*\n * Reusable animations\n */\n@keyframes fade-in-down {\n  0% {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes fade-in-down-overflow {\n  0% {\n    opacity: 0;\n    transform: translateY(calc(0px - var(--base-size-24)));\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(calc(0px - var(--base-size-4)));\n  }\n}\n\n@keyframes fade-out {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n@keyframes enlarge-shadow {\n  0% {\n    scale: 0.98;\n    box-shadow: 0px 8px 0 rgba(1, 4, 9, 0.15);\n  }\n  100% {\n    scale: 1;\n    box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n  }\n}\n\n@keyframes fade-in-down-staggered {\n  0% {\n    opacity: 0;\n    transform: scale(0.6) translateY(-8px);\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .SubdomainNavBar,\n  .SubdomainNavBar::before,\n  .SubdomainNavBar::after,\n  .SubdomainNavBar * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/lib/SubdomainNavBar/SubdomainNavBar.d.ts

@@ -17,6 +17,7 @@ export type SubdomainNavBarMenuLabels = {
      */
     overflowMenuLabel: string;
 };
+export type SubdomainNavBarVariant = 'default' | 'featured';
 export type SubdomainNavBarProps = Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
     /**
      * Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,
@@ -31,6 +32,10 @@ export type SubdomainNavBarProps = Omit<React.HTMLAttributes<HTMLElement>, 'chil
      * Fill the maximum width of the parent container. Defaults to `false`.
      */
     fullWidth?: boolean;
+    /**
+     * Sets the navigation layout. Defaults to `default`.
+     */
+    variant?: SubdomainNavBarVariant;
     /**
      * Optional React element rendered after the navigation links.
      */
@@ -173,6 +178,10 @@ export declare const SubdomainNavBar: React.ForwardRefExoticComponent<Omit<React
      * Fill the maximum width of the parent container. Defaults to `false`.
      */
     fullWidth?: boolean;
+    /**
+     * Sets the navigation layout. Defaults to `default`.
+     */
+    variant?: SubdomainNavBarVariant;
     /**
      * Optional React element rendered after the navigation links.
      */