/* ТОПО / Front CSS build — 2026-10-14 03:11:39 */

/* --- tokens.css --- */
/* === 📄 /styles_core/front/base/tokens.css — цветовые и типографические токены ===
   Основной источник переменных для всех стилей фронта  Кочуй
   Поддерживает автоматическое переключение светлой и тёмной темы.
*/




:root {
/* =========================================================
   🌿 БАЗОВЫЕ ЦВЕТА — CAMP ALTAI (СВЕТЛАЯ ТЕМА)
   ========================================================= */

/* 🔥 Primary — ЕДИНСТВЕННЫЙ оранжевый (действие, деньги, CTA)
   Терракотовый #b85f32 — тот акцент, что уже фактически используется
   по всему сайту (фильтры каталога, паспорт объекта, карточки словаря
   и т.д. — см. git blame на дату этой правки), только раньше не был
   токеном: ~90 мест держали его хардкодом хекс-кодом, а этот токен
   несогласованно нёс отдельный яркий #DF4F28. Свели к одному источнику
   истины — значение токена, не хардкод, теперь определяет акцент
   везде, отдельные файлы на него только ссылаются. */
--color-primary: #b85f32;        /* кнопки, цена, главное действие */
--color-primary-dark: #9d4e28;   /* текст/рамка на hover активных элементов */
--color-primary-rgb: 184,95,50;  /* для rgba(var(--color-primary-rgb),X) — полупрозрачные фоны/рамки */
--color-on-primary: #ffffff;     /* текст на primary */
--color-primary-light: #fbefe3;  /* hover / мягкая подсветка */

/* 🌿 Accent — вторичный акцент (НЕ оранжевый) */
--color-accent: #6baa75;         /* пояснения, бейджи, смысл */
--color-accent-light: #e3f0e7;   /* мягкий фон под accent */

/* 📚 Library — фирменный цвет раздела «Библиотека», не пересекается
   ни с primary (CTA везде на сайте), ни с accent (словарные статьи) */
--color-lib: #3d7a78;
--color-lib-light: #e2eeed;



/* 🍟 Chips — фон для чипсов, тегов, мелких UI-плашек */
--color-chips: #f2c07a;
--color-on-chips: #3D2903; /* текст на фоне чипсов */





/* ⚠️ Highlight — внимание / маркер (редко!) */
--color-highlight: #E98B0A;      /* подчёркивание, метки, выделение */
--color-on-highlight: #1f1e1d;   /* текст на highlight (добавить) */



/* 🌞 Фоны и поверхности */
--color-bg: #F0E3CC; /* фон страницы*/
 --color-surface: #FFFBF5;   /* ← НОВЫЙ */
--color-surface-muted: #f0f0f0;

/* 🧱 Границы */
--color-border: rgba(0,0,0,0.08);
--color-border-subtle: rgba(0,0,0,0.04);

/* 🌑 Текст */
--color-fg: #3D2903;     /* основной цвет текста: body, p, базовые заголовки */
--color-muted: #6f6a63;  /* приглушённый текст: подписи, вторичный контент, мета */


/* 🌊 Инфо */
--color-info: #9dd4d2;
--color-info-light: #e6f5f4;





  /* 💬 Состояния */
  --color-success: #6f8f5f;
  --color-error: #c24a3a;
  --color-info: #6c8ca3;

  /* 🎨 Радиусы и тени */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  
    /* 🟢 Pill / Capsule */
  --radius-pill: 999px;
  
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 3px 6px -1px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 8px 14px -2px rgb(0 0 0 / 0.8);

  /* 📐 Ритм и типографика */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --lh-default: 1.6;
  --lh-heading: 1.25;
  
    /* 🅰️ Заголовки секций */
  --section-title-letter-spacing: 0.04em;  
  --font-size-base: 1rem;
  --transition-base: 0.25s ease-in-out;
}


:root{
  /* === FOOTER (brand layer, theme-independent) === */
  --footer-bg: #302612;
  --footer-fg: #ffffff;
  --footer-muted: rgba(255,255,255,0.65);
  --footer-border: rgba(255,255,255,0.08);
  --footer-input-bg: #2a2926;
  --footer-input-border: rgba(255,255,255,0.15);
}



/* 🌙 Тёмная версия “Кочевой” темы (по желанию, атмосферная) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1f1b17;
    --color-surface: #2a241f;
    --color-fg: #ffffff;
    --color-muted: #cfc6bb;
    --color-border: rgba(255,255,255,0.12);
    --color-border-subtle: rgba(255,255,255,0.06);
    --color-lib: #7fc4c1;
    --color-lib-light: rgba(73,146,144,.18);
  }
}


/* =========================================================
   🎛 РУЧНОЙ OVERRIDE ТЕМЫ (data-theme)
   Имеет приоритет над prefers-color-scheme
   ========================================================= */

/* ☀️ Явная светлая тема */
html[data-theme="light"]{
  --color-bg: #F0E3CC;
  --color-surface: #FFFBF5;
  --color-surface-muted: #f0f0f0;

  --color-fg: #1f1e1d;
  --color-muted: #6f6a63;

  --color-border: rgba(0,0,0,0.08);
  --color-border-subtle: rgba(0,0,0,0.04);
}

/* 🌙 Явная тёмная тема */
html[data-theme="dark"]{
  --color-bg: #1f1b17;
  --color-surface: #2a241f;
  --color-surface-muted: #26211d;

  --color-fg: #ffffff;
  --color-muted: #cfc6bb;

  --color-border: rgba(255,255,255,0.12);
  --color-border-subtle: rgba(255,255,255,0.06);

  --color-accent-light: rgba(107,170,117,0.18);

  --color-lib: #7fc4c1;
  --color-lib-light: rgba(73,146,144,.18);
}



/* === Новый слой в tokens.css === */
:root {
  --accent-ui: var(--color-accent); /* используется в меню, кнопках, ссылках */
  --accent-bg: var(--color-accent-light); /* используется для фонов (breadcrumbs и т.п.) */
}

/* === 🏷️ Badge tokens (по дизайну Кочуй) === */
:root {

  --badge-expedition:   #fb8500; /* Экспедиции — основной оранжевый (актив, энергия) */
  --badge-autotour:     #ffc105; /* Автотуры — жёлтый акцент (дорога, движение) */
  --badge-trekking:     #6baa75; /* Треккинги — зелёный (природа, пешие маршруты) */
  --badge-hiking:       #646e78; /* Походы — холодный серо-синий (универсальный) */
  --badge-horse:        #588860; /* Конные — глубокий зелёный (традиция, сила) */
  --badge-jeep:         #e5e5e5; /* Джип-туры — нейтральный светлый (техника) */
  --badge-dogfriendly:  #f6f6f6; /* Dog-friendly — мягкий светлый фон */
  --badge-direction:    #499290; /* Direction / Направление — бирюзовый (ориентир) */
  --badge-feminine:     #d57100; /* Feminine — тёплый оранжево-медный */
  --badge-sad:          #323232; /* Sad — тёмный графит */
  --badge-joy:          #9dd4d2; /* Joy — светлый мятно-бирюзовый */

}

/* =========================================================
   🏔 HERO TOKENS — фон и карточка hero-блока
   ========================================================= */

/* 🌞 Светлая тема (по умолчанию) */
:root{
  /* затемнение фото */
  --hero-overlay-top: rgba(0,0,0,0.18);
  --hero-overlay-bottom: rgba(0,0,0,0.32);

  /* карточка hero */
  --hero-card-bg: rgba(245,245,245,0.65); /* ← ПРОЗРАЧНОСТЬ */
  --hero-card-blur: 3px;                  /* ← РАЗМЫТИЕ */
}

/* 🌙 Авто тёмная тема (по системе) */
@media (prefers-color-scheme: dark){
  :root{
    --hero-overlay-top: rgba(0,0,0,0.30);
    --hero-overlay-bottom: rgba(0,0,0,0.50);

    --hero-card-bg: rgba(20,20,20,0.45);
    --hero-card-blur: 5px;
  }
}

/* ☀️ Явная светлая тема */
html[data-theme="light"]{
  --hero-overlay-top: rgba(0,0,0,0.18);
  --hero-overlay-bottom: rgba(0,0,0,0.32);

  --hero-card-bg: rgba(245,245,245,0.55);
  --hero-card-blur: 3px;
}

/* 🌙 Явная тёмная тема */
html[data-theme="dark"]{
  --hero-overlay-top: rgba(0,0,0,0.45);
  --hero-overlay-bottom: rgba(0,0,0,0.65);

  --hero-card-bg: rgba(20,20,20,0.45);
  --hero-card-blur: 5px;
}





/* --- accents.css --- */
/* === 📄 /styles_core/front/base/accents.css — акцентные цветовые схемы Camp Altai ===
   Универсальная палитра акцентов (цветовые темы).
   Каждая схема задаёт оттенок для декоративных элементов (например, breadcrumbs).
   Привязка к страницам задаётся отдельно в их JSON / meta, а не здесь.
*/

/* 🧱 Терракота — тёплая охра, глина, костёр */
.accent-amber nav.breadcrumbs {
  --breadcrumbs-bg: #C7682B;
  --breadcrumbs-border: color-mix(in srgb, #C7682B 10%, transparent);
}

/* 🌿 Оливковый — трава, юрты, степь */
.accent-olive nav.breadcrumbs {
  --breadcrumbs-bg: #566B4A;
  --breadcrumbs-border: color-mix(in srgb, #566B4A 10%, transparent);
}

/* 🌲 Хвойно-бирюзовый — тайга, ручьи, прохлада */
.accent-teal nav.breadcrumbs {
  --breadcrumbs-bg: #2F7C7A;
  --breadcrumbs-border: color-mix(in srgb, #2F7C7A 10%, transparent);
}

/* 🪶 Розовая глина — соль, скалы, тепло */
.accent-rose nav.breadcrumbs {
  --breadcrumbs-bg: #A64B4B;
  --breadcrumbs-border: color-mix(in srgb, #A64B4B 10%, transparent);
}

/* 🌌 Небесно-синий — река, воздух, простор */
.accent-sky nav.breadcrumbs {
  --breadcrumbs-bg: #3B83BD;
  --breadcrumbs-border: color-mix(in srgb, #3B83BD 10%, transparent);
}

/* ✨ Золотистый — солнце, трава на закате */
.accent-gold nav.breadcrumbs {
  --breadcrumbs-bg: #B8901C;
  --breadcrumbs-border: color-mix(in srgb, #B8901C 10%, transparent);
}

/* 🏜 Песочный — холмы, сухая трава, тёплый свет */
.accent-sand nav.breadcrumbs {
  --breadcrumbs-bg: #C9A066;
  --breadcrumbs-border: color-mix(in srgb, #C9A066 10%, transparent);
}

/* === 📄 Универсальное применение акцентов ===
   Автоматически окрашивает плашку крошек при наличии accent-класса.
*/
nav.breadcrumbs {
  background: linear-gradient(
270deg,
    color-mix(in srgb, var(--breadcrumbs-bg) 50%, var(--color-surface)) 0%,
    var(--color-surface) 60%
  );
}



/* --- layout.css --- */
/* === 📄 /styles_core/front/layout.css === */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  background: var(--color-bg);

  width: 100%;
  max-width: 100%;
}

body {
  margin: 0;
  padding: 0;

  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-base);
  line-height: var(--lh-default);
  font-size: 1rem;

  display: flex;
  flex-direction: column;
  min-height: 100vh;

  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}




/* === Контент растягивает страницу === */
.page-content {
  flex: 1;
  background: transparent;
}

/* === Контейнер === */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  
   box-sizing: border-box;
}

/* === Секции === */
.section {
  padding: var(--space-12) 0;
  background:transparent;
}

@media (min-width: 768px) {
  .section {
    padding: var(--space-16) 0;
  }
}

/* === Grid утилиты === */
.grid-2 { display: grid; gap: var(--space-8); grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: var(--space-8); grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: var(--space-8); grid-template-columns: repeat(4, 1fr); }

/* === Breakpoints === */
:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1200px;
  
 
}

/* =========================================================
   📄 /styles_core/front/layout.css
   Высота sticky-хедера ТОПО
   Переменная нужна для sticky-элементов, но НЕ создаёт отступ
========================================================= */

html{
  --header-height: 74px;
}


/* === Расширение только header === */
.header__grid--wide {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}


/* === Адаптив === */
@media (max-width: 480px) {
  body {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .section {
    padding: var(--space-8) 0;
  }

  .container {
    padding: 0 var(--space-4);
  }
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-8) 0;
  }
}

/* =========================================================
   📄 /styles_core/front/layout.css
   Универсальный рабочий layout с боковой панелью
========================================================= */

.container--wide{
    max-width:1420px;
}

.section--work{
    padding-top:var(--space-8);
    padding-bottom:var(--space-12);
}

.layout-sidebar{
    display:grid;
    grid-template-columns:280px minmax(0, 1fr);
    gap:var(--space-8);
    align-items:start;
}

.layout-sidebar__side{
    min-width:0;
}

.layout-sidebar__main{
    min-width:0;
}

@media (max-width:1024px){
    .layout-sidebar{
        grid-template-columns:1fr;
    }
}





/* --- typography.css --- */
/* === 📄 /styles_core/front/base/typography.css — типографика фронта Кочуй === */



/* === 🧩 Manrope — основной текст === */

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope/Manrope-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope/Manrope-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope/Manrope-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope/Manrope-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope/Manrope-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* === 🧩 Unbounded — СТАТИЧЕСКИЕ ВЕСА (КАНОН) === */

@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/Unbounded/unbounded-v8-cyrillic_latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/Unbounded/unbounded-v8-cyrillic_latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/Unbounded/unbounded-v8-cyrillic_latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/Unbounded/unbounded-v8-cyrillic_latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/Unbounded/unbounded-v8-cyrillic_latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* === 🧩 Caveat — рукописные акценты (из /assets/fonts/Caveat/) === */
@font-face {
  font-family: 'Caveat';
  src: url('/assets/fonts/Caveat/Caveat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* === 🧩 Material Symbols Rounded — иконки (из /assets/fonts/MaterialSymbols/) === */
@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('/assets/fonts/MaterialSymbols/MaterialSymbolsRounded.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}


/* === 🪶 Переменные шрифтов и ритма === */
:root {
  --font-base: 'Manrope', system-ui, sans-serif;     /* основной текст */
  --font-display: 'Unbounded', sans-serif;          /* заголовки */
  --font-hand: 'Caveat', cursive;                    /* декоративный акцент */
  --font-icons: 'Material Symbols Rounded';

  --font-size-base: 1rem;
  --lh-default: 1.6;
  --lh-heading: 1.25;
}


  /* === FONT WEIGHTS — HEADINGS (CANON) === */
:root {
  --fw-heading-base: 300;
  --fw-h1: 300;
  --fw-h2: 500;
  --fw-h3: 500;
  --fw-h4: 500;
}




.section{
  padding-top: var(--space-4);
  padding-bottom: calc(var(--space-16) + var(--space-4));
}


.section-title{
  font-size:var(--section-title-size);
  line-height:var(--section-title-line-height);
  letter-spacing: var(--section-title-letter-spacing);
  margin-bottom:var(--section-title-margin-bottom);
}


/* =========================================================
   SECTION INTRO — единый текст под заголовками секций
========================================================= */

.section-intro{
  margin-top:var(--space-6);

max-width:68ch;

  color:var(--color-fg);

  font-size:1.05rem;
  line-height:1.65;
}

.section-intro p{
  margin:0;
}

.section-intro p + p{
  margin-top:.9em;
}

@media (max-width:768px){

  .section-intro{
    max-width:none;
  }

}
/* === ⚙️ Основной текст === */
body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--lh-default);
  color: var(--color-fg, #1f1e1d);
  background: var(--color-bg, #fdfcf9);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* === 🏔️ Заголовки === */
h1{
  font-family: var(--font-display);
  font-weight: var(--fw-h1);
  line-height: var(--lh-heading);
  color: var(--color-fg);
  margin-bottom: var(--space-4, 1rem);
}

h2,
h3,
h4,
h5,
h6{
  font-family: var(--font-base);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--color-fg);
  margin-bottom: var(--space-4, 1rem);
}


h1 { font-weight: var(--fw-h1); }
h2 { font-weight: var(--fw-h2); }
h3 { font-weight: var(--fw-h3); }
h4 { font-weight: var(--fw-h4); }



h1 {

  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  letter-spacing: -0.01em;
}

h2.section-title{
  margin-top: 0;
}


h3 {

  font-size: clamp(1.25rem, 0.95rem + 0.8vw, 1.6rem);
}

h4 {

  font-size: 1.2rem;
  color: var(--color-muted);
}








/* === ✍️ Подписи и декоративные акценты === */
.hand, .signature, blockquote cite {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--color-accent);
  letter-spacing: 0.5px;
}


/* === 💬 Текст, ссылки и выделения === */
p {

  margin-bottom: var(--space-4, 1rem);
}
strong,
b {
  font-weight: 700;
  color: var(--color-fg);
}

/* 🔧 FIX: strong внутри ссылок наследует цвет ссылки */
a strong,
a b {
  color: inherit;
}

em {
  font-style: italic;
  opacity: 0.9;
}
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover {
  color: var(--color-accent);
}


/* === 💬 Цитаты === */
blockquote {
  font-family: var(--font-base);
  font-style: italic;
  color: var(--color-muted);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4, 1rem);
  margin: var(--space-6, 1.5rem) 0;
}


/* === 🔣 Иконки === */
.material-symbols-rounded {
  font-family: var(--font-icons);
  font-weight: 400;
  font-style: normal;
  font-size: 1.4em;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  color: currentColor;
}


/* === 📋 Списки и таблицы === */
ul, ol {
  padding-left: var(--space-8);
  margin-bottom: var(--space-4);
}
ul li { list-style: disc; }
ol li { list-style: decimal; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-6) 0;
  font-size: 0.95rem;
}
th, td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  text-align: left;
}
th {
  color: var(--color-muted);
  font-weight: 600;
}


/* === 💡 Доп. визуальные элементы === */
code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--color-surface);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.9em;
}
mark {
  background: var(--color-accent-light, #fff2cc);
  padding: 0 4px;
}
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* =========================================================
   📞 Phone link (base element)
   ========================================================= */

a.header__phone{
  font-family:var(--font-display);
  font-size:0.95rem;
  font-weight:700;
  line-height:1;
 color:var(--color-primary);      /* ← нормальный цвет */
  text-decoration:none;
  white-space:nowrap;
  transition:
    color var(--transition-base),
    transform .15s ease;
}

a.header__phone:hover{
  color:var(--color-primary-light);
  text-decoration:none;
  transform:translateY(-1px);
}


/* === 🔣 Material Symbols Rounded — иконки как шрифт ===
   ВАЖНО:
   Иконки Material Symbols — это ТЕКСТОВЫЕ глифы.
   Без этих свойств браузер покажет слово (например: "dark_mode"),
   а не саму иконку.

   Этот блок:
   ✔ включает правильный font-family
   ✔ включает ligatures ('liga')
   ✔ гарантирует рендер иконок, а не текста
   ✔ используется во ВСЁМ проекте (кнопки, хедер, тулбары)
*/

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   PROSE — типографическая зона для редакторского HTML
   Используется для текста туров, описаний, статей
============================================================ */

.prose{
  color: var(--color-fg);
  line-height: 1.6;
}

/* абзацы */
.prose p{
  margin: 0 0 1em;
}

/* списки */
.prose ul{
  margin: 1em 0 1em 1.25em;
   padding-left: 2em; /* ← ВОТ ОН, ТАБ */
}

.prose ol{
  margin: 1em 0 1em 1.25em;
  padding-left: 2em; /* ← ВОТ ОН, ТАБ */
}

.prose li{
  margin-bottom: .5em;
}

/* заголовки внутри текста */
.prose h2,
.prose h3,
.prose h4{
  margin: 1em 0 .4em;
  line-height: 1.15;
}

/* акценты */
.prose strong{
  font-weight: 700;
   color: inherit !important;
}

.prose em{
  opacity: .9;
}

/* ===============================
   ССЫЛКИ — ГЛАВНОЕ
=============================== */

.prose a{
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover{
  text-decoration-thickness: 2px;
}

/* ============================================================
   Quill alignment — поддержка выравнивания редактора
   Работает ТОЛЬКО внутри .prose
============================================================ */

.prose .ql-align-center{
  text-align: center;
}

.prose .ql-align-right{
  text-align: right;
}

.prose .ql-align-left{
  text-align: left;
}





/* ============================================================
   TEXT ON MEDIA — заголовки наследуют цвет контейнера
   Используется для hero / cover / impression / overlay
============================================================ */

.text-on-media{
  color: #fff;
}

.text-on-media h1,
.text-on-media h2,
.text-on-media h3,
.text-on-media h4,
.text-on-media h5,
.text-on-media h6{
  color: inherit;
}


/* --- buttons.css --- */
/* =========================================================
   📄 buttons.css — кнопки сайта «Кочуй»
   Единый стиль для всех CTA, ссылок и форм
   ========================================================= */
/* =========================================================
   Button — no link underline (hard reset)
   ========================================================= */

.button,
.button:hover,
.button:focus,
.button:active{
  text-decoration: none;
}


/* =========================================================
   Button — base
   ========================================================= */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-md);
  border: 2px solid transparent;

  font-weight: 700;
  cursor: pointer;

  color: var(--color-fg);
  text-decoration: none;

  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base),
    color var(--transition-base);
}


/* =========================================================
   Button — primary

   ========================================================= */

.button--primary{
  background: var(--color-primary);      /* #df4f28 */
  color: var(--color-on-primary);        /* НЕ трогаем текст */


  border-radius: var(--radius-pill);   /* форма как в дизайне */
  box-shadow: none;                    /* убираем геройскую тень */
}

.button--primary:hover{
  background: var(--color-accent);
  color: #ffffff;

  box-shadow: none;
  transform: none;
}




/* =========================================================
   Button — secondary (outline / канон)
   ========================================================= */

.button--secondary{
  background: transparent;
  border: 2px solid rgba(0,0,0,0.35);
  color: var(--color-fg);
  border-radius: var(--radius-pill);
}


/* hover — аккуратное усиление */
.button--secondary:hover{
  background: var(--color-primary-light);  /* лёгкая заливка */
  color: var(--color-primary);
  border-color: var(--color-primary);
}



/* =========================================================
   Button — transparent (вторичное действие)
   ========================================================= */

.button--transparent{
  background: none;
  color: var(--color-fg);
  box-shadow: none;
}

.button--transparent:hover{
  color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: none;
  transform: none;
}

.button--transparent:active{
  box-shadow: none;
  transform: none;
}


/* =========================================================
   Button — context overrides
   ========================================================= */

/* Footer transparent button */
footer .button--transparent{
  background: var(--footer-input-bg);
  border: 1px solid var(--footer-input-border);
  color: var(--footer-fg);
}


/* =========================================================
   Button — states (общие)
   ========================================================= */

.button:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.button:active{
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}


/* =========================================================
   Button — loading state
   ========================================================= */

.button.button-loading{
  pointer-events: none;
  opacity: 0.8;
}

.button.button-loading > span{
  visibility: hidden;
}

.button.button-loading::after{
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.4);
  border-top-color: rgba(255,255,255,1);
  animation: spin 0.9s linear infinite;
}

@keyframes spin{
  to { transform: rotate(360deg); }
}


/* =========================================================
   Button — present (special size / invitation)
   ========================================================= */

.button--present{
  padding: 18px 44px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;

  background: transparent;
  color: var(--color-fg);
   border: 1.5px solid color-mix(in srgb, currentColor 65%, transparent);

  box-shadow: none;
}

.button--present:hover{
  opacity: 0.85;
  box-shadow: none;
  transform: none;
}

.button--present:active{
  opacity: 0.75;
}

/* =========================================================
   Button — banner (hero / club banner CTA)
   ========================================================= */

.button--banner{
  padding: 14px 36px;
  border-radius: var(--radius-pill);

  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;

  background: var(--color-primary);
  color: var(--color-on-primary);

  box-shadow:
    0 6px 18px rgba(0,0,0,0.25);
}

/* hover */
.button--banner:hover{
  background: color-mix(in srgb, var(--color-primary) 85%, #000);
  color: #ffffff;

  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.35);
}

/* active */
.button--banner:active{
  transform: translateY(0);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.3);
}


/* =========================================================
   Card Button 1
   ========================================================= */

.btn-card-1{
  appearance:none;
  -webkit-appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);

  padding:var(--space-2) var(--space-4);

  font-size:0.9rem;
  font-weight:600;

  border:none;
  border-radius:999px;

  background:var(--color-primary);
  color:var(--color-on-primary);

  text-decoration:none; /* ← убрать подчёркивание */

  cursor:pointer;
  transition:var(--transition-base);
}

.btn-card-1 svg{
  width:16px;
  height:16px;
}

.btn-card-1:hover{
  background:var(--color-accent);
  color:#fff;               /* ← белый текст */
  text-decoration:none;     /* ← защита от underline */
}



/* =========================================================
   Card Button 2
   ========================================================= */

.btn-card-2{
  appearance:none;
  -webkit-appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);

  padding:var(--space-2) var(--space-4);

  font-size:0.9rem;
  font-weight:600;

  border:none;
  border-radius:999px;

  background:var(--color-highlight);
  color: #fff;

  text-decoration:none; /* ← убрать подчёркивание */

  cursor:pointer;
  transition:var(--transition-base);
}

.btn-card-2 svg{
  width:16px;
  height:16px;
}

.btn-card-2:hover{
 background:var(--color-accent);
  color:#fff;               /* ← белый текст */
  text-decoration:none;     /* ← защита от underline */
}


/* --- forms.css --- */
/* === 📄 /styles_core/front/forms.css — базовые стили форм фронта === */


.form__body{
  display:flex;
  flex-direction:column;
}

.form__body.is-showing{
  opacity:0;
  transform:translateY(10px);
}



.form-group{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  margin-bottom: var(--space-4);
}

.form-label{
  font-weight:600;
  font-size:0.95rem;
}

.form-input{
  width: 100%;
  box-sizing: border-box;

  padding:var(--space-3) var(--space-4);
  border:1px solid rgba(0,0,0,0.12);
  border-radius:var(--radius-lg);

  color:var(--color-fg);
  font-family:inherit;
  font-size:1rem;
  
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}


html[data-theme="dark"] .form-input{
  background-color:var(--color-surface-muted);
  color:var(--color-fg);

  -webkit-text-fill-color:var(--color-fg);
}





.form-input::placeholder{
  color:var(--color-muted);
}

html[data-theme="dark"] .form-input::placeholder{
  color:var(--color-muted);
}


.form-input:focus{
  border-color:var(--color-primary);
  outline:2px solid var(--color-primary-light);
  box-shadow:0 0 0 3px var(--color-primary-light);
}

.form__btn{
  margin-top:var(--space-1);
  align-self:flex-start;
}

.form__result{
  margin-top:var(--space-3);
  font-size:0.95rem;
}


/* =========================================================
   🧾 FORM CONSENT — аккуратный блок согласия
   ========================================================= */

.form-consent{
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
  font-size: 0.85rem;
  color: var(--color-muted);
}

.form-consent__row{
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: 1.4;
  cursor: pointer;
}

.form-consent input{
  margin-top: 3px;
  accent-color: var(--color-primary);
}

.form-consent a{
  color: var(--color-primary);
  text-decoration: none;
}

.form-consent a:hover{
  text-decoration: underline;
}


/* =========================================================
   FORM SUCCESS — ANIMATED
========================================================= */

.form-success{
  display:none;
  text-align:center;
  padding:var(--space-6);

  opacity:0;
  transform:translateY(10px);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.form-success.is-visible{
  display:block;
  opacity:1;
  transform:translateY(0);
}

.form-success__icon{
  font-size:40px;
  color:var(--color-success);
}

.form-success__title{
  margin-top:var(--space-2);
  font-weight:600;
}

.form-success__text{
  margin-top:var(--space-2);
  color:var(--color-muted);
}

/* =========================================================
   FORM TRANSITION (fade out)
========================================================= */

.form__body{
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.form__body.is-hiding{
  opacity:0;
  transform:translateY(-10px);
}


/* =========================================================
  Центторовка формы
========================================================= */

.form-section-wrap .form-card {
  max-width: 820px;
  margin: 0 auto;
}

.form-section-wrap .form {
  width: 100%;
}

/* =========================================================
Ысякая хуйня с чекбоксами
========================================================= */
.form-consent__row.has-error {
  outline: 2px solid rgba(223,79,40,.35);
  border-radius: 6px;
  padding: 4px;
}
.form-consent__row {
  cursor: pointer;
}


/* --- grid.css --- */
/* === 📄 /styles_core/front/base/grid.css — шаблоны сеток фронта Camp Altai ===
   Назначение:
   🎯 Универсальные гриды для всех страниц фронта.
   Используются в блоках hero, benefits, gallery, footer и т.д.

   📐 Архитектура:
   1️⃣ Базовый слой — .grid, gap и поведение контейнера.
   2️⃣ Шаблоны колонок — .cols-2, .cols-3, .cols-4 и т.д.
   3️⃣ Адаптивные модификаторы — .cols-2@md, .cols-3@lg.
   4️⃣ Визуальные отладчики (только для демо, не включать в прод).
*/

/* === 1️⃣ Базовый слой === */
.grid {
  display: grid;
  gap: var(--space-5, 24px);
  align-items: start;
}



/* === 2️⃣ Шаблоны колонок === */
.cols-1 { grid-template-columns: 1fr; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* Автоматическая сетка (адаптивное заполнение) */
.cols-auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* === 3️⃣ Адаптивные модификаторы === */
@media (max-width: 1024px) {
  .cols-4, .cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .cols-3, .cols-4, .cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cols-2, .cols-3, .cols-4, .cols-5 { grid-template-columns: 1fr; }
}




/* --- breadcrumbs.css --- */
/* === 📄 /styles_core/front/blocks/breadcrumbs.css — хлебные крошки сайта Camp Altai ===
   Универсальный компонент навигации по иерархии страниц.
   🔹 Используется под хедером на всех страницах, кроме главной.
   🔹 Поддерживает адаптив, hover и тёмную тему.
*/

.breadcrumbs {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);

  padding: var(--space-6) 0 var(--space-4); /* ⬇️ опустили */
  margin-top: var(--space-4);               /* ⬇️ оторвали от header */

  font-size: var(--fs-300);
}



.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  color: var(--color-muted);
  
    min-width: 0;
}

.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  margin: 0 var(--space-2);
  color: var(--color-border);
}




.breadcrumbs__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-base);
  
  
}

.breadcrumbs__link,
.breadcrumbs__current {
  white-space: normal;
  word-break: break-word;
}




.breadcrumbs svg{
  max-width:100%;
  width:1em;
  height:1em;
  flex-shrink:0;
}





.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}

.breadcrumbs__current {
  color: var(--color-muted);
  font-weight: 600;
  pointer-events: none;
}

/* === 🌙 Тёмная тема === */
@media (prefers-color-scheme: dark) {
  .breadcrumbs {
    background: var(--color-surface);
    border-color: var(--color-border);
  }
  .breadcrumbs__link:hover {
    color: var(--color-accent);
  }
}

/* === 📱 Адаптив === */
@media (max-width: 640px) {
  .breadcrumbs {
    font-size: 0.9rem;
    padding: var(--space-3) 0;
  }
  .breadcrumbs__list {
    gap: var(--space-1);
  }
}



.breadcrumbs .container{
  max-width: 1300px;   /* как у header */
  padding-left: 48px;  /* ➡️ сдвиг под меню */
}


/* --- footer.css --- */
/* =========================================================
 * 📄 /styles_core/front/blocks/footer.css
 * ТОПО / «Топонимы Алтая» — общий подвал публичной части
========================================================= */

.footer {
    --footer-bg: #202820;
    --footer-fg: #F4F0E7;
    --footer-muted: #B8C0B3;
    --footer-border: rgba(244, 240, 231, 0.14);
    --footer-green: #AFC68C;
    --footer-orange: #CC8044;

    position: relative;
    width: 100%;
    margin-top: var(--space-12);
    overflow: hidden;
    color: var(--footer-fg);
    border: 0;
    background: var(--footer-bg);
}

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

/* Одна оранжевая полоса во всю ширину. Было три отрезка — оранжевый,
   зелёный и прозрачный: третий на тёмном фоне подвала не был виден, и
   линия выглядела оборванной. */
.footer__accent {
    width: 100%;
    height: 3px;
    background: var(--footer-orange);
}

.footer .footer__container {
    padding-top: 56px;
    padding-bottom: 24px;
    color: var(--footer-fg);
    background: transparent;
    border-radius: 0;
}

/* =========================================================
 * ОСНОВНАЯ СЕТКА
========================================================= */

.footer__main {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(590px, 1.65fr);
    gap: clamp(48px, 8vw, 120px);
    align-items: start;
}

.footer__brand {
    min-width: 0;
}

.footer__brand-title {
    display: inline-block;
    color: var(--footer-fg);
    font-size: 20px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.footer__brand-title:hover,
.footer__brand-title:focus-visible {
    color: var(--footer-fg);
    text-decoration: none;
    outline: none;
}

.footer__description {
    max-width: 350px;
    margin: 20px 0 0;
    color: var(--footer-muted);
    font-size: 15px;
    line-height: 1.7;
}

/* =========================================================
 * НАВИГАЦИЯ
========================================================= */

.footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 64px);
}

.footer__section-title {
    margin: 0 0 20px;
    color: var(--footer-fg);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.footer__section-title::after {
    display: block;
    width: 24px;
    height: 1px;
    margin-top: 11px;
    background: rgba(204, 128, 68, 0.9);
    content: "";
}

.footer__links {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__links li {
    list-style: none;
}

.footer__links li::marker,
.footer__links li::before,
.footer__link::before {
    display: none !important;
    content: none !important;
}

.footer__link {
    display: inline;
    color: var(--footer-muted);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color 140ms ease;
}

.footer__link:hover,
.footer__link:focus-visible {
    color: var(--footer-fg);
    text-decoration: underline;
    text-decoration-color: rgba(175, 198, 140, 0.55);
    outline: none;
}

/* Кнопка «Обратная связь» под описанием — открывает модалку
   front/blocks/feedback/modal.php. */
/* «Обратная связь» и «Поддержать проект» — столбиком, одной ширины
   (grid растягивает обе по более широкой). */
.footer__actions{
    display:inline-grid;
    gap:.55rem;
    margin-top:.9rem;
}

.footer__feedback-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    box-sizing:border-box;
    text-decoration:none;
    padding:.55rem 1.05rem;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    background:transparent;
    color:var(--footer-fg,#fff);
    font:inherit;
    font-size:.85rem;
    font-weight:700;
    cursor:pointer;
    transition:background .16s ease, border-color .16s ease;
}

/* color — явно: «Поддержать проект» — ссылка <a>, и без этого общее
   a:hover (typography.css) перекрашивало её надпись при наведении,
   а у кнопки «Обратная связь» надпись оставалась белой. */
.footer__feedback-btn:hover,
.footer__feedback-btn:focus-visible{
    background:var(--color-primary,#b85f32);
    border-color:var(--color-primary,#b85f32);
    color:var(--footer-fg,#fff);
}

/* «Настройки cookie» — кнопка (открывает плашку выбора), но выглядит
   как остальные ссылки колонки. */
.footer__link--button {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

/* =========================================================
 * НИЖНЯЯ СТРОКА
========================================================= */

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 22px;
    color: rgba(244, 240, 231, 0.55);
    border-top: 1px solid var(--footer-border);
    font-size: 12px;
    line-height: 1.5;
}

.footer__bottom p {
    margin: 0;
}

/*
 * Раньше тут была одна короткая фраза-тег и uppercase ей шёл. Теперь
 * тут две полноценные фразы предложением ("Данные и источники
 * обновляются и уточняются") — капсом они бы кричали, убираем.
 */
.footer__bottom-note {
    letter-spacing: 0.02em;
}

/* =========================================================
 * АДАПТИВ
========================================================= */

/* Широкий экран: ссылки колонок — одной строкой, без переноса
   («Источники и материалы проекта», «Журнал читательских уточнений»);
   колонки по ширине текста, разнесены по краям. */
@media (min-width: 1280px) {
    .footer__nav {
        grid-template-columns: repeat(3, max-content);
        justify-content: space-between;
    }

    .footer__nav .footer__link {
        white-space: nowrap;
    }
}

@media (max-width: 980px) {
    .footer__main {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .footer__description {
        max-width: 560px;
    }
}

@media (max-width: 680px) {
    .footer {
        margin-top: var(--space-8);
    }

    .footer .footer__container {
        padding-top: 42px;
        padding-bottom: 22px;
    }

    .footer__nav {
        grid-template-columns: 1fr 1fr;
        row-gap: 34px;
    }
}

@media (max-width: 460px) {
    .footer__nav {
        grid-template-columns: 1fr;
    }

    .footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer__link {
        transition: none;
    }
}


/* --- theme_toggle.css --- */
/* =========================================================
   🌗 Floating theme toggle
   ========================================================= */

/* Кнопка живёт в правой зоне хедера (.topo-header__tools) и не
   позиционируется сама: хедер sticky, поэтому она всегда на одном
   месте. relative нужен подсказке ::after, она прижата к кнопке. */
.theme-toggle-float{
  position:relative;
  flex-shrink:0;

  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  border:1px solid var(--color-border-subtle);

  background:var(--color-surface);
  color:var(--color-fg);

  box-shadow:var(--shadow-sm);
  cursor:pointer;

  transition:
    background var(--transition-base),
    color var(--transition-base),
    transform .15s ease,
    box-shadow var(--transition-base);
}

/* hover */
.theme-toggle-float:hover{
  background:var(--color-primary-light);
  color:var(--color-primary);
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}

/* active */
.theme-toggle-float:active{
  transform:translateY(0);
  box-shadow:var(--shadow-sm);
}

/* скрываем текст */
.theme-toggle-float span{
  display:none;
}

/* иконка */
.theme-toggle-float::before{
  content:'';
  width:20px;
  height:20px;
  background:currentColor;

  mask:url('/assets/icons/moon.svg') center / contain no-repeat;

  transition:transform .25s ease, opacity .25s ease;
}

/* dark → sun */
html[data-theme="dark"] .theme-toggle-float::before{
  mask:url('/assets/icons/sun.svg') center / contain no-repeat;
  transform:rotate(180deg);
}

/* tooltip */
.theme-toggle-float::after{
  content:'Сменить тему';
  position:absolute;
  right:56px;
  white-space:nowrap;

  padding:6px 10px;
  border-radius:8px;

  background:var(--color-surface);
  color:var(--color-fg);
  box-shadow:var(--shadow-sm);

  font-size:.75rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}

/* tooltip только если НЕ отключён */
html:not([data-theme-tooltip-off]) .theme-toggle-float:hover::after{
  opacity:1;
}


/* Скрытия при скролле больше нет: кнопка стоит в хедере, а он sticky —
   уезжать ей некуда и не нужно. */


.mobile-theme-toggle{
  width:100%;
  text-align:left;
  padding: var(--space-4);
  background:none;
  border:0;
  font:inherit;
  color: var(--color-fg);
  cursor:pointer;
}

/* =========================================================
   🌗 Theme toggle on breadcrumbs (mobile only)
   ========================================================= */

/* =========================================================
   🌗 Theme toggle — mobile approximate positioning
   ========================================================= */





/* --- topo_icon.css --- */
/**
 * 📄 /styles_core/front/blocks/topo_icon.css
 * ТОПО / Общий размер и вёрстка для иконок интерфейса — как назначенных
 * в Орде (.topo-icon--custom, инлайн-SVG из общей библиотеки
 * /assets/icons/site_icons.json), так и запасных emoji/символов
 * (.topo-icon--fallback). Источник данных — /front/tools/interface_icons.php.
 */

/* Размер иконки — через --topo-icon-size, чтобы кнопка могла попросить
   свой (те же width/height дублируются инлайном в topoIconRaw и в JS,
   иначе иконка «уплывает» на страницах без этого файла). */
.topo-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--topo-icon-size,1.1em);
    height:var(--topo-icon-size,1.1em);
    line-height:1;
    vertical-align:-0.15em;
}

.topo-icon--custom svg{
    display:block;
    width:100%;
    height:100%;
}

.topo-icon--fallback{
    font-size:1em;
}


/* --- library_toggle.css --- */
/* =========================================================
   🔖 Кнопка «Кабинет» (раздел «Библиотека»)
   Стоит в правой зоне хедера (.topo-header__tools), слева от
   переключателя темы. Сама не позиционируется: хедер sticky,
   место у неё постоянное.

   Раньше это была безымянная круглая иконка — снаружи никак не
   читалось, что «Библиотека» вообще есть и что это не такая же
   страница каталога, а личное пространство пользователя. Подпись
   решает это уже в хедере, до перехода на страницу.

   Фирменный бирюзовый (--color-lib) — только в .is-active, когда
   человек реально на /library/ (см. также .topo-header--kabinet в
   topo_header.css). По умолчанию, на любой другой странице, кнопка
   того же нейтрального веса, что и соседний переключатель темы —
   бирюза на каждой странице каталога читалась пятном не по делу,
   цвет должен значить «вы здесь», а не быть краской по умолчанию.
   ========================================================= */

.library-toggle-float{
    --topo-icon-size:18px;

    position:relative;
    flex-shrink:0;

    /*
     * 44px — та же высота, что у соседних кнопок хедера
     * (.theme-toggle-float, .topo-header__burger, оба 44px). Было 38px:
     * на мобиле, где все три кнопки выстроены в один ряд по центру
     * (align-items:center в .topo-header__tools), «Кабинет» заметно не
     * попадал в общую линию.
     */
    height:44px;
    padding:0 12px 0 10px;

    display:inline-flex;
    align-items:center;
    gap:6px;

    border-radius:999px;
    border:1px solid var(--color-border-subtle);

    background:var(--color-surface);
    color:var(--color-muted);

    font-size:13px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;

    box-shadow:var(--shadow-sm);
    cursor:pointer;

    transition:
        background var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        transform .15s ease,
        box-shadow var(--transition-base);
}

.library-toggle-float:hover{
    background:var(--color-lib-light);
    border-color:var(--color-lib);
    color:var(--color-lib);
    transform:translateY(-1px);
    box-shadow:var(--shadow-md);
}

.library-toggle-float.is-active{
    background:var(--color-lib);
    border-color:var(--color-lib);
    color:#fff;
}

/*
 * Акцентом, не приглушённым цветом кнопки: JS показывает этот бейдж
 * только когда в кабинете реально что-то есть (topo_library.js:
 * badge.hidden = n === 0) — раз он вообще виден, там не ноль, так что
 * условие «если не пустой» тут решается самим фактом видимости, а не
 * ещё одной проверкой в CSS. Фирменный оранжевый — тот же акцент, что
 * у активных чипсов и кнопки «Отправить»: единственное цветное пятно
 * на нейтральной кнопке сразу читается как «там что-то ждёт».
 */
.library-toggle-float__count{
    min-width:16px;
    height:16px;
    padding:0 4px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;
    background:var(--color-primary,#b85f32);
    color:var(--color-on-primary,#fff);

    font-size:10px;
    font-weight:800;
    line-height:1;
}

/* На активной (бирюзовой) кнопке — тонкая белая обводка, чтобы оранжевый
   не сливался с бирюзой встык. */
.library-toggle-float.is-active .library-toggle-float__count{
    box-shadow:0 0 0 1px rgba(255,255,255,.55);
}

.library-toggle-float__count[hidden]{
    display:none;
}



/* --- topo_header.css --- */
/* =========================================================
 * 📄 /styles_core/front/blocks/topo_header.css
 * ТОПО / Единый desktop-хедер публичной части
 *
 * Назначение:
 * - единый вид меню на всех публичных разделах;
 * - широкая композиция под каталог, словарь, карту и проект;
 * - спокойный «атласный» стиль без отдельного оформления страниц.
 *
 * Важно:
 * - мобильный хедер этим файлом не перестраиваем;
 * - правая зона оставлена с запасом под служебные кнопки.
========================================================= */

@media (min-width: 901px) {

    .topo-header {
        position: sticky;
        top: 0;
        z-index: 100;
        width: 100%;
        background: var(--topo-header-bg, #FBF5EC);
        border-bottom: 1px solid var(--topo-header-line, rgba(61, 41, 3, 0.08));
        box-shadow: 0 2px 10px rgba(61, 41, 3, 0.025);
    }

    /*
     * Личный кабинет (раздел «Библиотека») — шапка в гамме раздела:
     * цвета задаёт .topo-header--kabinet в base/topo_palette.css
     * (см. $isKabinetPage в header.php).
     */

    /*
     * Зазор под шапкой. На страницах с закреплёнными боковыми колонками
     * (фильтры и паспорт стоят на 10px ниже шапки) средняя колонка
     * прокручивается вместе со страницей и раньше уезжала прямо под
     * шапку — сверху карточки «подрезало» шапкой, а не тем же зазором,
     * что над фильтрами и паспортом. Полоса цвета фона страницы под
     * шапкой (часть sticky-шапки, едет вместе с ней) закрывает эти 10px:
     * список исчезает на той же линии, где начинаются боковые колонки.
     * Только где есть такие колонки (.catalog-v2 — каталог, словарь,
     * слова, статьи, источники; оглавление «Проекта» — на 1rem ниже),
     * чтобы не закрывать верх карты и обычных страниц.
     */
    body:has(.catalog-v2) .topo-header::after,
    body:has(.project-layout) .topo-header::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        /* top:100% — от верха нижней рамки шапки: сдвиг на 1px под неё
           и на столько же короче, чтобы не залезть на боковые колонки. */
        margin-top: 1px;
        height: calc(var(--topo-header-gap, 10px) - 1px);
        background: var(--color-bg);
        pointer-events: none;
    }

    body:has(.project-layout) .topo-header {
        --topo-header-gap: 1rem;
    }


    .topo-header__inner {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr) 170px;
        align-items: center;
        gap: 34px;

        width: min(calc(100% - 80px), 1480px);
        min-height: 92px;
        margin: 0 auto;
    }

    .topo-header__logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        text-decoration: none;
    }

    .topo-header__logo img {
        display: block;
        width: 188px;
        max-width: 100%;
        height: auto;
    }

    .topo-header__nav {
        display: flex;
        align-items: stretch;
        align-self: stretch;
        min-width: 0;
    }

    .topo-header__menu {
        display: flex;
        align-items: stretch;
        gap: 38px;

        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .topo-header__menu-item {
        position: relative;
        display: flex;
        align-items: stretch;
        margin: 0;
        padding: 0;
    }

    .topo-header__link {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 92px;
        padding: 0 2px;

        color: var(--topo-header-fg, var(--color-fg));
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;

        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.025em;

        opacity: 0.88;

        transition:
            color 160ms ease,
            opacity 160ms ease;
    }

    .topo-header__link:hover {
        color: var(--topo-header-active, var(--color-primary));
        opacity: 1;
    }

    .topo-header__menu-item.active .topo-header__link,
    .topo-header__link.active {
        color: var(--topo-header-active, var(--color-primary));
        opacity: 1;
    }

    /* Одна спокойная линия активного раздела */
    .topo-header__menu-item.active .topo-header__link::after,
    .topo-header__link.active::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 18px;
        width: calc(100% + 8px);
        max-width: 78px;
        height: 1px;
        background: currentColor;
        transform: translateX(-50%);
    }

    /* Старую верхнюю метку отключаем: у активного пункта одна линия. */
    .topo-header__menu-item.active .topo-header__link::before,
    .topo-header__link.active::before {
        content: none;
    }

    .topo-header__tools {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;

        min-width: 170px;
        min-height: 92px;
    }

    /* На desktop бургер не нужен. Правая зона остаётся резервом. */
    .topo-header__burger {
        display: none !important;
    }
}

/* На средних desktop-ширинах чуть уплотняем меню,
   сохраняя ту же визуальную систему. */
@media (min-width: 901px) and (max-width: 1220px) {
    .topo-header__inner {
        grid-template-columns: 180px minmax(0, 1fr) 110px;
        gap: 22px;
        width: min(calc(100% - 40px), 1480px);
    }

    .topo-header__logo img {
        width: 164px;
    }

    .topo-header__menu {
        gap: 24px;
    }

    .topo-header__tools {
        min-width: 110px;
    }
}


/* --- topo_header_mobile.css --- */
/* =========================================================
 * 📄 /styles_core/front/blocks/topo_header_mobile.css
 * ТОПО / «Топонимы Алтая» — мобильная версия общего заголовка.
========================================================= */

@media (max-width: 900px) {
    .topo-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--topo-header-bg, #FBF5EC);
        border-bottom: 1px solid var(--topo-header-line, var(--color-border));
    }

    .topo-header__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 64px;
        gap: 20px;
        align-items: center;
        padding: 0 20px;
    }

    .topo-header__logo {
        display: inline-flex;
        /* 100% — это ширина колонки, оставшейся после кнопок справа.
           Раньше здесь было 62vw: оно не знало про кнопки в правой
           зоне, и на экранах уже 360px логотип наезжал на них. */
        /* 140px (было 178): на телефоне логотип занимал почти полшапки. */
        width: min(140px, 100%);
    }

    .topo-header__logo img {
        display: block;
        width: 100%;
        height: auto;
    }

    .topo-header__nav {
        display: none;
    }

    .topo-header__tools {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
    }

    /*
     * «Кабинет» и смена темы — круглые кнопки с подложкой, как на
     * desktop (решение владельца 13.10.2026); меню — просто три полоски
     * без рамки. Подпись «Кабинет» на узком экране скрыта, бейдж —
     * в углу кнопки.
     */
    .library-toggle-float {
        width: 40px;
        height: 40px;
        gap: 0;
        justify-content: center;
        padding: 0;
    }

    .library-toggle-float__label {
        display: none;
    }

    /*
     * В обычном виде бейдж стоит в потоке рядом с текстом «Кабинет» —
     * без текста ему не на чем висеть, переносим поверх иконки, как
     * уведомление в углу кнопки.
     */
    .library-toggle-float__count {
        position: absolute;
        top: 2px;
        right: 2px;
    }

    .theme-toggle-float {
        width: 40px;
        height: 40px;
    }

    .topo-header__burger {
        display: grid;
        width: 44px;
        height: 44px;
        padding: 10px;
        place-content: center;
        gap: 5px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        cursor: pointer;
    }

    .topo-header__burger span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--topo-header-fg, var(--color-fg));
        transition: transform 160ms ease, opacity 160ms ease;
    }

    .topo-header.is-menu-open .topo-header__burger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .topo-header.is-menu-open .topo-header__burger span:nth-child(2) {
        opacity: 0;
    }

    .topo-header.is-menu-open .topo-header__burger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .topo-header__mobile {
        display: none;
        padding: 0 20px 20px;
        background: var(--topo-header-bg, #FBF5EC);
    }

    .topo-header.is-menu-open .topo-header__mobile {
        display: block;
        /* Меню длиннее экрана (альбомная ориентация) прокручивается
           само — страница под ним заблокирована (has-mobile-menu). */
        max-height: calc(100dvh - 65px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Открытое меню — отдельная выпадающая панель: скруглённый низ и
       тень, как у карточек сайта, а не продолжение страницы. */
    .topo-header.is-menu-open {
        border-radius: 0 0 18px 18px;
        box-shadow: 0 14px 34px rgba(20, 14, 8, 0.28);
    }

    .topo-header.is-menu-open .topo-header__mobile {
        border-radius: 0 0 18px 18px;
    }

    /* Затемнение страницы под меню (элемент создаёт mobile_menu.js):
       ниже шапки по z-index (у неё 100), клик по нему закрывает меню. */
    .topo-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 99;
        background: rgba(20, 14, 8, 0.45);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .topo-menu-backdrop[hidden] {
        display: none;
    }

    body.has-mobile-menu {
        overflow: hidden;
    }

    /* Последняя линия под «Проектом» не нужна — ниже идут кнопки. */
    .topo-header__mobile .topo-header__menu > li:last-child > .topo-header__link {
        border-bottom: 0;
    }

    /* «Обратная связь» и «Поддержать проект» — в одну строку, обе
       одинаковые: контур и надпись основного цвета. */
    .topo-header__mobile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding-top: 18px;
        border-top: 1px solid var(--topo-header-line, var(--color-border));
    }

    .topo-header__mobile-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-height: 42px;
        padding: 8px 10px;
        border: 1.5px solid var(--color-primary, #b85f32);
        border-radius: 999px;
        background: transparent;
        color: var(--color-primary, #b85f32);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }

    /* Без смены цвета при наведении: на телефоне «наведение» залипает
       после касания и только дёргает кнопку. Общее a:hover
       (typography.css) перекрасило бы надпись ссылки — держим свою. */
    .topo-header__mobile-action:hover {
        color: var(--color-primary, #b85f32);
    }

    .topo-header__mobile .topo-header__menu {
        display: grid;
        gap: 0;
        margin: 0;
        padding: 0;
        border-top: 1px solid var(--topo-header-line, var(--color-border));
        list-style: none;
    }

    /* Общие стили li возвращали маркеры-точки слева от пунктов меню. */
    .topo-header__mobile .topo-header__menu > li {
        list-style: none;
    }

    .topo-header__mobile .topo-header__link {
        display: flex;
        min-height: 50px;
        align-items: center;
        color: var(--topo-header-fg, var(--color-fg));
        border-bottom: 1px solid var(--topo-header-line, var(--color-border));
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.025em;
        text-decoration: none;
    }

    .topo-header__mobile .topo-header__link.active {
        color: var(--topo-header-active, var(--color-primary));
    }
}

@media (min-width: 901px) {
    .topo-header__mobile {
        display: none !important;
    }
}