/* Базові змінні для кольорів (навіяно сучасними темними темами) */
:root {
  --bg-color: #1a1a24;        /* Глибокий темний фон з легким синім відтінком */
  --text-color: #d1d1e0;      /* Світло-сірий для основного тексту (не сліпить) */
  --heading-color: #ffffff;   /* Чисто білий для заголовків */
  --link-color: #a78bfa;      /* М'який фіолетовий для посилань (пасує до Haskell) */
  --link-hover: #c084fc;      /* Світліший фіолетовий при наведенні */
  --border-color: #333344;    /* Колір розділювальних ліній */
}

/* Налаштування тіла сторінки */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  
  /* Центрування та обмеження ширини для зручного читання */
  max-width: 750px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Заголовки */
h1, h2, h3 {
  color: var(--heading-color);
  font-weight: 600;
  line-height: 1.2;
}

/* Головний заголовок сайту (Blog) */
h1 {
  font-size: 2.5rem;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0.75rem;
  margin-bottom: 2rem;
}

h2 {
  font-size: 1.75rem;
  margin-top: 2.5rem;
}

h3 {
  font-size: 1.35rem;
  margin-top: 2rem;
}

/* Посилання */
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Прибираємо підкреслення з головного заголовка */
h1 a {
  color: var(--heading-color);
}

h1 a:hover {
  color: var(--link-color);
  text-decoration: none;
}

/* Основний текст та списки */
p {
  margin-top: 0;
  margin-bottom: 1.2rem;
}

ul, ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
}

/* Оскільки ваш генератор вставляє <p> всередину <li>,
   нам треба прибрати нижній відступ, щоб списки виглядали компактно */
li p {
  margin-bottom: 0;
}

/* Блоки коду (багаторядкові) */
pre {
  background-color: #16161e; /* Темніший фон для контрасту */
  padding: 1.25rem;
  border-radius: 8px;
  overflow-x: auto; /* Горизонтальний скрол для довгих рядків */
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
}

/* --- Адаптація для мобільних пристроїв (екрани менше 600px) --- */
@media (max-width: 600px) {
  body {
    /* Зменшуємо відступи: 1rem зверху/знизу та 1rem з боків */
    padding: 1rem; 
  }

  /* Робимо заголовки компактнішими */
  h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
  }

  h3 {
    font-size: 1.2rem;
  }

  /* Трохи економимо місце в блоках з кодом */
  pre {
    padding: 1rem;
    border-radius: 6px; /* Трохи менше заокруглення на маленьких екранах */
  }
}