/* =========================================================================
   CLIENT LOGO MARQUEE — homepage-only, loaded via index.php's $extraCss.
   Seamless infinite right-to-left scroll: the track renders the same logo
   set TWICE back to back (.client-marquee-group x2) and animates from
   translateX(0) to translateX(-50%) — since both groups are identical in
   width, the moment the first group has fully scrolled off, the second
   (visually identical) group is sitting exactly where the first started,
   so the loop point is invisible. No JS/width math needed for this to work.
   ========================================================================= */
/* This section only shows the "Our Clients" eyebrow now (no h2/p) — the
   default .section-head bottom margin (theme.css) was sized for a full
   eyebrow+heading+paragraph block, so it leaves too much air above the
   logo row with just the eyebrow left. Two classes for higher specificity
   than the plain .section-head rule, independent of stylesheet load order. */
.section-head.section-head-tight { margin-bottom: 1rem; }

.client-marquee-wrap {
  position: relative;
  /* overflow-x: clip (NOT hidden/auto) is deliberate: it clips the
     horizontally-scrolling track to this wrap's own width (now nested
     inside .container, so it gets the same left/right gap every other
     section has) without triggering the classic CSS "if one axis is
     non-visible, the other computes to auto" pairing quirk — clip is the
     one overflow value exempt from that quirk (same reason html{} uses it
     sitewide, see theme.css). The payoff: overflow-y stays genuinely
     visible, so a card's tooltip (::after, popping up ABOVE the card) can
     render outside this box without being clipped, no reserved padding
     needed just to make room for it. */
  overflow-x: clip;
  padding: 1.25rem 0;
}

.client-marquee-track {
  display: flex;
  width: max-content;
  animation: client-marquee-scroll 70s linear infinite;
}
/* Pause on hover so a visitor can actually read/inspect a logo */
.client-marquee-wrap:hover .client-marquee-track { animation-play-state: paused; }

.client-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1.1rem;
  padding: 0 .55rem; /* half-gap at the seam so both groups read evenly spaced */
}

/* Bordered, full-color logo card — same hover-lift language as .card-wa /
   .audience-tile / .client-card (our_clients.php) elsewhere on this site.
   Border uses the same light-green outline color as .btn-wa-outline /
   .btn-ghost, so it reads as "our theme's green border" at rest, not just
   on hover. Padding is intentionally tight so the logo fills the card
   instead of floating in a lot of empty white space. */
.client-marquee-logo {
  position: relative; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 140px; height: 68px;
  background: var(--wa-surface); border: 1.5px solid #BCE3CD;
  border-radius: 12px; box-shadow: var(--shadow-sm);
  padding: .4rem;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.client-marquee-logo:hover, .client-marquee-logo:focus-visible {
  transform: translateY(-4px) scale(1.08);
  box-shadow: var(--shadow-md); border-color: var(--wa-green);
  z-index: 2; /* lift above neighbouring cards while zoomed so it never clips under them */
}
.client-marquee-logo img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
}

/* Pure-CSS tooltip (company name) — same pattern as .city-operator-badge in
   city-page.css: content comes from data-tooltip so nothing relies on a
   style="" attribute (CSP has no unsafe-inline). tabindex="0" on the card
   lets keyboard users trigger it too via :focus-visible. */
.client-marquee-logo::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--wa-ink); color: #fff;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  padding: .45rem .85rem; border-radius: 8px; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 10;
  transition: opacity .18s ease, transform .18s ease;
}
.client-marquee-logo::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent; border-top-color: var(--wa-ink);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 10;
  transition: opacity .18s ease, transform .18s ease;
}
.client-marquee-logo:hover::after, .client-marquee-logo:focus-visible::after,
.client-marquee-logo:hover::before, .client-marquee-logo:focus-visible::before {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

@keyframes client-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 575.98px) {
  .client-marquee-group { gap: .75rem; padding: 0 .4rem; }
  .client-marquee-logo { width: 108px; height: 54px; padding: .3rem; }
}

/* Same reduced-motion convention as .reveal/.floaty elsewhere on this site */
@media (prefers-reduced-motion: reduce) {
  .client-marquee-track { animation: none; }
  .client-marquee-wrap { overflow-x: auto; }
}