/* FundCircleX brand: cube mark and wordmark (templates/components/brand.html).
 *
 * Loaded by base.html, so every page draws the brand the same way. The size
 * comes from the element that contains the wordmark; this file only adds the
 * brand face, the sapphire-azure gradient and the highlighted final "X". Where
 * `background-clip: text` is unsupported the text falls back to solid azure.
 */

.brand-mark {
  width: 1.9em;
  height: 1.9em;
  flex: 0 0 auto;
}

.brand-mark__top { fill: #8cc8ff; }
.brand-mark__left { fill: #2f86ea; }
.brand-mark__right { fill: #1a4f9c; }

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  font-family: var(--font-brand);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}

.brand-wordmark__base,
.brand-wordmark__x {
  color: var(--color-brand);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-wordmark__base,
  .brand-wordmark__x {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Sapphire azure: bright top edge, rich middle, deep bottom. */
  .brand-wordmark__base {
    background-image: linear-gradient(180deg, #e6f3ff 0%, #8cc8ff 38%, #3b9eff 62%, #1d63c4 100%);
  }

  /* The "X" carries the product's growth accents: emerald, cyan and azure. */
  .brand-wordmark__x {
    background-image: linear-gradient(135deg, #34d399 0%, #22d3ee 48%, #8cc8ff 100%);
  }
}

.brand-wordmark__x {
  display: inline-block;
  margin-inline-start: 0.04em;
  padding-inline-end: 0.08em;
  font-size: 1.16em;
  font-style: italic;
  transform: skewX(-8deg);
  transform-origin: bottom left;
}

/* A soft glow lifts the azure off dark headers. */
.brand-wordmark {
  filter: drop-shadow(0 0 0.35em rgba(59, 158, 255, 0.25));
}