/**
 * @file base.css — базовые элементы и роли текста. Вся типографика системы здесь; значения только из токенов (src/theme.css).
 *
 * Слой base лежит ниже утилит Tailwind Mercury и выше его сброса: компоненты Mercury с классами не меняются, а всё, что выводят
 * поля, представления и текстовые форматы Drupal (разметка без классов), получает один вид.
 *
 * Четыре роли текста (размер/интерлиньяж), заголовки H1–H4 и шкала отступов — токены --ee-fs-*, --ee-lh-*, --ee-s1…s7.
 * Роль наследуется: страница — «основной», карточка задаёт «текст карточки», подпись — «мета». Ни один компонент не назначает свой размер.
 * Проза (.ee-prose, форматированный текст полей) имеет предел строки --ee-measure; каталоги, сетки, таблицы и витрины идут на всю ширину контейнера.
 */
@layer base {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
  body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--ee-fs-body);
    line-height: var(--ee-lh-body);
    font-weight: var(--ee-fw-regular);
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: var(--accent); color: var(--accent-foreground); }
  main { display: block; min-width: 0; }
  img, video { max-width: 100%; height: auto; }
  .ee-linked-img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--muted); }
  /* единственный !important системы: атрибут hidden всегда скрывает (иначе display у любого компонента его перебивает) */
  [hidden] { display: none !important; }
  .hidden, .js-hide { display: none; }
  .invisible { visibility: hidden; }
  .js-show { display: block; }
  :focus-visible { outline: 3px solid var(--ee-focus); outline-offset: 2px; }
  .visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .visually-hidden.focusable:focus-within { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .skip-link { position: absolute; left: var(--ee-s4); top: calc(-1 * var(--ee-s7)); z-index: 2000; padding: var(--ee-s2) var(--ee-s4); background: var(--background); border-radius: var(--radius); }
  .skip-link:focus { top: var(--ee-s4); }
  strong, b { font-weight: var(--ee-fw-heading); }

  /* ---------- четыре роли текста ---------- */
  .ee-text-meta, small { font-size: var(--ee-fs-meta); line-height: var(--ee-lh-meta); }
  .ee-text-card { font-size: var(--ee-fs-card); line-height: var(--ee-lh-card); }
  .ee-text-body { font-size: var(--ee-fs-body); line-height: var(--ee-lh-body); }
  .ee-text-lead { font-size: var(--ee-fs-lead); line-height: var(--ee-lh-lead); }
  .ee-text-muted { color: var(--muted-foreground); }

  /* цвет и выравнивание компонентов Canvas «Текст» и «Заголовок» */
  .ee-text--inverted { color: var(--background); }
  .ee-text--primary { color: var(--primary); }
  .ee-text--muted { color: var(--muted-foreground); }
  .ee-text--accent { color: var(--ee-btn-accent); }
  .ee-heading--center { text-align: center; }
  .ee-heading--right { text-align: right; }
  .ee-heading a { color: inherit; text-decoration: none; }
  .ee-heading a:hover { text-decoration: underline; }

  /* ---------- заголовки: четыре ступени; h5 и h6 — не отдельные размеры ---------- */
  h1, h2, h3, h4, h5, h6, .ee-h1, .ee-h2, .ee-h3, .ee-h4 {
    margin: 0;
    font-family: var(--ee-font-heading);
    font-weight: var(--ee-fw-heading);
    letter-spacing: var(--ee-tracking-heading);
    text-wrap: balance;
    scroll-margin-top: calc(var(--ee-header-height) + var(--ee-s4));
  }
  h1, .ee-h1 { font-size: var(--ee-fs-h1); line-height: var(--ee-lh-h1); }
  h2, .ee-h2 { font-size: var(--ee-fs-h2); line-height: var(--ee-lh-h2); }
  h3, .ee-h3 { font-size: var(--ee-fs-h3); line-height: var(--ee-lh-h3); }
  h4, .ee-h4 { font-size: var(--ee-fs-h4); line-height: var(--ee-lh-h4); }
  h5 { font-size: var(--ee-fs-body); line-height: var(--ee-lh-body); }
  h6 { font-size: var(--ee-fs-meta); line-height: var(--ee-lh-meta); text-transform: uppercase; letter-spacing: var(--ee-tracking-caps); color: var(--muted-foreground); }

  /* ---------- проза: то, что пишет редактор (текст Canvas, форматированные поля, вступления и подвалы представлений) ----------
   * Один ритм у всех: между абзацами и списками --ee-gap-para, над заголовком --ee-gap-heading-before, под ним --ee-gap-heading-after. */
  :is(.ee-prose, .text-formatted, .field--type-text-long .field__item, .field--type-text-with-summary .field__item, .view-header, .view-footer, .view-empty) > * { margin-block: 0; }
  :is(.ee-prose, .text-formatted, .field--type-text-long .field__item, .field--type-text-with-summary .field__item, .view-header, .view-footer, .view-empty) > * + * { margin-top: var(--ee-gap-para); }
  :is(.ee-prose, .text-formatted, .field--type-text-long .field__item, .field--type-text-with-summary .field__item) > * + :is(h2, h3, h4, h5, h6) { margin-top: var(--ee-gap-heading-before); }
  :is(.ee-prose, .text-formatted, .field--type-text-long .field__item, .field--type-text-with-summary .field__item) > :is(h1, h2, h3, h4, h5, h6) + * { margin-top: var(--ee-gap-heading-after); }
  :is(.ee-prose, .text-formatted, .field--type-text-long .field__item, .field--type-text-with-summary .field__item) > :is(p, ul, ol, dl, blockquote) { max-width: var(--ee-measure); }
  :is(.ee-prose, .text-formatted, .field--type-text-long .field__item, .field--type-text-with-summary .field__item) > :is(h1, h2, h3, h4) { max-width: var(--ee-measure); }
  .ee-lead, .ee-prose > .ee-lead { font-size: var(--ee-fs-lead); line-height: var(--ee-lh-lead); color: var(--muted-foreground); }

  /* ссылки в тексте */
  a { color: var(--ee-btn-accent); text-underline-offset: var(--ee-underline-offset); }
  a:hover { text-decoration-thickness: var(--ee-line-strong); }
  :is(.ee-prose, .text-formatted, .field__item, main p, main li, footer p) a:not([class]) { text-decoration: underline; text-decoration-thickness: var(--ee-line); }

  /* ---------- списки без классов: маркеры «висят» слева (внутренний отступ), текст выровнен по общей линии со всеми абзацами ---------- */
  :is(main, footer, .ee-prose) :is(ul, ol):not([class]) { margin: 0; padding-left: var(--ee-s5); }
  :is(main, footer, .ee-prose) ul:not([class]) { list-style: disc; }
  :is(main, footer, .ee-prose) ol:not([class]) { list-style: decimal; }
  :is(main, footer, .ee-prose) :is(ul, ol):not([class]) ul:not([class]) { list-style: circle; }
  :is(main, footer, .ee-prose) :is(ul, ol):not([class]) > li { margin: 0; padding: 0; }
  :is(main, footer, .ee-prose) :is(ul, ol):not([class]) > li + li { margin-top: var(--ee-s1); }
  :is(main, footer, .ee-prose) :is(ul, ol):not([class]) :is(ul, ol):not([class]) { margin-top: var(--ee-s1); }
  li::marker { color: var(--muted-foreground); }
  dl:not([class]) { margin: 0; }
  dl:not([class]) dt { font-weight: var(--ee-fw-heading); }
  dl:not([class]) dd { margin: 0; color: var(--muted-foreground); }

  /* ---------- цитата, линия, код, картинка с подписью ---------- */
  blockquote:not([class]) { margin: 0; padding-left: var(--ee-s5); border-left: var(--ee-s1) solid var(--primary); font-size: var(--ee-fs-lead); line-height: var(--ee-lh-lead); font-style: italic; }
  blockquote cite { display: block; margin-top: var(--ee-s2); font-size: var(--ee-fs-meta); line-height: var(--ee-lh-meta); font-style: normal; color: var(--muted-foreground); }
  hr { margin: var(--ee-s6) 0; border: 0; border-top: var(--ee-line) solid var(--border); height: 0; }
  code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--ee-fs-meta); }
  :not(pre) > code, kbd { padding: 0 var(--ee-s1); border-radius: var(--ee-s1); background: var(--muted); border: var(--ee-line) solid var(--border); }
  pre { margin: 0; padding: var(--ee-s4); overflow-x: auto; background: var(--muted); border: var(--ee-line) solid var(--border); border-radius: var(--radius); line-height: var(--ee-lh-meta); }
  pre code { padding: 0; background: none; border: 0; }
  figure { margin: 0; max-width: 100%; }
  figcaption { padding-top: var(--ee-s2); font-size: var(--ee-fs-meta); line-height: var(--ee-lh-meta); color: var(--muted-foreground); }
  :is(.ee-prose, .text-formatted, .field__item) :is(img, video):not([class]) { border-radius: var(--ee-radius-card); }

  /* ---------- таблицы ---------- */
  table { width: 100%; border-collapse: collapse; }
  th, td { padding: var(--ee-s3) var(--ee-s3); text-align: left; vertical-align: top; border-bottom: var(--ee-line) solid var(--border); }
  thead th { background: var(--muted); font-size: var(--ee-fs-meta); line-height: var(--ee-lh-meta); font-weight: var(--ee-fw-heading); text-transform: uppercase; letter-spacing: var(--ee-tracking-caps); color: var(--muted-foreground); white-space: nowrap; }
  caption { padding-bottom: var(--ee-s2); text-align: left; font-weight: var(--ee-fw-heading); caption-side: top; }
  @media (max-width: 47.99rem) { table { display: block; max-width: 100%; overflow-x: auto; } }

  /* ---------- раскрывающиеся блоки без классов (вопрос-ответ и т. п.) ---------- */
  :is(main, footer, .ee-prose) details:not([class]) { border: var(--ee-line) solid var(--border); border-radius: var(--radius); background: var(--background); }
  :is(main, footer, .ee-prose) details:not([class]) > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ee-s4); padding: var(--ee-s3) var(--ee-s4); font-weight: var(--ee-fw-strong); cursor: pointer; list-style: none; }
  :is(main, footer, .ee-prose) details:not([class]) > summary::-webkit-details-marker { display: none; }
  :is(main, footer, .ee-prose) details:not([class]) > summary::after { content: ""; flex: none; width: var(--ee-s2); height: var(--ee-s2); border: solid currentColor; border-width: 0 var(--ee-line-strong) var(--ee-line-strong) 0; transform: rotate(45deg); transition: transform var(--ee-motion); }
  :is(main, footer, .ee-prose) details:not([class])[open] > summary::after { transform: rotate(-135deg); }
  :is(main, footer, .ee-prose) details:not([class]) > :not(summary) { margin: 0 var(--ee-s4) var(--ee-s4); }
  @media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition: none; animation: none; scroll-behavior: auto; } }
}