/* ========================================= */
/* БАЗОВЫЕ/ГЛОБАЛЬНЫЕ СТИЛИ */
/* ========================================= */
h1, h2, h3, h4, h5, h6, p, body, a, img, ul, ol, blockquote, pre {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  font-family: 'Lora', serif;
  font-size: 20px;
  line-height: 1.6;
  background-color: #fcfcfc;
  color: #333333;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: #4A90E2;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: #2F6DBA;
  text-decoration: underline;
}

.content-wrap {
  max-width: 720px;
  width: 90%;
  margin: 0 auto;
  padding: 2em 0;
}

p {
  margin-bottom: 1em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', serif;
  color: #1a1a1a;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  line-height: 1.2;
}

h1 {
  font-size: 2.8em;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 1em;
}

h2 {
  font-size: 2em;
  font-weight: 700;
}

h3 {
  font-size: 1.6em;
  font-weight: 700;
  font-style: normal;
  text-align: left;
}

h4 {
  font-size: 1.4em;
  font-weight: 700;
}

h5 {
  font-size: 1.2em;
  font-weight: 700;
}

h6 {
  font-size: 1em;
  font-weight: 700;
}

ol, ul {
  margin: 0 0 1em 2em;
  padding-left: 0;
}

li {
  margin-bottom: 0.5em;
}

blockquote {
  margin: 2em 0;
  padding: 1.5em 2em;
  border-left: 4px solid #4A90E2;
  background-color: #f0f8ff;
  font-style: italic;
  color: #555555;
  line-height: 1.5;
}

hr {
  border: none;
  border-top: 1px dashed #cccccc;
  height: 0;
  margin: 3em 0;
}

pre {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9em;
  overflow: auto;
  background: #282c34;
  color: #abb2bf;
  border: none;
  border-radius: 0.5em;
  margin-bottom: 1.5em;
  padding: 1.2em 1.5em;
}

code {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.88em;
  color: #E83E8C;
}

p code {
  padding: 0.2em 0.4em;
  border-radius: 0.3em;
  background: #fdf2f6;
  white-space: nowrap;
}

/* ========================================= */
/* Стили для статей и заголовков блога */
/* ========================================= */
.article header h2 {
  font-style: normal;
  text-align: left;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-size: 1.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

.article header h2 a {
  text-decoration: none;
  color: #1a1a1a;
}

.article header h2 a:hover {
  color: #4A90E2;
}

.more, .date, .header .author {
  font-family: 'Merriweather', serif;
  font-variant: small-caps;
  text-transform: lowercase;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-rendering: auto;
  color: #888888;
}

.article header .date {
  text-align: left;
  font-size: 0.85em;
  margin-top: -0.5em;
  margin-bottom: 1em;
}

.article header .date span {
  background-color: #fcfcfc;
  padding: 0 0.5em;
}

.article .content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em auto;
  border-radius: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.header {
  margin: 4em 0 2.5em; /* ИЗМЕНЕНИЕ: Уменьшен нижний отступ с 5em до 2.5em */
}

.header h1 {
  font-size: 3em; /* Уменьшен размер шрифта для заголовка блога (было 3.5em) */
  font-weight: 700;
  margin-bottom: 0.2em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header a, .header a:hover {
  text-decoration: none;
  color: #1a1a1a;
}

.header .description {
  font-size: 1.3em;
  font-style: italic;
  text-align: center;
  margin-top: 0;
  color: #666666;
}

/* ========================================= */
/* Стили для футера */
/* ========================================= */
footer {
  margin: 5em 0 3em;
  border-top: 1px dashed #e0e0e0;
  padding-top: 3em;
}

footer .nav {
  margin-top: 3em;
  margin-bottom: 2.5em;
}

footer .nav a {
  padding: 0 0.8em;
  font-size: 1.1em;
  text-decoration: none;
  color: #666666;
}

footer .nav a:hover {
  color: #4A90E2;
  text-decoration: none;
}

footer .about {
  border-top: none;
  padding: 0 0em;
  font-size: 0.8em;
  color: #888888;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 2.5em;
  -moz-column-gap: 2.5em;
  column-gap: 2.5em;
}

footer .copy {
  text-align: center;
  font-size: 0.75em;
  font-style: normal;
  margin-top: 2em;
  color: #8e8e8e;
}

footer .copy a {
  color: #8e8e8e;
  text-decoration: underline;
}

footer .copy a:hover {
  color: #4A90E2;
}

/* ========================================= */
/* Стили для страницы детального поста (article-detail) */
/* ========================================= */
body.article-detail > header {
  margin-bottom: 2em;
}

body.article-detail > header h1 {
  font-size: 3.2em;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 0.2em;
  text-align: center;
}

/* Изменения для ссылки "More" */
.article.intro .content .more {
  text-decoration: none;
  font-weight: 400;
  padding-left: 0.2em;
  color: #4A90E2;
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}

.article.intro .content .more::before {
  content: "»";
  font-size: 1.2em;
  line-height: 1;
  vertical-align: middle;
  margin-right: 0.1em;
}

.article.intro .content .more:hover {
  text-decoration: none;
  color: #2F6DBA;
  transform: translateX(3px);
}

/* ========================================= */
/* Стили для архива */
/* ========================================= */
.archive {
  width: 90%;
  max-width: 600px;
  margin: 4em auto 5em;
  padding-left: 0;
}

.archive h2 {
  font-size: 2.2em;
  margin-bottom: 1em;
  text-align: center;
  font-style: normal;
  margin-left: 0;
}

.archive ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #eee;
}

.archive li {
  border-bottom: 1px solid #eee;
  padding: 0.8em 0;
  margin-bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.archive li:last-child {
  border-bottom: none;
}

.archive a, .archive span {
  display: block;
  float: none;
  margin-bottom: 0;
  text-decoration: none;
}

.archive a {
  flex-grow: 1;
  text-indent: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1em;
  font-size: 1.05em;
}

.archive .year-label,
.archive .month-label {
  width: auto;
  min-width: 4em;
  font-family: 'Merriweather', serif;
  font-variant: small-caps;
  text-transform: lowercase;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-align: right;
  color: #888888;
  flex-shrink: 0;
}

.archive .month-label {
  min-width: 6em;
}

/* ========================================= */
/* Стили для навигационного меню (по умолчанию - ДЕСКТОП) */
/* ========================================= */
.main-nav {
  display: flex;
  justify-content: center; /* Центрируем пункты меню на больших экранах */
  margin-top: 2em; /* Отступ от заголовка блога */
  margin-bottom: 2em;
  width: 100%;
  position: relative; /* Важно для позиционирования .menu-toggle внутри */
}

.main-nav .menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Делаем пункты меню в строку на больших экранах */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* Позволяет пунктам переноситься на новую строку, если не хватает места */
}

.main-nav .menu-item {
  margin: 0 1.5em; /* Расстояние между пунктами меню */
}

.main-nav .menu-item a {
  font-family: 'Merriweather', serif; /* Используем тот же шрифт, что и для заголовков */
  font-size: 1.1em;
  font-weight: 700;
  text-transform: uppercase; /* Заглавные буквы */
  color: #555;
  padding: 0.5em 0;
  transition: color 0.3s ease;
  white-space: nowrap; /* Не переносим текст пункта меню */
}

.main-nav .menu-item a:hover {
  color: #4A90E2;
  text-decoration: none;
}

/* Стили для гамбургер-иконки: по умолчанию СКРЫТА на десктопе */
.menu-toggle {
  display: none; /* Скрываем на больших экранах */
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  /* top/right здесь не нужны, т.к. display: none */
  z-index: 1000; /* Чтобы была поверх контента */
}

.menu-toggle .icon-bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  transition: all 0.3s ease;
}

/* Анимация гамбургер-иконки при открытии меню */
.menu-toggle.active .icon-bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active .icon-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active .icon-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ========================================= */
/* АДАПТИВНЫЕ МЕДИА-ЗАПРОСЫ (от большего к меньшему) */
/* ========================================= */

@media (min-width: 1600px) {
  body { font-size: 22px; }
  .content-wrap { max-width: 800px; }
}

@media (max-width: 900px) {
  body { font-size: 18px; }
  .content-wrap {
    width: 90%;
    padding: 1.5em 0;
  }
}

@media (max-width: 768px) {
  /* Стили для мобильных устройств (менее 768px) */
  .main-nav {
    flex-direction: column; /* Элементы в колонку на мобильных */
    align-items: flex-end; /* Выравниваем навигацию по правому краю */
    position: relative; /* Для позиционирования кнопки-гамбургера */
    margin-top: 1em; /* Уменьшаем отступ сверху на мобильных */
    margin-bottom: 0;
  }

  .menu-toggle {
    display: block; /* Показываем гамбургер-иконку на мобильных */
    position: absolute; /* Позиционируем относительно .main-nav */
    top: 0.5em; /* Отступ сверху */
    right: 0.5em; /* Отступ справа */
    z-index: 1000; /* Чтобы была поверх контента */
  }

  .main-nav .menu-items {
    flex-direction: column; /* Пункты меню в столбец */
    width: 100%;
    max-height: 0; /* Изначально скрываем меню */
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    background-color: #fcfcfc; /* Фон для выпадающего меню */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: absolute;
    top: 50px; /* Отступ от кнопки/верхнего края */
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    padding: 0;
  }

  .main-nav .menu-items.active {
    max-height: 300px; /* Показываем меню (достаточно большой размер) */
    opacity: 1;
    padding: 1em 0; /* Внутренние отступы при открытии */
  }

  .main-nav .menu-item {
    margin: 0; /* Убираем горизонтальные отступы */
    width: 100%;
    text-align: center; /* Центрируем пункты меню */
  }

  .main-nav .menu-item a {
    display: block; /* Делаем ссылку блочной для удобства нажатия */
    padding: 0.8em 1em;
    border-bottom: 1px solid #eee; /* Разделитель между пунктами */
  }

  .main-nav .menu-item:last-child a {
    border-bottom: none; /* Убираем нижний разделитель у последнего пункта */
  }

  /* Общие стили для меньших экранов (690px и менее) */
  body { font-size: 16px; }
  .content-wrap {
    width: 95%;
    padding: 1em 0;
  }
  .header {
    margin: 2em 0 3em; /* АДАПТИВНОСТЬ: Заголовок на меньших экранах */
  }
  .header h1 {
    font-size: 2.2em;
    margin-bottom: 0.5em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .header .description {
    font-size: 1.1em;
  }
  .article {
    margin: 1.5em 0 2em;
  }
  .article header h2 {
    font-size: 1.6em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  body.article-detail > header h1 {
    font-size: 2.4em;
  }
  .archive {
    width: 90%;
    margin: 2em auto;
  }
  .archive li {
    flex-direction: column;
    align-items: flex-start;
  }
  .archive a {
    padding-right: 0;
    margin-bottom: 0.3em;
    white-space: normal;
    text-overflow: clip;
  }
  .archive .year-label,
  .archive .month-label {
    text-align: left;
    min-width: unset;
    width: auto;
  }
  footer {
    margin: 3em 0 1.5em;
    padding-top: 1.5em;
  }
  footer .nav {
    margin: 1.5em 0;
  }
  footer .nav a {
    padding: 0 0.4em;
    font-size: 1em;
  }
  footer .about {
    font-size: 0.85em;
    padding-top: 1.5em;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  footer .about p {
    margin-bottom: 0.8em;
  }
}


/* ========================================= */
/* Стили для страницы контактов (ТВОИ СТИЛИ + ИЗМЕНЕНИЯ) */
/* ========================================= */
body.page-contact .page-content {
  padding: 2em 0;
}

/* Изменения для заголовков на странице контактов: делаем их меньше */
body.page-contact .page-content h2 { /* ИЗМЕНЕНО: теперь h2 внутри .page-content */
  text-align: center;
  font-size: 2.2em; /* Чуть крупнее, чем h3, но меньше чем h1 */
  margin-bottom: 1em; /* Добавляем отступ после заголовка страницы */
  margin-top: 0; /* Убираем верхний отступ, так как это первый элемент в .page-content */
}

body.page-contact .main-content h3 {
  text-align: center;
  font-size: 1.8em; /* Было 2em, сделаем чуть меньше */
  margin-bottom: 0.8em; /* Немного уменьшим отступ */
  margin-top: 1.5em; /* Добавим отступ сверху для каждой секции */
}

body.page-contact .main-content p {
  text-align: center;
  margin-bottom: 1.5em;
}

.contact-item {
  display: flex;
  align-items: center;
  /* Изначально оставляем center, так как это общий класс,
     переопределим его для social-links ниже */
  justify-content: center;
  margin-bottom: 1em;
  font-size: 1.1em;
}

.contact-item a {
  color: #4A90E2;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.contact-item a:hover {
  color: #2F6DBA;
  text-decoration: underline;
}

.contact-item .icon {
  font-size: 1.3em;
  color: #666;
  margin-right: 0.5em;
  width: 1.2em; /* Зафиксируем ширину иконки */
  text-align: center;
  flex-shrink: 0; /* Не даем иконке сжиматься */
}

/* Стили для списка социальных ссылок */
.social-links {
  list-style: none;
  padding: 0;
  margin: 1.5em 0 2em;
  /* Добавлено для центрирования всего блока социальных ссылок */
  display: flex;
  flex-direction: column;
  align-items: center; /* Центрируем весь список по горизонтали */
}

.social-links .contact-item {
  /* Переопределяем justify-content для элементов внутри social-links,
     чтобы они были выровнены по левому краю внутри своего space */
  justify-content: flex-start;
  width: auto; /* Ширина по содержимому */
  max-width: 100%; /* Но не шире родителя */
  margin-bottom: 0.8em;
  /* Добавим минимальную ширину для каждого social-link item,
     чтобы он не был слишком узким и не рвал текст.
     Это поможет при выравнивании по левому краю. */
  min-width: 250px; /* Примерное значение, можно подогнать */
}

/* Стили для hr на странице контактов */
body.page-contact hr { /* ДОБАВЛЕНО */
  margin: 2.5em auto;
  width: 60%;
}


/* Медиа-запросы для адаптивности страницы контактов */
@media (max-width: 768px) {
  body.page-contact .page-content h2 { /* ИЗМЕНЕНО */
    font-size: 1.8em; /* Уменьшим еще для мобильных */
  }
  body.page-contact .main-content h3 {
    font-size: 1.6em; /* Уменьшим еще для мобильных */
  }
  body.page-contact .main-content p {
    font-size: 0.95em;
  }
  .contact-item {
    flex-direction: column;
    text-align: center;
    margin-bottom: 1.5em;
    /* На мобильных мы снова центрируем, так как элементы идут в колонку */
    justify-content: center;
  }
  .contact-item .icon {
    margin-right: 0;
    margin-bottom: 0.3em;
    font-size: 1.5em;
  }

  /* Для social-links на мобильных возвращаем центрирование содержимого,
     так как они идут в столбец */
  .social-links .contact-item {
    justify-content: center;
    min-width: unset; /* Сбросим min-width для мобильных */
  }
  body.page-contact hr { /* ДОБАВЛЕНО */
    margin: 2em auto;
    width: 80%;
  }
}


/* ========================================= */
/* Стили для страницы "Обо мне" - ИЗМЕНЕНЫ ТУТ */
/* ========================================= */

body.page-about .page-content {
  padding: 2em 0;
}

body.page-about .main-content h2 {
  text-align: center; /* Центрируем заголовки */
  font-size: 2em;
  margin-bottom: 1em;
  margin-top: 2em; /* Отступ сверху для секций */
}

/* !!! ВАЖНО: Добавляем стиль для h3 на странице "Обо мне", если ты хочешь,
   чтобы они отличались от глобальных h3, иначе будут применяться глобальные */
body.page-about .main-content h3 {
  text-align: center; /* Центрируем h3 на странице "Обо мне" */
  font-size: 1.8em; /* Немного меньше, чем h2, но больше глобального h3 */
  margin-top: 1.5em;
  margin-bottom: 0.8em;
}

body.page-about .main-content p {
  text-align: justify; /* Выравниваем текст по ширине */
  margin-bottom: 1em;
}

.about-me-intro {
  display: flex;
  flex-direction: column; /* По умолчанию в колонку для мобильных */
  align-items: center; /* Центрируем элементы */
  margin-bottom: 2em;
  text-align: center;
  /* Добавлены эти стили, чтобы блок "Обо мне" выглядел как аккуратная карточка */
  background-color: #ffffff;
  padding: 2em;
  border-radius: 0.8em;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  /* Добавим минимальную ширину для интро-блока, чтобы текст имел достаточно места */
  min-width: 300px; /* Можно настроить это значение */
}

.about-photo {
  width: 200px; /* Фиксированная ширина фото */
  height: 280px; /* Сделаем выше, чем шире (например, 200x280px) для вертикального прямоугольника */
  border-radius: 0.8em; /* Закругления, как у карточки */
  object-fit: cover; /* Обрезает изображение, чтобы оно поместилось, не искажая пропорции */
  margin-bottom: 1.5em; /* Отступ от текста */
  border: 4px solid #4A90E2; /* Красивая рамка */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Небольшая тень */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.about-photo:hover {
  transform: scale(1.05); /* Немного увеличиваем при наведении */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Усиливаем тень */
}


/* Медиа-запрос для десктопов: фото и текст рядом */
@media (min-width: 769px) {
  .about-me-intro {
    flex-direction: row; /* На десктопах - в строку */
    align-items: flex-start; /* Выравниваем по верху */
    text-align: left;
    /* Убедимся, что контейнер с текстом занимает оставшееся пространство */
    justify-content: space-between; /* Распределяем пространство между элементами */
  }

  .about-photo {
    margin-right: 2em; /* Отступ справа от фото */
    margin-bottom: 0; /* Убираем нижний отступ */
    flex-shrink: 0; /* Чтобы фото не сжималось */
  }

  /* !!! ВАЖНО: Добавим div для текста, чтобы он вел себя как единый блок */
  .about-me-intro div.text-content {
      flex-grow: 1; /* Позволяет блоку с текстом занимать все доступное пространство */
      padding-left: 0.5em; /* Небольшой отступ слева, чтобы текст не прилипал к фото */
  }

  .about-me-intro p {
    margin-bottom: 0.8em; /* Уменьшаем отступ между абзацами в интро */
    text-align: left; /* Выравнивание текста по левому краю */
  }
}

/* Стили для списков интересов */
body.page-about .main-content ul {
  list-style: disc; /* Обычные маркеры */
  margin-left: 2em; /* Отступ для списка */
  text-align: left; /* Выравнивание текста в списке */
}

body.page-about .main-content ul li {
  margin-bottom: 0.5em;
}

/* Корректировка hr на странице about (по желанию, чтобы были такие же, как везде) */
body.page-about hr {
  margin: 3em auto;
  width: 80%; /* Можно сделать его чуть короче */
}