/* 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 metallic gold gradient and the highlighted final "X". Where
 * `background-clip: text` is unsupported the text falls back to solid gold.
 */

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

.brand-mark__top { fill: #ffd84d; }
.brand-mark__left { fill: #b08f14; }
.brand-mark__right { fill: #7a6208; }

.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;
  }

  /* Metallic gold: bright top edge, rich middle, deep bottom. */
  .brand-wordmark__base {
    background-image: linear-gradient(180deg, #fff4bf 0%, #ffd84d 38%, #ebc42a 62%, #a9820c 100%);
  }

  /* The "X" carries the product's accent colours: cyan, violet and gold. */
  .brand-wordmark__x {
    background-image: linear-gradient(135deg, #22d3ee 0%, #a78bfa 48%, #ffd84d 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 gold off dark headers. */
.brand-wordmark {
  filter: drop-shadow(0 0 0.35em rgba(235, 196, 42, 0.25));
}