/* ==========================================================================
   BASE — рівень документа
   Фон, колір, фокус, виділення, прокрутка. Компонентів тут немає.
   ========================================================================== */

html {
  font-family: var(--font-sans);
  /* Плавна прокрутка до якорів; вимикається при prefers-reduced-motion
     нижче в цьому ж файлі. */
  scroll-behavior: smooth;
  /* Липкий хедер не має накривати заголовок секції після переходу за якорем */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  /* Варіативний Manrope: без цього Safari може підставити синтетичну вагу */
  font-variation-settings: "wght" 400;
  /* Пропорційні цифри в тексті, табличні — точково через utilities.css */
  font-variant-numeric: proportional-nums;
  text-rendering: optimizeLegibility;
  /* Запобіжник від горизонтального скролу. Не використовувати overflow-x:
     hidden на body — воно ламає position: sticky у хедері. */
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   ФОКУС
   Видимий завжди, коли фокус прийшов з клавіатури. Мишеві кліки кільце не
   малюють, але сам outline ніколи не вимикається без заміни.
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 4px;
}

/* Прибирає подвійне кільце в браузерах, що вже підтримують :focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------------------------------------------------------------------------
   ПОСИЛАННЯ
   --------------------------------------------------------------------------- */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: var(--transition-colors);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

/* Посилання-кнопки та навігація підкреслення не мають —
   для них сенс передає форма елемента, не лінія. */
a:where(.btn, .nav__link, .logo, .card__link, .footer__link) {
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   ВИДІЛЕННЯ ТЕКСТУ
   --------------------------------------------------------------------------- */
::selection {
  background-color: var(--color-primary-100);
  color: var(--color-text-900);
}

/* ---------------------------------------------------------------------------
   ЗАГОЛОВКИ І СПИСКИ ЗА ЗАМОВЧУВАННЯМ
   Детальна шкала — у typography.css.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  /* Не дає короткому слову лишитись самотнім у кінці заголовка */
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::marker {
  color: var(--color-primary-600);
}

strong,
b {
  font-weight: var(--fw-bold);
  color: var(--color-text-900);
}

small {
  font-size: var(--fs-sm);
}

/* Абревіатури з розшифровкою — курсор і пунктир, без прихованого сенсу */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* ---------------------------------------------------------------------------
   ПОЛЯ ВВОДУ — базова поведінка
   Оформлення в components.css.
   --------------------------------------------------------------------------- */
input,
select,
textarea {
  /* Мінімум 16px, інакше iOS Safari зумить сторінку при фокусі (UI-KIT.md) */
  font-size: var(--fs-input);
}

::placeholder {
  color: var(--color-muted);
  opacity: 1;   /* Firefox приглушує плейсхолдер додатково */
}

/* ---------------------------------------------------------------------------
   ЗОБРАЖЕННЯ
   width/height в розмітці обов'язкові — резервують місце проти CLS.
   --------------------------------------------------------------------------- */
img {
  /* Поки файл не завантажився, фон тримає місце менш помітно, ніж біла діра */
  background-color: var(--color-bg-soft);
}

/* ---------------------------------------------------------------------------
   ЗМЕНШЕНИЙ РУХ
   Системне налаштування має вимикати анімації повністю, а не послаблювати їх.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   ДРУК
   Сторінка інколи друкується родичами пацієнта — телефон і адреса
   мають лишитись читабельними.
   --------------------------------------------------------------------------- */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  /* Текст телефонних посилань — це вже сам номер, дублювати href не треба.
     А от зовнішні адреси на папері губляться. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    word-break: break-all;
  }
}