/* =========================================================
   Voices of OKC | Typography + title system patch
   Paste BELOW your current CSS
   ========================================================= */

/* ---------- Core type hierarchy ---------- */

h1,
.site-title,
.podcast-title,
.page-title,
.main-header h1,
.page-header h1,
.hero h1,
.banner h1 {
  font-family: 'Sora', Arial, sans-serif !important;
  font-size: clamp(2.7rem, 4.4vw, 4.6rem) !important;
  line-height: 0.98 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  text-transform: uppercase !important;
}

h2,
.post-title,
.entry-title,
article h2,
article h3,
.post h2,
.post h3,
.entry h2,
.entry h3,
.card h2,
.card h3,
.episode-item h2,
.episode-item h3,
.blog-item h2,
.blog-item h3,
.podcast-item h2,
.podcast-item h3 {
  font-family: 'Sora', Arial, sans-serif !important;
  font-size: clamp(1.25rem, 1.8vw, 1.8rem) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

h3,
h4,
.widget-title,
.module-title,
.sidebar h3,
.section-title {
  font-family: 'Sora', Arial, sans-serif !important;
  font-size: clamp(0.88rem, 1vw, 1rem) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

p,
li,
.entry-content,
.post-content,
.description,
.site-description,
article p,
.post p,
.entry p,
.card p,
.episode-item p,
.blog-item p,
.podcast-item p {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 0.98rem !important;
  line-height: 1.72 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

small,
.meta,
.post-meta,
.entry-meta,
.byline,
.date,
.time,
.episode-date,
.publish-date {
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 0.72rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ---------- Exact show title styling ----------
   This forces the visible show title to always read:
   VOICES of OKC
*/

.site-title,
.podcast-title,
.page-title,
.main-header .site-title,
.main-header .podcast-title,
.page-header .site-title,
.page-header .podcast-title,
.hero .site-title,
.hero .podcast-title,
.banner .site-title,
.banner .podcast-title {
  position: relative !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
}

.site-title::after,
.podcast-title::after,
.page-title::after,
.main-header .site-title::after,
.main-header .podcast-title::after,
.page-header .site-title::after,
.page-header .podcast-title::after,
.hero .site-title::after,
.hero .podcast-title::after,
.banner .site-title::after,
.banner .podcast-title::after {
  content: "VOICES of OKC";
  display: block;
  font-family: 'Sora', Arial, sans-serif !important;
  font-size: clamp(2.7rem, 4.4vw, 4.6rem) !important;
  line-height: 0.98 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: #ffffff !important;
  text-transform: none !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.14) !important;
}

/* ---------- If title appears on white backgrounds instead of hero ---------- */
.site-content .site-title::after,
.site-content .podcast-title::after,
.main-content .site-title::after,
.main-content .podcast-title::after,
.content-area .site-title::after,
.content-area .podcast-title::after {
  color: #0F2A44 !important;
  text-shadow: none !important;
}

/* ---------- Episode title balance ----------
   All caps can get loud fast, so tighten spacing and width.
*/
.post-title,
.entry-title,
article h2,
article h3,
.post h2,
.post h3,
.entry h2,
.entry h3,
.card h2,
.card h3,
.episode-item h2,
.episode-item h3,
.blog-item h2,
.blog-item h3,
.podcast-item h2,
.podcast-item h3 {
  max-width: 20ch !important;
  margin-bottom: 12px !important;
}

/* ---------- Sidebar labels and utility text ---------- */
.sidebar .widget-title,
.sidebar h3,
.module-title,
.section-title,
.subscribe-label,
.top-subscribe,
.mini-subscribe,
[class*="subscribe-label"] {
  font-family: 'Sora', Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ---------- Buttons keep consistent hierarchy ---------- */
button,
.btn,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.read-more a,
.subscribe-btn,
a[role="button"],
.share-btn,
.share-button,
.follow-btn,
.follow-button {
  font-family: 'Sora', Arial, sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ---------- Mobile adjustments ---------- */
@media (max-width: 768px) {
  h1,
  .site-title,
  .podcast-title,
  .page-title,
  .main-header h1,
  .page-header h1,
  .hero h1,
  .banner h1 {
    font-size: clamp(2.1rem, 8vw, 3rem) !important;
    letter-spacing: -0.03em !important;
  }

  .site-title::after,
  .podcast-title::after,
  .page-title::after,
  .main-header .site-title::after,
  .main-header .podcast-title::after,
  .page-header .site-title::after,
  .page-header .podcast-title::after,
  .hero .site-title::after,
  .hero .podcast-title::after,
  .banner .site-title::after,
  .banner .podcast-title::after {
    font-size: clamp(2.1rem, 8vw, 3rem) !important;
    letter-spacing: -0.03em !important;
  }

  h2,
  .post-title,
  .entry-title,
  article h2,
  article h3,
  .episode-item h2,
  .episode-item h3 {
    font-size: clamp(1.08rem, 4.4vw, 1.35rem) !important;
  }
}