/* Gartner announcement as a slim strip above the nav (see announce-bar.js), so it takes no row in the hero. Scoped to html[data-ann]. */

/* the announce no longer takes a row in the desktop hero, so the demo starts higher */
@media (min-width: 1121px) {
  [data-ann] .hero-stage { top: 40px; }
}
[data-ann] .announce::before { display: none; }
[data-ann] .announce { transition: color .2s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
[data-ann] .ann-arr { display: inline-block; transition: transform .25s var(--ease), color .2s; }
[data-ann] .announce:hover .ann-arr { transform: translateX(2px); color: var(--fg); }

/* the strip */
[data-ann="bar"] .ann-bar {
  position: relative; z-index: 51; height: 36px;
  display: flex; align-items: center; justify-content: center; padding: 0 20px; overflow: hidden;
  border-bottom: 1px solid rgb(var(--ink) / .07);
  background:
    radial-gradient(60% 220% at 50% 50%, rgba(19, 233, 137, .085), transparent 70%),
    rgb(var(--ink) / .025);
}
[data-ann="bar"] .ann-bar .announce {
  margin: 0; padding: 0; height: 100%; border: 0; border-radius: 0; background: none;
  display: inline-flex; align-items: center; gap: 0;
  font-size: 13px; letter-spacing: -.003em; color: var(--fg-2); white-space: nowrap; min-width: 0;
}
[data-ann="bar"] .ann-bar .announce-long { display: inline; overflow: hidden; text-overflow: ellipsis; }
[data-ann="bar"] .ann-bar .announce-short { display: none; }
[data-ann="bar"] .ann-dot { flex: none; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--accent); }
[data-ann="bar"] .ann-bar .announce b {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; padding-left: 14px;
  border-left: 1px solid var(--line-2); font-weight: 500; color: var(--fg);
}
[data-ann="bar"] .ann-bar .announce b span { display: inline-block; transition: transform .25s var(--ease); }
[data-ann="bar"] .ann-bar .announce:hover { color: var(--fg); }
[data-ann="bar"] .ann-bar .announce:hover b span { transform: translateX(3px); }
/* the fold stays one screen tall with the strip on top */
@media (min-width: 1121px) {
  [data-ann="bar"] .hero { min-height: calc((100svh - 68px - 36px) / var(--ann-hz, 1)) !important; }
}
@media (min-width: 900px) and (max-width: 1120px) {
  [data-ann="bar"] .hero { min-height: calc(100svh - 69px - 36px); }
}
@media (max-width: 1120px) {
  [data-ann="bar"] .ann-bar { height: 34px; padding: 0 16px; }
  [data-ann="bar"] .ann-bar .announce { font-size: 12.5px; }
  [data-ann="bar"] .ann-bar .announce-long { display: none; }
  [data-ann="bar"] .ann-bar .announce-short { display: inline; }
  [data-ann="bar"] .ann-bar .announce b { margin-left: 10px; padding-left: 10px; }
}
@media (max-width: 560px) {
  [data-ann="bar"] .hero { min-height: calc(100svh - 69px - 34px); }
  [data-ann="bar"] .hero-inner { padding-top: calc(var(--s1) + var(--s2)); }
}
@media (max-width: 370px) {
  [data-ann="bar"] .ann-dot { display: none; }
}
/* the open menu pins the nav to the top of the screen (html.nav-locked); the strip sits above it in z-order, so it would show through the nav */
html.nav-locked .ann-bar { visibility: hidden; }