/*
Theme Name:   Salient Child
Theme URI:    https://getin.mx
Description:  Child theme for Salient. All customizations belong here so that
              updating the parent theme never overwrites them.
Author:       Getin
Template:     salient
Version:      1.0.0
Text Domain:  salient-child
*/

/*
 * The parent theme registers and enqueues this file automatically through
 * salient_child_theme_enqueue_stylesheet() (nectar/helpers/enqueue-styles.php),
 * so it must NOT be enqueued again from functions.php.
 *
 * Add custom CSS below.
 */

/* --- Podcast --------------------------------------------------------------
 * Only what the theme does not already provide: the player needs to fill its
 * column, and the two lists need to read as lists rather than as body copy.
 */

.podcast-episode__player {
  margin: 0 0 2.5em;
}

.podcast-episode__player iframe,
.podcast-episode__player audio {
  display: block;
  width: 100%;
  border: 0;
}

.podcast-episode__heading {
  margin-top: 1.5em;
}

.podcast-episode__points,
.podcast-episode__resources {
  margin: 0 0 2em;
  padding-left: 1.25em;
  list-style: disc;
}

.podcast-episode__points li,
.podcast-episode__resources li {
  margin-bottom: 0.5em;
}

.podcast-episode__header {
  margin: 0 0 2em;
}

.podcast-episode__meta {
  margin: 0 0 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8em;
  opacity: 0.65;
}

.podcast-episode__title {
  margin: 0;
}

/* --- Podcast list ---------------------------------------------------------
 * The layout the agency delivered on the podcast page, driven by the post type
 * instead of written by hand. Sizes are taken from their own blocks: 2vw for
 * the title, 7vw for the number with 70px on tablet and 30px on phone, and a
 * one pixel rule above every row.
 *
 * Selectors are doubled up on purpose. salient-dynamic-styles.css ships
 * `.col h2`, which is a class plus an element and therefore outranks a lone
 * class: without the parent here the title kept its size on desktop and then
 * jumped to Salient's 32px on tablet, ending up larger on the smaller screen.
 */

.podcast-list .podcast-list__item {
  display: flex;
  align-items: center;
  gap: 5%;
  padding: 1.5% 0;
  border-top: 1px solid #000;
  text-decoration: none;
  color: inherit;
}

.podcast-list .podcast-list__item:last-child {
  border-bottom: 1px solid #000;
}

.podcast-list .podcast-list__text {
  flex: 2 1 0;
  min-width: 0;
}

.podcast-list .podcast-list__title {
  margin: 0 0 7px;
  font-size: 2vw;
  font-weight: 500;
  line-height: 1.1;
  color: #000;
}

.podcast-list .podcast-list__meta {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
  opacity: 0.6;
}

.podcast-list .podcast-list__number {
  flex: 1 1 0;
  text-align: right;
  font-size: 7vw;
  font-weight: 500;
  line-height: 1;
  color: #000;
}

/* The green the agency used for emphasis, moved onto the whole row so hovering
 * reads as one target rather than as a link buried in a heading. */
.podcast-list .podcast-list__item:hover .podcast-list__title,
.podcast-list .podcast-list__item:hover .podcast-list__number {
  color: #2cae79;
}

@media only screen and (max-width: 1000px) {
  .podcast-list .podcast-list__title { font-size: 22px; }
  .podcast-list .podcast-list__number { font-size: 70px; }
}

@media only screen and (max-width: 690px) {
  .podcast-list .podcast-list__title { font-size: 18px; }
  .podcast-list .podcast-list__number { font-size: 30px; }
}