/* 0. Шрифты */
@font-face { 
    font-family: 'Calibri'; 
    /* Внимание: укажите прямой путь к файлу шрифта, например /fonts/calibri.ttf */
    src: url('https://www.otvet.help') format('truetype'); 
    font-display: swap; 
}

body { 
    font-family: 'Calibri', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    font-size: 18px; 
    line-height: 1.5; 
    color: #2c3e50; 
    margin: 0; 
    padding: 10px; 
    background-color: #ffffff;
}

/* 1. Хлебные крошки */
.breadcrumb-nav {
    width: 95%;
    max-width: 800px;
    margin: 15px auto 5px;
    background-color: #f6f1eb; 
    border: 1px solid #F6A104; 
    border-radius: 15px;       
    padding: 10px 15px;
    box-sizing: border-box;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    color: #845d13;
}

.breadcrumb-item a {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
}

.breadcrumb-item a:hover {
    color: #F6A104;
    text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›"; 
    margin: 0 8px;
    color: #F6A104;
    font-size: 18px;
    font-weight: bold;
}

.breadcrumb-item.active {
    color: #2c3e50;
}

/* 2. Контейнеры заданий и ответов */
.vopros_box, .answer_box { 
    border-radius: 15px; 
    padding: 15px; 
    width: 95%; 
    max-width: 800px; 
    margin: 20px auto; 
    border: 1px solid; 
    box-sizing: border-box;
    overflow: hidden;
}

.vopros_box { border-color: #F6A104; background-color: #f6f1eb; }
.answer_box { border-color: #3498db; background-color: #ebf5fb; }

.vopros_box p, .answer_box .answer-text { 
    font-size: 1.1em; 
    margin-top: 5px; 
    margin-bottom: 10px; 
    color: #000; 
}

/* 3. Заголовки (legend и плашки) */
legend, .vopros_zagolovok, .answer_zagolovok { 
    font-size: 0.9em; 
    font-weight: bold; 
    text-transform: uppercase; 
    border-radius: 10px; 
    padding: 4px 15px; 
    border: 1px solid #000; 
    margin-left: 5px; 
    display: table; 
}

.vopros_box legend, .vopros_zagolovok { background-color: #F6A104; color: #000; }
.answer_box legend, .answer_zagolovok { background-color: #3498db; color: #fff; }

/* 4. Футеры и Мета-данные */
.vopros-footer, .answer-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-top: 10px; 
    padding-top: 8px; 
    border-top: 1px solid; 
    gap: 10px; 
    flex-wrap: wrap;
}
.vopros-footer { border-color: #F6A104; }
.answer-footer { border-color: #3498db; }

.info-block { 
    font-size: 11px; 
    color: #888; 
    line-height: 1.3; 
    text-align: left; 
}

.vopros-meta { font-size: 0.8em; color: #845d13; }
.author-info { margin: 0; font-size: 0.65em; color: #7f8c8d; }

/* 5. Кнопки */
.btns-group { 
    display: flex; 
    gap: 8px; 
    align-items: center; 
    margin-left: auto; 
}

.like-btn, .nav-button, .comment-btn, .q-btn, .a-btn, .suggest-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 15px; 
    font-family: 'Calibri', sans-serif; 
    font-weight: bold; 
    cursor: pointer; 
    transition: background 0.3s, transform 0.1s; 
    text-decoration: none; 
    border: 1px solid rgba(0,0,0,0.1); 
    box-sizing: border-box;
}

.like-btn { background-color: #F6A104; font-size: 0.7em; padding: 10px 25px; color: white; border: none; }
.like-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.nav-button { 
    background-color: #007bff; 
    color: #fff !important; 
    padding: 10px 15px; 
    font-size: 14px;
    flex: 1; /* Кнопки будут растягиваться поровну */
    text-align: center;
}
.nav-button:hover { background-color: #0056b3; }

.q-btn { background-color: #F6A104 !important; color: #000 !important; padding: 10px 20px; }
.a-btn { background-color: #2ecc71 !important; color: #fff !important; padding: 10px 20px; }
.suggest-btn { background-color: #3498db !important; color: #fff !important; padding: 10px 20px; }

.comment-btn { background: #F6A104; width: 100%; font-size: 0.8em; padding: 10px; border: none; color: #000; margin-top: 10px; }

/* 6. Формы */
.comment-form { margin-top: 15px; width: 95%; max-width: 800px; margin-inline: auto; }
.comment-form input, .comment-form textarea { 
    width: 100%; border-radius: 10px; border: 1px solid #ccc; 
    padding: 10px; margin-bottom: 8px; font-size: 14px; box-sizing: border-box; 
}
.captcha-input { width: 80px !important; text-align: center; display: inline-block; }

/* 7. Разное и Медиа */
.responsive-img { max-width: 100%; height: auto; display: block; margin: 15px auto; border-radius: 8px; }

.nav-container { 
    width: 95%; 
    max-width: 800px; 
    margin: 25px auto; 
    display: flex; 
    gap: 10px; 
    justify-content: space-between; 
}

.page-end-divider { border: 0; height: 1px; background: #eee; margin: 40px 0; }
.emoji { font-size: 1.2em; margin-right: 5px; vertical-align: middle; }
span[id^="count-"] { font-size: 1.2em; font-weight: 800; color: inherit; }

/* Адаптивность для мобильных */
@media (max-width: 600px) {
    .breadcrumb-list { font-size: 12px; }
    .vopros-footer, .answer-footer { flex-direction: column; align-items: flex-start; }
    .btns-group { width: 100%; justify-content: space-between; margin-top: 10px; }
    .nav-container { flex-wrap: wrap; }
    .nav-button { font-size: 12px; padding: 8px 10px; }
}