/* ==========================================================
   CORE BRAND LOGO COMPONENT
   Path: /src/css/core/logo.css

   Central source of truth for 3Y logo sizing, hit area,
   theme-aware asset switching, and standalone logo placement.

   Why this exists:
   Icon1.png and Icon3.png do not share the same transparent
   canvas geometry. Equal CSS image height does not produce
   equal perceived logo size. This file normalizes the visual
   lockup while preserving one stable interaction target.

   Accessibility contract:
   - Logo links own the accessible name.
   - Images inside named logo links remain decorative.
   - Logo hit area remains at least 44px tall.
   - Motion respects prefers-reduced-motion.
   ========================================================== */

:root {
  --brand-logo-hit-inline: 82px;
  --brand-logo-hit-block: 44px;

  /* Visual calibration by asset. */
  --brand-logo-light-height: 42px;
  --brand-logo-dark-height: 30px;
  --brand-logo-dark-shift-x: -8px;

  --brand-logo-fixed-offset-inline: clamp(24px, 4vw, 48px);
  --brand-logo-fixed-offset-block: clamp(24px, 4vw, 40px);
}

@media (max-width: 640px) {
  :root {
    --brand-logo-hit-inline: 76px;
    --brand-logo-light-height: 38px;
    --brand-logo-dark-height: 27px;
    --brand-logo-dark-shift-x: -7px;
  }
}

/* ==========================================================
   SHARED LOGO LINK / HOME TARGET
   ========================================================== */

.page-logo,
.app-brand,
.app-header__home {
  inline-size: var(--brand-logo-hit-inline);
  min-inline-size: var(--brand-logo-hit-inline);
  block-size: var(--brand-logo-hit-block);
  min-block-size: var(--brand-logo-hit-block);

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;

  line-height: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* ==========================================================
   JS-RENDERED LOGOS
   Navbar/app shell markup serves Icon1.png. Dark mode swaps
   to Icon3.png here and applies the dark asset calibration.
   ========================================================== */

.page-logo img:not(.logo-theme-img),
.app-brand img,
.app-header__home img {
  display: block;
  inline-size: auto;
  block-size: var(--brand-logo-light-height);
  max-inline-size: none;

  object-fit: contain;
  object-position: left center;

  flex: 0 0 auto;
}

:root[data-theme="dark"] .page-logo img:not(.logo-theme-img),
:root[data-theme="dark"] .app-brand img,
:root[data-theme="dark"] .app-header__home img {
  content: url("/assets/images/Icon3.png");
  block-size: var(--brand-logo-dark-height);
  transform: translateX(var(--brand-logo-dark-shift-x));
}

/* ==========================================================
   STATIC THEME PAIR
   Used by auth/onboarding pages that render both logo assets.
   The link owns the accessible name; both images are decorative.
   ========================================================== */

.logo-theme-pair {
  line-height: 0;
}

.logo-theme-pair .logo-theme-img {
  display: block;
  inline-size: auto;
  max-inline-size: none;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}

.logo-theme-pair .logo-theme-img--light {
  block-size: var(--brand-logo-light-height);
}

.logo-theme-pair .logo-theme-img--dark {
  display: none;
  block-size: var(--brand-logo-dark-height);
  transform: translateX(var(--brand-logo-dark-shift-x));
}

:root[data-theme="dark"] .logo-theme-pair .logo-theme-img--light {
  display: none;
}

:root[data-theme="dark"] .logo-theme-pair .logo-theme-img--dark {
  display: block;
}

/* ==========================================================
   STANDALONE AUTH / ONBOARDING PLACEMENT
   ========================================================== */

.page-logo.logo-fixed-left {
  position: absolute;
  inset-block-start: var(--brand-logo-fixed-offset-block);
  inset-inline-start: var(--brand-logo-fixed-offset-inline);
  z-index: 50;
}

/* ==========================================================
   INTERACTION
   ========================================================== */

.page-logo:hover,
.app-brand:hover,
.app-header__home:hover {
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .page-logo,
  .app-brand,
  .app-header__home {
    transition: transform 0.18s ease;
  }

  .page-logo:hover,
  .app-brand:hover,
  .app-header__home:hover {
    transform: translateY(-1px);
  }

  :root[data-theme="dark"] .page-logo:hover img:not(.logo-theme-img),
  :root[data-theme="dark"] .app-brand:hover img,
  :root[data-theme="dark"] .app-header__home:hover img,
  :root[data-theme="dark"] .logo-theme-pair:hover .logo-theme-img--dark {
    transform: translateX(var(--brand-logo-dark-shift-x));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-logo,
  .app-brand,
  .app-header__home,
  .page-logo img,
  .app-brand img,
  .app-header__home img,
  .logo-theme-img {
    transition: none;
  }

  .page-logo:hover,
  .app-brand:hover,
  .app-header__home:hover {
    transform: none;
  }
}