/* ═════════════════ SITE MARQUEE (.aitsmq) ═════════════════
       Full-bleed brand ticker. Uses the site's brand palette
       (--brand-blue #3680ED · dark #2060C0 · light #60A4F5) instead of one-
       off hexes so the strip reads as part of the same system as the buttons
       and pills. `width: 100vw` + `margin-inline: calc(50% - 50vw)` pulls it
       out of any centred/capped shell so it always sits edge-to-edge.

       `color: #fff` is set on the CONTAINER, not the item, so it beats the
       footer's `.aitsft a { color: inherit }` (specificity 011) — that rule
       was stronger than our `.aitsmq-item { color: #fff }` (010), which is
       why the labels were rendering in the footer's default dark ink over
       the blue fill. Now the anchor inherits white from `.aitsmq`. */
    /* Brand gradient without the edge mask — the previous 32px transparent
       fade at either end made the outermost labels read as half-visible on
       every screen, which is what "text not visible" was reporting. The
       track already scrolls so a label reaching the edge just wraps around
       to the other side; a fade adds nothing on top of that. Solid brand-
       blue → mid → light gives the full-vibrancy blue the user asked for. */
    .aitsmq{position:relative;display:flex;width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden;padding:0;color:#fff;background-image:linear-gradient(135deg,#2060C0 0%,#3680ED 55%,#2060C0 100%);background-color:#2060C0;border-block:1px solid rgba(255,255,255,.14);z-index:1}
    body.theme-dark .aitsmq{background-image:linear-gradient(135deg,#0e2b58 0%,#2060C0 55%,#0e2b58 100%);background-color:#0e2b58;border-block-color:rgba(255,255,255,.08)}

    /* Dot field the brand surfaces share, so the bar belongs to the page rather
       than looking like an embedded advert. */
    .aitsmq::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.17) 1px,transparent 1.6px);background-size:15px 15px;opacity:.55;pointer-events:none}

    .aitsmq-track{display:flex;align-items:center;flex:0 0 auto;gap:0;min-width:max-content;padding:13px 0;will-change:transform;animation:aitsmq-run var(--aitsmq-dur,42s) linear infinite;color:inherit}
    .aitsmq[data-reverse="1"] .aitsmq-track{animation-direction:reverse}
    @keyframes aitsmq-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
    [dir="rtl"] .aitsmq-track{animation-direction:reverse}
    [dir="rtl"] .aitsmq[data-reverse="1"] .aitsmq-track{animation-direction:normal}

    /* Full winning specificity for the anchor: `.aitsmq .aitsmq-item` (020)
       beats `.aitsft a` (011) so `color: #fff` sticks even when the strip
       renders inside the footer. `text-shadow` gives the labels a hair of
       depth over the gradient without going navy or purple on the reader. */
    .aitsmq .aitsmq-item,
    .aitsmq a.aitsmq-item,
    .aitsmq a.aitsmq-item:visited{color:#fff;text-shadow:0 1px 2px rgba(6,25,66,.55),0 0 1px rgba(0,0,0,.35)}
    .aitsmq-item{display:inline-flex;align-items:center;flex:0 0 auto;padding:4px 6px;border-radius:8px;font-size:17px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;text-decoration:none;transition:background-color .18s ease,color .18s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}

    .aitsmq-sep{flex:0 0 auto;width:19px;height:19px;margin:0 20px;color:rgba(255,255,255,.92)}
    .aitsmq-sep.is-dot{width:6px;height:6px;margin:0 22px;border-radius:50%;background:rgba(255,255,255,.8)}
    .aitsmq-sep.is-slash{display:inline-flex;width:auto;height:auto;margin:0 18px;font-size:17px;font-weight:700;color:rgba(255,255,255,.55)}

    @media (hover:hover){
      .aitsmq:hover .aitsmq-track{animation-play-state:paused}
      .aitsmq .aitsmq-item:hover,
      .aitsmq a.aitsmq-item:hover{background-color:#fff;color:#2060C0;text-shadow:none;transform:translateY(-1px);text-decoration:none}
    }
    .aitsmq:focus-within .aitsmq-track{animation-play-state:paused}
    .aitsmq .aitsmq-item:focus-visible,
    .aitsmq a.aitsmq-item:focus-visible{outline:3px solid #fff;outline-offset:2px;background-color:#fff;color:#2060C0;text-shadow:none}

    @media (max-width:640px){
      .aitsmq-track{padding:10px 0;animation-duration:calc(var(--aitsmq-dur,42s) * .68)}
      .aitsmq-item{font-size:14px;letter-spacing:.03em}
      .aitsmq-sep{width:15px;height:15px;margin:0 13px}
      .aitsmq-sep.is-dot{margin:0 15px}
      .aitsmq-sep.is-slash{margin:0 12px;font-size:14px}
    }

    /* Motion off — the strip becomes a normal scrollable rail; the duplicate
       track is removed entirely so screen readers don't hit it. */
    @media (prefers-reduced-motion:reduce){
      .aitsmq{overflow-x:auto;scrollbar-width:none}
      .aitsmq::-webkit-scrollbar{display:none}
      .aitsmq-track{animation:none;will-change:auto}
      .aitsmq-track[aria-hidden="true"]{display:none}
    }

    /* Forced-colors: the tinted fill can be dropped by the OS, taking the
       white labels with it, so restore a neutral canvas. */
    @media (forced-colors:active){
      .aitsmq{background:Canvas;border-block-color:CanvasText}
      .aitsmq::after{display:none}
      .aitsmq-item{color:LinkText}
      .aitsmq-track{animation:none}
      .aitsmq-track[aria-hidden="true"]{display:none}
    }