/* Promo bar (public/js/promo-bar.js): a navy countdown bar pinned above the site menu.
   While it shows, <html> has .has-promo-bar: the page and the fixed menu move down by its height,
   so nothing hides under it. The height is fixed per breakpoint and the text never wraps. */
.has-promo-bar { --promo-bar-h: 48px; scroll-padding-top: var(--promo-bar-h); }
.has-promo-bar body { padding-top: var(--promo-bar-h); }
.has-promo-bar .nv { top: var(--promo-bar-h); }
.has-promo-bar .nvm__panel { top: calc(64px + var(--promo-bar-h)); max-height: calc(100dvh - 64px - var(--promo-bar-h)); }

.promo-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--promo-bar-h, 48px);
  background: #2C3A52;
  color: #F4F7FC;
  font-family: 'Jost', system-ui, sans-serif;
}
.promo-bar__inner {
  display: flex; align-items: center; justify-content: center; gap: 6px 18px;
  height: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px;
  color: inherit; text-decoration: none;
}
a.promo-bar__inner:hover .promo-bar__before,
a.promo-bar__inner:hover .promo-bar__after { text-decoration: underline 2px; text-underline-offset: 4px; }
a.promo-bar__inner:focus-visible { outline: 3px solid #90B4DE; outline-offset: -3px; }

.promo-bar__before,
.promo-bar__after {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: .95rem; font-weight: 800; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase;
}

.promo-bar__timer { display: flex; align-items: flex-start; gap: 4px; flex-shrink: 0; }
.promo-bar__unit { display: grid; justify-items: center; gap: 2px; }
.promo-bar__digits {
  min-width: 30px; padding: 1px 4px;
  border: 2px solid #111111;
  background: #90B4DE; color: #111111;
  font-size: 1rem; font-weight: 800; line-height: 1.25; text-align: center;
  font-variant-numeric: tabular-nums;
}
.promo-bar__label { color: #B4C6E4; font-size: .55rem; font-weight: 800; letter-spacing: .14em; line-height: 1; }
.promo-bar__colon { font-weight: 800; line-height: 24px; }

/* Phones: the message takes the first line, the timer and the second message share the next one. */
@media (max-width: 640px) {
  .has-promo-bar { --promo-bar-h: 64px; }
  .promo-bar__inner { flex-wrap: wrap; align-content: center; gap: 4px 12px; padding: 0 12px; }
  .promo-bar__before { flex: 1 0 100%; text-align: center; }
  .promo-bar__before,
  .promo-bar__after { font-size: .8rem; letter-spacing: .04em; }
  .promo-bar__digits { min-width: 26px; font-size: .9rem; }
  .promo-bar__label { font-size: .5rem; }
  .promo-bar__colon { line-height: 22px; }
}