/* -----------------------------------------
       Episode design tokens / reusable variables
       ----------------------------------------- */
    #ignite-episode {
      --ignite-blue: #184783;
      --border: #d6dde6;
      --muted: #6b7280;
      --card: #ffffff;
      --btn-black: #111111;
    }

    /* -----------------------------------------
       Shared card style
       Used for main content and sidebar boxes
       ----------------------------------------- */
    #ignite-episode .ep-card {
      background: var(--card);
      border-radius: 18px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      padding: 18px;
    }

    /* -----------------------------------------
       Small top label / eyebrow text
       ----------------------------------------- */
    #ignite-episode .ep-kicker {
      color: var(--ignite-blue);
      font-weight: 900;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      font-size: 12px;
      margin-bottom: 8px;
    }

    /* -----------------------------------------
       Main guest name heading (H1)
       ----------------------------------------- */
    #ignite-episode .ep-title {
      margin: 0 0 10px;
      color: #111;
      font-weight: 800;
      font-size: 95px;
      line-height: 1.15;
    }

    @media (max-width: 992px) {
      #ignite-episode .ep-title {
        font-size: 64px;
      }
    }

    @media (max-width: 576px) {
      #ignite-episode .ep-title {
        font-size: 48px;
      }
    }

    /* -----------------------------------------
       Episode subtitle / episode title (H2)
       ----------------------------------------- */
    .ep-subtitle {
      margin: 12px 0 0;
      font-size: clamp(2rem, 3.2vw, 2.8rem);
      line-height: 1.25;
      font-weight: 700;
    }

    /* -----------------------------------------
       Guest / host meta information
       ----------------------------------------- */
    #ignite-episode .ep-meta {
	  color: var(--muted);
	  font-size: 18px;
	  margin-bottom: 18px;
	  line-height: 1.5;
	}

    /* -----------------------------------------
       Section headings inside the episode page
       ----------------------------------------- */
    #ignite-episode .ep-section-title {
      font-size: 35px;
      font-weight: 900;
      margin: 10px 0 10px;
      color: #111;
    }



    /* -----------------------------------------
       Key takeaways list styling
       ----------------------------------------- */
    #ignite-episode .ep-list {
      margin: 0;
      padding-left: 18px;
      color: #111;
    }

    #ignite-episode .ep-list li {
      margin: 0 0 8px;
      line-height: 1.5;
      padding: 12px 14px;
      border-radius: 12px;
      list-style-position: outside;
    }

    #ignite-episode .ep-list li:nth-child(odd) {
      background: rgba(24, 71, 131, 0.05);
    }

    #ignite-episode .ep-list li:nth-child(even) {
      background: #ffffff;
    }

    /* -----------------------------------------
       Quote block styling
       Used if pull quotes are displayed on page
       ----------------------------------------- */
    #ignite-episode .ep-quote {
      border-left: 4px solid var(--ignite-blue);
      padding: 10px 12px;
      background: rgba(24, 71, 131, 0.04);
      border-radius: 12px;
      margin: 10px 0;
    }

    #ignite-episode .ep-quote p {
      margin: 0;
      font-size: 14px;
      line-height: 1.45;
      color: #111;
    }

    #ignite-episode .ep-quote .who {
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    /* -----------------------------------------
       Shared action/button row
       ----------------------------------------- */
    #ignite-episode .ep-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
      align-items: center;
    }

    /* -----------------------------------------
       Shared button styles
       ----------------------------------------- */
    #ignite-episode .ep-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 12px 14px;
      background: #fff;
      cursor: pointer;
      font-size: 14px;
      color: #111;
      text-decoration: none;
      white-space: nowrap;
      transition: transform 0.05s ease, opacity 0.15s ease;
    }

    #ignite-episode .ep-btn:active {
      transform: translateY(1px);
    }

    #ignite-episode .ep-btn.primary {
      background: var(--ignite-blue);
      border-color: var(--ignite-blue);
      color: #fff;
    }

    #ignite-episode .ep-btn.black {
      background: var(--btn-black);
      border-color: var(--btn-black);
      color: #fff;
    }

    /* -----------------------------------------
       Small helper text
       ----------------------------------------- */
    #ignite-episode .ep-small {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
      margin-top: 10px;
    }

    /* -----------------------------------------
       Transcript details / expandable blocks
       ----------------------------------------- */
    #ignite-episode details {
	  border: 3px solid #10497e;
	  border-radius: 14px;
	  padding: 12px 14px;
	  background: #fff;
	}

    #ignite-episode details summary {
      cursor: pointer;
      font-weight: 900;
      color: #111;
      outline: none;
    }

    #ignite-episode .transcript {
      margin-top: 12px;
      font-size: 13px;
      line-height: 1.55;
      color: #111;
      white-space: pre-wrap;
    }

    /* -----------------------------------------
       Sidebar boxed section
       ----------------------------------------- */
    #ignite-episode .sidebox {
      border: 1px dashed rgba(24, 71, 131, 0.35);
      background: rgba(24, 71, 131, 0.04);
      border-radius: 18px;
      padding: 16px;
    }

    #ignite-episode .sidebox h4 {
      margin: 0 0 8px;
      font-weight: 900;
      color: var(--ignite-blue);
    }

    /* -----------------------------------------
       Reusable toast / copied-message styling
       ----------------------------------------- */
    #ignite-episode .toast {
      display: none;
      font-size: 12px;
      color: #184783;
      font-weight: 800;
      background: rgba(24, 71, 131, 0.1);
      border: 1px solid rgba(24, 71, 131, 0.25);
      padding: 8px 10px;
      border-radius: 12px;
      width: fit-content;
      max-width: 100%;
    }

    #linkToastAnchor,
    #shareToastAnchor {
      position: relative;
    }

    #linkToast,
    #shareToast {
      position: absolute;
      top: 6px;
      left: 0;
      z-index: 5;
    }

    /* -----------------------------------------
       Copy page link button copied state
       ----------------------------------------- */
    #ignite-episode #copyLinkBtn.copied {
      background: #184783;
      border-color: #184783;
      color: #ffffff;
    }

    #ignite-episode #copyLinkBtn {
      transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.05s ease,
        opacity 0.15s ease;
    }

    /* -----------------------------------------
       Embedded podcast player wrapper
       ----------------------------------------- */
    #ignite-episode .ep-player-wrap {
      margin-top: 4px;
      margin-bottom: 8px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: #f8fafc;
    }