.ccs-pagination {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  margin: 2rem 0;
}

.ccs-page-link {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  transition: background 0.2s ease;
}

.ccs-page-link .current {
  background: #003e6b;
  color: white;
  border-color: #003e6b;
}

.ccs-page-link a:hover {
  background: #f2f2f2;
}

.ccs-sermon-archive {
    margin: 0 auto;
    overflow: visible; /* Ensure no hidden overflow */
    padding: 6% 10%;
}

.ccs-sermon-archive-title {
    margin-bottom: 10px;
}

.ccs-sermon-archive-title-text {
    color: #333;
    margin-bottom: 6%;
    text-align: center;
}

/* Sermon Grid Layout */
.ccs-sermon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Increased for more breathing room */
    position: relative;
    padding: 20px 0; /* Add padding around the grid */
}

/* Sermon Item */
.ccs-sermon-item {
    border: none; /* Remove border for cleaner look */
    padding: 20px; /* Increased padding for breathing room */
    background: #ffffff;
    border-radius: 15px; /* Slight rounding for modern look */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for elevation */
    overflow: hidden; /* Ensure content stays within rounded corners */
}

/* Featured Image */
.ccs-sermon-item .wp-post-image {
    width: 100%;
    height: 250px; /* Adjust this value to match your desired height */
    border-radius: 15px 15px 0 0; /* Match the container’s border-radius */
    object-fit: cover; /* Ensure image fills the space, cropping if necessary */
}

/* Meta (Date and Speaker) */
.ccs-meta {
    display: flex;
    justify-content: space-between;
    margin: 15px 0 30px; /* Space above and below */
    font-size: 14px;
}

.ccs-meta span {
    color: #b27560;
    padding: 8px 16px; /* Pill-shaped button */
    border-radius: 20px; /* Rounded corners for pill shape */
    font-weight: 500;
    text-transform: none; /* Remove uppercase for speaker */
    letter-spacing: 0.5px; /* Slight spacing for readability */
}

/* Sermon Title */
.ccs-sermon-item h2 {
    font-size: 3rem; /* 48px at default browser settings, larger bold title */
    font-weight: 700; /* Bold for emphasis */
    color: #000;
    text-align: center; /* Centered as in screenshot */
    margin: 15px 0; /* Space around title */
    line-height: 1.2; /* Tighter line height for readability */
}

.ccs-sermon-item h2::before,
.ccs-sermon-item h2::after {
    content: '';
    display: block;
    height: 1px; /* Thin line */
    background: #b27560;; /* Light gray line */
    margin: 20px auto; /* Center the line with auto margins */
    width: 60%; /* Shorter width, centered */
}

/* Excerpt (Description) */
.ccs-sermon-item p {
    font-size: 16px; /* Readable size */
    color: #333;
    line-height: 1.5; /* Better readability */
    margin: 15px 0; /* Space around excerpt */
    text-align: center; /* Centered as in screenshot */
}

/* Horizontal Line Below Excerpt */
.ccs-line {
    height: 1px; /* Thin line */
    background: #e0e0e0; /* Light gray line */
    margin: 0px auto 40px; /* Center the line with auto margins */
    border-style: none;
    width: 100% !important;
}

/* Topic, Book, and View Sermon Button */
.ccs-meta-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0; /* Space above/below */
    gap: 10px; /* Space between Topic/Book and CTA */
}

.ccs-topic-book {
    font-size: 14px; /* Smaller than title */
    font-weight: 600; /* Bold for emphasis */
    color: #000;
    text-align: left; /* Left-aligned as in screenshot */
}

.ccs-topic-book strong {
    font-weight: 700; /* Extra bold for "Topic:" and "Book:" */
}

/* View Sermon Button (CTA) */
.ccs-cta {
    display: inline-block;
    padding: 10px 24px; /* Larger padding for button */
    background: #000; /* Black background as in screenshot */
    color: #fff !important;
    text-decoration: none;
    border-radius: 24px; /* Rounded corners for pill shape */
    font-size: 16px; /* Readable size */
    font-weight: 500;
    text-transform: none; /* Remove uppercase for "View Sermon" */
    letter-spacing: 0.5px; /* Slight spacing for readability */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    white-space: nowrap; /* Ensure "View Sermon" stays on one line */
    flex-shrink: 0; /* Prevent CTA from shrinking */
}

/* Hover State for CTA */
.ccs-cta:hover {
    background: #333; /* Darker black on hover */
    color: #fff;
}

/* Filter Bar */
.ccs-filter {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    gap: 12px;
    padding: 15px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    overflow-x: auto;
}

.ccs-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    margin-bottom: 12px; /* Equal spacing between rows */
}

/* First row: Start Date, End Date */
.ccs-filter-row:nth-child(1) > * {
    flex: 1 0 calc(50% - 12px); /* Adjusted for 2 elements */
    min-width: 150px;
    background-color: rgba(0, 0, 0, .04) !important;
    border: 1px solid #c0c8d0 !important;
    border-radius: 4px;
}

/* Second row: Series, Book, Speaker, Topic, Clear Filters */
.ccs-filter-row:nth-child(2) > * {
    flex: 1 0 calc(20% - 12px);
    min-width: 120px;
    background-color: #fff;
    color: #262626;
}

.ccs-filter-input,
.ccs-filter-select {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background: #fff;
    height: 38px;
    box-sizing: border-box;
}

.ccs-filter-input:focus,
.ccs-filter-select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.3);
}

.ccs-filter-input::placeholder {
    color: #999;
    opacity: 1;
}

/* Ensure date inputs remain readable even if theme styles are aggressive */
.ccs-sermon-archive .ccs-filter-input,
.ccs-sermon-archive .ccs-filter-select {
    color: #111 !important;
    background: #fff !important;
}

/* jQuery UI datepicker minimal styling (front-end) */
.ui-datepicker {
    z-index: 999999 !important;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.ui-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ui-datepicker-title {
    font-weight: 600;
    font-size: 13px;
    color: #111;
}
.ui-datepicker-prev,
.ui-datepicker-next {
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: #f4f4f4;
}
.ui-datepicker-calendar th {
    font-size: 11px;
    color: #666;
    padding: 4px;
}
.ui-datepicker-calendar td {
    padding: 2px;
}
.ui-datepicker-calendar a {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    text-decoration: none;
    color: #111;
    font-size: 12px;
}
.ui-datepicker-calendar a:hover {
    background: #f4f4f4;
}
.ui-datepicker .ui-state-active {
    background: #0073aa;
    color: #fff;
}

#ccs-clear-filters {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background: #fff;
    height: 38px;
    box-sizing: border-box;
    cursor: pointer;
}

#ccs-clear-filters:hover {
    background: #f0f0f0;
    border-color: #0073aa;
}

/* Mobile Styling for Filter */
@media (max-width: 768px) {
    .ccs-sermon-archive {
        padding: 5% 4%;
    }

    .ccs-filter {
        flex-direction: column;
        padding: 12px;
        gap: 10px;
    }

    .ccs-filter-row {
        flex-direction: column;
    }

    .ccs-filter-row > * {
        flex: 1 0 100%;
        min-width: 100%;
        height: 36px;
    }
}

/* Datepicker (Calendar) */
.ui-datepicker {
    z-index: 10000 !important;
    width: 17em;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: #fff;
    font-size: 14px;
}

.ui-datepicker .ui-datepicker-header {
    background: #0073aa;
    color: #fff;
    border-radius: 4px 4px 0 0;
    padding: 8px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: rgba(0, 0, 0, 0.1);
}

.ui-datepicker .ui-datepicker-calendar {
    width: 100%;
}

.ui-datepicker .ui-datepicker-calendar td a {
    text-align: center;
    padding: 5px;
    color: #333;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default {
    background: transparent;
    border: none;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-highlight {
    background: #f0f0f0;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-active {
    background: #0073aa;
    color: #fff;
    border-radius: 2px;
}

/* assets/css/frontend.css */

/* assets/css/frontend.css */

/* Single Sermon Page */
/* ------------------------------
   Single Sermon (Minimal)
   ------------------------------ */

.ccs-single-sermon.ccs-single-sermon--minimal {
    margin: 0 auto;
    padding: 4% 10%;
    max-width: 1200px;
}

.ccs-sermon-topbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 14px 0;
}

.ccs-toplink {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.14);
    background: transparent;
    font-size: 14px;
}

.ccs-toplink:hover {
    border-color: rgba(0,0,0,0.25);
}

.ccs-sermon-title {
    margin: 0 0 8px 0;
    line-height: 1.12;
}

.ccs-sermon-featured-image {
    margin: 0 0 16px 0;
}


.ccs-sermon-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    display: block;
}

/* (legacy CTA styles kept for archive page compatibility) */

/* Middle: Sermon Video */
.ccs-sermon-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 18px;
}

.ccs-sermon-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Below Video: Minimal editorial layout */
.ccs-sermon-body.ccs-sermon-body--minimal {
    margin-top: 22px;
}

.ccs-sermon-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.ccs-sermon-title {
    margin: 0;
    line-height: 1.12;
}

.ccs-sermon-meta-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
    opacity: 0.9;
    margin: 0 0 16px 0;
}

.ccs-sermon-meta-inline .ccs-meta-item a {
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.18);
}

.ccs-sermon-meta-inline .ccs-meta-item a:hover {
    border-bottom-color: rgba(0,0,0,0.35);
}


.ccs-sermon-description {
    font-size: 16px;
    line-height: 1.65;
    max-width: 70ch;
    margin: 0 0 18px 0;
}

/* Primary actions (Notes / Listen) */
.ccs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 18px 0;
}

/* Icons-only mode makes actions compact */
.ccs-actions--icons .ccs-action-btn {
    padding: 12px;
    min-width: 48px;
    justify-content: center;
}

.ccs-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.18);
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ccs-action-btn:hover {
    border-color: rgba(0,0,0,0.28);
}

.ccs-action-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.ccs-audio {
    margin: 0 0 18px 0;
}

.ccs-audio audio {
    width: 100%;
}

.ccs-share-links {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ccs-share-links--inline {
    margin-top: 4px;
}

.ccs-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.14);
    text-decoration: none;
}

.ccs-share-icon:hover {
    border-color: rgba(0,0,0,0.28);
}

/* Inline details (Series / Book / Topic) */
.ccs-sermon-details-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 14px;
    opacity: 0.9;
}

.ccs-detail-label {
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: 0.65;
    margin-right: 6px;
}

.ccs-sermon-details-inline a {
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.18);
}

.ccs-sermon-details-inline a:hover {
    border-bottom-color: rgba(0,0,0,0.35);
}

/* Accessible helper for icons-only option */
.ccs-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 900px) {
    .ccs-single-sermon.ccs-single-sermon--minimal {
        padding: 6% 6%;
    }

    .ccs-sermon-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ccs-share-links--inline {
        margin-top: 0;
    }

    .ccs-action-btn {
        width: 100%;
        justify-content: center;
    }

    .ccs-sermon-description {
        max-width: 100%;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .ccs-sermon-details {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .ccs-sermon-video {
        padding-bottom: 75%; /* Adjust for smaller screens */
    }

    .ccs-see-all-cta {
        text-align: center;
    }
}

/* Taxonomy Archive Styling */
.ccs-taxonomy-archive {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.ccs-taxonomy-header {
    margin-bottom: 30px;
    text-align: center;
}

.ccs-taxonomy-title {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 10px;
}

.ccs-taxonomy-description {
    font-size: 1.1em;
    color: #666;
}

/* Sermon Grid */
.ccs-sermon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Sermon Item */
.ccs-sermon-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.2s ease;
}

.ccs-sermon-item:hover {
    transform: translateY(-5px);
}

.ccs-sermon-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.ccs-sermon-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ccs-sermon-title {
    font-size: 1.2em;
    margin: 15px 10px;
    color: #333;
}

.ccs-sermon-title a {
    color: #333;
    text-decoration: none;
}

.ccs-sermon-title a:hover {
    color: #0073aa;
}

.ccs-sermon-speaker {
    font-size: 1em;
    color: #666;
    margin: 0 10px 15px;
    padding-bottom: 15px;
}

/* Pagination */

.ccs-pagination .nav-links {
    display: inline-flex;
    gap: 10px;
}

.ccs-pagination .page-numbers {
    padding: 8px 12px;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.ccs-pagination .page-numbers.current {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

.ccs-pagination .page-numbers:hover {
    background: #f0f0f0;
    border-color: #0073aa;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .ccs-sermon-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ccs-sermon-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ccs-taxonomy-title {
        font-size: 2em;
    }

    .ccs-sermon-image {
        height: 150px;
    }

    /* Mobile sermon card improvements */
    .ccs-sermon-item {
        padding: 0 0 16px 0; /* Remove side padding; let image go edge-to-edge */
        border-radius: 12px;
    }

    .ccs-sermon-item .wp-post-image {
        width: 100%;
        height: 200px;
        border-radius: 12px 12px 0 0;
        object-fit: cover;
        display: block;
    }

    .ccs-sermon-item h2,
    .ccs-sermon-item h1 {
        font-size: 1.5rem;
        margin: 10px 16px 6px;
    }

    .ccs-meta {
        padding: 0 16px;
        margin: 10px 0 16px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .ccs-meta span {
        padding: 5px 12px;
        font-size: 13px;
    }

    .ccs-sermon-item p {
        font-size: 14px;
        margin: 8px 16px;
    }

    .ccs-line {
        margin: 12px 16px 16px;
        width: calc(100% - 32px) !important;
    }

    .ccs-meta-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 0 16px;
        margin: 0 0 4px;
    }

    .ccs-cta {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .ccs-topic-book {
        font-size: 13px;
    }
}

/* Existing Filter Bar Styling (unchanged) */
.ccs-filter {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    overflow-x: auto;
}

.ccs-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    margin-bottom: 12px;
}

.ccs-filter-row:nth-child(1) > * {
    flex: 1 0 calc(50% - 12px);
    min-width: 150px;
    border: 1px solid #c0c8d0 !important;
    border-radius: 4px;
}

.ccs-filter-row:nth-child(2) > * {
    flex: 1 0 calc(20% - 12px);
    min-width: 120px;
}

.ccs-filter-input,
.ccs-filter-select {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background: #fff;
    height: 38px;
    box-sizing: border-box;
}

.ccs-filter-input:focus,
.ccs-filter-select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.3);
}

.ccs-filter-input::placeholder {
    color: #999;
    opacity: 1;
}

#ccs-clear-filters {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background: #fff;
    height: 38px;
    box-sizing: border-box;
    cursor: pointer;
}

#ccs-clear-filters:hover {
    background: #f0f0f0;
    border-color: #0073aa;
}

@media (max-width: 768px) {
    .ccs-filter {
        flex-direction: column;
        padding: 12px;
        gap: 10px;
    }

    .ccs-filter-row {
        flex-direction: column;
    }

    .ccs-filter-row > * {
        flex: 1 0 100%;
        min-width: 100%;
        height: 36px;
    }
}

/* ... (Keep existing styles for .ccs-sermon-archive, .ccs-sermon-grid, etc.) ... */

/* Header: Sermon Title (Left) and See All Sermons CTA (Right) */
.ccs-sermon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ccs-sermon-title {
    font-size: 2.5em; /* Adjust to match theme's heading style */
    margin: 0;
    color: #333; /* Default color, can be overridden by theme */
}

.ccs-see-all-cta {
    text-align: right;
}

.ccs-see-all-cta .ccs-cta {
    display: inline-block;
    padding: 10px 20px;
    background: transparent;
    color: #d48c7d; /* Peach color from image */
    border: 1px solid #d48c7d;
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.ccs-see-all-cta .ccs-cta:hover {
    background: #d48c7d;
    color: #fff;
}

/* Middle: Sermon Video */
.ccs-sermon-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}

.ccs-sermon-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Below Video: Three Columns (Adjusted Layout) */
.ccs-sermon-details {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Adjusted to three columns */
    gap: 20px;
    margin-top: 20px;
    font-family: inherit; /* Inherit theme font */
}

/* v2.1.3 Single Sermon Layout (Meta + Sidebar) */
.ccs-sermon-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 26px;
}

.ccs-meta-block {
    margin-bottom: 16px;
}

.ccs-meta-label {
    display: block;
    font-size: 0.9rem;
    color: #d48c7d;
    margin-bottom: 6px;
}

.ccs-meta-value {
    color: #262626;
}

.ccs-sidebar-card {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}

.ccs-sidebar-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
}

.ccs-sidebar-details .ccs-sermon-description {
    color: #444;
}

/* Column 1: Date, Speaker, and Current Series */
.ccs-sermon-meta {
    color: #d48c7d; /* Retain peach color for emphasis */
}

.ccs-sermon-meta p {
    margin: 5px 0;
    padding-bottom: .3px !important;
}

.ccs-sermon-meta p strong {
    display: block;
    font-weight: bold;
    color: #d48c7d;
    font-size: 1.3rem;
}

.ccs-sermon-meta p:last-child {
    color: #262626; /* Darker color for speaker and series */
}

/* Column 2: Sermon Description */
.ccs-sermon-description {
    line-height: 1.6;
    color: #666;
    font-family: inherit; /* Inherit theme font */
}

/* Column 3: Download PDF and Share Links */
.ccs-sermon-actions {
    color: #333;
}

.ccs-sermon-actions p {
    margin: 5px 0;
    padding-bottom: .4px;
}

.ccs-sermon-actions p strong {
    display: block;
    font-weight: bold;
    color: #d48c7d;
}

.ccs-sermon-actions .ccs-download-pdf {
    display: inline-block;
    padding: 8px 15px;
    background: #d48c7d;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    margin-bottom: 10px;
}

.ccs-sermon-actions .ccs-download-pdf:hover {
    background: #c07a6b;
}

.ccs-share-links {
    display: flex;
    gap: 10px;
}

.ccs-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    background: #d9e1e8; /* Light gray-blue from image */
    color: #333;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
}

.ccs-share-icon span.dashicons {
    font-size: 18px; /* Adjust icon size */
    margin-right: 0; /* Remove default spacing since no text */
    line-height: 1;
}

.ccs-share-icon:hover {
    background: #c0c8d0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .ccs-sermon-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ccs-sermon-title {
        font-size: 2em; /* Smaller on mobile */
    }

    .ccs-see-all-cta {
        text-align: left;
    }

    .ccs-sermon-details {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .ccs-sermon-video {
        padding-bottom: 75%; /* Adjust for smaller screens */
    }
}

/* Audio Player Styling */
.ccs-sermon-actions audio {
    width: 100%;
    max-width: 250px;
    margin-top: 10px;
    border-radius: 5px;
}


/* CCS tweaks: ensure datepicker looks consistent even with aggressive theme styles */
.ccs-sermon-archive .ui-datepicker,
.ccs-sermon-archive .ui-datepicker * {
    box-sizing: border-box;
}

.ccs-sermon-archive .ui-datepicker-header {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.ccs-sermon-archive .ui-datepicker-title select {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    appearance: auto !important;
}

.ccs-sermon-archive .ui-datepicker-prev,
.ccs-sermon-archive .ui-datepicker-next {
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
}

.ccs-sermon-archive .ui-datepicker-prev::after,
.ccs-sermon-archive .ui-datepicker-next::after {
    text-indent: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    line-height: 1;
    color: #111;
}

.ccs-sermon-archive .ui-datepicker-prev::after { content: "‹"; }
.ccs-sermon-archive .ui-datepicker-next::after { content: "›"; }




/* --- CCS Datepicker overrides (strong specificity to beat theme styles) --- */
.ccs-sermon-archive .ui-datepicker { box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.ccs-sermon-archive .ui-datepicker .ui-datepicker-header { background: #fff !important; border-bottom: 1px solid #eee !important; }
.ccs-sermon-archive .ui-datepicker .ui-datepicker-prev,
.ccs-sermon-archive .ui-datepicker .ui-datepicker-next{
  position:absolute !important;
  top: 10px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid #e5e5e5 !important;
  background: #fff !important;
}
.ccs-sermon-archive .ui-datepicker .ui-datepicker-prev{ left: 10px !important; }
.ccs-sermon-archive .ui-datepicker .ui-datepicker-next{ right: 10px !important; }
.ccs-sermon-archive .ui-datepicker .ui-datepicker-prev span,
.ccs-sermon-archive .ui-datepicker .ui-datepicker-next span{
  display:none !important; /* hides 'Prev/Next' + ui-icon */
}
.ccs-sermon-archive .ui-datepicker .ui-datepicker-prev:before,
.ccs-sermon-archive .ui-datepicker .ui-datepicker-next:before{
  display:block;
  font-size: 20px;
  line-height: 30px;
  text-align:center;
  color:#111;
  width:100%;
}
.ccs-sermon-archive .ui-datepicker .ui-datepicker-prev:before{ content:"\2039"; } /* ‹ */
.ccs-sermon-archive .ui-datepicker .ui-datepicker-next:before{ content:"\203A"; } /* › */
.ccs-sermon-archive .ui-datepicker select.ui-datepicker-month,
.ccs-sermon-archive .ui-datepicker select.ui-datepicker-year{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  height: auto !important;
}
.ccs-sermon-archive .ccs-date-input::placeholder{ color: rgba(0,0,0,.45); }



/* === CCS Overrides: ensure filter inputs remain readable across aggressive theme styles === */
.ccs-sermon-archive .ccs-filter-input,
.ccs-sermon-archive .ccs-filter-select {
    background-color: #ffffff !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
}

.ccs-sermon-archive .ccs-filter-input::placeholder {
    color: rgba(0,0,0,0.45) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(0,0,0,0.45) !important;
}

/* jQuery UI Datepicker: neutral styling + clean chevrons */
.ccs-sermon-archive .ui-datepicker {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
    padding: 10px !important;
}

.ccs-sermon-archive .ui-datepicker-header {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 0 10px 0 !important;
}

.ccs-sermon-archive .ui-datepicker-title select {
    background: #fff !important;
    color: #222 !important;
    border: 1px solid rgba(0,0,0,0.16) !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    height: auto !important;
}

.ccs-sermon-archive .ui-datepicker-prev,
.ccs-sermon-archive .ui-datepicker-next {
    top: 10px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    background: #fff !important;
    cursor: pointer !important;
}

.ccs-sermon-archive .ui-datepicker-prev span,
.ccs-sermon-archive .ui-datepicker-next span {
    display: none !important;
}

.ccs-sermon-archive .ui-datepicker-prev:before,
.ccs-sermon-archive .ui-datepicker-next:before {
    display: block;
    text-indent: 0;
    font-size: 18px;
    line-height: 34px;
    text-align: center;
    color: #222;
    content: "\2039"; /* ‹ */
}

.ccs-sermon-archive .ui-datepicker-next:before {
    content: "\203A"; /* › */
}

.ccs-sermon-archive .ui-datepicker-calendar th {
    color: rgba(0,0,0,0.55) !important;
    font-weight: 600 !important;
    padding: 6px 0 !important;
}

.ccs-sermon-archive .ui-datepicker-calendar td a {
    background: transparent !important;
    border: 0 !important;
    color: #222 !important;
    border-radius: 10px !important;
    padding: 8px 0 !important;
}

.ccs-sermon-archive .ui-datepicker-calendar td a.ui-state-hover {
    background: rgba(0,0,0,0.06) !important;
}

/* === CCS Datepicker (v2.2.0): balanced header + consistent controls ===
   Themes often override jQuery UI styles in unexpected ways.
   These rules are intentionally specific and scoped to the sermons archive.
*/
.ccs-sermon-archive .ui-datepicker .ui-datepicker-header{
    position: relative !important;
    display: block !important;
    padding: 10px 52px 12px 52px !important; /* room for prev/next */
}

.ccs-sermon-archive .ui-datepicker .ui-datepicker-title{
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1 !important;
}

/* Ensure prev/next are truly pinned to sides */
.ccs-sermon-archive .ui-datepicker .ui-datepicker-prev,
.ccs-sermon-archive .ui-datepicker .ui-datepicker-next{
    position: absolute !important;
    top: 10px !important;
    text-indent: 0 !important;
    overflow: visible !important;
}
.ccs-sermon-archive .ui-datepicker .ui-datepicker-prev{ left: 10px !important; }
.ccs-sermon-archive .ui-datepicker .ui-datepicker-next{ right: 10px !important; }

/* Some themes (or earlier overrides) add ::after content; turn it off so we don't get double icons */
.ccs-sermon-archive .ui-datepicker .ui-datepicker-prev::after,
.ccs-sermon-archive .ui-datepicker .ui-datepicker-next::after{
    content: none !important;
}

/* Make month/year selects visually balanced */
.ccs-sermon-archive .ui-datepicker select.ui-datepicker-month,
.ccs-sermon-archive .ui-datepicker select.ui-datepicker-year{
    min-width: 96px !important;
}
.ccs-sermon-archive .ui-datepicker select.ui-datepicker-year{
    min-width: 84px !important;
}

/* Improve weekday alignment */
.ccs-sermon-archive .ui-datepicker .ui-datepicker-calendar th{
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px !important;
    padding: 8px 0 !important;
}

/* Slightly more breathing room for day cells */
.ccs-sermon-archive .ui-datepicker .ui-datepicker-calendar td a{
    padding: 9px 0 !important;
}

.ccs-sermon-archive .ui-datepicker-calendar td a.ui-state-active {
    background: rgba(0,115,170,0.12) !important;
    color: #0b5f7a !important;
}