/*
 * Silent Heroes — Belka promo (announcement bar), nad navbarem.
 * Czerwone tło, biały tekst, bold na kodzie. Klikalna w całości.
 */

/* Grupa „przyklejona" — belka + navbar pinują się razem na górze.
   Wrapper przejmuje sticky; navbar zostaje position:relative (kontekst dla
   dropdownu wyszukiwarki), bez własnego sticky → belka nie ucieka po scrollu. */
.sh-topbar {
  position: sticky;
  top: 0;
  z-index: var(--sh-z-navbar);
}
.sh-topbar .sh-navbar {
  position: relative;
  top: auto;
}

.sh-announce {
  display: block;
  background: var(--sh-red);
  color: #fff;
  text-decoration: none;
  transition: background var(--sh-duration) var(--sh-ease);
}
.sh-announce:hover,
.sh-announce:focus { background: var(--sh-red-dark); }
.sh-announce:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

.sh-announce__inner {
  max-width: var(--sh-container);
  margin: 0 auto;
  min-height: 40px;
  padding: 8px var(--sh-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.sh-announce__text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  font-family: var(--sh-font-sans);
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #fff;
}

.sh-announce__offer strong {
  font-weight: var(--sh-fw-bold);
  white-space: nowrap;
}

.sh-announce__sep {
  opacity: 0.6;
  font-weight: var(--sh-fw-regular);
}

.sh-announce__msg { font-weight: var(--sh-fw-medium); }

/* Ryś (maskotka) — tylko desktop, inline przy tekście, bez klipowania. */
.sh-announce__rys { display: none; }

@media (min-width: 900px) {
  .sh-announce__rys {
    display: block;
    height: 36px;
    width: auto;
    flex: 0 0 auto;
    pointer-events: none;
  }
}

/* Mobile — ciaśniej, mniejsza czcionka. */
@media (max-width: 480px) {
  .sh-announce__inner { min-height: 36px; padding: 7px 12px; gap: 8px; }
  .sh-announce__text { font-size: 0.78rem; gap: 4px 8px; }
}

/* ─────────────────────────────────────────────────────────────
 * Pasek zapisu (pkt 4 „Zapisy do newslettera") — formularz w belce.
 * Belka nie jest już klikalna w całości; ma pole e-mail + przycisk + zamknięcie.
 * ───────────────────────────────────────────────────────────── */
.sh-announce--signup { cursor: default; }
.sh-announce--signup .sh-announce__inner {
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-top: 7px;
  padding-bottom: 7px;
  position: relative;
}
.sh-bar-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 1 auto;
}
.sh-bar-email {
  box-sizing: border-box;
  min-width: 0;
  width: 200px;
  max-width: 46vw;
  padding: 7px 12px;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 6px;
  background: #fff;
  color: #111;
  font-family: var(--sh-font-sans);
  font-size: 0.875rem;
}
.sh-bar-email::placeholder { color: #888; }
.sh-bar-email:focus { outline: 2px solid #fff; outline-offset: 1px; }
.sh-bar-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sh-bar-btn {
  flex: 0 0 auto;
  padding: 7px 16px;
  border: 0;
  border-radius: 6px;
  background: #111;
  color: #fff;
  font-family: var(--sh-font-sans);
  font-size: 0.875rem;
  font-weight: var(--sh-fw-bold);
  letter-spacing: .02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--sh-duration) var(--sh-ease);
}
.sh-bar-btn:hover { background: #000; }
.sh-bar-btn:disabled { opacity: .6; cursor: default; }
.sh-bar-msg {
  color: #fff;
  font-family: var(--sh-font-sans);
  font-size: 0.8125rem;
}
.sh-bar-msg:empty { display: none; }
.sh-bar-close {
  flex: 0 0 auto;
  margin-left: 6px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .85);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.sh-bar-close:hover { color: #fff; }

@media (max-width: 640px) {
  .sh-announce--signup .sh-announce__text { flex: 1 1 100%; justify-content: center; }
  .sh-bar-email { width: 160px; max-width: 52vw; }
  .sh-bar-close { position: absolute; top: 4px; right: 6px; margin: 0; }
}