/* ==========================================================================
   Logo Enhancement — 17 Apr 2026
   --------------------------------------------------------------------------
   The earnway-logo PNG is light-pink on white, which disappears against the
   pink hero background. These rules wrap every logo instance in a circular
   white badge with a soft shadow so it pops on both pink and dark backgrounds,
   and bumps the display size ~30% everywhere.

   All selectors are namespaced or use the site's existing class names, so
   this file is safe to include after the main stylesheets — nothing it
   targets is used by anything else.

   Works in both dark and light themes.
   ========================================================================== */

/* ── Nav logo (top of every public page via includes/header.php) ─────────── */
.nav-logo {
  /* Give the anchor a visible footprint so the badge has something to sit on */
  display: inline-flex;
  align-items: center;
  padding: 4px;
}

.nav-logo img {
  /* Was 34px — bump and wrap in a circular white pad with soft pink glow */
  height: 52px !important;
  width: 52px;
  object-fit: contain;
  padding: 6px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 6px 20px rgba(226, 40, 97, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-logo:hover img {
  transform: scale(1.05);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 1),
    0 8px 28px rgba(226, 40, 97, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.2);
}

/* In light theme the white-on-white ring disappears — give it a ring
   tinted toward the accent colour so the badge still stands out. */
[data-theme="light"] .nav-logo img {
  box-shadow:
    0 0 0 2px rgba(226, 40, 97, 0.25),
    0 4px 14px rgba(226, 40, 97, 0.18),
    0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ── Page-loader logo (the big one shown during initial load) ───────────── */
#page-loader .ld-logo {
  /* Was free-floating; give it the same circular badge treatment, larger */
  height: 88px !important;
  width: 88px;
  object-fit: contain;
  padding: 10px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.85),
    0 10px 40px rgba(226, 40, 97, 0.45);
  /* Override the brightness(0) silhouette filter from main-updates.css:50 —
     it was designed for an unadorned logo. With the white badge treatment,
     a black silhouette looks like an empty circle. Restore the real colours. */
  filter: none !important;
}
[data-theme="light"] #page-loader .ld-logo {
  filter: none !important;
  box-shadow:
    0 0 0 3px rgba(226, 40, 97, 0.22),
    0 8px 32px rgba(226, 40, 97, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── Footer logo ─────────────────────────────────────────────────────────── */
.footer-brand img {
  height: 44px !important;
  width: 44px;
  object-fit: contain;
  padding: 5px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(226, 40, 97, 0.25);
}
[data-theme="light"] .footer-brand img {
  box-shadow:
    0 0 0 2px rgba(226, 40, 97, 0.2),
    0 3px 10px rgba(226, 40, 97, 0.15);
}

/* ── Admin / Dashboard / Affiliate sidebar logos ─────────────────────────── */
.sidebar-logo img {
  /* Was 26px, bump to 40px with circular badge */
  height: 40px !important;
  width: 40px;
  object-fit: contain;
  padding: 4px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.85),
    0 3px 12px rgba(226, 40, 97, 0.3);
}
[data-theme="light"] .sidebar-logo img {
  box-shadow:
    0 0 0 1.5px rgba(226, 40, 97, 0.2),
    0 2px 8px rgba(226, 40, 97, 0.12);
}

/* Affiliate layout sets height inline to 22px — override */
.aff-sidebar .sidebar-logo img,
aside .sidebar-logo img[style*="22px"] {
  height: 40px !important;
  width: 40px !important;
}

/* ── Auth pages left panel (login/register/forgot/reset) ─────────────────── */
.auth-left-logo {
  margin-bottom: 48px;
}
.auth-left-logo img {
  /* Was 36px, bump to 64px with the strongest highlight of any location */
  height: 64px !important;
  width: 64px;
  object-fit: contain;
  padding: 8px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.85),
    0 8px 28px rgba(226, 40, 97, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ── Coming-soon page (index.php) uses inline CSS — can't reach from here ── */
/* (handled by editing index.php directly — see logo-enhance notes) */

/* ── Mobile: shrink the badges slightly so they don't dominate ───────────── */
@media (max-width: 640px) {
  .nav-logo img         { height: 44px !important; width: 44px; padding: 5px; }
  .footer-brand img     { height: 38px !important; width: 38px; padding: 4px; }
  .auth-left-logo img   { height: 54px !important; width: 54px; padding: 6px; }
  #page-loader .ld-logo { height: 72px !important; width: 72px; padding: 8px; }
}