/* Styles for the generic blog list/pagination/taxonomy components (DQCMS.Web's
   PostIndexContent/PostIndexPagination) which know nothing about a specific theme's
   markup — Horseno's own stylesheet only styles its native blog-style1 cards. */
.post-index {
    max-width: 860px;
    margin: 0 auto;
    padding: 80px 15px;
}

.post-index h1 {
    font-family: var(--title-font);
    color: var(--title-color);
    margin-bottom: 2rem;
}

.post-index-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
}

.post-index-item h2 {
    margin: 0 0 0.5rem;
    font-family: var(--title-font);
    font-size: 1.25rem;
}

.post-index-item a {
    text-decoration: none;
    color: var(--title-color);
}

.post-index-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
}

.post-index-pagination a {
    color: var(--theme-color);
    text-decoration: none;
    font-weight: 600;
}

/* Baseline color for WYSIWYG-authored content (Post/Page body from the Telerik Editor).
   Deliberately NOT !important and NOT applied to <span> — a span is how the editor's font
   color tool marks up a deliberately-colored run of text, and that inline style must keep
   winning (plain CSS specificity already lets it, since inline style beats an external
   stylesheet rule with equal/lower specificity). This rule only supplies a readable default
   for text that has no inline color of its own. */
.post-body,
.post-body p,
.post-body li,
.post-body td,
.post-body th {
    color: var(--text-color);
}

.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
    color: var(--title-color);
}

.page-body,
.page-body p,
.page-body li,
.page-body td,
.page-body th {
    color: var(--text-color);
}

.page-body h1, .page-body h2, .page-body h3, .page-body h4, .page-body h5, .page-body h6 {
    color: var(--title-color);
}

/* Collapse toggle (+/-) for a menu item with children inside the sidebar drawer's Menu
   widget. Mirrors the look of the mobile menu's own .vs-mean-expand button (style.css line
   ~1570), which is scoped to .vs-mobile-menu only — this repeats it for .widget_nav_menu.
   The button itself is added and wired up client-side (theme-bridge.js's
   initSidebarMenuCollapse), not by Blazor. */
.widget_nav_menu li.menu-item-has-children {
    position: relative;
}

.widget_nav_menu .dqcms-menu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    text-align: center;
    border: none;
    border-radius: 50%;
    background-color: var(--smoke-color);
    color: var(--title-color);
    cursor: pointer;
}

.widget_nav_menu .dqcms-menu-toggle:before {
    font-family: var(--icon-font);
    font-weight: 400;
    content: "\f067";
}

.widget_nav_menu li.vs-active > .dqcms-menu-toggle:before {
    content: "\f068";
}

.widget_nav_menu .sub-menu {
    margin-top: 8px;
}

/* Carousel of trailing photos auto-extracted from a Post's body (see
   TrailingImageGallery + HorsenoPostTemplate) — one photo per slide, click to zoom via the
   theme's existing Magnific Popup wiring (.popup-image, already bound in main.js). */
.post-gallery-carousel .post-gallery-item {
    padding: 0 8px;
}

.post-gallery-carousel .post-gallery-item a {
    display: block;
    cursor: zoom-in;
}

.post-gallery-carousel .post-gallery-item img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 10px;
}

/* Home page "Media Sosial" TabStrip (HorsenoHomeTemplate) */
.social-embed-panel {
    padding: 2.5rem 1rem;
}

.social-embed-panel__icon {
    font-size: 56px;
}

.social-embed-panel iframe {
    max-width: 100%;
}