/**
 * The offer strip.
 *
 * Sits at the very top of the document in normal flow, where an announcement
 * bar belongs — not pinned over the theme's header, which would cover whatever
 * the theme put there and shift the page under someone already reading.
 */

.gms-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 44px 8px 16px;
  background: var(--gms-strip-bg, #1c1917);
  color: var(--gms-strip-ink, #ffffff);
  font-size: .8125rem;
  line-height: 1.35;
  text-align: center;
}

.gms-strip[hidden] { display: none; }

/* No close button means no need to reserve room for one. */
.gms-strip:not(:has(.gms-strip__x)) { padding-right: 16px; }

.gms-strip__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.gms-strip__msg {
  display: none;
  align-items: center;
  gap: 6px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  /* One line, cut rather than wrapped: a strip that grows to two lines pushes
     the whole page down as the message rotates. */
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gms-strip__msg.is-on { display: inline-flex; }

a.gms-strip__msg:hover { color: inherit; text-decoration: underline; }
a.gms-strip__msg:hover .gms-strip__go { transform: translateX(2px); }

.gms-strip__go {
  flex: 0 0 auto;
  opacity: .75;
  transition: transform .15s ease;
}

/* Members-only offers read as a different kind of thing, because they are:
   a promise that only applies to some of the people reading it. */
.gms-strip__msg--member::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gms-strip-member, #fbbf24);
}

/* Rotation off: every message on one row, separated rather than stacked. */
.gms-strip.is-static .gms-strip__track { flex-wrap: wrap; row-gap: 4px; }

.gms-strip.is-static .gms-strip__msg + .gms-strip__msg::after { content: none; }

.gms-strip__x {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  opacity: .6;
  cursor: pointer;
}

.gms-strip__x:hover { opacity: 1; background: rgba(255, 255, 255, .12); }

/* Focus has to be visible against a dark bar, and the theme's own outline
   colour is a coin toss. */
.gms-strip__x:focus-visible,
.gms-strip a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .gms-strip { padding-left: 12px; font-size: .75rem; }
  .gms-strip.is-static .gms-strip__track { gap: 14px; }
}