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

/* 1. Шрифтове ---------------------------------------------------------------
   Хостват се в темата (не от Google). Променливи шрифтове: един файл покрива
   всички плътности. Лицензи: assets/fonts/LICENSE-*.txt (SIL OFL 1.1). */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/montserrat-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/montserrat-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: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/sourceserif4-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/sourceserif4-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 {
    /* Небе и хартия — светлата основа */
    --bl-paper: #fbfcfd;          /* фон на страницата */
    --bl-mist: #f2f6fa;           /* редуващи се секции */
    --bl-sky-50: #eaf2f9;
    --bl-sky-100: #dbe8f4;
    --bl-sky-200: #c3d8ec;
    --bl-dawn: #f8ecdc;           /* топлата светлина при хоризонта */
    --bl-dusk-1: #e6def0;         /* залезът във футъра — от бледо лилаво… */
    --bl-dusk-2: #d8c8e7;
    --bl-dusk-3: #c3a9d9;
    --bl-dusk-4: #a98bc6;         /* …до наситено лилаво на самото дъно */
    --bl-sun: 255, 240, 214;      /* цвят на слънчевата светлина (за rgba) */

    /* Мастило — тъмно синьо вместо черно */
    --bl-ink: #15243c;            /* заглавия, бутони */
    --bl-ink-hover: #1e3150;
    --bl-ink-2: #3a4a63;          /* основен текст */
    --bl-ink-3: #66748a;          /* второстепенен текст */
    --bl-line: rgba(21, 36, 60, .12);
    --bl-line-soft: rgba(21, 36, 60, .07);

    /* Един акцент — светлината. Тъмният вариант е за текст (контраст 5:1). */
    --bl-gold: #c29a52;
    --bl-gold-text: #8a6320;

    /* Шрифтове */
    --bl-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --bl-font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Разстояния */
    --bl-container: 1240px;
    --bl-gutter: clamp(20px, 4vw, 48px);
    --bl-section-y: clamp(72px, 9vw, 136px);

    /* Заобляне — умишлено малко */
    --bl-radius: 3px;
    --bl-radius-lg: 4px;

    /* Движение */
    --bl-ease: cubic-bezier(.22, .8, .24, 1);
    --bl-slow: .9s;

    /* Сенки — синкави, никога сиви */
    --bl-shadow-panel: 0 30px 60px -34px rgba(38, 72, 120, .38), 0 2px 6px -2px rgba(38, 72, 120, .08);

    /* Височина на лентата на администратора (само за влезли потребители) */
    --bl-adminbar: 0px;
}

/* 3. Основа ---------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    color-scheme: light;
    /* Изправени (стандартни) кирилски букви. При lang="bg" шрифтовете иначе
       слагат българските ръкописни форми (д като g, т като m), които изглеждат
       като курсив — изрично нежелани от собственика. */
    font-feature-settings: "locl" 0;
}

body {
    margin: 0;
    background: var(--bl-paper);
    color: var(--bl-ink-2);
    font-family: var(--bl-font-sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

/* Плавно превъртане (Lenis, assets/js/vendor) — неговите задължителни правила.
   Докато работи, собственото плавно превъртане на браузъра се изключва, за да не се бият. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Котвите (#churches и т.н.) не се скриват под фиксирания хедър */
[id] { scroll-margin-top: 80px; }

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; font-feature-settings: "locl" 0; }

:focus-visible {
    outline: 2px solid var(--bl-gold);
    outline-offset: 3px;
}

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

/* Връзка „Към съдържанието“ — вижда се само при навигация с клавиатура */
.bl-skip {
    position: fixed;
    top: 12px; left: 12px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--bl-ink);
    color: #fff;
    font-weight: 600;
    transform: translateY(-200%);
}
.bl-skip:focus { transform: none; }

/* Бутоните, които работят само с JavaScript, не се показват без него */
.no-js .bl-js-only { display: none; }

.bl-defs { position: absolute; width: 0; height: 0; }

.bl-wrap {
    width: 100%;
    max-width: calc(var(--bl-container) + var(--bl-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--bl-gutter);
}

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

.bl-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bl-gold-text);
    margin-bottom: 18px;
}

.bl-h2 {
    font-family: var(--bl-font-serif);
    font-size: clamp(32px, 3.6vw, 50px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.012em;
    color: var(--bl-ink);
    font-optical-sizing: auto;
    text-wrap: balance;
}

.bl-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bl-ink);
    white-space: nowrap;
    transition: color .4s var(--bl-ease);
}
.bl-link:hover { color: var(--bl-gold-text); }

/* 5. Бутони ----------------------------------------------------------------
   Посочване: „ореол“ — тънък светъл пръстен около бутона, не повдигане. */

.bl-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 26px;
    border: 1px solid var(--bl-ink);
    border-radius: var(--bl-radius);
    background: var(--bl-ink);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(194, 154, 82, 0);
    transition: box-shadow .5s var(--bl-ease), background-color .5s var(--bl-ease);
}
.bl-btn:hover {
    background: var(--bl-ink-hover);
    box-shadow: 0 0 0 5px rgba(194, 154, 82, .22);
}
.bl-btn--ghost {
    background: rgba(255, 255, 255, .45);
    color: var(--bl-ink);
    border-color: rgba(21, 36, 60, .28);
}
.bl-btn--ghost:hover {
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .5);
}
.bl-btn--small {
    min-height: 42px;
    padding: 0 18px;
    font-size: 13.5px;
}

/* Икони (believer_icon() в inc/template-tags.php) — един стил навсякъде:
   линия 1,6 px, заоблени краища, цветът на текста. Стрелките се плъзгат леко
   по посоката си, когато мишката е върху бутона или връзката. */
.bl-icon {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .5s var(--bl-ease);
}
.bl-btn:hover .bl-icon--arrow-right,
.bl-link:hover .bl-icon--arrow-right,
.bl-door a:hover .bl-icon--arrow-right { transform: translateX(4px); }
.bl-btn:hover .bl-icon--arrow-up { transform: translateY(-3px); }

.bl-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 42px; height: 42px;
    padding: 0;
    border: 0;
    border-radius: var(--bl-radius);
    background: transparent;
    color: var(--bl-ink);
    cursor: pointer;
    transition: background-color .4s var(--bl-ease);
}
.bl-icon-btn .bl-icon { width: 22px; height: 22px; }
.bl-icon-btn:hover { background: rgba(255, 255, 255, .6); }

/* 6. Облаци ----------------------------------------------------------------
   Живи SVG облаци (template-parts/components/svg-defs.php, believer_clouds()).
   Всеки облак е <svg class="bl-cloud"> с пропорция 2:1 — задава се само ширината.
   Позициите (--x, --y = център по височина, --w = ширина) са по реда на облака
   в своята група. Облаците се движат само с transform/translate, за да не се
   прерисуват филтрите при всеки кадър. */

.bl-cloud {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: calc(var(--w) * var(--cloud-scale, 1));
    height: auto;
    aspect-ratio: 2 / 1;
    transform: translateY(-50%);
    overflow: visible;
    pointer-events: none;
}

/* На тесни екрани облаците, чиято ширина зависи от екрана, стават по-едри:
   малките изглеждат като сиви петна, защото светлината на филтъра не се смалява добре.
   Прозорците „Откъде да започнеш“ не се засягат — там ширината е спрямо прозореца. */
@media (max-width: 860px) {
    .bl-clouds, .bl-page-hero__clouds, .bl-footer__clouds, .bl-testimony__clouds { --cloud-scale: 1.5; }
}
@media (max-width: 560px) {
    .bl-clouds, .bl-page-hero__clouds, .bl-footer__clouds, .bl-testimony__clouds { --cloud-scale: 2.1; }
}

/* Позиции по групи */
/* Небето горе: далечните облаци стоят встрани от заглавието, близките са ивица под бутоните */
.bl-clouds--far .bl-cloud:nth-child(1) { --x: -9%; --y: 40%; --w: 28%; --dir: -1; }
.bl-clouds--far .bl-cloud:nth-child(2) { --x: 8%; --y: 15%; --w: 13%; --dir: -1; }
.bl-clouds--far .bl-cloud:nth-child(3) { --x: 80%; --y: 36%; --w: 27%; --dir: 1; }
.bl-clouds--near .bl-cloud:nth-child(1) { --x: -16%; --y: 79%; --w: 44%; --dir: -1; }
.bl-clouds--near .bl-cloud:nth-child(2) { --x: 18%; --y: 87%; --w: 36%; --dir: -1; }
.bl-clouds--near .bl-cloud:nth-child(3) { --x: 46%; --y: 89%; --w: 36%; --dir: 1; }
.bl-clouds--near .bl-cloud:nth-child(4) { --x: 72%; --y: 79%; --w: 44%; --dir: 1; }

.bl-page-hero__clouds .bl-cloud:nth-child(1) { --x: -8%; --y: 84%; --w: 36%; }
.bl-page-hero__clouds .bl-cloud:nth-child(2) { --x: 36%; --y: 96%; --w: 28%; }
.bl-page-hero__clouds .bl-cloud:nth-child(3) { --x: 72%; --y: 82%; --w: 36%; }

/* Облаците във футъра са най-много 520 px широки (260 px високи), за да остават в ивицата
   от 300 px над текста и на много широки екрани. */
.bl-footer__set .bl-cloud { width: min(calc(var(--w) * var(--cloud-scale, 1)), 520px); }
.bl-footer__set .bl-cloud:nth-child(1) { --x: -4%; --y: 50%; --w: 34%; }
.bl-footer__set .bl-cloud:nth-child(2) { --x: 32%; --y: 52%; --w: 30%; }
.bl-footer__set .bl-cloud:nth-child(3) { --x: 64%; --y: 48%; --w: 36%; }

.bl-testimony__clouds .bl-cloud:nth-child(1) { --x: -14%; --y: 26%; --w: 32%; }
.bl-testimony__clouds .bl-cloud:nth-child(2) { --x: -8%; --y: 78%; --w: 26%; }
.bl-testimony__clouds .bl-cloud:nth-child(3) { --x: 80%; --y: 24%; --w: 30%; }
.bl-testimony__clouds .bl-cloud:nth-child(4) { --x: 82%; --y: 76%; --w: 28%; }

.bl-door--1 .bl-cloud:nth-child(1) { --x: -40%; --y: 74%; --w: 130%; }
.bl-door--2 .bl-cloud:nth-child(1) { --x: 18%; --y: 64%; --w: 110%; }
.bl-door--3 .bl-cloud:nth-child(1) { --x: -34%; --y: 60%; --w: 100%; }
.bl-door--3 .bl-cloud:nth-child(2) { --x: 46%; --y: 30%; --w: 80%; }
.bl-door--4 .bl-cloud:nth-child(1) { --x: 24%; --y: 56%; --w: 100%; }
.bl-door--4 .bl-cloud:nth-child(2) { --x: -46%; --y: 32%; --w: 90%; }

/* 7. Общи движения ---------------------------------------------------------- */

@keyframes bl-clear {
    from { opacity: 0; filter: blur(14px); }
    to { opacity: 1; filter: blur(0); }
}
@keyframes bl-drift-left { to { transform: translateX(-3%); } }
@keyframes bl-drift-right { to { transform: translateX(2.5%); } }
@keyframes bl-drift-small { to { transform: translateX(9%); } }
@keyframes bl-rays { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes bl-ripple {
    from { opacity: .7; transform: scale(1); }
    to { opacity: 0; transform: scale(1.7); }
}
@keyframes bl-cloud-loop {
    from { transform: translateX(0); }
    to { transform: translateX(25%); }
}

/* 8. Появяване при скрол ----------------------------------------------------
   Класът is-clear се слага от assets/js/site.js. Без JavaScript всичко е видимо.
   Заглавия: мъглата се разсейва и пред надзаглавието се изтегля златна черта. */

.bl-reveal .bl-eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    margin-right: 14px;
    vertical-align: middle;
    background: var(--bl-gold);
    transform-origin: left;
}

.js .bl-reveal .bl-eyebrow,
.js .bl-reveal .bl-h2,
.js .bl-reveal .bl-link {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.2s var(--bl-ease), filter 1.4s var(--bl-ease);
}
.js .bl-reveal .bl-h2 { transition-delay: .15s; }
.js .bl-reveal .bl-link { transition-delay: .35s; }
.js .bl-reveal .bl-eyebrow::before { transform: scaleX(0); transition: transform 1.2s .2s var(--bl-ease); }
.js .bl-reveal.is-clear .bl-eyebrow,
.js .bl-reveal.is-clear .bl-h2,
.js .bl-reveal.is-clear .bl-link { opacity: 1; filter: blur(0); }
.js .bl-reveal.is-clear .bl-eyebrow::before { transform: scaleX(1); }

/* Групи (карти, редове): една след друга; снимките се отварят отгоре надолу.
   Номерът --i се задава от site.js. */
.js [data-stagger] > * {
    opacity: 0;
    filter: blur(6px);
    transition: opacity 1s var(--bl-ease), filter 1.2s var(--bl-ease);
    transition-delay: calc(var(--i, 0) * 140ms);
}
.js [data-stagger] .bl-media {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.5s var(--bl-ease);
    transition-delay: calc(var(--i, 0) * 140ms + 100ms);
}
.js [data-stagger].is-clear > * { opacity: 1; filter: blur(0); }
.js [data-stagger].is-clear .bl-media { clip-path: inset(0 0 0 0); }

/* 9. Телефони и таблети — виж assets/css/mobile.css (зарежда се последен). */

/* 10. Без движение, ако посетителят е поискал така -------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } /* системно желание на посетителя — трябва да надделее над всичко */
    .js .bl-reveal .bl-eyebrow, .js .bl-reveal .bl-h2, .js .bl-reveal .bl-link,
    .js [data-stagger] > *, .js [data-words] .bl-w { opacity: 1; filter: none; clip-path: none; }
    .js [data-stagger] .bl-media { clip-path: none; }
}