/* =========================================================================
   base.css — шрифтове, цветове, типография, нулиране
   Зарежда се първи. Тук са стойностите, които всички останали файлове ползват.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Шрифтове
   Хостват се локално в темата. Google Fonts би направил заявка към чужд
   сървър с IP-то на посетителя — това изисква съгласие за бисквитки.
   И двата са променливи (variable) шрифтове: един файл покрива всички
   плътности, затова са само 4 файла общо.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/ibmplexsans-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/ibmplexsans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   2. Стойности на дизайна
   Всяка стойност тук идва от макета. Не измисляйте нови — ако нещо липсва,
   допълнете го тук веднъж и го ползвайте навсякъде.
   ------------------------------------------------------------------------- */

:root {
    /* Цветове */
    --sledi-bone: #f1f2ef;          /* фон на страницата */
    --sledi-bone-alt: #eef1f2;      /* фон на редуващи се секции */
    --sledi-white: #ffffff;
    --sledi-ink: #1c2b31;           /* основен тъмен, текст и бутони */
    --sledi-ink-hover: #2c414a;     /* бутон при посочване */
    --sledi-pale: #dceaf0;          /* светло синьо — акценти и активно меню */
    --sledi-pale-deep: #c7dfe9;     /* по-наситено синьо — числа и рамки */
    --sledi-glow: #d5e7ee;          /* меките петна във фона */
    --sledi-text: #4f6068;          /* основен текст в абзаци */
    --sledi-text-soft: #6e7d84;     /* второстепенен текст */
    --sledi-text-faint: #9aa6ab;    /* подсказки в полета */
    --sledi-text-on-image: #3f5158; /* текст върху светла снимка */
    --sledi-link: #3f8f3f;

    /* Диапазони на глюкозата — само за цветните ленти */
    --sledi-range-high: #f6e4cf;
    --sledi-range-ok: #dcecd6;
    --sledi-range-low: #f3d9dd;

    /* Рамки */
    --sledi-line: rgba(23, 39, 46, .1);
    --sledi-line-soft: rgba(23, 39, 46, .07);
    --sledi-line-strong: rgba(23, 39, 46, .14);

    /* Шрифтове */
    --sledi-font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sledi-font-display: 'Manrope', 'IBM Plex Sans', system-ui, sans-serif;

    /* Разстояния */
    --sledi-container: 1320px;
    --sledi-gutter: clamp(20px, 3vw, 44px);
    --sledi-section-y: clamp(56px, 6vw, 110px);
    --sledi-section-y-sm: clamp(48px, 5.4vw, 96px);

    /* Ритъм на вътрешните страници (1.5.23) — едни и същи на ВСЯКА страница:
       лента горе → заглавие, заглавие/увод → съдържание, съобщение → следващото. */
    --sledi-hero-top: clamp(40px, 5.6vw, 88px);
    --sledi-hero-gap: clamp(36px, 4.4vw, 64px);
    --sledi-block-gap: clamp(20px, 2vw, 28px);

    /* Заобляне */
    --sledi-radius-sm: 6px;
    --sledi-radius: 8px;
    --sledi-radius-lg: 10px;
    /* Само за голяма правоъгълна снимка — засега единствено секцията
       „Приложение LinX M1“. Добавено по изрично желание, 22.09.2026. */
    --sledi-radius-xl: 16px;

    /* Движение — тази крива е подписът на дизайна */
    --sledi-ease: cubic-bezier(.32, .72, 0, 1);
    --sledi-ease-out: cubic-bezier(.22, 1, .3, 1);

    /* Сенки */
    --sledi-shadow-btn: 0 12px 26px -14px rgba(28, 43, 49, .8);
    --sledi-shadow-btn-hover: 0 20px 34px -16px rgba(28, 43, 49, .75);
    --sledi-shadow-header: 0 10px 30px -22px #8a979d;
    --sledi-shadow-float: 0 14px 30px -12px rgba(28, 43, 49, .9);
}

/* -------------------------------------------------------------------------
   3. Нулиране
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* Страницата е вертикална колона, висока поне колкото екрана. Основното
   съдържание поема остатъка, така че футърът винаги стои най-долу — дори
   при много къса страница на голям монитор. */
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--sledi-bone);
    color: var(--sledi-ink);
    font-family: var(--sledi-font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* `clip`, а не `hidden`: `hidden` превръща body в контейнер за
       превъртане и разваля „лепнатата“ горна лента. */
    overflow-x: clip;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

img {
    display: block;
}

/* -------------------------------------------------------------------------
   4. Типография
   ------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--sledi-font-display);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.04;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a {
    color: var(--sledi-link);
    text-decoration: none;
    transition: color .25s var(--sledi-ease);
}

a:hover {
    color: var(--sledi-ink);
}

/* Маркираният текст — зелено с бял текст: видимо на светлите, светлосините
   и тъмните части (светлосиньото сливаше маркирането с фона, 1.5.63). */
::selection {
    background: var(--sledi-link);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--sledi-ink);
    outline-offset: 3px;
    border-radius: var(--sledi-radius-sm);
}

/* -------------------------------------------------------------------------
   5. Достъпност
   ------------------------------------------------------------------------- */

/* Текст само за екранни четци. Стандартният клас на WordPress. */
.screen-reader-text {
    position: absolute !important; /* единственият начин да се извади от потока, без да се скрие от четците */
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Връзка „Към съдържанието“ — видима само при навигация с клавиатура. */
.sledi-skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 200;
    padding: 12px 20px;
    background: var(--sledi-ink);
    color: var(--sledi-white);
    font-family: var(--sledi-font-display);
    font-weight: 700;
    border-radius: var(--sledi-radius);
    transition: top .3s var(--sledi-ease);
}

.sledi-skip-link:focus {
    top: 12px;
    color: var(--sledi-white);
}

/* -------------------------------------------------------------------------
   6. Появяване при скролване
   Секциите с data-sledi-reveal стартират скрити и се показват, когато влязат
   в екрана. Правилото важи САМО когато JavaScript е активен (html.js) —
   иначе съдържанието е видимо нормално и сайтът е напълно четим.
   ------------------------------------------------------------------------- */

.js [data-sledi-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity .85s var(--sledi-ease),
        transform .85s var(--sledi-ease);
}

.js [data-sledi-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Заглавие, което се появява дума по дума. Класът is-split се добавя от
   site.js едва след като думите са обвити — така при изключен JavaScript
   заглавието си стои видимо. */
.sledi-word {
    display: inline-block;
    white-space: pre;
}

.is-split .sledi-word {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-20px);
    transition:
        opacity .55s ease-out,
        filter .55s ease-out,
        transform .6s var(--sledi-ease-out);
}

.is-split .sledi-word.is-in {
    opacity: 1;
    filter: none;
    transform: none;
}

/* -------------------------------------------------------------------------
   7. Намалено движение
   Посетител, който е поискал по-малко анимации от системата си, получава
   статична страница. Задължително за достъпност и за хора с вестибуларни
   оплаквания.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;  /* потребителят изрично е поискал без движение */
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-sledi-reveal] {
        opacity: 1;
        transform: none;
    }
}