/*
 * Blog: detail artikel, sidebar, dan avatar penulis.
 *
 * Seluruh selektor di-scope ke pembungkus blog yang sudah ada
 * (.rts-blog-details, .rts-sidebar, .rts-blog, .rts-blog-area, .rts-blog-list)
 * atau ke kelas .nhx-avatar yang hanya dipakai partial avatar. Tidak ada
 * selektor elemen telanjang, jadi halaman lain tidak tersentuh.
 *
 * Warna memakai token tema (--color-primary dst). Fallback #fd5d07 adalah warna
 * merek bawaan template; bila branding di admin diubah, blog ikut berubah.
 */

.rts-blog-details {
    --nhx-blog-ink: var(--color-secondary, #0b1f44);
    --nhx-blog-body: #4b5563;
    --nhx-blog-muted: #6b7280;
    --nhx-blog-line: #e5e7eb;
    --nhx-blog-accent: var(--color-primary, #fd5d07);
    --nhx-blog-surface: #ffffff;
}

/* ---------------------------------------------------- Avatar penulis */

.nhx-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: #eef1f8;
    vertical-align: middle;
}

.nhx-avatar--sm { width: 32px; height: 32px; }
.nhx-avatar--lg { width: 64px; height: 64px; }

.nhx-avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--color-primary, #fd5d07);
}

.nhx-avatar--sm.nhx-avatar--initials { font-size: 12px; }
.nhx-avatar--lg.nhx-avatar--initials { font-size: 22px; }

/* ---------------------------------------------------- Kolom dan jarak */

/* Artikel dominan, sidebar lebih kecil tetapi tidak sempit. */
@media (min-width: 992px) {
    .rts-blog-details .row > .col-lg-8 { flex: 0 0 auto; width: 68%; }
    .rts-blog-details .row > .col-lg-4 { flex: 0 0 auto; width: 32%; }
}

/* ---------------------------------------------------- Gambar utama */

.rts-blog-details .blog-details__featured-image {
    margin-bottom: 8px;
    border-radius: 10px;
    overflow: hidden;
}

.rts-blog-details .blog-details__featured-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ---------------------------------------------------- Meta artikel */

.rts-blog-details .blog-details__article-meta {
    align-items: center;
    gap: 12px 22px;
    color: var(--nhx-blog-muted);
    font-size: 15px;
}

.rts-blog-details .blog-details__article-meta a,
.rts-blog-details .blog-details__article-meta time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--nhx-blog-body);
}

.rts-blog-details .blog-details__article-meta a:hover {
    color: var(--nhx-blog-accent);
}

/* Ikon meta memakai margin bawaan template; avatar tidak butuh itu. */
.rts-blog-details .blog-details__author-link .nhx-avatar { margin-right: 0; }

/* ---------------------------------------------------- Badan artikel */

.rts-blog-details .blog-details .blog-title {
    color: var(--nhx-blog-ink);
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.22;
    margin: 6px 0 22px;
}

.rts-blog-details .blog-details p {
    color: var(--nhx-blog-body);
    font-size: 17px;
    line-height: 1.8;
    margin: 0 0 20px;
}

.rts-blog-details .blog-details h2,
.rts-blog-details .blog-details h3,
.rts-blog-details .blog-details h4 {
    color: var(--nhx-blog-ink);
    line-height: 1.3;
    /* Jarak atas lebih besar daripada bawah agar judul menempel ke isinya. */
    margin: 40px 0 14px;
}

.rts-blog-details .blog-details h2 { font-size: clamp(22px, 2.4vw, 28px); }
.rts-blog-details .blog-details h3 { font-size: clamp(19px, 2vw, 23px); }
.rts-blog-details .blog-details h4 { font-size: 18px; }

.rts-blog-details .blog-details ul,
.rts-blog-details .blog-details ol {
    color: var(--nhx-blog-body);
    font-size: 17px;
    line-height: 1.8;
    margin: 0 0 20px;
    padding-left: 22px;
}

.rts-blog-details .blog-details li { margin-bottom: 8px; }

.rts-blog-details .blog-details a {
    color: var(--nhx-blog-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rts-blog-details .blog-details img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.rts-blog-details .blog-details blockquote,
.rts-blog-details .blog-details .rts-blockquote {
    margin: 28px 0;
    padding: 4px 0 4px 22px;
    background: transparent;
    border-left: 3px solid var(--nhx-blog-accent);
}

.rts-blog-details .blog-details blockquote p {
    color: var(--nhx-blog-ink);
    font-size: 18px;
    font-style: italic;
    margin-bottom: 10px;
}

.rts-blog-details .blog-details blockquote span {
    color: var(--nhx-blog-muted);
    font-size: 14px;
}

.rts-blog-details .blog-details pre {
    overflow-x: auto;
    padding: 16px 18px;
    border-radius: 8px;
    border: 1px solid var(--nhx-blog-line);
    background: #f8fafc;
    font-size: 14px;
    line-height: 1.6;
}

.rts-blog-details .blog-details :not(pre) > code {
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: var(--nhx-blog-ink);
    font-size: .92em;
}

.rts-blog-details .blog-details table {
    width: 100%;
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
}

/* ---------------------------------------------------- Tag dan share */

.rts-blog-details .blog-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 34px;
    padding: 20px 0;
    border-top: 1px solid var(--nhx-blog-line);
    border-bottom: 1px solid var(--nhx-blog-line);
}

.rts-blog-details .blog-tags,
.rts-blog-details .blog-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.rts-blog-details .blog-tags .tags-title,
.rts-blog-details .blog-share .share {
    color: var(--nhx-blog-ink);
    font-weight: 600;
    text-transform: capitalize;
}

.rts-blog-details .blog-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rts-blog-details .blog-tags__list a {
    padding: 8px 16px;
    border: 1px solid var(--nhx-blog-line);
    border-radius: 4px;
    background: var(--nhx-blog-surface);
    color: var(--nhx-blog-body);
    font-size: 14px;
    line-height: 1.2;
    transition: all .25s ease;
}

.rts-blog-details .blog-tags__list a:hover {
    background: var(--nhx-blog-accent);
    border-color: var(--nhx-blog-accent);
    color: #fff;
    text-decoration: none;
}

.rts-blog-details .blog-share .social__media--list { gap: 10px; }

.rts-blog-details .blog-share .media {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    border: 1px solid var(--nhx-blog-line);
    color: var(--nhx-blog-body);
    background: var(--nhx-blog-surface);
}

.rts-blog-details .blog-share .media:hover {
    background: var(--nhx-blog-accent);
    border-color: var(--nhx-blog-accent);
    color: #fff;
}

/* ---------------------------------------------------- Kotak penulis */

.rts-blog-details .blog-author {
    margin-top: 32px;
    padding: 24px;
    border: 1px solid var(--nhx-blog-line);
    border-radius: 10px;
    background: var(--nhx-blog-surface);
}

.rts-blog-details .blog-author__info {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}

.rts-blog-details .blog-author .author-image { flex: 0 0 auto; }

.rts-blog-details .blog-author .author-content {
    flex: 1 1 240px;
    min-width: 0;
}

.rts-blog-details .blog-author .author-content > a {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--nhx-blog-ink);
    font-size: 18px;
    font-weight: 600;
}

.rts-blog-details .blog-author .author-content > a:hover { color: var(--nhx-blog-accent); }

.rts-blog-details .blog-author .author-content p {
    margin: 0 0 12px;
    color: var(--nhx-blog-body);
    font-size: 15px;
    line-height: 1.7;
}

.rts-blog-details .blog-author .social__media--list .media {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    border: 1px solid var(--nhx-blog-line);
    color: var(--nhx-blog-body);
}

.rts-blog-details .blog-author .social__media--list .media:hover {
    background: var(--nhx-blog-accent);
    border-color: var(--nhx-blog-accent);
    color: #fff;
}

/* ---------------------------------------------------- Artikel lainnya */

.rts-blog-details .rts-blog-list > .widget-title {
    margin-bottom: 18px;
    color: var(--nhx-blog-ink);
    font-weight: 700;
}

.rts-blog-details .rts-blog-list .single-post {
    padding: 20px 22px;
    margin-bottom: 16px;
    border: 1px solid var(--nhx-blog-line);
    border-radius: 10px;
    background: var(--nhx-blog-surface);
}

.rts-blog-details .rts-blog-list .single-post .title {
    display: inline-block;
    margin: 6px 0 8px;
    color: var(--nhx-blog-ink);
    font-size: 19px;
    line-height: 1.35;
}

.rts-blog-details .rts-blog-list .single-post .title:hover { color: var(--nhx-blog-accent); }

.rts-blog-details .rts-blog-list .single-post .excerpt {
    margin-bottom: 14px;
    color: var(--nhx-blog-body);
    font-size: 15px;
    line-height: 1.7;
}

.rts-blog-details .rts-blog-list .single-post .cat a { color: var(--nhx-blog-muted); }
.rts-blog-details .rts-blog-list .single-post .cat a:hover { color: var(--nhx-blog-accent); }

/* ---------------------------------------------------- Sidebar */

/*
 * Template memberi kartu sidebar latar #FFF5EF (peach). Diganti kartu putih
 * bergaris tipis; warna merek tetap dipakai sebagai aksen hover dan ikon.
 */
.rts-sidebar .rts-single-widget {
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(11, 31, 68, .04);
}

.rts-sidebar .rts-single-widget .widget-title {
    margin-bottom: 18px;
    color: var(--color-secondary, #0b1f44);
    font-size: 18px;
    font-weight: 700;
}

/* Pencarian */
.rts-sidebar .rts-single-widget.search-widget form input {
    width: 100%;
    padding: 12px 46px 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #0b1f44;
    font-size: 15px;
    line-height: 1.4;
}

.rts-sidebar .rts-single-widget.search-widget form input::placeholder {
    color: #6b7280;
    opacity: 1;
}

.rts-sidebar .rts-single-widget.search-widget form input:focus {
    border-color: var(--color-primary, #fd5d07);
    outline: 2px solid color-mix(in srgb, var(--color-primary, #fd5d07) 35%, transparent);
    outline-offset: 1px;
}

.rts-sidebar .rts-single-widget.search-widget form button {
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: transparent;
    color: var(--color-primary, #fd5d07);
}

.rts-sidebar .rts-single-widget.search-widget form button:hover {
    background: var(--color-primary, #fd5d07);
    color: #fff;
}

/* Kategori */
.rts-sidebar .rts-single-widget.category-widget .single-cat {
    padding: 13px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #0b1f44;
}

.rts-sidebar .rts-single-widget.category-widget .single-cat a,
.rts-sidebar .rts-single-widget.category-widget .single-cat a span {
    color: #0b1f44;
}

.rts-sidebar .rts-single-widget.category-widget .single-cat:hover {
    border-color: var(--color-primary, #fd5d07);
    background: var(--color-primary, #fd5d07);
    color: #fff;
}

/* Seluruh anak ikut putih agar tidak ada teks oranye di atas oranye. */
.rts-sidebar .rts-single-widget.category-widget .single-cat:hover,
.rts-sidebar .rts-single-widget.category-widget .single-cat:hover a,
.rts-sidebar .rts-single-widget.category-widget .single-cat:hover a span,
.rts-sidebar .rts-single-widget.category-widget .single-cat:hover .button-tab,
.rts-sidebar .rts-single-widget.category-widget .single-cat:hover::before {
    color: #fff;
}

/* Artikel terbaru */
.rts-sidebar .rts-single-widget.recentpost-widget .recent-posts { gap: 18px; }

.rts-sidebar .rts-single-widget.recentpost-widget .recent-posts .single-post {
    gap: 14px;
    align-items: center;
}

.rts-sidebar .rts-single-widget.recentpost-widget .recent-posts .thumb img {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    height: 72px;
    min-height: 72px;
    border-radius: 6px;
    object-fit: cover;
}

.rts-sidebar .rts-single-widget.recentpost-widget .recent-posts .meta .published {
    margin-bottom: 6px;
    color: #6b7280;
    font-size: 13px;
}

.rts-sidebar .rts-single-widget.recentpost-widget .recent-posts .meta .title a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #0b1f44;
    font-size: 15px;
    line-height: 1.45;
}

.rts-sidebar .rts-single-widget.recentpost-widget .recent-posts .meta .title a:hover {
    color: var(--color-primary, #fd5d07);
}

/* Galeri */
.rts-sidebar .rts-single-widget.gallery-widget .gallery-posts { gap: 10px; }

.rts-sidebar .rts-single-widget.gallery-widget .gallery-posts .thumb img {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 80px;
    min-height: 0;
    border-radius: 6px;
    object-fit: cover;
}

.rts-sidebar .rts-single-widget.gallery-widget .gallery-posts .thumb {
    flex: 0 0 calc(33.333% - 7px);
    max-width: calc(33.333% - 7px);
}

/* Tag */
.rts-sidebar .rts-single-widget.tags-widget .popular-tags .tags a {
    padding: 9px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
    color: #4b5563;
}

.rts-sidebar .rts-single-widget.tags-widget .popular-tags .tags a:hover {
    border-color: var(--color-primary, #fd5d07);
    background: var(--color-primary, #fd5d07);
    color: #fff;
}

/* ---------------------------------------------------- Daftar blog (index) */

/* Avatar kecil pada baris penulis, tanpa mengubah tata letak kartunya. */
.rts-blog-area .single-post__meta .author,
.rts-blog .rts-blog__single--author .author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rts-blog .rts-blog__single--author .author .nhx-avatar--sm {
    width: 36px;
    height: 36px;
}

/* ---------------------------------------------------- Filter grid blog */

/*
 * Toolbar pencarian, kategori, dan tag di atas grid artikel. Grid tidak punya
 * sidebar seperti blog list, jadi filternya mendatar dan penuh lebar.
 */
.nhx-blog-filter {
    margin-bottom: 40px;
    padding: 22px 24px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(11, 31, 68, .04);
}

.nhx-blog-filter__search {
    position: relative;
    margin-bottom: 18px;
}

.nhx-blog-filter__search input {
    width: 100%;
    padding: 12px 46px 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #0b1f44;
    font-size: 15px;
    line-height: 1.4;
}

.nhx-blog-filter__search input::placeholder {
    color: #6b7280;
    opacity: 1;
}

.nhx-blog-filter__search input:focus {
    border-color: var(--color-primary, #fd5d07);
    outline: 2px solid color-mix(in srgb, var(--color-primary, #fd5d07) 35%, transparent);
    outline-offset: 1px;
}

.nhx-blog-filter__search button {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-primary, #fd5d07);
    cursor: pointer;
}

.nhx-blog-filter__search button:hover {
    background: var(--color-primary, #fd5d07);
    color: #fff;
}

.nhx-blog-filter__group {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.nhx-blog-filter__group + .nhx-blog-filter__group { margin-top: 12px; }

.nhx-blog-filter__label {
    flex: 0 0 64px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.nhx-blog-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.nhx-blog-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.2;
    transition: all .25s ease;
}

.nhx-blog-filter__chip span {
    color: #9ca3af;
    font-size: 12px;
}

.nhx-blog-filter__chip:hover {
    border-color: var(--color-primary, #fd5d07);
    color: var(--color-primary, #fd5d07);
    text-decoration: none;
}

/* Seluruh anak ikut putih agar tidak ada teks warna merek di atas warna merek. */
.nhx-blog-filter__chip.is-active,
.nhx-blog-filter__chip.is-active span {
    border-color: var(--color-primary, #fd5d07);
    background: var(--color-primary, #fd5d07);
    color: #fff;
}

.nhx-blog-filter__summary {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 14px;
}

.nhx-blog-filter__summary strong { color: #0b1f44; }

.nhx-blog-filter__reset {
    margin-left: 10px;
    color: var(--color-primary, #fd5d07);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 575.98px) {
    .nhx-blog-filter { padding: 18px; }
    .nhx-blog-filter__label { flex-basis: 100%; }
}

/* ---------------------------------------------------- Paginasi blog */

/*
 * Template hanya menata `a`. Halaman aktif, pemisah "...", dan tombol yang
 * tidak tersedia kini memakai `span`, jadi butuh ukuran yang sama agar
 * barisnya tidak melompat.
 */
.blog-pagination-area ul li span {
    display: block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    color: #6b7280;
}

.blog-pagination-area ul li span.active {
    color: #fff;
    background: var(--color-primary, #fd5d07);
}

/* Chevron yang tidak dapat diklik: terlihat, tetapi jelas non-aktif. */
.blog-pagination-area ul li span.is-disabled { color: #cbd5e1; }

.blog-pagination-area ul li span.is-gap {
    width: auto;
    min-width: 20px;
    color: #9ca3af;
}

.blog-pagination-area ul {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* ---------------------------------------------------- Layar kecil */

@media (max-width: 991.98px) {
    /* Sidebar turun ke bawah; Bootstrap sudah menumpuk kolomnya. */
    .rts-blog-details .rts-sidebar { margin-top: 8px; }
}

@media (max-width: 575.98px) {
    .rts-blog-details .blog-details p,
    .rts-blog-details .blog-details ul,
    .rts-blog-details .blog-details ol { font-size: 16px; }

    .rts-blog-details .blog-info {
        align-items: flex-start;
        flex-direction: column;
    }

    .rts-blog-details .blog-details__featured-image img { aspect-ratio: 4 / 3; }

    .rts-sidebar .rts-single-widget { padding: 20px; }
}