/*
 * Climbio brand wordmark — единый стиль для всех мест где рендерится «Climbio»
 * (navbar, sidebar, auth-страницы, footer, admin header).
 *
 * Фишка варианта: «приподнятая точка над i». Реализовано через подмену первой
 * буквы i на «dotless ı» (U+0131) + псевдоэлемент ::after, который рисует точку
 * выше и правее обычной позиции — «как будто буква стремится вверх».
 *
 * Используется через компонент <ClimbioWordmark /> или вручную:
 *   <span class="climbio-wordmark">Cl<span class="climbio-i-tilted">ı</span>mbio</span>
 *
 * Размер задаётся через font-size родителя — wordmark использует 1em + относительные
 * единицы для точки, чтобы масштабироваться от 14px (footer copyright) до 56px (hero).
 */

.climbio-wordmark {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    display: inline-block;
    color: inherit;
    /* антиалиасинг помогает на средних/жирных весах в navbar */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.climbio-i-tilted {
    position: relative;
    display: inline-block;
}

.climbio-i-tilted::after {
    content: "";
    position: absolute;
    /* Идеально круглая точка, приподнятая над baseline на 0.86em (чуть выше
       родной позиции в Plus Jakarta Sans 800) и слегка сдвинутая вправо.
       Без наклона/деформации — фишка только в позиционировании. */
    bottom: 0.86em;
    left: 50%;
    transform: translateX(-15%);
    width: 0.18em;
    height: 0.18em;
    background: currentColor;
    border-radius: 50%;
}

/* Невидимый текст для скрин-ридеров и поиска: dotless «ı» визуально красивый,
   но воспринимается ассистивными технологиями и поисковиками как другая буква.
   Класс глобальный с префиксом .climbio-, чтобы не конфликтовать с другими CSS. */
.climbio-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
