/* =========================================
   DBL Logo Strip
========================================= */

.dbl-logo-strip {
  /* Values supplied by the shortcode */
  --logo-height: 32px;
  --logo-gap: 64px;
  --mark-size: 14px;
  --marquee-speed: 32s;

  /* Component appearance */
  --strip-background: transparent;
  --logo-colour: var(--text, #111);
  --mark-colour: var(--text, #111);
  --hover-opacity: .55;

  /* Responsive computed values */
  --logo-render-height: var(--logo-height);
  --logo-render-gap: var(--logo-gap);

  position: relative;
  width: 100%;
  overflow: hidden;

  padding-block: calc(
    var(--logo-height, 30px) * 0.35
  );

  background: var(--strip-background);
  color: var(--logo-colour);
}

/* Viewport */

.dbl-logo-strip__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block: calc(var(--logo-render-height) * .35);
}

/* Moving rail */

.dbl-logo-strip__rail {
  display: flex;
  align-items: center;

  width: max-content;

  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Each list is one identical half of the rail */

.dbl-logo-strip__list {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--logo-render-gap);

  /*
   * Maintains the same gap between the final separator
   * and the first logo in the duplicated list.
   */
  padding: 0 var(--logo-render-gap) 0 0;
  margin: 0;

  list-style: none;
}

/* Run only when animate="1" */
.dbl-logo-strip.is-animated .dbl-logo-strip__rail {
  animation: dbl-logo-marquee var(--marquee-speed, 32s) linear infinite;
}

.dbl-logo-strip__rail,
.dbl-logo-strip__list,
.dbl-logo-strip__item,
.dbl-logo-strip__link {
  overflow: visible;
}

.dbl-logo-strip__item,
.dbl-logo-strip__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes dbl-logo-marquee {
  to {
    transform: translate3d(
      calc(-100% / var(--logo-repeat, 2)),
      0,
      0
    );
  }
}

/* Logo items */

.dbl-logo-strip__item,
.dbl-logo-strip__separator {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.dbl-logo-strip__logo,
.dbl-logo-strip__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dbl-logo-strip__image {
  display: block;

  width: auto !important;
  height: calc(
    var(--logo-render-height) * var(--logo-scale, 1)
  ) !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain;

  /* ACF Visual Scale: e.g. 0.8, 1, 1.15 */
  transform: none;
  transform-origin: center;

  transition:
    opacity var(--transition-fast, 180ms ease),
    transform var(--transition-fast, 180ms ease);
}

/* Monochrome logos */

.dbl-logo-strip.is-mono .dbl-logo-strip__image {
  filter: brightness(0) saturate(100%);
}

/* X separator */

.dbl-logo-strip__mark {
  display: inline-flex;

  width: var(--mark-size);
  height: var(--mark-size);

  background-color: var(--mark-colour);

  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;

  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

/* Pause for mouse and keyboard interaction */

@media (hover: hover) and (pointer: fine) {
  .dbl-logo-strip.is-animated:hover
  .dbl-logo-strip__rail {
    animation-play-state: paused;
  }

  .dbl-logo-strip__link:hover
  .dbl-logo-strip__image {
    opacity: var(--hover-opacity);
  }
}

.dbl-logo-strip:focus-within
.dbl-logo-strip__rail {
  animation-play-state: paused;
}

.dbl-logo-strip__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

.dbl-logo-strip__link:focus-visible
.dbl-logo-strip__image {
  opacity: var(--hover-opacity);
}

/* =========================================
   Colour Variants
========================================= */

/* Default: black logos and X */

.dbl-logo-strip.is-mono {
  --logo-colour: var(--text, #111);
  --mark-colour: var(--text, #111);
}

/* Optional use on a dark background */

.dbl-logo-strip.is-on-dark {
  --logo-colour: var(--text-on-dark, #fff);
  --mark-colour: var(--text-on-dark, #fff);
}

.dbl-logo-strip.is-on-dark.is-mono
.dbl-logo-strip__image {
  filter:
    brightness(0)
    saturate(100%)
    invert(1);
}

/* Remove global link styling from logo links */
.dbl-logo-strip__link,
.dbl-logo-strip__link:link,
.dbl-logo-strip__link:visited,
.dbl-logo-strip__link:hover,
.dbl-logo-strip__link:focus,
.dbl-logo-strip__link:active {
  display: block;
  background: transparent !important;
  color: inherit;
  text-decoration: none !important;
  box-shadow: none !important;
  border: 0;
}

/* Remove the iOS tap flash */
.dbl-logo-strip__link {
  -webkit-tap-highlight-color: transparent;
}

/* Retain an accessible keyboard focus indicator */
.dbl-logo-strip__link:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 6px;
}

/* =========================================
   Mission Section
========================================= */

.usm-mission {
  background: var(--accent, #39ff14);
  color: var(--text, #111);
}

.usm-mission .dbl-logo-strip {
  --strip-background: transparent;
  --logo-colour: var(--text, #111);
  --mark-colour: var(--text, #111);
  margin-top: clamp(64px, 7vw, 120px);
  padding-bottom: clamp(36px, 4vw, 64px);
}

/* =========================================
   Responsive
========================================= */

@media (max-width: 767px) {
  .dbl-logo-strip {
    --logo-render-height:
      min(var(--logo-height), 28px);

    --logo-render-gap:
      min(var(--logo-gap), 32px);

    padding-block: 12px;
  }

  .usm-mission .dbl-logo-strip {
    padding-top: 12px;
    padding-bottom: 32px;
  }
}

/* Respect the visitor's motion preference */

@media (prefers-reduced-motion: reduce) {
  .dbl-logo-strip.is-animated
  .dbl-logo-strip__rail {
    animation: none;
    transform: none;
  }

  .dbl-logo-strip__image {
    transition: none;
  }

  /*
   * Allow manual horizontal exploration when
   * automatic animation has been removed.
   */
  .dbl-logo-strip__viewport {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}