/* mfg-365 global app bar — injected into every page at build time.
   Namespaced (mfg-gb-*) so it never collides with an app's own styles.
   Sticky at the very top; each app's own sticky header is offset below it. */
.mfg-global-bar{
  position:sticky;top:0;z-index:9999;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:52px;box-sizing:border-box;
  background:#0B1020;color:#fff;
  padding:0 clamp(1rem,4vw,2.2rem);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mfg-gb-brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:.9rem;letter-spacing:.01em;white-space:nowrap}
.mfg-gb-brand .mfg-gb-glyph{width:20px;height:20px;border-radius:6px;flex:0 0 auto;
  background:linear-gradient(120deg,#12B8A6 0%,#2F6BFF 38%,#7C5CFC 70%,#E3458E 100%)}
.mfg-gb-brand span{background:linear-gradient(120deg,#12B8A6,#2F6BFF 40%,#7C5CFC 70%,#E3458E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mfg-gb-links{display:flex;align-items:center;gap:.3rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.mfg-gb-links::-webkit-scrollbar{display:none}
.mfg-gb-link{display:inline-flex;align-items:center;gap:.45rem;
  font-size:.85rem;font-weight:600;color:#C9D2F0;text-decoration:none;
  padding:.4rem .85rem;border-radius:20px;white-space:nowrap;
  border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}
.mfg-gb-link:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}
.mfg-gb-link .mfg-gb-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.mfg-gb-link.is-current{color:#fff;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
@media(max-width:560px){
  .mfg-gb-brand span{display:none}
  .mfg-gb-link{padding:.35rem .6rem;font-size:.8rem}
}

/* Offset each app's own sticky header so it stacks BELOW the global bar
   (bar height = 52px) instead of overlapping it. These selectors are specific
   to the two known scaffolds and are harmless where they don't exist. */
.site-header{top:52px !important}          /* Announcements + Frontier CoE header */
.tabs{top:112px !important}                /* Announcements + Frontier CoE tab strip (was 60) */
nav.nav{top:52px !important}               /* Adoption Hub header */

/* Anchor jumps (e.g. loading at #announcements) must clear the full sticky
   header stack, otherwise the target content — like the hero box — is scrolled
   up underneath it and clipped. scroll-padding-top stops in-page anchor scrolls
   below the stack. Sized per scaffold:
     tabs scaffold  = global bar 52 + header 63 + tabs 54 ≈ 169 -> 174
     adoption (nav) = global bar 52 + nav ~52          ≈ 104 -> 110 */
html{scroll-padding-top:110px}
html:has(.tabs){scroll-padding-top:174px}
