/* Studik — спільна «оболонка» сайту: палітра, reset, шапка з меню, drawer, ширина футера.
   Єдине джерело правди: підключається ПЕРШИМ на кожній сторінці, до сторінкового CSS.

   Навіщо: шапка була зверстана чотири рази незалежно (index.html, spetsialnosti/,
   mova/+vnzh/, blog/blog.css) і розійшлася — різна висота (70/62/56px), різна ширина
   смуги (1120/1160/1080/820px), різний базовий шрифт (16/17px). Через це сторінка
   «стрибала» при кожному переході. Тепер це один файл; сторінковий CSS має описувати
   лише свій контент і НЕ перевизначати нічого звідси.

   Висота шапки береться з --header-h. Усе, що до неї прив'язане (sticky-панелі фільтрів,
   scroll-padding-top), має читати змінну, а не число. */

:root {
  /* палітра — світла за замовчуванням */
  --ground: #FBF8F2; --surface: #fff; --surface-2: #F6F1E7;
  --ink: #17203A; --muted: #5B6178; --hair: #E8E1D2;
  --blue: #1C3D95; --blue-ink: #152C6B; --blue-tint: #EDF1FB; --blue-soft: #DCE4F7;
  --gold: #F5B21D; --gold-deep: #966000;
  --green: #1F9D63; --green-tint: #E6F5EC; --red: #c2410c;
  --focus: #1C3D95;
  --shadow: 0 1px 2px rgba(21,44,107,.06), 0 12px 30px -12px rgba(21,44,107,.16);
  --shadow-lg: 0 2px 4px rgba(21,44,107,.06), 0 30px 60px -22px rgba(21,44,107,.3);

  /* типографіка */
  --sans: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  /* геометрія оболонки */
  --header-h: 70px;      /* висота шапки — змінювати ТІЛЬКИ тут */
  --shell: 1120px;       /* ширина смуги меню та футера */
  --shell-pad: 22px;     /* бічні відступи смуги меню */
  --brand-logo: 32px;
  --brand-size: 1.32rem;
  --r: 16px; --r-lg: 24px;
  --wrap: var(--shell);  /* сумісність: index.html читає .wrap{max-width:var(--wrap)} */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0D1528; --surface: #15203D; --surface-2: #111A33;
    --ink: #ECE8DE; --muted: #9AA3BE; --hair: #26314F;
    --blue: #7091EC; --blue-ink: #AFC1F4; --blue-tint: #172344; --blue-soft: #1E2C50;
    --gold: #F5B21D; --gold-deep: #F5B21D;
    --green: #37B87C; --green-tint: #12281F; --red: #fb7a4b;
    --focus: #F5B21D;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -12px rgba(0,0,0,.5);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 30px 60px -20px rgba(0,0,0,.65);
  }
}

:root[data-theme="light"] {
  --ground: #FBF8F2; --surface: #fff; --surface-2: #F6F1E7;
  --ink: #17203A; --muted: #5B6178; --hair: #E8E1D2;
  --blue: #1C3D95; --blue-ink: #152C6B; --blue-tint: #EDF1FB; --blue-soft: #DCE4F7;
  --gold: #F5B21D; --gold-deep: #966000;
  --green: #1F9D63; --green-tint: #E6F5EC; --red: #c2410c;
  --focus: #1C3D95;
  --shadow: 0 1px 2px rgba(21,44,107,.06), 0 12px 30px -12px rgba(21,44,107,.16);
  --shadow-lg: 0 2px 4px rgba(21,44,107,.06), 0 30px 60px -22px rgba(21,44,107,.3);
}

:root[data-theme="dark"] {
  --ground: #0D1528; --surface: #15203D; --surface-2: #111A33;
  --ink: #ECE8DE; --muted: #9AA3BE; --hair: #26314F;
  --blue: #7091EC; --blue-ink: #AFC1F4; --blue-tint: #172344; --blue-soft: #1E2C50;
  --gold: #F5B21D; --gold-deep: #F5B21D;
  --green: #37B87C; --green-tint: #12281F; --red: #fb7a4b;
  --focus: #F5B21D;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -12px rgba(0,0,0,.5);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 30px 60px -20px rgba(0,0,0,.65);
}

/* ─────────────────────────── reset ─────────────────────────── */
* { box-sizing: border-box }

/* scrollbar-gutter:stable — головна причина горизонтальних «стрибків»: короткі сторінки
   (404) не мали скролбара, довгі мали, тож увесь контент зсувався на ~15px при переході.
   Заразом прибирає зсув, коли drawer ставить body{overflow:hidden}. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 22px);
  scrollbar-gutter: stable;
}

/* overflow-x:clip, а не hidden: hidden робить body скрол-контейнером і ламає
   position:sticky у шапки та панелей фільтрів на мобільних. */
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .drawer, .drawer-ov { transition: none }
}

a { color: var(--blue); text-decoration: none }
a:hover { text-decoration: underline }
img { max-width: 100%; height: auto }

/* ─────────────────────────── шапка ─────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}

/* Селектор саме `header .nav` (0,1,1), а не `.nav` (0,1,0): на index.html,
   spetsialnosti/, mova/ і vnzh/ розмітка — <div class="wrap nav">, і локальний
   .wrap{max-width:820px} інакше переб'є ширину смуги меню. */
header .nav {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}

/* Без flex-gap: у розмітці `Studi<span>k</span>` текст і <span> — два окремі
   flex-елементи, і gap розсунув би слово на «Studi k». Відступ від логотипа
   дає margin у самої картинки. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-weight: 800;
  font-size: var(--brand-size);
  letter-spacing: -.02em;
  color: var(--blue-ink);
  text-decoration: none;
}
.brand:hover { text-decoration: none }
.brand img { height: var(--brand-logo); width: auto; display: block; margin-right: 8px }
/* тільки прямий нащадок: колись на лендінгу все слово було загорнуте у <span>,
   і правило `.brand span` фарбувало «Studik» цілком, а не саму «k» */
.brand > span { color: var(--gold-deep) }

.nav-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  font-size: .92rem;
  font-weight: 600;
}
.nav-links a { color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .15s }
.nav-links a:hover { color: var(--blue); text-decoration: none }
.nav-links a.nav-page {
  color: var(--blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-links a.nav-page::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
}
.nav-links a.nav-page:hover { color: var(--blue-ink) }

/* CTA у шапці. На index.html елемент має ще .btn.btn-primary (той самий золотий
   pill), на решті сторінок — тільки .nav-cta. */
.nav-cta, .drawer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  /* явний line-height обов'язковий: на лендінгу та 404 CTA — це <a> (успадковує
     1.65 від body), на решті сторінок <button> (UA-дефолт ~normal). Без цього
     та сама пігулка виходить різної висоти. */
  line-height: 1.2;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--gold);
  color: #221a05;
  white-space: nowrap;
  text-decoration: none;
  flex: 0 0 auto;
  box-shadow: 0 8px 22px -8px rgba(245,178,29,.7);
}
.nav-cta:hover, .drawer-cta:hover { transform: translateY(-1px); text-decoration: none }
.drawer-cta { margin-top: 10px; padding: 14px 18px }

.theme-btn, .menu-btn {
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 0;
  background: none;
  border: 1px solid var(--hair);
  border-radius: 10px;
  width: 38px; height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}
.theme-btn { display: inline-flex; line-height: 0 }
.theme-btn:hover, .menu-btn:hover { border-color: var(--blue-soft) }
.menu-btn { display: none; font-size: 1.05rem; line-height: 1 }

.theme-btn .sun { display: none } .theme-btn .moon { display: block }
@media (prefers-color-scheme: dark) { .theme-btn .sun { display: block } .theme-btn .moon { display: none } }
:root[data-theme="dark"] .theme-btn .sun { display: block }
:root[data-theme="dark"] .theme-btn .moon { display: none }
:root[data-theme="light"] .theme-btn .sun { display: none }
:root[data-theme="light"] .theme-btn .moon { display: block }

/* ───────────────────── мобільний drawer ───────────────────── */
.drawer-ov {
  position: fixed; inset: 0;
  background: rgba(10,16,32,.5);
  z-index: 60;
  opacity: 0; visibility: hidden;
  transition: opacity .2s;
}
.drawer-ov.open { opacity: 1; visibility: visible }
.drawer {
  position: fixed; top: 0; right: 0;
  height: 100%;
  width: min(84vw, 320px);
  background: var(--surface);
  z-index: 61;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: var(--shadow);
  padding: 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.drawer.open { transform: none }
.drawer a {
  padding: 14px 8px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--hair);
}
.drawer a.drawer-page { color: var(--blue); font-weight: 700 }
.drawer .close {
  align-self: flex-end;
  background: none;
  border: 1px solid var(--hair);
  border-radius: 10px;
  width: 40px; height: 40px;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--ink);
}

/* ───────────── плаваючі месенджери (розмітка — /assets/js/fab.js) ───────────── */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 54;                 /* нижче за drawer (60/61) і попап (9000) */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fab a {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform .15s;
}
.fab a:hover { transform: scale(1.08); text-decoration: none }
.fab .tg { background: #2aabee }
.fab .vb { background: #7360f2 }
.fab .wa { background: #25d366 }
.fab .ig { background: linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7) }
@media (max-width: 600px) {
  .fab { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); gap: 8px }
  .fab a { width: 46px; height: 46px }
}
/* на лендінгу месенджери вже є в липкій нижній смузі — не дублюємо їх на телефоні */
@media (max-width: 700px) {
  .fab.fab--with-bar { display: none }
}

/* ─────────────────────────── футер ─────────────────────────── */
/* Тільки ширина — оформлення футера лишається за сторінкою. Селектор `footer .wrap`
   (0,1,1) навмисно перебиває локальні .wrap{max-width:760px|820px|1160px}, щоб
   футер збігався зі смугою меню. */
footer .wrap { max-width: var(--shell) }

/* ─────────────────────── адаптив шапки ─────────────────────── */
/* Горизонтальний список показуємо лише тоді, коли смуга меню має повну
   ширину --shell: бренд + 6 пунктів + перемикач + CTA потребують ~1070px, а
   доступно --shell мінус відступи = 1076px. У вужчому вікні смуга звужується
   разом із ним, вміст перестає вміщатися й вилазив за край (при 900px —
   на 278px). Поріг — 1160px, а не 1120px: медіа-запит міряє вікно РАЗОМ зі
   смугою прокрутки (~15px, її резервує scrollbar-gutter), тож при вікні 1121px
   смуга виходила лише 1106px і 1069px усе ще не вміщались.
   Регресію стереже tools/check_nav_fits.mjs. */
@media (max-width: 1160px) {
  .nav-links { display: none }
  .nav-cta { display: none }
  .menu-btn { display: inline-flex }
  .theme-btn { margin-left: auto }
}
@media (max-width: 600px) {
  :root {
    --header-h: 62px;
    --shell-pad: 16px;
    --brand-logo: 26px;
    --brand-size: 1.15rem;
  }
  header .nav { gap: 10px }
  .brand img { margin-right: 6px }
  body { font-size: 16px }
}