/*
Theme Name: PHARE FM 2025
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: PHARE MEDIA
Author URI: https://pharemedia.org
Template: enfold
*/


/* Podcast Subscription Buttons Styling */
.podcast-series-subscribe-buttons {
    margin-bottom: 20px; /* Space below the button area */
}

.podcast-subscribe-buttons-list {
    display: flex; /* Arrange buttons in a row */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line on small screens */
    gap: 10px; /* Space between buttons */
}

.podcast-subscribe-button {
    display: inline-flex; /* Align icon and text nicely */
    align-items: center;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    border: 1px solid transparent; /* Base border */
    line-height: 1.2; /* Adjust for better vertical alignment of text */
}

.podcast-subscribe-button:hover,
.podcast-subscribe-button:focus {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.podcast-subscribe-button .podcast-subscribe-icon {
    width: 20px; /* Adjust size as needed */
    height: 20px;
    margin-right: 8px;
    vertical-align: middle; /* Helps if not using flex on the button itself */
}

.podcast-subscribe-button span {
    vertical-align: middle;
}

/* Platform Specific Styles */

/* Apple Podcasts */
.podcast-platform-apple-podcasts {
    background-color: #A93FF9; /* Apple Podcasts Purple (approx) */
    color: #fff;
    border-color: #A93FF9;
}
.podcast-platform-apple-podcasts:hover,
.podcast-platform-apple-podcasts:focus {
    background-color: #922dd1; /* Darker purple */
}
/* Ensure Apple SVG is white if the original is black/dark */
.podcast-platform-apple-podcasts .podcast-subscribe-icon {
    filter: brightness(0) invert(1); /* Makes black SVG white */
}


/* Spotify */
.podcast-platform-spotify {
    background-color: #1DB954; /* Spotify Green */
    color: #fff;
    border-color: #1DB954;
}
.podcast-platform-spotify:hover,
.podcast-platform-spotify:focus {
    background-color: #1aa34a; /* Darker green */
}
/* Spotify SVG is usually green on transparent, or white. If it's black: */
/* .podcast-platform-spotify .podcast-subscribe-icon {
    filter: brightness(0) invert(1);
} */


/* Series RSS */
.podcast-platform-rss-series {
    background-color: #EE802F; /* Common RSS Orange */
    color: #fff;
    border-color: #EE802F;
}
.podcast-platform-rss-series:hover,
.podcast-platform-rss-series:focus {
    background-color: #d46e22; /* Darker orange */
}

/* Style for the RSS icon (if you use the span and a CSS background) */
.podcast-platform-rss-series .podcast-subscribe-icon-rss {
    display: inline-block;
    width: 18px; /* Adjust */
    height: 18px; /* Adjust */
    margin-right: 8px;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%2M4%204.44A15.56%2015.56%200%200%201%2019.56%2020M4%2011.08A8.92%208.92%200%200%201%2012.92%2020M7%2020a3%203%200%201%201-3-3%203%203%200%200%201%203%203z%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* If you use your own RSS SVG via <img>, target .podcast-platform-rss-series .podcast-subscribe-icon */


/* --- Optional: Alternative styling for the icons if the SVGs are single color and you want to control color via CSS --- */
/* This requires the SVGs to be designed for it (e.g., using `currentColor` for fill in the SVG itself) or by inlining them. */
/* If the SVGs from SSP are multi-color, this won't work as expected. */
/*
.podcast-subscribe-button .podcast-subscribe-icon {
    background-color: currentColor; // This would make the icon container take the text color
    -webkit-mask-image: url(...); // Path to SVG
    mask-image: url(...); // Path to SVG
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.podcast-platform-apple-podcasts .podcast-subscribe-icon {
    -webkit-mask-image: url('<?php echo esc_url($ssp_logo_base_url . "apple.svg"); ?>');
    mask-image: url('<?php echo esc_url($ssp_logo_base_url . "apple.svg"); ?>');
}
*/