/* =====================================================================
   COMPONENT STYLES: <bk-wordmark>
   Size the whole logo with font-size on the element — every part,
   including the symbol dots, is sized in em and scales with it.
   ===================================================================== */

/* ---- 1. Layout ----------------------------------------------------- */
.bk-wordmark { display: inline-flex; flex-direction: column; line-height: 1; direction: ltr; font-family: var(--bk-font-brand); }
.bk-wordmark__line { display: inline-flex; align-items: baseline; gap: 0.08em; white-space: nowrap; font-weight: 700; }

/* ---- 2. "با" (saffron) + its nuqta -------------------------------- */
.bk-wordmark__ba { position: relative; color: var(--bk-saffron); font-size: 1.12em; }
.bk-wordmark__nuqta {
  position: absolute; width: 0.3em; height: 0.3em;
  right: 0.05em; top: 0.8em;  /* under the ب tooth (right side, below the baseline) */
}

/* ---- 3. "bakri" (ink) + the symbol as the dot on the i ------------ */
.bk-wordmark__latin { color: var(--bk-ink); letter-spacing: -0.005em; }
.bk-wordmark__i { position: relative; display: inline-block; }
.bk-wordmark__tittle {
  position: absolute; width: 0.25em; height: 0.25em;
  left: 50%; top: 0.13em; transform: translateX(-50%);
}

/* ---- 4. Tagline ---------------------------------------------------- */
.bk-wordmark__tagline {
  margin-top: 2em; padding-inline-start: 0.2em; /* in tagline ems: clears the hanging nuqta */
  font-family: var(--bk-font-body); font-size: 0.24em; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bk-ink-faint);
}

/* ---- 5. Dark tone (for dark backgrounds) -------------------------- */
.bk-wordmark--dark .bk-wordmark__latin { color: var(--bk-milk); }
.bk-wordmark--dark .bk-wordmark__tagline { color: rgba(255, 253, 248, 0.6); }

/* ---- 6. Symbol alone / round icon --------------------------------- */
.bk-wordmark__symbol { width: 1em; height: 1em; }
.bk-wordmark--icon {
  width: 1em; height: 1em; padding: 0.2em; box-sizing: content-box;
  border-radius: 50%; background: var(--bk-sugar); box-shadow: inset 0 0 0 0.012em var(--bk-line);
}
.bk-wordmark--icon.bk-wordmark--dark { background: var(--bk-ink); box-shadow: none; }