/* Защита от горизонтального скролла */
html, body {max-width: 100%; overflow-x: hidden;}
body {font-size: 14px; font-family: 'PT Sans',"Helvetica Neue",Helvetica,Arial,sans-serif; color:#333333;}

h2, .h2 {font-size: calc(1.05rem + 0.3vw);}
@media (min-width: 1200px) {
    h2, .h2 {font-size: 1.35rem;}
}

img {max-width: 100%; height: auto;}
a {color: #2a5188;}
a:hover {color: #2a5188; text-decoration:none !important;}
.link-hover-underline {text-decoration: none;}
.link-hover-underline:hover {text-decoration: underline !important;}
.container {max-width: 1125px;}
.avatar {border-radius: 100px;}

.hidden-link {background-color: transparent; border: none; cursor: pointer; display: inline; color: #2a5188; text-decoration: underline; font-size: 18px; font-weight: bold; padding: 0; margin:5px 0 10px 0;}
.hidden-link:hover {text-decoration:none !important;}
.partition {color:#adadad; display:inline-block; margin-right:5px;}
.page-link {color: #2a5188; padding-left: 0.6rem; padding-right: 0.6rem;}

/* --------------------------------------------
	ТОПИК
-------------------------------------------- */
.topic-text {text-align:justify;}
.topic .price {font-size: 16px;}

.topic-text h1,
.topic-text h2,
.topic-text h3,
.topic-text h4,
.topic-text h5,
.topic-text h6 {
    display: block;
    text-align: left;
    margin-bottom: 0.75rem;
}

/* Blockquote */
blockquote {padding: 10px 10px; margin: 5px 0; border-left: 5px solid #2a5188; background-color: #f8f9fa;}
blockquote p {margin-bottom: 0;}

/* Header */
.topic .topic-header { margin-bottom: 15px;}
.topic .topic-header .topic-title {margin-top: 0;}
.topic .topic-header .topic-title {font-size: 24px; line-height: 1.1em; font-weight: normal; margin: 0 0 10px;}
.topic .topic-header .topic-title a {text-decoration: underline; color: #2a5188;}
.topic .topic-header .topic-title a:hover {text-decoration: none; color: #f00000; }
.topic .topic-header .topic-info .blog_url {text-decoration: underline; color: #2a5188;}
.topic .topic-header .topic-info .blog_url:hover {text-decoration: none; color: #f00000 !important;}
.topic .topic-header .topic-info .category_url {text-decoration: none; display:inline-block; margin-left:5px; background-color:#ebebeb; padding-left:4px; padding-right:4px; color:#4e4d4d;}
.topic .topic-header .topic-info .category_url:hover {text-decoration: none; color:#f00;}

/* Content */
.topic .topic-content {margin-bottom: 12px;}
.topic .topic-content.text {text-align:justify;}
.topic .image_preview {margin-right:10px; margin-bottom: 5px; text-align:center;}

/* Advertising */
.ad-block {padding-bottom: 13px;}

/* Изображения в тексте статьи - адаптивные */
.topic-text img {max-width: 100%; height: auto; border-radius: 6px; display: block; clear: both;}

/* Image */
/* По умолчанию картинка на всю ширину */
.image_preview img {max-width: 100%; height: auto;}

/* Увеличиваем теги (blog + categories) */
a.badge.bg-primary,
a.badge.bg-secondary {font-size: 0.7rem !important;}

/* На мобильных уменьшаем вдвое */
@media (max-width: 576px) {
    .image_preview {
        max-width: 50%;
        float: none; /* убираем обтекание, чтобы не ломалось */
        margin: 0 auto 10px; /* центрируем */
    }

    .image_preview img {width: 100%; height: auto;}
}

/* Footer */
.topic .topic-footer {clear:both;}
.topic .topic-footer .topic-info {padding-top: 15px;}
.topic .topic-footer .topic-info li {color: #2a5188;}
.topic .topic-footer .topic-info li:last-child {padding-right: 0;}
.topic .topic-footer .topic-info li.topic-info-author a {text-decoration: none !important;}
.topic .topic-footer .topic-info li.topic-info-author a:hover {text-decoration: underline !important;}
.topic .topic-footer .topic-info li.topic-info-author a img {margin-right: 2px; width: 16px; height: 16px; vertical-align: top;}
.topic .topic-footer .topic-info li.topic-info-share a:hover {text-decoration: none;}
.topic .topic-footer .topic-info li.topic-info-comments a {color:#ff0000 !important;}
.topic .topic-footer .topic-info li.topic-info-comments a:hover {text-decoration: underline !important;}

/* Стили для страницы категорий */
.category-item {padding: 6px 8px; border-radius: 8px; transition: background-color 0.15s ease;}
.category-item:hover {background-color: rgba(13, 110, 253, 0.04);}
.category-link {
    color: #2a5188 !important;
    text-decoration: underline !important;
    font-size: 1.05rem;
    transition: color 0.15s ease;
}

.category-link:hover {
    color: #2a5188 !important;
    text-decoration: none !important;
}

.subcategories {
    font-size: 0.8rem;
    line-height: 1.7;
    color: #6c757d;
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
}

.subcategory-item {
    white-space: nowrap;
}

.subcategory-item::before {
    content: "• ";
    color: #adb5bd;
}

.subcategory-link {
    color: #6c757d !important;
    text-decoration: underline !important;
    transition: color 0.15s ease;
}

.subcategory-link:hover {
    color: #6c757d !important;
    text-decoration: none !important;
}

.subcategories .text-muted {
    color: #adb5bd !important;
    font-size: 0.75rem;
}

.card-body.p-4 {
    padding: 0.75rem !important;
}

@media (max-width: 768px) {
    .subcategory-item {
        white-space: normal;
    }
    .subcategories {
        font-size: 0.75rem;
        gap: 0 2px;
    }
    .category-item {
        padding: 4px 4px;
    }
    .card-body.p-4 {
        padding: 0.5rem !important;
    }
}

/* Увеличиваем шрифт в редакторе Quill */
.ql-editor {
    font-size: 16px !important;
    min-height: 120px;
}

/* Убираем лишние отступы между строками */
.ql-editor p {
    margin-bottom: 0 !important;
}

/* Увеличиваем размер панели инструментов */
.ql-toolbar .ql-picker-label {
    font-size: 14px !important;
}

/* Для мобильных устройств */
@media (max-width: 576px) {
    .ql-editor {
        font-size: 15px !important;
        line-height: 1.5 !important;
        padding: 8px 10px !important;
        min-height: 100px;
    }
}

/* Блок рекламы */
/* На компьютерах блок ведет себя естественно */
.mobile-ad-fix {
    width: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* На СМАРТФОНАХ и планшетах (любых мобильных экранах до 768px) высота ВСЕГДА будет 300px */
@media (max-width: 768px) {
    .mobile-ad-fix {
        min-height: 290px !important;
        height: 290px !important;
        justify-content: flex-start !important;
    }
}