body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #f4f4f4;
    overflow-x: hidden;                         /* Чтобы избежать горизонтальной прокрутки на мобильных устройствах. */
    display: flex;                              /* Флексбокс */
    flex-direction: column;                     /* Располагаем элементы по вертикали */
    min-height: 100vh;                          /* Минимальная высота — высота экрана. Добавлена в интересах футера, чтобы был в самом низу.  */
}

#container {
    background-color: #f4f4f4;
    max-width: 800px;
    margin: 0 auto;
    overflow-x: hidden;                         /* hidden - xтобы избежать горизонтальной прокрутки на мобильных устройствах. auto - есть прокрутка. */
    width: 100%;                                /* Раньше не было. Появилось в articles. */
}

header {
    padding: 1rem 2rem;                         /* 1 отступ сверху и снизу, 2 отступа слева и справа */
    color: #2c3e50;
    font-size: 2rem;
    font-weight: bold;
    display: flex;                              /* Флексбокс */
    justify-content: space-between;             /* Равномерное распределение элементов  */
    align-items: center;                        /* Центрирование по вертикали */
    background: #fff;                        
}

header a {
    color: #2c3e50;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    /* padding: 0.5rem 1rem; */
    border-radius: 6px;
    transition: all 0.3s ease;
}

header a:hover {
    /* background: #f4f4f4; */
    /* padding: 0.5rem 1rem; */
    color: #007BFF;
}

section {
    padding: 1rem 2rem;
}

section p{                                  /* было только для index.html */
    text-align: justify;
}        

h1 {
    text-align: center;
    margin-bottom: 2rem;                    /* Раньше не было. Появилось в articles. */
    /* margin-bottom: 0.5rem;               /* Раньше не было. Появилось в articles. В самих статьях */
}

button {
    padding: 1rem 2rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    display: block;
    margin: 1rem 0;
    transition: all 0.3s ease;
}

button:hover {
    transform: translateY(-2px); 
}

#list_div, #yield_div {
    color: navy;
    overflow-x: auto;                       /* Пррокрутка раздела на мобильных устройствах */ 
    -webkit-overflow-scrolling: touch;      /* Плавная прокрутка на iOS (не проверялось) */
}


table {
    border-spacing: 1rem 0px; /* Расстояние между ячейками */
    margin-bottom: 1rem;
    border-collapse: collapse;
    background: #fff;
    width: 100%;                                /* Растягиваем таблицу на всю ширину контейнера */
}

th {padding: 5px;}
/* tr:hover {background: #ccc; transition: all 0.2s ease;} */
td {padding: 0 1rem; white-space: nowrap;}

/* Чередование фонов — «зебра» */
tr:nth-child(even) {
    background-color: #f8f9fa;                  /* Очень светлый серо-голубой */
}

/* Нечётные ряды остаются белыми (как фон таблицы) */
tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Hover-эффект поверх зебры */
tr:hover {
    /* background: #e3f2fd;                        /* Приятный светло-голубой при наведении */
    background: #ddd;                        /* Приятный светло-голубой при наведении */
    transition: background 0.2s ease;
}


/* Стили для футера */
footer {
    padding: 1rem 2rem;
    background: #2c3e50;
    color: #f4f4f4;
    width: 100vw;
    display: flex;
    justify-content: space-between;             /* Разносим содержимое */ 
    align-items: center;                        /* Центрирование по вертикали */
    margin-top: auto;                           /* Опускает футер вниз */
    box-sizing: border-box;
}

footer a i {margin: 0 0.5rem;}

.donate-btn {
    background-color: #e74c3c;
    color: #f4f4f4;
    border: none;
    padding: 12px 24px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin: auto 20px;
}

.donate-btn:hover {
    background-color: #c0392b;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.mail {
    color: #f4f4f4;
    text-decoration: none;
    padding: 10px 20px;
    transition: all 0.3s ease;
    margin: auto 20px;
}

.mail:hover {
    /* color: #3498db; */
    color: #007BFF;
    /* text-decoration: underline; */
    transform: translateY(-2px);
}   

.hidden {display:none;}

/* Здесь пока не нужно */
.footer-content {
    display: flex;
    gap: 1rem;                                  /* Расстояние между иконками */
} 


/* Стили для статей */

.article-card {                                 /* Карточка статьи (фон, тень, скругление) */
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.article-card h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
}
.article-card h2 a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
}
.article-card h2 a:hover {
    color: #007BFF;
}
.article-date {                                 /* дата публикации */
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.article-preview {                              /* краткое описание */
    color: #555;
    margin: 0;
}

/* Стили для навигатора по статьям */

.article-meta {
    text-align: center;
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}
.article-content p {
    text-align: justify;
    margin-bottom: 1rem;
}
.article-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ddd;
}
.article-nav a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    background: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.article-nav a:hover {
    background: #007BFF;
    color: #fff;
    transform: translateY(-2px);
}
.article-nav .disabled {
    color: #aaa;
    background: #eee;
    cursor: default;
    pointer-events: none;
}


/* --- Стили для нового выпадающего меню --- [i]/

/* Контейнер меню */
.custom-dropdown {
    position: relative;
}

/* Кнопка-иконка (сброс стандартных стилей кнопки) */
.hamburger-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: #2c3e50;                             /* Берем цвет из header */
    font-size: 1.5rem;                          /* Размер иконки чуть меньше основного текста заголовка */
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

button.hamburger-icon:hover {
    color: #007BFF;
    transform: none;                         /* Отменяем глобальный эффект button:hover {transform: translateY(-2px)} */
}

/* Выпадающий список */
.dropdown-content {
    /* display: none;                             /* Скрыто по умолчанию */
    
    /* Вместо display: none используем эти свойства для анимации */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);               /* Начинаем чуть выше */
    transition: all 0.3s ease;

    position: absolute;
    top: 100%;
    right: 0;                                   /* Выравнивание по правому краю */
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.15);
    z-index: 1000;
    list-style: none;
    padding: 8px 0;
    margin: 10px 0 0 0;
    border-radius: 6px;

}

/* Класс для отображения */
.dropdown-content.show {
    /* display: block; */
    opacity: 1;
    visibility: visible;
    transform: translateY(20px);                /* Падаем вниз */    
}

/* Ссылки внутри меню (переопределяем наследование от header a) */
.dropdown-content li a {
    display: block;                             /* Делаем всю область ссылки кликабельной */
    color: #2c3e50;                             /* Цвет текста */
    text-decoration: none;
    font-size: 1rem;                            /* Сбрасываем с 2rem до нормального размера */
    font-weight: 600;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;                     /* Чтобы padding не раздувал ширину */
    transition: all 0.3s ease;
}

.dropdown-content li a:hover {
    background-color: #f5f5f5;
    color: #007BFF;
}


/* Для мобильных устройств */
@media (max-width: 768px) {
    header { padding: 1rem; /* flex-direction: column; gap: 0.5rem; */}
    section { padding: 1rem; }
    footer { padding: 1rem; /* flex-direction: column; gap: 0.5rem; */ }
    td {padding: 0 5px; font-size: 12px;}
    .article-nav { flex-direction: column; gap: 1rem; }
    .hamburger-icon {font-size: 1.2rem;}
    .dropdown-content {right: 0;}           /* На мобильных оставляем привязку к правому краю */    
}