/* ===========================================================
   topbar.css — The moving strip above the header.

   Loaded on every page, immediately after core.css (head.php), so the few
   header rules it needs to adjust win on source order.

   Ground is #0a0a0a — the same near-black as the mega-menu panel, so opening
   a panel reads as the top bar unfolding rather than a second surface. The
   strip lives inside .site-header, so it is sticky with it, and it collapses
   to nothing once the header condenses on scroll: a welcome, not a permanent
   tax on the viewport.
   =========================================================== */

/* Live height of the strip. The header exposes it so the mobile sheet, which
   is positioned against the header, can add it to its own offset. */
.site-header { --ub-tb-h: 44px; }
.site-header.is-scrolled { --ub-tb-h: 0px; }

.ub-topbar {
  --tb-bg: #0a0a0a;
  --tb-ink: #ffffff;
  --tb-ink-2: oklch(0.86 0 0);
  --tb-mute: oklch(0.68 0 0);
  --tb-rule: oklch(1 0 0 / 0.14);
  /* Oxford blue's hue (268), lifted for legibility against near-black —
     --accent-on-dark is tuned for the footer's lighter grounds and goes muddy
     here. Same family as the mega-menu feature card, one surface. */
  --tb-accent: oklch(0.68 0.13 268);

  position: relative;
  z-index: 2;
  height: var(--ub-tb-h);
  overflow: hidden;
  background: var(--tb-bg);
  color: var(--tb-mute);
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
  transition: height 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.18s ease;
}
.site-header.is-scrolled .ub-topbar {
  opacity: 0;
  border-bottom-color: transparent;
}

/* slow sheen — the only decoration that crosses the whole strip */
.ub-topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 36%, oklch(1 0 0 / 0.055) 50%, transparent 64%);
  transform: translateX(-100%);
  animation: tb-sheen 11s ease-in-out 2.5s infinite;
}
@keyframes tb-sheen {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

/* instrument scan — an accent segment tracking along the bottom hairline */
.tb-scan {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.tb-scan::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 20%;
  background: linear-gradient(90deg, transparent, var(--tb-accent), transparent);
  animation: tb-scan 8s linear infinite;
}
@keyframes tb-scan {
  from { transform: translateX(-120%); }
  to   { transform: translateX(600%); }
}

/* ── the row ──────────────────────────────────────────────────────────── */
.ub-topbar-row {
  position: relative;
  z-index: 1;
  height: var(--ub-tb-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2.2vw, 40px);
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* pulsing register dot, used by the deadline and the support state */
.tb-pulse {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tb-accent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--tb-accent) 60%, transparent);
  animation: tb-pulse 2.2s ease-out infinite;
}
@keyframes tb-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--tb-accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in oklab, var(--tb-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--tb-accent) 0%, transparent); }
}

/* ── left: live CIS countdown ─────────────────────────────────────────── */
.tb-deadline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tb-mute);
  transition: color 0.18s ease;
}
.tb-deadline:hover { color: var(--tb-ink-2); }
.tb-dl-k { color: var(--tb-ink); }
.tb-dl-m,
.tb-dl-v { color: var(--tb-mute); }
.tb-dl-c {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border: 1px solid color-mix(in oklab, var(--tb-accent) 46%, transparent);
  border-radius: 3px;
  color: var(--tb-accent);
  letter-spacing: 0.08em;
  transition: background 0.18s ease, color 0.18s ease;
}
.tb-deadline:hover .tb-dl-c {
  background: var(--tb-accent);
  color: #0a0a0a;
}

/* ── centre: the marquee ──────────────────────────────────────────────── */
.tb-ticker {
  position: relative;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* fade the strip in and out of the run rather than clipping it hard */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.tb-track {
  display: flex;
  align-items: center;
  will-change: transform;
  animation: tb-marquee 64s linear infinite;
}
/* two identical runs side by side — one run's width is exactly 50% */
@keyframes tb-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.tb-set { display: flex; align-items: center; }

/* the run stops under the pointer and for keyboard users tabbing through it,
   so a line can always be held still long enough to read or click */
.tb-ticker:hover .tb-track,
.tb-ticker:focus-within .tb-track { animation-play-state: paused; }

.tb-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 clamp(18px, 1.9vw, 32px);
  color: var(--tb-mute);
  transition: color 0.18s ease;
}
/* register diamond between every item, including across the loop seam */
.tb-item::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  background: var(--tb-accent);
  opacity: 0.5;
  transform: rotate(45deg);
}
.tb-item .tb-ic {
  flex-shrink: 0;
  color: var(--tb-accent);
  opacity: 0.9;
  transition: opacity 0.18s ease;
}
a.tb-item:hover { color: var(--tb-ink); }
a.tb-item:hover .tb-ic { opacity: 1; }
.tb-tx b { color: var(--tb-ink); font-weight: 600; }

/* the CIS line is carried in the marquee only where the left zone is gone */
.tb-item-dl { display: none; }

/* ── right: trial CTA ─────────────────────────────────────────────────── */
.tb-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--tb-rule);
  border-radius: 3px;
  color: var(--tb-ink);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.tb-cta .arr { transition: transform 0.16s ease; }
.tb-cta:hover {
  background: var(--tb-accent);
  border-color: var(--tb-accent);
  color: #0a0a0a;
}
.tb-cta:hover .arr { transform: translateX(3px); }

/* keyboard focus is visible against the near-black ground */
.ub-topbar a:focus-visible {
  outline: 2px solid var(--tb-accent);
  outline-offset: 2px;
}

/* ── the mobile sheet sits below the whole header, strip included ──────── */
.mobile-sheet { top: calc(var(--hdr-h, 84px) + var(--ub-tb-h, 0px)); }

/* ── responsive ───────────────────────────────────────────────────────── */
/* The zones give way one at a time so the marquee always keeps a readable
   window; whatever is dropped from the left is picked up inside the run. */
@media (max-width: 1440px) {
  /* shed the tax period, never the deadline itself */
  .tb-dl-m { display: none; }
}
@media (max-width: 1180px) {
  /* the left zone folds away and the CIS countdown rides in the marquee */
  .tb-deadline { display: none; }
  .tb-item-dl { display: inline-flex; }
  .ub-topbar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
}
@media (max-width: 780px) {
  /* nothing left but the run — drop the empty track so its gap goes too */
  .tb-cta { display: none; }
  .ub-topbar-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .site-header { --ub-tb-h: 38px; }
  .site-header.is-scrolled { --ub-tb-h: 0px; }
  .mobile-sheet { top: calc(64px + var(--ub-tb-h, 0px)); }
  .ub-topbar-row { font-size: 11.5px; letter-spacing: 0.05em; }
  .tb-track { animation-duration: 46s; }
  .tb-item { padding: 0 18px; gap: 8px; }
  .tb-ticker {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}
@media (max-width: 640px) {
  .mobile-sheet { top: calc(64px + var(--ub-tb-h, 0px)); }
}

/* ── reduced motion: nothing moves; the strip becomes a swipeable rail ─── */
@media (prefers-reduced-motion: reduce) {
  .ub-topbar::after,
  .tb-scan::before,
  .tb-pulse,
  .tb-track { animation: none !important; }
  .ub-topbar { transition: none; }
  .tb-ticker { overflow-x: auto; scrollbar-width: none; }
  .tb-ticker::-webkit-scrollbar { display: none; }
  .tb-set:nth-child(2) { display: none; }
}