/* ---------------------------------------------------------------------------
 * House of Brands — footer band
 *
 * Modelled on the Kino Flo footer band: hairline rule, centred eyebrow, a row
 * of dimmed white marks, hairline rule. Lives INSIDE the footer with no ground
 * of its own, so it blends into --djr-footer-bg (brand red) and is fenced by
 * the footer's existing .djr-footer__rule hairlines above and below.
 *
 * The marks are white SVGs, so they need no filter — only opacity, as on Kino
 * Flo. They sit a little brighter here (0.72 rather than 0.55) because brand
 * red is a lighter ground than Kino Flo's near-black and the same value reads
 * washed out rather than quiet.
 *
 * Flex rather than a grid, for the reason Kino Flo chose it: the names run from
 * "ChamSys" to "CHAUVET Professional" and equal columns would leave the short
 * marks adrift in whitespace.
 * ------------------------------------------------------------------------- */

.djr-footer__hoblabel {
  margin: 30px 0 16px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.djr-footer__brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.djr-footer__brands > li { margin: 0; }

.djr-footer__brands a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
}

.djr-footer__brands img {
  height: var(--djr-brand-h, 30px);
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  /* Force every mark to pure white, whatever its source fills.
     The supplied SVGs are not uniformly white — cpro-logo-white.svg carries a
     near-black #231f20 element and the shared CHAUVET DJ mark is white-and-red —
     so marks rendered grey or patchy against the red ground. brightness(0) makes
     every opaque pixel black and invert(1) makes it white, which normalises the
     whole row and, more importantly, normalises whatever an editor uploads next.
     Safe because these are transparent-background SVGs: it is exactly the
     treatment that FAILS on a mark with a white background, which is why the
     legacy brand PNGs had to be replaced rather than filtered. */
  filter: brightness(0) invert(1);
  opacity: 1;
  transition: opacity 0.15s ease-out;
}

/* Text fallback for a brand with no white mark yet — weight-matched to the
   dimmed logos so it sits in the row rather than shouting over it. */
.djr-footer__brandname {
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  transition: color 0.15s ease-out;
}

/* The marks rest at full white, so the hover affordance is a slight dim rather
   than a brighten — there is nothing brighter than white to go to. */
.djr-footer__brands a:hover img,
.djr-footer__brands a:focus-visible img { opacity: 0.75; }
.djr-footer__brands a:hover .djr-footer__brandname,
.djr-footer__brands a:focus-visible .djr-footer__brandname { color: rgba(255, 255, 255, 0.75); }

/* Kino Flo's band has no visible focus ring on these links — don't inherit that. */
.djr-footer__brands a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
  border-radius: var(--djr-radius, 6px);
}

/* The site you are already on is never dimmed — a quiet "this is us" without a
   badge. The badge itself belongs to the top-bar House of Brands menu, not to a
   logo row. */
.djr-footer__brands .is-here img,
.djr-footer__brands .is-here .djr-footer__brandname {
  opacity: 1;
  color: #ffffff;
}

/* Every mark rests at full white now, so the current site is no longer
   distinguished by brightness here. It is marked in the top-bar panel instead,
   which is where the wayfinding belongs. */

/* One breakpoint, as on Kino Flo: below this the row packs from the left and
   wraps, so two or three marks per line stay evenly spaced instead of being
   flung to the edges. */
@media (max-width: 959px) {
  .djr-footer__brands {
    justify-content: flex-start;
    gap: 4px 28px;
  }
  .djr-footer__hoblabel { margin: 24px 0 12px; }
  .djr-footer__brands a { min-height: 38px; }
}