/*
Theme Name: RealShows Child
Template: twentytwentyfive
Version: 1.0.0
*/
@font-face{
  font-family:"Lato";
  src:url("/wp-content/uploads/fonts/Lato-Bold.woff2") format("woff2"),
      url("/wp-content/uploads/fonts/Lato-Bold.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

a {
      text-decoration-thickness: 0px !important;
    text-underline-offset: 0;
    text-decoration: none;
}

.share-buttons {
  list-style: none;
  display: flex;
  gap: 12px;
  padding: 0;
  margin: 1rem 0;
}

.share-buttons li {
  display: inline-block;
}

.share-buttons .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #333;
  color: white;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.share-buttons .btn svg {
  width: 20px;
  height: 20px;
  fill: white;
}

.share-buttons .btn:hover {
  transform: scale(1.1);
}

/* Brand colors */
.share-buttons .twitter { background: #1DA1F2; }
.share-buttons .facebook { background: #1877F2; }
.share-buttons .instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.share-buttons .linkedin { background: #0077B5; }

/* ----------------------------
   Episode Hero: Travel-like hero
   ---------------------------- */
.episode-hero-wrapper {
  position: relative;
  overflow: hidden;
  display: block;
  color: #fff;
  margin: 0; /* ensure hero sits at top of the flow */
  background: #000; /* fallback while image loads */
  box-sizing: border-box;
  min-height: 45vh;
}

.wp-block-template-part .has-background-color {
  z-index: 1;
}

/* Ensure full-width background behavior even in constrained layouts */
.episode-hero-wrapper {
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  margin-bottom: 4vh;
}

/* Full-bleed behavior: ensure hero fills the viewport width even when inside
   constrained FSE/template containers. We use transform-based centering to
   avoid horizontal scrollbar issues from negative margins. */
.episode-hero-wrapper {
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  margin-bottom: 4vh;
}

/* Make the core featured-image block act as a full-cover background */
.episode-hero-wrapper .episode-hero__image,
.episode-hero-wrapper .wp-block-post-featured-image {
  position: relative;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.episode-hero-wrapper .episode-hero__image img,
.episode-hero-wrapper .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Overlay sits on top and centered (Travel-like) */
.episode-hero__overlay {
  position: relative; /* sits above the image */
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem 2rem;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  pointer-events: auto;
}

/* Ensure overlay content sits above the hero background */
.episode-hero__overlay,
.episode-hero__title,
.episode-hero__meta,
.episode-hero__buttons {
  position: relative;
  z-index: 8;
}

/* Dark gradient overlay to improve text contrast */
.episode-hero-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:linear-gradient(180deg, rgba(0,0,0,0.65) 65%, rgba(0,0,0,0.65) 65%, rgba(0,0,0,0.65) 65%, rgba(0,0,0,0.55) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Title styling */
.episode-hero__title {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  line-height: 1.05;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

/* Meta line under the title */
.episode-hero__meta {
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  margin-top: .25rem;
}

/* Buttons alignment */
.episode-hero__buttons { z-index: 9; }
.episode-hero__play .wp-block-button__link,
.episode-hero__cta .wp-block-button__link {
  background: #ff3b30; /* bright CTA color */
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* Ensure overlay CTA is keyboard focus-visible */
.episode-hero__play .wp-block-button__link:focus {
  outline: 3px solid rgba(255,255,255,0.18);
  outline-offset: 3px;
}

/* Responsive hero size */
@media (min-width: 768px) {
  .episode-hero-wrapper { min-height: 55vh; }
  .episode-hero__overlay { padding: 4rem 3rem; }
  .episode-hero__title { font-size: 2.4rem; }
}

@media (min-width: 1200px) {
  .episode-hero-wrapper { min-height: 65vh; }
  .episode-hero__title { font-size: 2.6rem; }
  .episode-hero__meta { font-size: 1rem; }
}

/* Episode video anchor area: keep spacing below hero */
.episode-video-anchor { padding: 2rem; max-width:1200px; margin: 0 auto; }

/* Accessibility: ensure wrapper keeps aspect ratio for embeds */
.realshows-vimeo-embed__wrap { position:relative;padding-bottom:56.25%;height:0;overflow:hidden; }
.realshows-vimeo-embed__wrap > div { position:absolute; inset:0; }

/* Small utility: ensure hero does not push content vertically when hovered */
.episode-hero-wrapper img { transition: transform .35s ease; }
.episode-hero-wrapper:hover img { transform: scale(1.02); }

/* If the theme adds extra top-margin to the main/content use this to counter-act for the show pages */
.entry-content, .site-main, main { margin-top: 0 !important; }


/* Ensure no horizontal scrollbar caused by transform centering (defensive) */
html, body { overflow-x: hidden; }

/* Episode hero: full-bleed background image + centered overlay (template classes) */
.episode-hero-wrapper {
  position: relative;
  overflow: hidden;
  min-height: 56vh;
  display: block;
}
.episode-hero__image {
  position: absolute;
  inset: 0;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  z-index: 0;
  transform: translateZ(0);
}
.episode-hero__image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.35));
  z-index: 1;
  pointer-events: none;
}
.episode-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 3rem 1.25rem;
  gap: 0.75rem;
  color: #fff;
}
.episode-hero__title {
  font-size: clamp(1.6rem, 3.8vw, 3.5rem);
  line-height: 1.05;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.episode-hero__meta {
  font-size: 0.95rem;
  opacity: 0.95;
}
.episode-hero__buttons {
  margin-top: 1.25rem;
}
.episode-hero__play .wp-block-button__link {
  padding: 0.75rem 1.25rem;
}

.episode-details-area {
  padding: 0 2rem;
}

.rs-more-episodes__excerpt {
  font-size:1rem;
}

.single-episode .wp-block-post-content p {
    font-size: 1rem;
}

.rs-more-episodes__empty {
font-size:1rem;
}

.rs-section--episodes {
  padding: 4rem 4rem;
}
@media (min-width: 1024px) {
  .episode-hero-wrapper { min-height: 62vh; }
  .episode-hero__title { font-size: 2.2rem; }
}

@media (max-width: 640px) {
  .episode-hero-wrapper {
    min-height: 25vh;
    z-index: 9999 !important;
  }
}

@media (max-width: 480px) {

.rs-card--episode {
    flex-wrap: wrap;
}

.rs-episode-layout__list .rs-card--episode .rs-card__thumb {
    flex: 0 0 254px;
}

    .rs-show-hero__cta {
        font-size: 21px;
    }
}