/* =GrabSauce — podcast archive + episode pages
 * -----------------------------------------------------------------------
 * Seriously Simple Podcasting renders into Divi's default light page
 * template, which looks nothing like the rest of grabsauce.com. This drags
 * the podcast pages back onto the site's terminal palette.
 *
 * Scope: body.gs-podcast, added in functions.php for the podcast CPT, the
 * SSP archive page, and the series taxonomy. Everything below is namespaced
 * to it so no other template is touched.
 *
 * Palette (see README.md): #e77f24 orange · #2ec4b6 teal · #1a1a2e navy
 * -------------------------------------------------------------------- */

.gs-podcast {
    --gs-orange: #e77f24;
    --gs-orange-dk: #d4691e;
    --gs-teal: #2ec4b6;
    --gs-navy: #1a1a2e;
    --gs-navy-mid: #16213e;
    --gs-navy-dark: #111128;
    --gs-grey: #b0b0c0;
    --gs-grey-muted: #4a4a6a;
    --gs-mono: 'Courier New', Courier, monospace;

    background-color: var(--gs-navy);
}

.gs-podcast #page-container,
.gs-podcast #main-content {
    background-color: var(--gs-navy);
}

/* ── Layout: no sidebar. The stock Search / Recent Posts / Recent Comments
 *    widgets were the most obviously "unfinished install" thing on the page. */
.gs-podcast #sidebar {
    display: none;
}

.gs-podcast #left-area {
    width: 100%;
    padding-right: 0;
    padding-bottom: 40px;
    max-width: 900px;
    margin: 0 auto;
    float: none;
}

.gs-podcast #main-content .container {
    padding-top: 40px;
    width: 90%;
    max-width: 1000px;
}

.gs-podcast #main-content .container::before {
    display: none;            /* Divi's sidebar divider rule */
}

/* NOTE: the archive page's full-bleed treatment (unwrapping #left-area, hiding
   the duplicate template title) lives in gs-header.css under .gs-builder, since
   every Divi layout on this site needs it — not just the podcast one. */

/* ── Typography ───────────────────────────────────────────────────────── */
.gs-podcast #left-area,
.gs-podcast .entry-content,
.gs-podcast .entry-content p,
.gs-podcast .entry-content li {
    color: var(--gs-grey);
    font-family: var(--gs-mono);
    font-size: 16px;
    line-height: 1.8;
}

.gs-podcast .entry-title,
.gs-podcast h1.entry-title,
.gs-podcast .main_title {
    color: #ffffff;
    font-family: var(--gs-mono);
    font-size: 38px;
    line-height: 1.3;
    letter-spacing: 0.5px;
    padding-bottom: 18px;
}

.gs-podcast .entry-content h2 {
    color: var(--gs-orange);
    font-family: var(--gs-mono);
    font-size: 26px;
    line-height: 1.4;
    padding: 28px 0 12px;
    border-bottom: 1px solid rgba(231, 127, 36, 0.25);
    margin-bottom: 14px;
}

.gs-podcast .entry-content h3 {
    color: var(--gs-teal);
    font-family: var(--gs-mono);
    font-size: 20px;
    line-height: 1.5;
    padding: 20px 0 8px;
}

.gs-podcast .entry-content strong {
    color: #ffffff;
}

.gs-podcast .entry-content a {
    color: var(--gs-teal);
    text-decoration: none;
    border-bottom: 1px solid rgba(46, 196, 182, 0.4);
    transition: color .15s ease, border-color .15s ease;
}

.gs-podcast .entry-content a:hover {
    color: var(--gs-orange);
    border-bottom-color: var(--gs-orange);
}

.gs-podcast .entry-content code {
    background: var(--gs-navy-dark);
    color: var(--gs-orange);
    font-family: var(--gs-mono);
    font-size: .92em;
    padding: 2px 6px;
    border-radius: 4px;
}

.gs-podcast .entry-content pre {
    background: var(--gs-navy-dark);
    border: 1px solid var(--gs-grey-muted);
    border-radius: 8px;
    padding: 16px 18px;
    overflow-x: auto;
}

.gs-podcast .entry-content hr,
.gs-podcast .wp-block-separator {
    border: 0;
    border-top: 1px solid var(--gs-grey-muted);
    margin: 34px 0;
    background: none;
}

/* Show-note source lines — present on every story, so they must recede. */
.gs-podcast .entry-content .source-attribution {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--gs-grey-muted);
    border-left: 2px solid var(--gs-grey-muted);
    padding-left: 12px;
    margin: -4px 0 22px;
}

.gs-podcast .entry-content .source-attribution a {
    color: #7d8fb3;
    border-bottom-color: transparent;
}

.gs-podcast .entry-content .source-attribution a:hover {
    color: var(--gs-teal);
}

/* ── Episode body card ────────────────────────────────────────────────── */
.gs-podcast.single-podcast .entry-content {
    background: linear-gradient(145deg, var(--gs-navy-mid), var(--gs-navy));
    border: 1px solid rgba(231, 127, 36, 0.28);
    border-radius: 12px;
    padding: 30px 34px 34px;
    margin-top: 22px;
}

.gs-podcast .et_post_meta_wrapper {
    padding-top: 10px;
}

/* The featured image is the 2560px podcast cover. Full-bleed it pushes the
   player and the show notes below the fold, so treat it as artwork. */
.gs-podcast.single-podcast .et_post_meta_wrapper > img,
.gs-podcast.single-podcast .et_post_meta_wrapper > a > img {
    display: block;
    width: 260px;
    max-width: 55vw;
    height: auto;
    margin: 0 auto 8px;
    border-radius: 10px;
    border: 1px solid var(--gs-grey-muted);
}

/* ── SSP player ───────────────────────────────────────────────────────── */
.gs-podcast .castos-player {
    background: var(--gs-navy-dark) !important;
    border: 1px solid var(--gs-teal);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 26px;
}

.gs-podcast .castos-player .player__podcast-title,
.gs-podcast .castos-player .player__episode-title {
    font-family: var(--gs-mono);
}

.gs-podcast .castos-player .player__episode-title {
    color: #ffffff;
}

.gs-podcast .castos-player .player__podcast-title {
    color: var(--gs-orange);
}

.gs-podcast .castos-player .progress__filled {
    background-color: var(--gs-orange) !important;
}

.gs-podcast .castos-player .ssp-progress {
    background-color: var(--gs-grey-muted) !important;
}

.gs-podcast .castos-player .ssp-timer,
.gs-podcast .castos-player .ssp-duration {
    color: var(--gs-grey);
    font-family: var(--gs-mono);
}

/* ── Archive: episode list ────────────────────────────────────────────── */
.gs-podcast .ssp-podcast-list__articles > article {
    background: linear-gradient(145deg, var(--gs-navy-mid), var(--gs-navy));
    border: 1px solid rgba(231, 127, 36, 0.28);
    border-radius: 12px;
    padding: 26px 28px;
    margin-bottom: 26px;
}

.gs-podcast .ssp-episode-title,
.gs-podcast .ssp-podcast-list h2 {
    font-family: var(--gs-mono);
    padding-bottom: 12px;
    line-height: 1.35;
}

.gs-podcast .ssp-episode-title a,
.gs-podcast .ssp-podcast-list h2 a {
    color: #ffffff;
    border-bottom: none;
    text-decoration: none;
}

.gs-podcast .ssp-episode-title a:hover,
.gs-podcast .ssp-podcast-list h2 a:hover {
    color: var(--gs-orange);
}

.gs-podcast .podcast-content p {
    color: var(--gs-grey);
}

/* SSP renders the raw oEmbed markup into the "Embed" share panel; it is not
   content and looks like a rendering bug when it spills into the card. */
.gs-podcast .podcast-content .wp-embedded-content,
.gs-podcast .podcast-content iframe.wp-embedded-content {
    display: none;
}

.gs-podcast .ssp-episode-meta,
.gs-podcast .podcast-meta {
    color: var(--gs-grey-muted);
    font-size: 13.5px;
}

/* ── Pagination / nav links ───────────────────────────────────────────── */
.gs-podcast .pagination a,
.gs-podcast .nav-links a,
.gs-podcast .post-nav a {
    color: var(--gs-teal);
}

.gs-podcast .pagination a:hover,
.gs-podcast .nav-links a:hover,
.gs-podcast .post-nav a:hover {
    color: var(--gs-orange);
}

/* ── Comments ─────────────────────────────────────────────────────────── */
.gs-podcast #comment-wrap,
.gs-podcast .comment-form,
.gs-podcast #reply-title {
    color: var(--gs-grey);
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.gs-podcast #main-footer {
    background-color: var(--gs-navy-dark);
    border-top: 1px solid var(--gs-grey-muted);
}

.gs-podcast #footer-widgets .footer-widget h4,
.gs-podcast #footer-widgets .footer-widget {
    color: var(--gs-grey);
}

.gs-podcast #footer-widgets .footer-widget h4 {
    color: var(--gs-orange);
    font-family: var(--gs-mono);
}

.gs-podcast #footer-widgets .footer-widget a {
    color: var(--gs-teal);
}

.gs-podcast #footer-bottom {
    background-color: var(--gs-navy);
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .gs-podcast .entry-title,
    .gs-podcast h1.entry-title,
    .gs-podcast .main_title {
        font-size: 27px;
    }

    .gs-podcast .entry-content h2 {
        font-size: 21px;
    }

    .gs-podcast.single-podcast .entry-content,
    .gs-podcast .ssp-podcast-list__articles > article {
        padding: 20px 18px 24px;
    }
}