/* Shared navigation for the published Figma theme and application-owned flows.
   Sticky keeps its real height in document flow, including after font loading.
   Do not add transform/filter/contain here: the menu uses the viewport. */
html:has(.tg-header) { scroll-padding-top: 8rem; }
body:has(.tg-header) .tg-header {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 50;
  background-color: var(--tg-plum);
  box-shadow: 0 1px 0 rgb(254 247 232 / .18);
}
body:has(:is(.tg-designer-faq, .tg-figma-shop, .tg-figma-product, .tg-figma-music, .tg-figma-participate)) .tg-header {
  background-color: #e6d7b9;
}
body:has(.tg-header) .tg-header .tg-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 44px;
  grid-template-areas: "brand date links menu";
  align-items: center;
  gap: .75rem clamp(.75rem, 2vw, 2rem);
  min-height: 88px;
  padding: .75rem clamp(1rem, 4vw, 4rem);
}
body:has(.tg-header) .tg-header .tg-header__inner > * { transform: none; }
body:has(.tg-header) .tg-header .tg-wordmark { grid-area: brand; max-width: 170px; }
body:has(.tg-header) .tg-header .tg-wordmark__logo { width: 170px; height: auto; }
body:has(.tg-header) .tg-header .tg-header__date {
  grid-area: date;
  justify-self: center;
  position: static;
  width: auto;
  margin: 0;
  font-size: clamp(.8rem, 1.3vw, 1.1rem);
  line-height: 1.2;
  transform: none;
}
body:has(.tg-header) .tg-header .tg-header__desktop-nav {
  grid-area: links;
  display: flex;
  gap: clamp(.5rem, 1.5vw, 1.25rem);
  margin: 0;
  white-space: nowrap;
}
body:has(.tg-header) .tg-header .tg-navigation { grid-area: menu; }
body:has(.tg-header) .tg-header .tg-menu-toggle { margin: 0; }
/* Keep the existing illustrated menu above the sticky bar and scrollable. */
body:has(.tg-navigation[open]) .tg-header { z-index: 1000; }
@media (max-width: 800px) {
  html:has(.tg-header) { scroll-padding-top: 9rem; }
  body:has(.tg-header) .tg-header .tg-header__inner {
    grid-template-columns: minmax(0, 1fr) auto 44px;
    grid-template-areas: "brand brand menu" "date links links";
    gap: .25rem .5rem;
    min-height: 112px;
    padding: .5rem max(.75rem, env(safe-area-inset-right)) .5rem max(.75rem, env(safe-area-inset-left));
  }
  body:has(.tg-header) .tg-header .tg-wordmark,
  body:has(.tg-header) .tg-header .tg-wordmark__logo { width: 138px; }
  body:has(.tg-header) .tg-header .tg-header__date {
    justify-self: start;
    padding: .3rem .4rem;
    font-size: .72rem;
    line-height: 1.2;
  }
  body:has(.tg-header) .tg-header .tg-header__desktop-nav {
    justify-self: end;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
  }
  body:has(.tg-header) .tg-header .tg-header__desktop-nav > a:not(.tg-header__ticket-link):not(.tg-header__locale) { display: none; }
  body:has(.tg-header) .tg-header .tg-header__desktop-nav .tg-header__ticket-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .4rem .5rem;
    font-size: .75rem;
    letter-spacing: 0;
  }
  body:has(.tg-header) .tg-header .tg-header__desktop-nav .tg-header__locale {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: .4rem;
  }
}