/*!
 * brand.css — site-wide colour corrections on top of the vendored theme.
 *
 * The theme's default button (.vs-btn, and the style5/style7 variants that inherit
 * it) is near-black (--title-color). The brand is blue: primary buttons use
 * --theme-color and the hover fill (the theme's ::before shape, driven by --bg-hover)
 * uses the darker --secondary-color, on every variant.
 */
.vs-btn {
  background-color: var(--theme-color);
  --bg-hover: var(--secondary-color);
}
.vs-btn.style6:hover,
.vs-btn.style7:hover {
  --bg-hover: var(--secondary-color);
}
.vs-btn.style7 {
  background-color: var(--theme-color);
}

/* The floating header (header-layout3) is absolutely positioned over the page on wide
   viewports (the theme makes it static below 1500px). The home hero reserves room for it
   with its own top padding; every other page gets the room here. 170px = 40px offset +
   the ~95px menu bar + the social pill hanging under it. */
@media (min-width: 1501px) {
  .main--under-header {
    padding-top: 170px;
  }
}
/* Inner pages: content starts right under the header (the shell's default 60px top
   padding is for pages that have nothing floating above them). */
.main--under-header .page-card-section,
.main--under-header .episodes-page {
  padding-top: 24px;
}

/* Brand marks with no Font Awesome glyph (Apple Podcasts) are inline SVGs in the social
   pills; size them like the icon glyphs next to them. */
.social-brand-img {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}
.footer-social .social-brand-img {
  width: 18px;
  height: 18px;
}

/* Floating header chrome: lift the white menu bar off the page with a soft shadow and
   rounded corners (bottom-left stays square — the social pill hangs flush under it),
   and put the social pill in brand blue instead of the theme's leftover teal. */
.header-layout3 .menu-area {
  border-radius: 14px 14px 14px 0;
  border: 1px solid rgba(5, 24, 33, 0.06);
  box-shadow: 0 12px 34px rgba(5, 24, 33, 0.10), 0 2px 6px rgba(5, 24, 33, 0.04);
}
.header-layout3 .menu-bottom {
  background-color: var(--secondary-color);
  background-image: linear-gradient(to left, var(--theme-color), var(--secondary-color));
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 24px rgba(0, 92, 153, 0.28);
}
.header-layout3 .header-social a {
  color: var(--white-color);
  opacity: 0.9;
}
.header-layout3 .header-social a:hover {
  color: var(--white-color);
  opacity: 1;
}
@media (max-width: 1500px) {
  .header-layout3 .menu-area {
    border-radius: 0;
    border: 0;
    box-shadow: 0 6px 24px rgba(5, 24, 33, 0.08);
    position: relative;
    z-index: 2;
  }
  .header-layout3 .menu-bottom {
    border-radius: 0;
    box-shadow: none;
  }
}

/* Search box inside the off-canvas mobile menu (the full-screen popup is desktop-only). */
.vs-menu-wrapper .mobile-search {
  display: flex;
  gap: 8px;
  margin: 20px 20px 10px;
}
.vs-menu-wrapper .mobile-search input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 15px;
  color: var(--title-color);
  background-color: var(--white-color);
}
.vs-menu-wrapper .mobile-search input:focus {
  outline: none;
  border-color: var(--theme-color);
}
.vs-menu-wrapper .mobile-search button {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background-color: var(--theme-color);
  color: var(--white-color);
  font-size: 16px;
}

/* Platform badge strip (home page + episode list): icon above label on the blue band. */
.platform-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 36px;
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 15px;
  opacity: 0.9;
  transition: all ease 0.3s;
}
.platform-badge i {
  font-size: 52px;
}
.platform-badge-img {
  width: 52px;
  height: 52px;
}
.platform-badge:hover {
  color: var(--white-color);
  opacity: 1;
  transform: translateY(-4px);
}

/* Brand logo (wordmark + tagline): render by height so the tagline stays legible. */
.header-logo img,
.mobile-logo img,
.footer-logo:not(.footer-logo-stacked) img {
  height: 56px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 767px) {
  .header-logo img {
    height: 44px;
  }
}

/* Home: featured workshop heading — episode titles are long, so keep this well under the
   theme's 60px section title. */
.featured-workshop-title {
  font-size: 30px;
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: 18px;
}
@media (max-width: 767px) {
  .featured-workshop-title {
    font-size: 24px;
  }
}

/* ---------------------------------------------------------------------------
   Mobile header (below the lg breakpoint, where the hamburger replaces the menu):
   no social bar, the bar holds only the logo and the menu button, and the
   off-canvas menu becomes a full-screen, right-aligned RTL panel.
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* 1. blue social pill above the header */
  .header-layout3 .menu-bottom {
    display: none;
  }
  /* 2. header row: logo + menu button only */
  .header-layout3 .header-btn {
    display: none;
  }
  .header-layout3 .vs-menu-toggle {
    margin-inline-start: 0;
  }
  .header-layout3 .menu-area {
    border-radius: 0;
  }
  /* 3. full-screen menu panel */
  .vs-menu-wrapper .vs-menu-area {
    max-width: 100%;
    border-right: 0;
    border-left: 0;
    direction: rtl;
    text-align: right;
    overflow-y: auto;
  }
  .vs-menu-wrapper .vs-menu-toggle {
    left: 14px;
    top: 14px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    border-radius: 50%;
  }
  .vs-menu-wrapper .mobile-logo {
    padding-top: 22px;
  }
  .vs-menu-wrapper .mobile-search {
    margin: 22px 24px 6px;
  }
  .vs-mobile-menu {
    direction: rtl;
    text-align: right;
    max-height: none;
    margin-top: 18px;
    overflow: visible;
  }
  .vs-mobile-menu > ul {
    padding: 0 24px;
  }
  .vs-mobile-menu ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    font-size: 17px;
    line-height: 1.4;
    text-align: right;
  }
  /* the theme's LTR chevron before every label — the menu already carries its own icons */
  .vs-mobile-menu ul li a:before {
    display: none;
  }
  .vs-mobile-menu ul li a i {
    width: 22px;
    text-align: center;
    color: var(--theme-color);
    font-size: 16px;
    margin: 0;
  }
  .vs-mobile-menu ul li.active > a {
    color: var(--theme-color);
  }
}

/* Home: the two buttons under the featured workshop keep a gap when they wrap on phones. */
.featured-workshop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  margin-top: 8px;
}
.featured-workshop-actions .vs-btn {
  margin: 0;
}
@media (max-width: 575px) {
  .featured-workshop-actions .vs-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* Home, latest podcasts: no play button on the card, so the content no longer needs to be
   pulled up over the image edge (the theme reserved that overlap for the button). */
.podcast-style3 .podcast-content {
  margin-top: 22px;
}