/* =========================================================================
   RW LOGO CONTRACT -- the single source of truth for team logo rendering.
   Added 2026-07-27 at Paul's call: "same size in relation to icon boxes on
   every page and every section, a little white padding, zero flicker."

   WHY THIS FILE EXISTS: css/rinkwire.css accumulated 132 stacked logo rules
   across at least four generations of patches, and several pages carried
   their own private copies on top. Which rule won differed by page and by
   section, so the same logo rendered at different sizes all over the site.
   This file loads on every page and is the LAST word on the pieces that
   were inconsistent. The old rules underneath are inert; do not add logo
   sizing rules anywhere else. Change THIS file.

   THE CONTRACT
   1. A logo BOX can be any size the layout wants (30px chip, 104px hero).
      Box sizing/radius stays with the layout. This file does not touch it.
   2. Inside its box, every logo draws the SAME way: centered, fitted
      (object-fit: contain), with 4% breathing room on every side, on a
      white background. No per-shape variants, no exceptions.
   3. A box whose logo is missing shows dark initials on the SAME white
      background -- every box is white, no exceptions (Paul, 2026-07-28).
   4. Logos fade in over 140ms once loaded (js/rw-crest-events.js adds
      .crest-in). Nothing paints half-loaded, nothing flickers.

   Covered boxes (from the 2026-07-27 sitewide audit):
     .logo            rinkwire.js surfaces (home, team, teams, leaderboards,
                      players, playoffs, standings panels)
     .big-logo        featured matchup, team page hero
     .team-logo-sm    scores / standings / rankings lite pages
     .rw-ticker-logo  score ticker cards (all pages)
     .logoBox         camps + clubs cards
     .simple-logo     playoff bracket chips
     .performer-badge.rw-perf-logo   playoffs top-performer badge
   Deliberately NOT covered: the RW brand marks (.rw, .rw-footer-rw,
   .rw-footer-logo) -- those are brand, not team logos.
   ========================================================================= */

.logo, .big-logo, .team-logo-sm, .rw-ticker-logo, .logoBox, .simple-logo,
.performer-badge.rw-perf-logo {
  background: #fff !important;
  overflow: hidden !important;
}

.logo img, .big-logo img, .team-logo-sm img, .rw-ticker-logo img,
.logoBox img, .simple-logo img, .performer-badge.rw-perf-logo img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 4% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: block !important;
  margin: 0 !important;
}

/* Zero flicker: a crest is invisible until it has actually loaded, then it
   fades in. rw-crest-events.js adds .crest-in on the capture-phase load
   event (plus a safety sweep for cache-instant images). Images that legacy
   code reveals with inline styles keep working: inline opacity wins over
   the un-important rule below by design. */
.logo img:not(.crest-in), .big-logo img:not(.crest-in),
.team-logo-sm img:not(.crest-in), .rw-ticker-logo img:not(.crest-in),
.logoBox img:not(.crest-in), .simple-logo img:not(.crest-in),
.performer-badge.rw-perf-logo img:not(.crest-in) {
  opacity: 0;
}
.logo img.crest-in, .big-logo img.crest-in, .team-logo-sm img.crest-in,
.rw-ticker-logo img.crest-in, .logoBox img.crest-in, .simple-logo img.crest-in,
.performer-badge.rw-perf-logo img.crest-in {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .logo img, .big-logo img, .team-logo-sm img, .rw-ticker-logo img,
  .logoBox img, .simple-logo img, .performer-badge.rw-perf-logo img {
    transition: opacity .14s ease;
  }
}

/* Missing-logo initials: one look everywhere. Soft tile, dark ink. */
/* (2026-07-28, Paul: EVERY box is white, including initials tiles. The old soft-blue #e9f1fb tile is retired.) */
.logo .logo-fallback, .big-logo .logo-fallback, .team-logo-sm .logo-fallback,
.rw-ticker-logo .logo-fallback, .simple-logo .logo-fallback,
.logoBox .fallbackLogo {
  background: transparent !important;
  color: #16233a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Playoff Hub matchup boxes (2026-07-28): .team > .mark and .rw-showcase-mark
   escaped the original audit because their class names contain no "logo" or
   "crest" (found by inspecting the live DOM). Same contract as every box:
   white background, 4% border, 92% artwork, fade-in. */
.team > .mark, .rw-showcase-mark {
  background: #fff !important;
  overflow: hidden !important;
}
.team > .mark img, .rw-showcase-mark img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; object-position: center !important;
  padding: 4% !important; box-sizing: border-box !important;
  background: transparent !important; border-radius: 0 !important;
  display: block !important; margin: 0 !important;
}
.team > .mark img:not(.crest-in), .rw-showcase-mark img:not(.crest-in) { opacity: 0; }
.team > .mark img.crest-in, .rw-showcase-mark img.crest-in { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .team > .mark img, .rw-showcase-mark img { transition: opacity .14s ease; }
}