/* ============================================================================
   TraderAlign — Shared Brand Mark
   Single source of truth for every logo placement in the app. Link this
   file wherever the logo appears — do not redefine these rules locally.

   images/logo.png is a real transparent PNG, but the "TF" mark itself
   only occupies ~27% of the canvas height (measured: glyph bbox 345x275
   inside a 1536x1024 canvas) — the rest is transparent padding. A plain
   <img style="height:Xpx"> therefore renders a visibly smaller mark than
   a source file where the glyph fills most of the frame, even at an
   identical CSS height. The sizes below compensate for that by using a
   taller element height so the VISIBLE glyph reads at the intended size
   — plain <img>, no cropping, no wrapper, no background, no border, no
   shadow. The extra space above/below the glyph is transparent and does
   not render as a visible box.
   ============================================================================ */

.ta-logo {
  height: 6rem;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  /* The reference design's mark reads bolder/more solid than a plain
     render of this file at a comparable size — confirmed the CSS values
     are already identical (same height ratio, same weight), so the
     difference comes from the image scaling itself. This reinforces the
     glyph's own edges very slightly so it reads with the same visual
     weight, without altering the source file. */
  filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, .85));
}

/* Size tiers — use exactly these, never a one-off value */
.ta-logo--xs  { height: 3rem; }    /* tiny inline contexts (calculator breadcrumb) */
.ta-logo--sm  { height: 4rem; }
.ta-logo--md  { height: 6rem; }    /* nav/footer lockups */
.ta-logo--lg  { height: 5rem; }    /* sidebar icon strip */
.ta-logo--xl  { height: 8rem; }    /* auth cards */
.ta-logo--2xl { height: 10rem; }   /* error pages / hero placements */

/* Icon + wordmark lockup — nav bars, footers. Always this gap/weight ratio
   so the mark and the word read as one unit everywhere it appears.

   display:flex (not inline-flex) is deliberate, not cosmetic: an
   inline-flex element participates in its parent's INLINE formatting
   context, meaning the surrounding line box reserves baseline/descender
   space around it the same way it would around a piece of text — normally
   invisible, but with a tall child inside (our logo, even after the
   negative-margin correction above) that reserved space becomes a large,
   inexplicable-looking gap before whatever follows. That's exactly what
   was happening in the footer, where .ta-brand's parent (.footer-about)
   is a plain block container, so the inline formatting context applies —
   confirmed by measuring the real gap directly against the live page:
   .ta-brand's own box was 30px tall, but the next element (the paragraph)
   still started ~56px below it, an inline-baseline artifact, not a margin
   value that could be tuned away. display:flex removes it from inline
   layout entirely, so it stacks with siblings via plain block flow.
   Verified safe for the nav-header usage too: .header-inner is already a
   flex container, and a flex item's own outer display (flex vs
   inline-flex) makes no difference to how its OWN parent flex container
   treats it — this only ever mattered in the block-parent footer case. */
.ta-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  transition: opacity .15s ease;
}
.ta-brand:hover { opacity: .85; }

/* The mark's transparent padding isn't just left/right — it's also
   ~35.7% top / ~37.3% bottom of the canvas height (measured: glyph bbox
   y=[366,642] of 1024). Left uncorrected, the image's LAYOUT height
   stays the full 6rem even though the visible glyph is only ~1.6rem of
   that — so next to a plain-text sibling (e.g. a footer column heading),
   the wordmark row sits noticeably lower/taller than it should, even
   though the two are meant to start flush. Combined with the horizontal
   correction below, these margins shrink the image's LAYOUT footprint
   down to just the visible glyph's own box (~2rem x 1.6rem) — the pixels
   still render in full, only the invisible padding is removed from
   layout. Values are specific to .ta-logo--md's 6rem height; only used
   here because this is the one context where surrounding layout (grid
   rows, adjacent text) actually depends on the image's box dimensions. */
.ta-brand .ta-logo {
  margin-left: -3.3867rem;
  margin-right: -3.5859rem;
  margin-top: -2.1445rem;
  margin-bottom: -2.2383rem;
}

.ta-brand .ta-word {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--foreground, #D1D4DC);
  white-space: nowrap;
}
