/* Добавляем стиль для html (нужно для sticky footer) */
html {
    height: 100%;
}

body {
  font-family: Courier, sans-serif;
  /* Добавляем стили для sticky footer */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

/* !!! УБИРАЕМ или КОММЕНТИРУЕМ это ОБЩЕЕ правило. Стилизуем хедер и футер раздельно !!! */
/* header a, footer a {
  color: #fff;
  text-decoration: none;
  margin: 0 15px;
} */

/* !!! УБИРАЕМ или КОММЕНТИРУЕМ это ОБЩЕЕ правило !!! */
/* header a:hover, footer a:hover {
  text-decoration: underline;
} */

/* --- Стили ссылок ТОЛЬКО для ХЕДЕРА --- */
/* (Предполагаем, что стили из layout.css для хедера все еще действуют, */
/* если layout.css подключен. Если нет, нужно добавить их сюда.) */
/* Пример стилей для ссылок хедера, если layout.css не подключен: */
header nav ul li a {
    text-decoration: none;
    color: black;
    font-size: 18px;
    padding: 8px 12px;
    background-color: #fad69d; /* Оранжевый фон кнопки */
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: block;
}
header nav ul li a:hover {
    background-color: #fb9a00;
    text-decoration: none;
    color: #0700ff;
}
/* --- Конец стилей для ссылок хедера --- */


main {
  /* text-align: center; */ /* Закомментировано - это может быть причиной уехавшего влево текста */
                           /* Давайте добавим центрирование ниже для конкретных элементов */
  padding: 20px;
  flex-grow: 1; /* Оставляем для sticky footer */
}

/* !!! ДОБАВЛЯЕМ ЦЕНТРИРОВАНИЕ для H1 и P в main !!! */
main h1, main > p:first-of-type { /* Центрируем заголовок и первый параграф */
    text-align: center;
    max-width: 600px; /* Ограничим ширину, чтобы текст не был слишком растянут */
    margin-left: auto;
    margin-right: auto;
}

h1 {
  margin-top: 0;
  margin-bottom: 15px; /* Добавим отступ */
}

form#subscriptionForm { /* Уточняем селектор */
  margin: 30px auto; /* Центрируем форму */
  max-width: 550px;
  padding: 20px;
  /* border: 1px solid #eee; */ /* Раскомментируйте для видимой рамки */
  /* border-radius: 5px; */
  text-align: center; /* Центрирует блочные элементы с margin:auto и inline-block */
}

/* !!! ИСПРАВЛЯЕМ СТИЛИ ДЛЯ ВСЕХ ПОЛЕЙ ВВОДА !!! */
#subscriptionForm input[type="text"], /* Добавляем input[type="text"] */
#subscriptionForm input[type="email"],
#subscriptionForm select {
  padding: 10px;
  margin: 4px auto; /* Отступы сверху/снизу и авто по бокам для центрирования */
  width: 90%;      /* Задаем ширину в % */
  max-width: 350px; /* Ограничиваем максимальную ширину */
  border: 1px solid #ccc;
  border-radius: 5px;
  display: block;   /* ВАЖНО: делаем блочными для корректной работы margin: auto */
  box-sizing: border-box; /* Чтобы padding не влиял на общую ширину */
  text-align: left; /* Текст внутри поля - слева */
}

select {
  /* padding, margin, border, display уже заданы выше */
  min-width: auto; /* Убираем фиксированную ширину, пусть будет как у других полей */
  background-color: white; /* Добавим фон для единообразия */
}

button {
  padding: 10px 25px; /* Немного увеличим паддинг */
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: block;
  margin: 25px auto 0 auto; /* Увеличим верхний отступ и центрируем */
  font-weight: bold; /* Сделаем текст жирнее */
}

button:hover {
  background-color: #444;
}

img {
  display: block;
  margin: 20px auto;
}

#uc-section {
    text-align: center;
    padding: 20px 0;
}

.uc-image-container img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.success, .error { /* Объединим общие стили */
    font-weight: bold;
    font-size: 1.1em;
    padding: 12px;
    border: 1px solid; /* Толщину зададим ниже */
    margin: 20px auto;
    display: block;
    max-width: 550px;
    text-align: center;
    border-radius: 5px;
}

.success {
    color: #155724;
    border-color: #c3e6cb;
    background-color: #d4edda;
}

.error {
    color: #721c24;
    border-color: #f5c6cb;
    background-color: #f8d7da;
}


.about-content {
    text-align: left;
}

.about-content ul li {
    display: block;
    margin-bottom: 10px;
}

/* Стили для лейблов чекбоксов */
#subscriptionForm .checkbox-group { /* Если используете обертку .checkbox-group */
    display: inline-block; /* Чтобы центрировалась внутри формы */
    text-align: left;      /* Текст внутри - влево */
    margin-bottom: 25px;   /* Отступ снизу */
    padding: 15px;
    /* border: 1px dashed #eee; */ /* Раскомментируйте для рамки */
}
#subscriptionForm label { /* Общие стили для лейблов (если без обертки) */
    display: block;      /* Вертикально */
    margin-bottom: 10px;
    text-align: left;    /* Текст слева */
    max-width: 350px;    /* Ограничим ширину блока лейбла */
    margin-left: auto;   /* Центрируем сам блок лейбла */
    margin-right: auto;
}

/* ============ Стили для Footer (Sticky Footer) ============ */

footer {
    background-color: #000;
    color: #ccc;
    padding: 25px 0;
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
    flex-wrap: wrap;
    gap: 15px;
}

footer .copyright {
    margin: 0;
    font-size: 0.9em;
    color: #aaa;
    text-align: left;
}

footer .footer-nav {
    /* Стили не нужны, flex расставит */
}

footer .footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

footer .footer-nav li {
    display: inline-block;
    margin-left: 20px;
}
footer .footer-nav li:first-child {
    margin-left: 0;
}

footer .footer-nav a {
    color: #eee;
    text-decoration: none;
    font-size: 0.95em;
    margin: 0; /* Убираем внешний отступ */
    padding: 5px 0; /* Добавим небольшой вертикальный паддинг для кликабельности */
    background-color: transparent !important; /* ВАЖНО: перебиваем фон кнопки */
    border: none !important;             /* ВАЖНО: перебиваем границу кнопки */
    border-radius: 0 !important;         /* ВАЖНО: перебиваем скругление */
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

/* Стили для hover ссылок футера */
footer .footer-nav a:hover,
footer .footer-nav a:focus {
    color: #fff;
    text-decoration: underline; /* Добавляем подчеркивание */
    background-color: transparent !important; /* Убедимся, что фон не появляется */
}

/* Медиа-запрос для маленьких экранов */
@media (max-width: 600px) {
    footer .container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    footer .copyright {
        order: 2;
        text-align: center;
    }
    footer .footer-nav {
         order: 1;
         text-align: center;
    }
     footer .footer-nav li {
         margin: 0 10px;
     }

    /* Уменьшаем поля формы на мобильных */
     #subscriptionForm input[type="text"],
     #subscriptionForm input[type="email"],
     #subscriptionForm select {
        width: 95%;
     }
}

/* AUTHORS PAGE */
/* ================= Authors Page Styles ================= */

/* Сетка для авторов */
.authors-grid {
    display: grid;
    /* Создаем 2 колонки равной ширины */
    grid-template-columns: repeat(2, 1fr);
    gap: 40px; /* Пространство между карточками авторов */
    padding: 30px 0; /* Отступы сверху/снизу для всей сетки */
}

/* Карточка одного автора */
.author-card {
    display: flex; /* Фото и инфо рядом */
    align-items: flex-start; /* Выравнивание по верху */
    gap: 20px; /* Пространство между фото и текстом */
    /* background-color: #f9f9f9; */ /* Раскомментируйте для легкого фона карточки */
    /* padding: 15px; */ /* Раскомментируйте, если нужен паддинг внутри карточки */
    /* border-radius: 5px; */ /* Раскомментируйте для скругления */
}

/* Контейнер для фото автора */
.author-photo {
    width: 200px; /* Желаемая ширина фото */
    flex-shrink: 0; /* Запрещаем контейнеру сжиматься */
    /* Попытка сохранить пропорции близкие к 1:2 (ширина:высота) */
    /* aspect-ratio: 1 / 2;  */ /* Современный способ, не везде поддерживается */
    /* Если aspect-ratio не работает, можно задать height */
    /* height: 400px; */ /* или использовать padding-bottom хак для старых браузеров */
    overflow: hidden; /* Обрезаем изображение, если оно не влезает */
    border-radius: 3px; /* Небольшое скругление для фото */
}

/* Само изображение автора */
.author-photo img {
    display: block; /* Убирает лишние отступы */
    width: 100%;    /* Заполняет контейнер по ширине */
    height: 100%;   /* Заполняет контейнер по высоте */
    /* Масштабирует изображение, чтобы оно покрыло контейнер, обрезая лишнее */
    object-fit: cover;
    /* Если хотите, чтобы все изображение было видно (могут быть пустые поля), используйте: */
    /* object-fit: contain; */
}

/* Контейнер с информацией об авторе */
.author-info {
    flex: 1; /* Занимает оставшееся доступное пространство */
}

/* Имя автора */
.author-info .author-name {
    font-size: 1.6em; /* Крупный шрифт для имени */
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

/* Описание деятельности */
.author-info .author-description {
    font-size: 0.95em;
    line-height: 1.6; /* Межстрочный интервал */
    color: #555;
    margin-bottom: 15px;
}

/* Контакты автора */
.author-info .author-contacts {
    font-size: 0.9em;
    color: #444;
}

.author-info .author-contacts p {
    margin-bottom: 5px; /* Небольшой отступ между строками контактов */
}

.author-info .author-contacts a {
    color: #0056b3; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчеркивание по умолчанию */
}

.author-info .author-contacts a:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
}

/* Центрируем H1 ТОЛЬКО внутри блока с классом .authors-page-content */
.authors-page-content h1 {
    text-align: center; /* Центрируем текст заголовка */
    margin-bottom: 30px; /* Добавляем отступ снизу перед сеткой авторов */
    font-size: 2.5em; /* Пример увеличения */
    color: #222;     /* Пример цвета */
}

/* Стили для сетки авторов и карточек остаются как были */
.authors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 30px 0;
    /* text-align: left; */ /* Убеждаемся, что текст в сетке не центрируется, если вдруг родитель влиял */
}

.page-heading-container {
    text-align: center; /* Центрируем всё внутри этого контейнера */
    margin-bottom: 30px; /* Отступ снизу перед сеткой авторов */
    /* Можно добавить верхний отступ, если нужно */
    /* margin-top: 20px; */
}

/* Стили для самого H1 внутри этого контейнера */
.page-heading-container h1 {
    font-size: 2.5em;
    color: #222;
    /* Убираем стандартные отступы H1, т.к. они теперь на контейнере */
    margin-top: 0;
    margin-bottom: 0;
}


/* ================= Адаптивность для страницы авторов ================= */

@media (max-width: 768px) { /* Для планшетов и меньших экранов */
    .authors-grid {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 30px; /* Уменьшаем отступ */
    }

    .author-card {
        /* Можно оставить flex-row или сделать вертикально: */
        /* flex-direction: column; */
        /* align-items: center; */ /* Если ставим вертикально */
        /* text-align: center; */ /* Если ставим вертикально */
    }

     .author-photo {
        /* Уменьшаем фото на маленьких экранах */
        width: 150px;
        /* height: 300px; */ /* Если задавали высоту */
    }
}

@media (max-width: 480px) { /* Для совсем маленьких экранов */
     .author-card {
        /* Точно ставим вертикально */
         flex-direction: column;
         align-items: center;
         text-align: center;
    }
     .author-photo {
        width: 120px;
        /* height: 240px; */ /* Если задавали высоту */
         margin-bottom: 15px; /* Отступ снизу от фото */
    }
     .author-info {
         /* Может не требоваться изменений, если текст центрирован */
     }
     .author-info .author-name {
         font-size: 1.4em;
     }
}