/* ==========================================================================
   Forest 1961 - Base / Global styles
   Design tokens + reset + typography + reveal-on-scroll utilities.
   Загружается на КАЖДОЙ странице. Специфика блоков (шапка/подвал/страницы)
   живёт в своих файлах, чтобы не разрастался один гигантский CSS.
   ========================================================================== */

:root {
    /* --- Единое скругление для карточек/фото/контейнеров по всему сайту
       (кнопки - отдельная пилюльная форма 999px, не трогаем) --- */
    --radius: 8px;

    /* --- Цвета (бриф: белый фон, чёрный текст, три акцента) --- */
    --color-bg: #ffffff;
    --color-text: #111111;
    --color-teal: #275971;      /* основной интерактивный - ссылки, кнопки, hover */
    --color-teal-dark: #1c4356; /* teal затемнённый для hover-состояний кнопок */
    --color-brown: #684a36;     /* тёплый акцент по остаточному принципу */
    --color-stone: #eae5e1;     /* нейтральный тёплый фон (подвал, тонкие разделители) */
    --color-stone-line: #ddd6d0;

    /* --- Типографика --- */
    --font-base: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* --- Отступы --- */
    --container-max: 1280px;
    --container-padding: clamp(1.25rem, 4vw, 3rem);

    /* --- Прочее --- */
    --header-height: 84px;
    --transition-base: 0.25s ease;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    margin: 0 0 0.6em;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

button, input, textarea, select { font-family: inherit; font-size: inherit; }

/* --- Общий контейнер, которым пользуются шапка/подвал/страницы --- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* --- Кнопки (общий стиль, используется в шапке/hero/формах) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.9em 1.8em;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.btn-teal { background: var(--color-teal); color: #fff; }
.btn-teal:hover { background: var(--color-teal-dark); }
.btn-outline { background: transparent; color: var(--color-text); border-color: currentColor; }
.btn-outline:hover { background: var(--color-teal); border-color: var(--color-teal); color: #fff; }

/* --- Skip link для доступности (клавиатурная навигация) --- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-teal);
    color: #fff;
    padding: 0.8em 1.2em;
    z-index: 1000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --- Видимый фокус для клавиатурной навигации (не убираем outline вообще) --- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
}

/* ==========================================================================
   Reveal-on-scroll - постепенное появление элементов.
   JS (main.js) добавляет класс .is-visible через IntersectionObserver.
   Без JS/при prefers-reduced-motion элементы остаются видны сразу (progressive
   enhancement - анимация не блокирует контент, если что-то пошло не так).
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ступенчатая задержка для группы элементов первого экрана (hero) */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.5s; }
.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    html { scroll-behavior: auto; }
}

/* --- Cookie-баннер (общий на все страницы, был раньше в main.css) --- */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    padding: 1rem var(--container-padding);
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    z-index: 998;
}
.cookie-banner p { margin: 0; font-size: 0.9rem; flex: 1 1 auto; min-width: 0; }
.cookie-banner button {
    background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0.6em 1.4em; border-radius: 999px; cursor: pointer; flex-shrink: 0;
    transition: border-color var(--transition-base), background var(--transition-base);
}
.cookie-banner button:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

@media (max-width: 560px) {
    .cookie-banner { flex-wrap: wrap; }
}

/* --- Хлебные крошки --- */

/* --- Пустые состояния/ошибки форм (используются повсеместно) --- */
.empty-state { color: #777; padding: 2rem var(--container-padding); }
.form-success { background: #e6f4ea; color: #1e7a34; padding: 0.8em 1.2em; border-radius: var(--radius); }
.form-error { background: #fbe7e7; color: #a00; padding: 0.8em 1.2em; border-radius: var(--radius); }

/* --- Lenis (плавный скролл на весь сайт) - минимальные правила из их
   официального lenis.css, встроены сюда, чтобы не плодить лишний файл --- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* --- 404 --- */
.not-found {
    width: 100%;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--header-height) + 3rem) var(--container-padding) 4rem;
}
.not-found-code { font-size: 5rem; font-weight: 700; color: var(--color-stone-line); line-height: 1; }
.not-found h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0.5rem 0 0.75rem; }
.not-found p { font-size: 1rem; color: #555; max-width: 45ch; margin: 0 0 2rem; }