/* ============================================
   Announcement bar — global chrome above the page header.

   Sits in normal document flow at the top of the body. Scrolls away
   naturally with the page — matches the live giantswarm.io
   behaviour. The page header is `position: sticky; top: 0` so it
   docks just below the bar initially and pins to the viewport
   top once the bar has scrolled out of view.

   Two content variants supported (see _includes/announcement-bar.html):
     - simple   text + outlined CTA pill
     - branded  coral badge (icon + label) + text + outlined CTA
   ============================================ */

/* Bar height is published as a custom property so the static header
   host (header.css) and other sticky-aware components (cs-article
   sidebar, learn sidebar, listing filter bar) can consume the same
   value for their top offset. Don't hard-code 48px in two places —
   drift between the two causes the bar to overlap the header (or
   leave a seam).

   IMPORTANT — variable is 0 by default; only when the announcement
   bar is actually rendered (base.html sets body.has-announcement)
   does it switch to 48px. Without this gate, pages that don't
   render the bar (e.g. the HubSpot port's base.html does not yet
   include it) still got a phantom 48px of "announcement room"
   factored into every sticky offset, producing visible gaps below
   the page header. */
:root {
  --announcement-h: 0px;
}

body.has-announcement {
  --announcement-h: 48px;
}

.gs-announcement {
  /* Deep navy bg + subtle bottom hairline + faint top highlight =
     "glass-y" surface that sits naturally above the dark hero (or
     the white body on light pages) instead of slamming a vivid
     SaaS-blue band across the top. Color #12446e is in the same
     family as the hero wave gradient, so the bar feels in-context
     rather than chrome-stuck-on-top. */
  background: #12446e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #fff;
  /* position: sticky pins the bar to the top of the viewport once
     the user scrolls — together with the sliding sticky header, it
     forms a two-tier persistent chrome (bar always visible at top,
     header slides in beneath it on scroll past static). z-index 55
     puts it above the sticky header (50) so the announcement
     always stays the topmost chrome stripe; also keeps it above
     the mega-nav backdrop blur (30) so the bar reads crisp while
     the rest of the page dims behind the open mega-nav. */
  position: sticky;
  top: 0;
  z-index: 55;
  /* Explicit height + flex centering instead of padding-based sizing.
     The CTA pill inside is taller than the text line-height, so a
     padding-based bar would balloon to ~54px and bleed onto the
     header. Locking the height with box-sizing border-box keeps the
     bar at exactly --announcement-h regardless of inner content. */
  height: var(--announcement-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
}

.gs-announcement__text {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.4;
}

/* Branded badge — coral pill with optional icon + label. Used for
   event/webinar promos that lead with a brand mark. */
.gs-announcement__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-brand-accent);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-weight: var(--weight-bold);
}

.gs-announcement__badge-icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* AI Certified chip — translucent pill that matches the glass tone
   of the bar. Different visual register from the coral .badge above
   on purpose: that one is a brand promo signal, this one is a
   credential/verification chip. Sparkle icon (4-point star, the
   canonical "AI" mark) sits left of the label. */
.gs-announcement__ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gs-announcement__ai-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: block;
}

/* CTA — outlined white pill at the end of the text. Hover uses the
   same translucent white-wash as `.gs-btn--secondary` (and the dark
   mega-nav "Learn more") so all outlined-on-dark buttons share one
   hover register across the site. Text + border stay white — no
   color swap, no full fill. */
.gs-announcement__cta {
  display: inline-block;
  border: 1.5px solid #fff;
  border-radius: 999px;
  color: #fff;
  padding: 0.25rem 0.85rem;
  margin-left: 0.5rem;
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: background 0.2s ease;
}

.gs-announcement__cta:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Mobile — hide on small viewports. Phones have less real estate
   and announcement bars tend to push real content below the fold.
   Matches the live giantswarm.io behaviour at ≤767px. */
@media (max-width: 767px) {
  /* Bar is hidden on mobile — override the published height token
     to 0 so any consumer using calc(var(--announcement-h, 0px) + …)
     for sticky offsets (cs-sidebar, listing filterbar, learn progress
     bar, etc.) doesn't reserve phantom space when the bar isn't
     actually rendered. */
  :root {
    --announcement-h: 0px;
  }
  .gs-announcement {
    display: none;
  }
}