@import '../../styles/tokens.css';

.in-person-banner {
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 1023px) {
  body:has(#feds-menu-wrapper.is-open) .in-person-banner {
    display: none;
  }
}

body:has(.in-person-banner) main > .section:first-child:not(.rounded-corners-top):not(.rounded-corners) {
  border-radius: var(--s2a-border-radius-lg) var(--s2a-border-radius-lg) 0 0;
  overflow: clip;
  z-index: 3;
  margin-top: calc(-1 * var(--s2a-border-radius-lg));
  margin-bottom: initial;
}

.in-person-banner.in-person-banner-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(calc(-1 * var(--in-person-banner-scroll-progress, 0px)));
  z-index: 1;
}

.in-person-banner.in-person-banner-nav-overlay.in-person-banner-scrolled {
  pointer-events: none;
}

.in-person-banner.in-person-banner-nav-overlay ~ header.global-navigation {
  top: calc(
    var(--in-person-banner-height, var(--global-height-nav, 80px)) - var(--in-person-banner-scroll-progress, 0px)
  );
}

body:has(.global-navigation):has(.in-person-banner-nav-overlay:not(.in-person-banner-scrolled)) main {
  margin-top: calc(
    var(--in-person-banner-height, var(--global-height-nav, 80px)) - var(--feds-nav-total-height, 80px)
  );
}

.in-person-banner-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s2a-spacing-md);
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: var(--s2a-spacing-md) 64px;
  background: var(--s2a-color-background-default);
  color: var(--s2a-color-content-default);
  font-family: var(--body-font-family, "Adobe Clean", sans-serif);
}

.in-person-banner-copy {
  max-width: 800px;
  margin: 0 auto;
  color: var(--s2a-color-content-default);
  font-family: var(--body-font-family, "Adobe Clean", sans-serif);
  font-size: var(--s2a-typography-font-size-label);
  line-height: var(--s2a-typography-line-height-label);
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  letter-spacing: var(--s2a-typography-letter-spacing-label);
  text-align: center;
}

.in-person-banner-copy p {
  margin: 0;
}

.in-person-banner-link {
  color: inherit;
  font-family: var(--body-font-family, "Adobe Clean", sans-serif);
  font-size: var(--s2a-typography-font-size-label);
  line-height: var(--s2a-typography-line-height-label);
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  letter-spacing: var(--s2a-typography-letter-spacing-label);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

@media (max-width: 767px) {
  .in-person-banner-inner {
    align-items: flex-start;
    gap: var(--s2a-spacing-none);
    padding: var(--s2a-spacing-md) var(--s2a-viewport-side-margins, var(--s2a-spacing-sm));
  }

  .in-person-banner-copy {
    margin: 0;
  }
}