/* ── Kiteline brand ─────────────────────────────────────────────────────────
   One place for the wordmark, linked from every page that shows it.

   Markup (inside any existing .tm-logo / .auth-logo / .info-logo / .logo):
     <b class="kl-wordmark" role="img" aria-label="Kiteline">k<i class="kl-kite">ı</i>tel<i class="kl-dot">ı</i>ne</b>

   The two i's are dotless (ı, U+0131): the first gets the gold kite as its
   tittle, the second a small diamond. Built from <b>/<i> rather than <span>
   on purpose — the portals' existing ".tm-logo span { color: gold }"-style
   rules would otherwise recolour the letters.

   Size and colour are inherited from the parent, so the old inline
   font-size overrides (style="font-size:13px") keep working. Pure CSS
   (clip-path, no data: URIs), so no CSP change is needed.
   ──────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@800&display=swap');

:root {
  --kl-ink:  #12151C;
  --kl-gold: #C9A23F;
}

.kl-wordmark {
  font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
  /* Uppercasing a parent (e.g. the login page's "WHY PEOPLE TRUST" line)
     would turn the dotless ı into a capital I and drop the kite. */
  text-transform: none;
  /* inline-block stops a parent link's underline running through the
     wordmark and its kite. */
  display: inline-block;
  text-decoration: none;
}

.kl-wordmark .kl-kite,
.kl-wordmark .kl-dot {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: inherit;
}

.kl-wordmark .kl-kite::after,
.kl-wordmark .kl-dot::after {
  content: "";
  position: absolute;
  left: 50%;
}

/* gold kite above the first ı */
.kl-wordmark .kl-kite::after {
  top: -0.2em;
  width: 0.28em;
  height: 0.28em;
  background: var(--kl-gold);
  clip-path: polygon(50% 6%, 90% 42%, 50% 96%, 10% 42%);
  transform: translateX(-50%) rotate(15deg);
}

/* small diamond above the second ı, in the text colour */
.kl-wordmark .kl-dot::after {
  top: 0.05em;
  width: 0.14em;
  height: 0.14em;
  background: currentColor;
  clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%);
  transform: translateX(-50%);
}