/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.podcast-player {
    margin: 20px 0;
}

.podcast-player-wrapper {
    margin-bottom: 30px;
}

.podcast-links {
    text-align: center;
    margin-top: 20px;
}

.podcast-link-button {
    display: inline-block;
    padding: 12px 24px;
    margin: 0 10px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    transition: transform 0.2s ease;
}

.podcast-link-button:hover {
    transform: scale(1.05);
}

.apple-podcast {
    background-color: #9933CC; /* Official Apple Podcasts Purple */
}

.spotify-podcast {
    background-color: #1DB954; /* Official Spotify Green */
}

.podcast-actions {
    margin-top: 30px;
    padding: 15px;
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.podcast-action-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
}

.podcast-action-btn.twitter {
    background-color: #1DA1F2;
}

.podcast-action-btn.facebook {
    background-color: #1877F2;
}

.podcast-action-btn.linkedin {
    background-color: #0A66C2;
}

.podcast-transcript-wrapper {
    margin-top: 40px;
}

.transcript-toggle {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 10px 20px;
    width: 100%;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
}

.transcript-toggle:hover {
    background-color: #e9e9e9;
}

.transcript-content {
    display: none;
    padding: 20px;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    line-height: 1.6;
}


/* New Episode List Styles */
.podcast-episode-list-new .podcast-episode-item {
    display: flex;
    gap: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.podcast-episode-list-new .episode-artwork {
    flex: 0 0 200px; /* Do not grow, do not shrink, base width of 200px */
}

.podcast-episode-list-new .episode-artwork img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.podcast-episode-list-new .episode-details {
    flex: 1;
}

.podcast-episode-list-new .episode-number {
    font-size: 16px;
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
}

.podcast-episode-list-new .episode-title-list {
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 20px;
}

.podcast-episode-list-new .podcast-player-list {
    margin-bottom: 20px;
}

.podcast-episode-list-new .episode-meta {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
}

.podcast-episode-list-new .episode-details-button {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.podcast-episode-list-new .episode-details-button:hover {
    background-color: #f5f5f5;
}

.podcast-pagination {
    margin-top: 40px;
    text-align: center;
}

.podcast-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 4px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
}

.podcast-pagination .page-numbers.current,
.podcast-pagination .page-numbers:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}