/**
 * Local Business Directory — TES header Connect icon fix (v2.9.16).
 *
 * ROOT CAUSE (confirmed, lives outside this plugin):
 * The shared theme header (`header.php` → `header-connect-launch.php`)
 * always server-renders the TES Connect launch icon for eligible
 * logged-in users (Acts/Venue owners) on EVERY page as
 * `<img class="tes-connect-brand-logo ... tes-connect-account-launch__img"
 * width="1024" height="1024">` (native 1024×1024 PNG).
 *
 * The stylesheet that shrinks that image to a 44px circular icon
 * (`tes-direct-messaging/assets/css/connect-branding.css` +
 * `.tes-connect-account-launch__img` in `tes-direct-messaging/assets/css/public.css`)
 * is only enqueued by `tes_dm_is_tes_site_header_context()` on the TES
 * homepage and the My Account page — see
 * `tes-direct-messaging/includes/branding.php`. On every other page,
 * including every Local Business Directory screen (browse, category,
 * single venue, registration, activation, owner dashboard/edit), that
 * sizing CSS never loads, so the image falls back to the theme's global
 * `img { max-width:100%; height:auto; }` reset (`style.css`) and renders
 * huge, displacing the HOME logo + "Tenerife Entertainment Scene" wordmark.
 *
 * FIX (scoped to this plugin only, per LBD build rules):
 * Re-apply the same compact, circular, non-displacing sizing to the
 * existing theme-rendered Connect markup — but only while an LBD screen
 * is being viewed, via `mea_enqueue_header_connect_fix()`
 * (includes/header-fix.php). Nothing here duplicates, replaces, or
 * alters the shared theme header or the tes-direct-messaging plugin;
 * this only compensates for the missing CSS while inside the directory.
 *
 * Values mirror the main-site dimensions exactly (44px desktop/tablet,
 * 42px ≤720px, 40px ≤480px) so logged-in LBD screens match the main TES
 * logged-in mobile header pixel-for-pixel.
 */

.site-header .header-top-actions .tes-connect-account-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  background: transparent;
}

.site-header .header-top-actions .tes-connect-account-launch .tes-connect-brand-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

.site-header .header-top-actions .tes-connect-account-launch .tes-connect-brand-logo-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    #ff3cac 0%,
    #ff8a00 14%,
    #ffdd00 28%,
    #34d399 42%,
    #3b82f6 57%,
    #a855f7 71%,
    #ec4899 85%,
    #ff3cac 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

.site-header .header-top-actions .tes-connect-account-launch img.tes-connect-brand-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 50%;
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
  .site-header .header-top-actions .tes-connect-account-launch .tes-connect-brand-logo-rim {
    animation: mea-header-connect-rim-cycle 9s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .header-top-actions .tes-connect-account-launch .tes-connect-brand-logo-rim {
    animation: none;
  }
}

@keyframes mea-header-connect-rim-cycle {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  .site-header .header-top-actions .tes-connect-account-launch {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    max-width: 42px;
    max-height: 42px;
  }
}

@media (max-width: 480px) {
  .site-header .header-top-actions .tes-connect-account-launch {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
  }
}