/*
 * Стилі сайту МГО «Незалежна асоціація молоді».
 *
 * Нейтралі й гарнітури спільні з conferences.neasmo.org.ua — сайти мають
 * читатися як одна родина. Акцент власний, від логотипа організації — але
 * саме «від», а не «звідти скопійований»: два непрозорі кольори растру
 * логотипа НЕ дорівнюють акцентним токенам нижче, це свідомі наближення,
 * підігнані під ряд нейтралей. Точні виміряні значення й пояснення, чому
 * взято не їх, — у `tools/check-style.test.mjs` (тут їх не наводимо: будь-який
 * hex у цьому файлі, навіть у коментарі, зобов'язаний бути з палітри, і
 * сторож палітри за цим стежить).
 *
 * Палітра закрита: `check-style` валить збірку на будь-якому hex поза списком.
 * Хочеш новий колір — спершу додай його в PALETTE тесту й поясни там навіщо.
 */

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

:root {
  color-scheme: light dark;

  --ink-900: #131a1b;
  --ink-700: #384345;
  --ink-600: #4d5a5c;
  --ink-500: #6c7a7c;
  --ink-400: #9ba8aa;
  --ink-300: #cdd5d6;
  --ink-200: #e4e9e9;
  --ink-100: #f1f4f4;
  --ink-50:  #f8fafa;

  --accent:      #d01010;
  --accent-deep: #a50d0d;

  --bg:       #ffffff;
  --bg-soft:  var(--ink-50);
  --text:     var(--ink-900);
  --muted:    var(--ink-700);   /* було ink-600 → 10.21:1 */
  --faint:    var(--ink-600);   /* було ink-500 →  7.16:1 */
  --hairline: var(--ink-200);
  /* Межа картки напрямів — єдиний інтерактивний контур на сайті, і WCAG 2.1
     хоче для нього 3:1. ink-300 давав 1.49:1 на білому: заливка картки майже
     збігається з тлом сторінки, тож картки просто не було видно. ink-500 —
     єдине значення палітри, яке бере 3:1 і на світлому тлі (4.46:1), і на
     темному (3.96:1), тому в обох темах воно те саме. */
  --edge:     var(--ink-500);
  --link:     var(--accent);
  --link-hov: var(--accent-deep);

  --sans: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: Lora, Georgia, 'Times New Roman', serif;
}

/*
 * Темна тема. Перевизначаються ТІЛЬКИ токени — жодного правила верстки тут
 * бути не повинно, інакше дві теми почнуть розʼїжджатися структурно.
 *
 * Акцент інший навмисно: #d01010 на тлі #131a1b дає 3.3:1 і не проходить
 * WCAG AA для тексту. #ff4433 дає 5.3:1.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #131a1b;
    --bg-soft:  #100008;
    --text:     var(--ink-100);
    --muted:    var(--ink-300);
    --faint:    var(--ink-400);
    --hairline: var(--ink-700);
    /* Те саме ink-500, що й у світлій темі: див. коментар вище. ink-600 тут
       давав 2.46:1 — темна тема мала ту саму невидиму межу, що й світла. */
    --edge:     var(--ink-500);
    --link:     #ff4433;
    /* У світлій темі hover темнішає (#d01010 → #a50d0d) — рухається від
       світлого тла. На темному тлі той самий напрямок означав би злиття з
       фоном, тому тут навпаки: hover світлішає до білого. */
    --link-hov: #ffffff;
  }
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--link-hov); }

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

h1, h2, h3 { line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 2rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.35rem; margin: 0 0 1rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }

/* Шапка */
.top {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding: 1.25rem 0; border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.brand img { display: block; width: 36px; height: 39px; }
.brand b { display: block; font-size: 0.95rem; line-height: 1.15; }
/* <i> тут не курсив, а другий рядок назви — семантики виділення в ньому немає,
   тому font-style знімається. Тег обраний за стислість розмітки в шапці. */
.brand i { display: block; font-style: normal; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.92rem; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--link); text-decoration: underline; }
.lang { font-size: 0.85rem; color: var(--faint); }
.lang a { color: var(--muted); text-decoration: none; }
.lang a:hover { color: var(--link-hov); }
.lang b { color: var(--text); }

/* Секції */
section { padding: 2.5rem 0; border-bottom: 1px solid var(--hairline); }
section:last-of-type { border-bottom: 0; }
.hero { padding-top: 3rem; }
.hero p { font-size: 1.15rem; color: var(--muted); margin: 0.75rem 0 0; max-width: 34rem; }

/* Напрями — головний елемент сторінки */
.dirs { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .dirs { grid-template-columns: 1fr 1fr; } }
.dir {
  display: block; padding: 1.25rem; border: 1px solid var(--edge);
  text-decoration: none; color: inherit; background: var(--bg-soft);
}
.dir:hover { border-color: var(--link); }
.dir h3 { color: var(--link); }
.dir p { margin: 0; font-size: 0.95rem; color: var(--muted); }

/* Принципи */
.principle { margin: 0 0 1.25rem; }
.principle h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.principle p { margin: 0; color: var(--muted); }

/* Таймлайн */
.timeline { display: grid; gap: 0; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 34rem) { .timeline { grid-template-columns: 6.5rem 1fr; } }
.tl-year {
  font-family: var(--serif); color: var(--link); border-top: 1px solid var(--hairline);
  padding: 0.9rem 0 0; margin: 0; font-size: 1.05rem;
}
.tl-body { padding: 0.9rem 0; margin: 0; border-top: 1px solid var(--hairline); color: var(--muted); }
/* 33.99rem, не 34rem: навмисний зазор проти `min-width: 34rem` вище, щоб два
   медіа-запити не спрацьовували одночасно на однаковій ширині. */
@media (max-width: 33.99rem) { .tl-body { border-top: 0; padding-top: 0.15rem; } }
.timeline figure { margin: 0.75rem 0 0; }
.timeline img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); }

/* Контакти */
.contacts { list-style: none; padding: 0; margin: 0; }
.contacts li { padding: 0.55rem 0; border-top: 1px solid var(--hairline); }
.contacts li:first-child { border-top: 0; }
.contacts b { display: inline-block; min-width: 7.5rem; color: var(--faint); font-weight: 400; font-size: 0.9rem; }

/* Довгий документ: Статут.
   Без застосування на сайті з 2026-09-04 — Статут знято з публікації
   рішенням власника проєкту, текст лишився в docs/statut.html і
   docs/en-statute.html. Класи не видалені: сторінки, для яких вони писані,
   існують і можуть повернутися в public/ без переверстки. Якщо повернення
   не станеться і сторінки з docs/ буде вирішено не публікувати ніколи —
   тоді видаляти. */
.doc { padding: 2rem 0 3rem; }
.doc h2 { margin-top: 2rem; font-size: 1.15rem; }
.doc li { margin-bottom: 0.35rem; }
/* Редакційна примітка перед цитованим документом. Пояснює читачеві, що
   застаріла назва міста в тексті — це оригінал, а не недогляд сайту. */
.doc-note {
  margin: 0 0 2rem; padding: 0.9rem 1rem;
  border-left: 3px solid var(--link); background: var(--bg-soft);
  font-size: 0.92rem; color: var(--muted);
}

/* Підвал */
.foot {
  padding: 2rem 0 3rem; border-top: 1px solid var(--hairline);
  font-size: 0.88rem; color: var(--faint);
}
.foot a { color: var(--muted); }
.foot a:hover { color: var(--link-hov); }