/* =============================================
   WIM LOGO PLACEMENT SYSTEM
   v1.0 — Drop logo files in assets/ to activate

   Required assets (place in assets/ folder):
   • assets/logo.svg          White version — nav, footer (dark bg)
   • assets/logo-dark.svg     Purple version — future light-bg contexts
   • assets/favicon.svg       Icon-only mark for browser tab
   • assets/favicon-32x32.png PNG fallback (export from favicon.svg)
   • assets/favicon-16x16.png PNG fallback (export from favicon.svg)
   • assets/apple-touch-icon.png 180×180 for iOS home screen

   Until logo files are dropped in, text fallback displays automatically.
   ============================================= */

/* ------------------------------------------
   BASE LOGO ELEMENT
------------------------------------------ */
.logo {
  display: block;
  width: auto;
  flex-shrink: 0;
}

/* ------------------------------------------
   NAV LOGO
   Context: deep purple (#4B0082) background
   Use: white / light logo variant
------------------------------------------ */
.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.logo--nav {
  height: 40px;
  max-width: 190px;
  object-fit: contain;
}

/* ------------------------------------------
   FOOTER LOGO
   Context: deep purple (#4B0082) background
   Use: white / light logo variant
------------------------------------------ */
.footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  margin-bottom: 6px;
}

.logo--footer {
  height: 34px;
  max-width: 160px;
  object-fit: contain;
}

/* ------------------------------------------
   TEXT FALLBACK
   Hidden when image loads.
   Activated by onerror → adds .logo-missing to parent.
------------------------------------------ */
.logo__fallback {
  display: none;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.nav__logo .logo__fallback {
  color: #ffffff;
  font-size: 1.15rem;
}

.footer__logo .logo__fallback {
  color: #ffffff;
  font-size: 1.05rem;
}

/* When image fails, parent gets .logo-missing class → show fallback, hide img */
.logo-missing img.logo {
  display: none;
}

.logo-missing .logo__fallback {
  display: inline;
}

/* ------------------------------------------
   MOBILE SCALING
------------------------------------------ */
@media (max-width: 900px) {
  .logo--nav {
    height: 34px;
    max-width: 160px;
  }
  .logo--footer {
    height: 30px;
    max-width: 140px;
  }
}

@media (max-width: 600px) {
  .logo--nav {
    height: 28px;
    max-width: 140px;
  }
  .logo--footer {
    height: 26px;
    max-width: 120px;
  }
}

@media (max-width: 380px) {
  .logo--nav {
    height: 24px;
    max-width: 120px;
  }
}

/* ------------------------------------------
   LIGHT BACKGROUND CONTEXT
   If logo ever appears on lavender or warm white sections,
   swap to logo-dark.svg in markup or apply this filter
   to convert white SVG to #4B0082 purple.
------------------------------------------ */
.logo--on-light {
  /* Converts white SVG → #4B0082 Deep Royal Purple */
  filter: brightness(0) saturate(100%)
          invert(9%) sepia(97%) saturate(7438%)
          hue-rotate(282deg) brightness(64%) contrast(135%);
}

/* ------------------------------------------
   CONTRAST REFERENCE (for designer handoff)

   Background         Logo color      WCAG ratio   Pass?
   ─────────────────────────────────────────────────────
   #4B0082 (Purple)   White #FFFFFF   ~9.1:1       ✅ AAA
   #4B0082 (Purple)   Gold  #C9A84C   ~4.5:1       ✅ AA
   #FAF8F4 (White)    Purple #4B0082  ~9.1:1       ✅ AAA
   #FAF8F4 (White)    Gold  #C9A84C   ~2.8:1       ❌ Fail
   #F3EFFE (Lavender) Purple #4B0082  ~6.0:1       ✅ AA

   RECOMMENDATION:
   • Nav + Footer (purple bg):  Use logo.svg (white wordmark, gold mark)
   • Light bg contexts:         Use logo-dark.svg (purple wordmark)
   • Gold accent on light bg:   Do NOT use as sole logo color — pair with purple
   ============================================= */