/**
 * Easy Custom Skin Theme — ECSF Plugin Bridge (v1.4)
 *
 * Loaded only when the Easy Custom Skin Free plugin is active.
 * Harmonizes the plugin's Posts Grid, Filter Tabs and 3D layouts with the
 * theme: accent colors follow the Customizer primary color, and every
 * plugin component adapts to the theme's dark mode automatically.
 */

/* ==========================================================================
   Accent color: plugin components inherit the theme primary color
   ========================================================================== */
:root {
    --ecsf-filter-accent: var(--ecst-primary-color, #e53935);
}

.ecsf-read-more,
.ecsf-load-more-btn {
    background-color: var(--ecst-primary-color, #e53935);
}

.ecsf-read-more:hover,
.ecsf-load-more-btn:hover {
    background-color: var(--ecst-primary-hover, #c62828);
}

.ecsf-post-category a,
.ecsf-meta-date i,
.ecsf-timeline-marker .ecsf-timeline-dot {
    color: var(--ecst-primary-color, #e53935);
}

.ecsf-layout-timeline .ecsf-timeline-marker circle,
.ecsf-infinite-spinner {
    border-top-color: var(--ecst-primary-color, #e53935);
}

/* ==========================================================================
   Dark mode: plugin cards, tabs and 3D layouts follow the theme toggle
   ========================================================================== */
body.ecst-dark-mode .ecsf-post-item,
body.ecst-dark-mode .ecsf-tilt3d-card,
body.ecst-dark-mode .ecsf-stack3d-card,
body.ecst-dark-mode .ecsf-iso3d-card {
    background: var(--ecst-dark-card, #16213e);
    color: var(--ecst-dark-text, #e5e5e5);
}

body.ecst-dark-mode .ecsf-post-title a {
    color: var(--ecst-dark-color, #ffffff);
}

body.ecst-dark-mode .ecsf-post-title a:hover {
    color: var(--ecst-primary-color, #e53935);
}

body.ecst-dark-mode .ecsf-post-excerpt,
body.ecst-dark-mode .ecsf-post-meta,
body.ecst-dark-mode .ecsf-post-meta a {
    color: var(--ecst-dark-text, #b5bcc7);
}

body.ecst-dark-mode .ecsf-filter-tab {
    background: var(--ecst-dark-card, #16213e);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--ecst-dark-text, #e5e5e5);
}

body.ecst-dark-mode .ecsf-filter-tab.is-active {
    background: var(--ecst-primary-color, #e53935);
    border-color: var(--ecst-primary-color, #e53935);
    color: #fff;
}

body.ecst-dark-mode .ecsf-filtering .ecsf-posts-grid::after {
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%);
    background-size: 250% 100%;
}

/* List & timeline layouts */
body.ecst-dark-mode .ecsf-layout-list .ecsf-post-item,
body.ecst-dark-mode .ecsf-layout-list_alternate .ecsf-post-item,
body.ecst-dark-mode .ecsf-timeline-item {
    background: var(--ecst-dark-card, #16213e);
}

body.ecst-dark-mode .ecsf-layout-list_minimal .ecsf-post-item {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
}

/* 3D layouts */
body.ecst-dark-mode .ecsf-fold3d-panel {
    background: var(--ecst-dark-card, #16213e);
}

body.ecst-dark-mode .ecsf-book3d-page,
body.ecst-dark-mode .ecsf-book3d-inside {
    background: var(--ecst-dark-card, #16213e);
    /* replace the light "ruled paper" gradient in dark mode */
    background-image: repeating-linear-gradient(
        var(--ecst-dark-card, #16213e),
        var(--ecst-dark-card, #16213e) 27px,
        rgba(255, 255, 255, 0.08) 28px
    );
}

body.ecst-dark-mode .ecsf-layout-neumorph_3d {
    background: #23272e;
}

body.ecst-dark-mode .ecsf-neumorph3d {
    background: #23272e;
    box-shadow: 12px 12px 24px #191c21, -12px -12px 24px #2d323b;
}

body.ecst-dark-mode .ecsf-neumorph3d:hover {
    box-shadow: 18px 18px 36px #16191d, -18px -18px 36px #31363f;
}

body.ecst-dark-mode .ecsf-glass3d-panel {
    background: rgba(20, 24, 30, 0.45);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Pagination */
body.ecst-dark-mode .ecsf-pagination a,
body.ecst-dark-mode .ecsf-pagination span {
    background: var(--ecst-dark-card, #16213e);
    color: var(--ecst-dark-text, #e5e5e5);
    border-color: rgba(255, 255, 255, 0.12);
}

body.ecst-dark-mode .ecsf-no-posts {
    color: var(--ecst-dark-text, #b5bcc7);
}