/**
 * @file theme.css — цветовые и размерные токены движка (CSS-переменные).
 *
 * Нейтральная белая тема. Сайт переопределяет значения так: копирует этот файл в корень сайта (рядом с index.php)
 * и меняет нужные строки — очищать кэш Drupal, пересборка CSS не нужна (официальный способ Mercury).
 * Токены --ee-* — наши; остальные (--primary и др.) — из Mercury/shadcn.
 * Цвета подобраны под контраст WCAG AA (текст на фоне >= 4.5:1): проверено скриптом contrast.py (pm/docs).
 */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.2 0.02 265);
  --card: oklch(0.975 0.004 265);
  --card-foreground: oklch(0.2 0.02 265);
  --primary: oklch(0.42 0.14 265);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.94 0.006 265);
  --secondary-foreground: oklch(0.25 0.03 265);
  --muted: oklch(0.965 0.004 265);
  --muted-foreground: oklch(0.42 0.02 265);
  --accent: oklch(0.94 0.03 265);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.52 0.2 27);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9 0.006 265);
  --input: oklch(0.62 0.012 265);
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0 1px 2px 0 hsl(0 0% 0% / 0.04);
  --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.08), 0 1px 2px -1px hsl(0 0% 0% / 0.08);
  --shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.08), 0 1px 2px -1px hsl(0 0% 0% / 0.08);
  --shadow-md: 0 4px 12px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 10px 24px -6px hsl(0 0% 0% / 0.12);
  --shadow-xl: 0 16px 36px -8px hsl(0 0% 0% / 0.14);
  --shadow-2xl: 0 24px 48px -12px hsl(0 0% 0% / 0.18);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
  --navbar-height: calc(var(--spacing) * 15);

  /* Токены движка */
  --ee-container: 72rem;          /* максимальная ширина содержимого */
  --ee-gutter: 1rem;              /* боковые поля (совпадают с px-4 секций Canvas: край текста один на всех блоках) */
  --ee-radius-card: 1rem;         /* скругление карточек */
  --ee-radius-pill: 999px;        /* кнопки и плашки */
  --ee-card-border: var(--border);
  --ee-card-bg: var(--background);
  --ee-card-shadow: var(--shadow-sm);
  --ee-focus: oklch(0.55 0.2 265); /* кольцо фокуса */
  --ee-overlay: oklch(0.15 0.03 265 / 0.45); /* затемнение под шторкой */
  --ee-shutter-width: 22rem;      /* ширина шторки */
  --ee-header-height: 4rem;
  /* шапка: цвета и шрифт названия (по умолчанию как у остальной темы; сайт задаёт свои, ничего в шаблонах не правя) */
  --ee-header-bg: var(--background);          /* фон шапки и шторок */
  --ee-header-fg: var(--foreground);          /* цвет текста шапки */
  --ee-header-border: transparent;            /* тонкая линия под шапкой */
  --ee-header-accent: var(--primary);         /* заливка главной кнопки, контур второй, линия текущего пункта */
  --ee-header-accent-fg: var(--primary-foreground);
  --ee-header-font: var(--font-sans);         /* шрифт названия сайта */
  --ee-header-field-bg: var(--ee-field-bg);   /* поле поиска в шапке */
  --ee-header-field-border: var(--ee-field-border);
  /* поля форм: рамка контрастнее 3:1 к фону (WCAG 1.4.11), фон поля отличается от фона страницы */
  --ee-field-border: oklch(0.55 0.02 265);
  --ee-field-bg: oklch(1 0 0);
  --ee-field-radius: 0.625rem;
  --ee-field-focus: var(--ee-focus);
  --ee-heading-weight: 700;
  --ee-status-ok: oklch(0.42 0.11 155);      /* «Регистрация открыта» */
  --ee-status-warn: oklch(0.45 0.12 70);     /* «Анонс», «Перенесено» */
  --ee-status-bad: oklch(0.45 0.16 27);      /* «Отменено» */
  --ee-status-done: oklch(0.4 0.02 265);     /* «Завершено», «Идёт» — нейтральный */

  /* Базовая типографика и ритм (css/base.css). Сайт меняет значения здесь, файлы не правит. */
  --ee-text: 1rem;                            /* размер основного текста */
  --ee-leading: 1.6;                          /* интерлиньяж текста */
  --ee-heading-leading: 1.2;                  /* интерлиньяж заголовков */
  --ee-measure: 68ch;                         /* предел длины строки в текстах */
  --ee-h1: clamp(2rem, 1.45rem + 2.4vw, 3rem);
  --ee-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  --ee-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --ee-h4: 1.125rem;
  --ee-h5: 1rem;
  --ee-h6: 0.8125rem;
  --ee-space: 1rem;                           /* базовый шаг отступов */
  --ee-section-gap: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); /* вертикальный ритм секций */
  --ee-card-min: 15rem;                       /* минимальная ширина карточки в сетках */
  --ee-cta-bg: var(--accent);                 /* фон широкой полосы призыва */
  --ee-ask-bar-bg: var(--background);         /* фон нижней полосы «Записаться / Спросить» */
  --ee-danger: var(--destructive);
  --ee-success: var(--ee-status-ok);
  --ee-warning: var(--ee-status-warn);
  --ee-dir-1: oklch(0.5 0.12 265);            /* цвета верхней линии плашек направлений (по кругу) */
  --ee-dir-2: oklch(0.5 0.12 30);
  --ee-dir-3: oklch(0.5 0.1 145);
  --ee-dir-4: oklch(0.5 0.09 190);
  --ee-dir-5: oklch(0.5 0.08 60);
  --ee-dir-6: oklch(0.5 0.1 320);
}

.dark {
  --background: oklch(0.16 0.02 265);
  --foreground: oklch(0.96 0.005 265);
  --card: oklch(0.21 0.02 265);
  --card-foreground: var(--foreground);
  --primary: oklch(0.72 0.13 265);
  --primary-foreground: oklch(0.16 0.02 265);
  --secondary: oklch(0.3 0.02 265);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.26 0.02 265);
  --muted-foreground: oklch(0.8 0.01 265);
  --accent: oklch(0.3 0.03 265);
  --accent-foreground: var(--foreground);
  --border: oklch(0.34 0.02 265);
  --input: oklch(0.4 0.02 265);
}
/* ===================================================================================================================================
 * Слой сайта Родиона Самира: токены и оформление ШАПКИ (дописывается к theme.css движка при сборке, scripts/site-theme.sh → web/theme.css).
 * Только шапка и то, что от неё неотделимо: цвет фона шапки и шторок, шрифт названия. Остальной сайт не перекрашивается (палитру Родиона
 * целиком применим отдельным шагом). Все цвета, шрифты и размеры — токены ниже; в шаблонах движка ничего не хардкодится.
 * Источники: design/brandbook.md, design/homepage-mockup-brief.md (палитра), design/mockups/page-home.html (вид шапки), design/assets/logo-rodion-samir.svg.
 * Контраст (WCAG AA, расчёт формулой относительной яркости): акцент #B4552F на кремовом #FAF6F0 — 4,56:1; белый на акценте — 4,91:1;
 * тёмный текст #2B241D на кремовом — 14,2:1; тёмно-терракотовый #8C3F21 на кремовом «hover» #F1E4D8 — 6,3:1. Ничего подбирать не пришлось.
 * Специфичность селекторов повышена (header .ee-header.ee-header …): этот файл грузится раньше стилей компонентов движка.
 * =================================================================================================================================== */
:root {
  --ee-header-bg: #FAF6F0;                 /* кремовый фон шапки и шторок (бренд) */
  --ee-header-fg: #2B241D;                 /* цвет текста шапки */
  --ee-header-border: #E3D8C9;             /* тонкая линия под шапкой и между рядами */
  --ee-header-accent: #B4552F;             /* акцент: главная кнопка, контур второй, линия текущего пункта */
  --ee-header-accent-fg: #FFFFFF;          /* текст на акценте */
  --ee-header-font: "Lora", Georgia, "Times New Roman", serif;   /* название сайта: шрифт с засечками (локальный файл, кириллица) */
  --rs-header-soft: #F1E4D8;               /* фон при наведении на контурную кнопку и значки */
  --rs-header-ink: #8C3F21;                /* текст «hover» на мягком фоне (AA) */
  --rs-row1: 5rem;                         /* высота первой строки шапки на компьютере (80 px) */
  --rs-menu-row: 2.75rem;                  /* высота строки меню на компьютере (44 px) */
  --rs-logo-size: 3.25rem;                 /* значок-логотип на компьютере */
  --rs-name-size: 1.75rem;                 /* название на компьютере */
  --ee-header-search-w: 12rem;             /* поле поиска в шапке: в покое и при фокусе (растёт влево, соседей не сдвигает) */
  --ee-header-search-w-open: 19rem;
  --ee-field-border: #857463;              /* рамка полей форм: 4,49:1 к белому и 4,17:1 к кремовому (нужно не меньше 3:1) */
  --ee-field-bg: #FFFFFF;                  /* поле белое на кремовом и на белом фоне */
  --ee-field-focus: #B4552F;               /* кольцо фокуса: акцент */
}

/* ---------- фон шапки на всю ширину экрана, шапка закреплена на всех размерах ---------- */
header:has(> .region-header .ee-header) { display: contents; }   /* иначе закреплённая область ограничена высотой самого <header> и на планшете и телефоне не держится */
header:has(> .region-header .ee-header) > .region-header { position: sticky; top: 0; z-index: 500; background: var(--ee-header-bg); border-bottom: 1px solid var(--ee-header-border); }
header .ee-header.ee-header { background: transparent; border-bottom: 0; }

/* ---------- общее: название и значок ---------- */
header .ee-header.ee-header .ee-header__logo { display: flex; align-items: center; }
header .ee-header.ee-header .ee-header__logo a { color: var(--ee-header-fg); gap: .65rem; }
header .ee-header.ee-header .ee-header__logo .heading-responsive-4xl {
  font-family: var(--ee-header-font); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; line-height: 1; white-space: nowrap;
  font-size: 1.05rem; color: var(--ee-header-fg);
}
header .ee-header.ee-header .ee-header__logo .branding { height: 2.4rem; width: 2.4rem; flex: none; }
header .ee-header.ee-header .ee-header__btn { color: var(--ee-header-fg); }
header .ee-header.ee-header .ee-header__btn:hover, header .ee-header.ee-header .ee-header__btn[aria-expanded="true"] { background: var(--rs-header-soft); border-color: transparent; }
header .ee-header.ee-header a:focus-visible, header .ee-header.ee-header button:focus-visible { outline: 3px solid var(--ee-focus); outline-offset: 2px; }
header .ee-header.ee-header .ee-header__fav { color: var(--ee-header-fg); }

/* ---------- кнопки: главная — заливка акцентом, вторая — контур ---------- */
header .ee-header.ee-header .ee-header__cta, header .ee-header.ee-header .ee-header__ask {
  min-height: 2.75rem; padding: .5rem 1.4rem; border-radius: 999px; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
header .ee-header.ee-header .ee-header__cta { background: var(--ee-header-accent); color: var(--ee-header-accent-fg); border: 1.5px solid var(--ee-header-accent); filter: none; }
header .ee-header.ee-header .ee-header__cta:hover { background: var(--rs-header-ink); border-color: var(--rs-header-ink); filter: none; }
header .ee-header.ee-header .ee-header__ask { background: transparent; color: var(--ee-header-accent); border: 1.5px solid var(--ee-header-accent); }
header .ee-header.ee-header .ee-header__ask:hover { background: var(--rs-header-soft); color: var(--rs-header-ink); border-color: var(--rs-header-ink); }
header .ee-header.ee-header .ee-header__ask[data-ee-ask-rank="1"] { background: var(--ee-header-accent); color: var(--ee-header-accent-fg); }
header .ee-header.ee-header .ee-header__ask[data-ee-ask-rank="1"]:hover { background: var(--rs-header-ink); border-color: var(--rs-header-ink); }

/* ---------- компьютер (от 64rem): строка 1 — логотип слева, справа поиск, «Рубрики», две кнопки; строка 2 — меню в одну строку ---------- */
@media (min-width: 64rem) {
  header .ee-header.ee-header { padding-block: 0; column-gap: 1.5rem; }
  header .ee-header.ee-header .ee-header__logo, header .ee-header.ee-header .ee-header__right { min-height: var(--rs-row1); }
  header .ee-header.ee-header .ee-header__logo a { gap: .9rem; }
  header .ee-header.ee-header .ee-header__logo .branding { height: var(--rs-logo-size); width: var(--rs-logo-size); }
  header .ee-header.ee-header .ee-header__logo .heading-responsive-4xl { font-size: var(--rs-name-size); letter-spacing: .08em; }
  header .ee-header.ee-header .ee-header__right { gap: .5rem; }
  header .ee-header.ee-header .ee-shutter.ee-shutter--menu { background: transparent; }
  header .ee-header.ee-header.ee-header--menu-below .ee-shutter.ee-shutter--menu {
    border-top: 1px solid var(--ee-header-border); padding-bottom: 0; min-height: var(--rs-menu-row);
  }
  header .ee-header.ee-header .ee-shutter--menu .ee-shutter__slot ul { gap: .35rem; }
  header .ee-header.ee-header .ee-shutter--menu .ee-shutter__slot li a {
    min-height: var(--rs-menu-row); padding: .55rem .8rem !important; border-radius: 0; background: none !important; color: var(--ee-header-fg);
    font-size: .9375rem; font-weight: 500; letter-spacing: .01em; border-bottom: 2px solid transparent; box-sizing: border-box;
    transition: color .15s ease, border-color .15s ease;
  }
  header .ee-header.ee-header .ee-shutter--menu .ee-shutter__slot li a:hover { color: var(--ee-header-accent); background: none !important; border-bottom-color: var(--ee-header-border); }
  header .ee-header.ee-header .ee-shutter--menu .ee-shutter__slot li a[aria-current="page"],
  header .ee-header.ee-header .ee-shutter--menu .ee-shutter__slot li a.is-active { color: var(--ee-header-fg); font-weight: 600; background: none !important; border-bottom-color: var(--ee-header-accent); }
  /* закреплённая шапка: вторая строка (меню) уезжает при прокрутке, первая остаётся; высота не меняется, поэтому страница не прыгает */
  header:has(> .region-header .ee-header--menu-below) > .region-header { top: calc(-1 * (var(--rs-menu-row) + 1px)); }
}

/* ---------- компактная шапка при прокрутке: тень и чуть меньший логотип (scroll-driven анимации; в старых браузерах просто без эффекта; преобразования не меняют размеры блоков) ---------- */
@supports (animation-timeline: scroll()) {
  @keyframes rs-header-shadow { from { box-shadow: 0 0 0 0 rgb(43 36 29 / 0); } to { box-shadow: 0 10px 22px -16px rgb(43 36 29 / .55); } }
  @keyframes rs-logo-shrink { from { transform: scale(1); } to { transform: scale(.86); } }
  @media (prefers-reduced-motion: no-preference) {
    header .ee-header.ee-header { animation: rs-header-shadow linear both; animation-timeline: scroll(root block); animation-range: 0 140px; }
    header .ee-header.ee-header .ee-header__logo { transform-origin: left center; animation: rs-logo-shrink linear both; animation-timeline: scroll(root block); animation-range: 0 140px; }
  }
}

/* ---------- планшет (36–64rem): название чуть крупнее, все кнопки справа ---------- */
@media (min-width: 36rem) and (max-width: 63.99rem) {
  header .ee-header.ee-header .ee-header__bar { min-height: 4.5rem; }
  header .ee-header.ee-header .ee-header__logo .heading-responsive-4xl { font-size: 1.4rem; }
  header .ee-header.ee-header .ee-header__logo .branding { height: 2.75rem; width: 2.75rem; }
}

/* ---------- телефон (до 36rem): высота около 64 px, логотип слева в одну строку, справа поиск и бургер ---------- */
@media (max-width: 35.99rem) {
  header .ee-header.ee-header .ee-header__bar { min-height: 4rem; padding-block: .25rem; gap: .25rem; }
  header .ee-header.ee-header .ee-header__logo .heading-responsive-4xl { font-size: 1.1rem; letter-spacing: .06em; }
  header .ee-header.ee-header .ee-header__logo .branding { height: 2.25rem; width: 2.25rem; }
  header .ee-header.ee-header .ee-header__fav, header .ee-header.ee-header .ee-header__btn--topics { display: none; }
  header .ee-header.ee-header .ee-header__btn--icon { display: inline-flex; }   /* поиск остаётся видимым (перекрывает правило движка для узких экранов) */
}

/* ---------- шторка меню: кремовый фон, крупные пункты, заметная кнопка «Записаться» внизу ---------- */
header .ee-header.ee-header .ee-shutter__body { display: flex; flex-direction: column; }
header .ee-header.ee-header .ee-shutter .ee-shutter__slot li a { font-size: 1.125rem; font-weight: 500; border-bottom: 1px solid var(--ee-header-border); border-radius: 0; padding: .75rem .5rem !important; }
header .ee-header.ee-header .ee-shutter .ee-shutter__slot li a[aria-current="page"] { background: none; color: var(--ee-header-accent); font-weight: 600; }
header .ee-header.ee-header .ee-shutter__title { font-family: var(--ee-header-font); text-transform: uppercase; letter-spacing: .07em; }
header .ee-header.ee-header .ee-shutter__cta {
  margin-top: auto; position: sticky; bottom: 0; min-height: 3.25rem; font-size: 1.0625rem; font-weight: 600;
  background: var(--ee-header-accent); color: var(--ee-header-accent-fg); box-shadow: 0 -10px 18px -12px rgb(43 36 29 / .35);
}
header .ee-header.ee-header .ee-shutter__cta:hover { background: var(--rs-header-ink); filter: none; }
@media (min-width: 64rem) { header .ee-header.ee-header .ee-shutter--menu .ee-shutter__body { display: flex; flex-direction: row; } header .ee-header.ee-header .ee-shutter--menu .ee-shutter__slot li a { font-size: .9375rem; border-bottom: 2px solid transparent; } }

/* ---------- подвал: кремовый фон на всю ширину, тонкая линия сверху ---------- */
.region-footer { background: var(--ee-header-bg); border-top: 1px solid var(--ee-header-border); margin-top: 3rem; }
.region-footer .site-footer h3 { color: var(--ee-header-fg); font-family: var(--ee-header-font); text-transform: uppercase; letter-spacing: .07em; font-size: .8125rem; }
.region-footer .site-footer li a:hover { color: var(--ee-header-accent); }


/* ---------- кнопка поиска в шторке меню и поля форм: акцент сайта вместо синего по умолчанию ---------- */
header .ee-header.ee-header .ee-search__submit { background: var(--ee-header-accent); color: var(--ee-header-accent-fg); }
header .ee-header.ee-header .ee-search__submit:hover { background: var(--rs-header-ink); }
.ee-header .ee-search input[type="search"] { background: var(--ee-field-bg); }