/* ==========================================================================
   Logo badge — the InvestNITII mark in the header and footer.

     <span class="logo-badge">
       <img class="logo-badge__img" src="/assets/InvestNITII.png"
            alt="InvestNITII Logo" width="38" height="38" decoding="async" />
     </span>

   On hover or keyboard focus the badge lifts and a magnified, readable copy of
   the logo pops out below it, so the fine print (tagline, SEBI reg. number) can
   be read without leaving the page.

   Add .logo-badge--up in footers, so the panel opens upward instead of down.
   Size it per instance with style="--logo-size: 64px" — no extra class needed.
   ========================================================================== */

.logo-badge {
  /* tokens — override with an inline style on a single badge */
  --logo-size: 38px;
  --logo-radius: 9px;
  --logo-lift: -2px;
  --logo-preview-size: clamp(190px, 52vw, 268px);
  --logo-preview-gap: 14px;
  --logo-surface: #ffffff;
  --logo-ring: rgba(10, 30, 60, 0.12);
  --logo-ring-active: var(--primary, #0a4d8c);
  --logo-shadow: 0 8px 22px rgba(10, 30, 60, 0.18);
  --logo-shadow-lg: 0 18px 44px rgba(10, 30, 60, 0.26);
  --logo-ease: cubic-bezier(0.2, 0.8, 0.25, 1);

  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--logo-size);
  height: var(--logo-size);
  vertical-align: middle;
  /* stay above neighbouring content until the panel has finished fading out */
  transition: z-index 0s linear 0.3s;
}

.logo-badge__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--logo-radius);
  background: var(--logo-surface);
  box-shadow: inset 0 0 0 1px var(--logo-ring);
  transition: transform 0.3s var(--logo-ease), box-shadow 0.3s var(--logo-ease);
}

/* ---------- The magnifier ----------
   The image comes from CSS, and the path is relative to this file, so the same
   markup works from any folder depth. */
.logo-badge::after {
  content: "";
  position: absolute;
  top: calc(100% + var(--logo-preview-gap));
  left: -6px;
  width: var(--logo-preview-size);
  aspect-ratio: 1060 / 992;
  border-radius: 14px;
  background: var(--logo-surface) url("../assets/InvestNITII.png") center / contain no-repeat;
  box-shadow: 0 0 0 1px var(--logo-ring), var(--logo-shadow-lg);
  opacity: 0;
  visibility: hidden;
  translate: 0 -8px;
  scale: 0.94;
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.22s ease, translate 0.28s var(--logo-ease),
              scale 0.28s var(--logo-ease), visibility 0s linear 0.28s;
}

/* Reveal on pointer hover */
@media (hover: hover) and (pointer: fine) {
  .logo-badge:hover { z-index: 40; transition-delay: 0s; }
  .logo-badge:hover .logo-badge__img {
    transform: translateY(var(--logo-lift)) scale(1.06);
    box-shadow: inset 0 0 0 1px var(--logo-ring-active), var(--logo-shadow);
  }
  .logo-badge:hover::after {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    scale: 1;
    transition-delay: 0s;
  }
}

/* Reveal on keyboard focus of the badge or the link wrapping it */
.logo-badge:focus-visible,
a:focus-visible > .logo-badge,
button:focus-visible > .logo-badge {
  z-index: 40;
  transition-delay: 0s;
}
.logo-badge:focus-visible .logo-badge__img,
a:focus-visible > .logo-badge .logo-badge__img,
button:focus-visible > .logo-badge .logo-badge__img {
  transform: translateY(var(--logo-lift)) scale(1.06);
  box-shadow: inset 0 0 0 1px var(--logo-ring-active), var(--logo-shadow);
}
.logo-badge:focus-visible::after,
a:focus-visible > .logo-badge::after,
button:focus-visible > .logo-badge::after {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  scale: 1;
  transition-delay: 0s;
}

/* In a footer the panel opens upward, so it stays on screen */
.logo-badge--up::after {
  top: auto;
  bottom: calc(100% + var(--logo-preview-gap));
  transform-origin: bottom left;
  translate: 0 8px;
}

/* Touch / coarse pointers: keep the badge, skip the pop-out panel */
@media (hover: none) {
  .logo-badge::after { content: none; }
}

/* ---------- Dark theme ---------- */
body.dark .logo-badge {
  --logo-ring: rgba(255, 255, 255, 0.16);
  --logo-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  --logo-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .logo-badge,
  .logo-badge__img,
  .logo-badge::after {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
  .logo-badge::after { scale: 1; translate: 0 0; }
  .logo-badge:hover .logo-badge__img { transform: none; }
}