/* WBA animated logo (v3). Real logo artwork in layers: a full ball (its top-left quarter is the logo's ball),
   the rim and post, and the three text lines. Transparent; ball and text turn white in dark mode. */
.wba-mark{position:relative;display:inline-block;height:44px;aspect-ratio:2153/653;vertical-align:middle;isolation:isolate}
.wba-mark img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;max-width:none}
.wba-mark .wl-full{visibility:hidden;position:relative}
/* The ball is only visible left of the logo's inner line and above the rim: whatever passes the post or drops
   through the hoop disappears, leaving the quarter ball. */
.wba-mark .wl-bclip{position:absolute;inset:0;clip-path:inset(-600% 61.821% 8.729% -600%);pointer-events:none}
.wba-mark .wl-bclip .wl-bf{inset:auto;left:13.4696%;top:0;width:48.444%;height:182.5421%;transform-origin:50% 50%;will-change:transform}
.wba-mark .wl-rim{transform-origin:41.4% 99%}
.wba-mark .wl-txt{position:absolute;inset:-25% -6% -25% 0;clip-path:inset(0 0 0 39.3%);pointer-events:none}
.wba-mark .wl-txt img{inset:auto;top:16.6667%;left:0;height:66.6667%;width:94.3396%}
.wba-mark .wl-ring{position:absolute;left:0;top:69%;width:41%;height:31%;border:2px solid #ea5a15;border-radius:50%;opacity:0;pointer-events:none}
.wba-mark .wl-spark{position:absolute;width:6%;height:3px;border-radius:2px;background:#ea5a15;opacity:0;pointer-events:none}
.wba-mark .wl-shine{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 0%,transparent 40%,var(--wl-gloss) 50%,transparent 60%,transparent 100%);
  background-size:300% 100%;background-position:100% 0;
  -webkit-mask:var(--wl-full) center/100% 100% no-repeat;mask:var(--wl-full) center/100% 100% no-repeat}

/* Dark is the site default; light when the device prefers light or the visitor picks it. */
.wba-mark{--wl-gloss:rgba(255,170,120,.95)}
.wba-mark .wl-bf,.wba-mark .wl-txt img{filter:brightness(0) invert(1)}
@media (prefers-color-scheme: light){
  .wba-mark{--wl-gloss:rgba(255,255,255,.95)}
  .wba-mark .wl-bf,.wba-mark .wl-txt img{filter:none}
}
[data-theme="light"] .wba-mark{--wl-gloss:rgba(255,255,255,.95)}
[data-theme="light"] .wba-mark .wl-bf,[data-theme="light"] .wba-mark .wl-txt img{filter:none}
[data-theme="dark"] .wba-mark{--wl-gloss:rgba(255,170,120,.95)}
[data-theme="dark"] .wba-mark .wl-bf,[data-theme="dark"] .wba-mark .wl-txt img{filter:brightness(0) invert(1)}

/* Site header/footer: no white chip behind the logo. */
.ar-logo:has(.wba-mark){background:transparent!important;padding:4px 0!important;overflow:visible!important}
.ar-logo .wba-mark img,.ar-logo .wba-mark{animation:none!important}
.ar-logo:has(.wba-mark)::after{display:none!important}
.ar-head .ar-logo .wba-mark{height:44px}
.ar-foot .ar-logo .wba-mark{height:64px}
.top .brand .wba-mark{height:40px}
@media (max-width:760px){.ar-head .ar-logo .wba-mark{height:38px}}
/* Home page: header sits over the hero photo, so the logo is white there until the header turns solid. */
.ar-head.over:not(.solid) .wba-mark .wl-bf,.ar-head.over:not(.solid) .wba-mark .wl-txt img{filter:brightness(0) invert(1)!important}