body {
  color: #eee;
  background: #0a0a0a;

  font-family: 'Nunito Sans', 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.65em;
  font-weight: 500;
}

/* Typography - Brand consistent fonts */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.subtitle,
.section-heading {
  font-family: 'Outfit', 'Work Sans', sans-serif;
  color: white;
}

/* Body text inherits from body, but explicit for clarity */
p,
.content,
.lead {
  font-family: 'Nunito Sans', 'Work Sans', sans-serif;
}

/* Code and monospace text */
code,
pre,
.code,
.monospace {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}

body.light-page {
  color: #222;
  background: #fff;
}

.text-muted {
  color: #aaa;
}

.content-section-a,
.content-section-b {
  background: #0a0a0a;
  color: #ddd;
  border-top: 1px solid #333;
  border-bottom: none;
}

.content-section-b {
  background: #1c1c1c;
}

/*.banner .container .row {*/
/*text-align: center;*/
/*}*/

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: #222;
}

.table.episodes {
  font-size: 15px;

  th {
    border-bottom: 2px solid #aaa;
  }

  tbody > tr > th,
  tbody > tr > td {
    border-top: 1px solid #333;
  }
}

.full-page-content {
  padding: 40px;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  color: #ddd;
  font-size: 16px;
}

.full-page-content .top {
  padding-left: 20px;
}

.show-episode-page.full-page-content {
  max-width: 1500px;
}

.show-episode-page table.kick td,
.show-episode-page table.kick td * {
  vertical-align: top;
}

.full-page-content.edit-show {
  max-width: none;
}

.show-side {
  text-align: center;
}

.guest {
  /*float: left;*/
  display: inline-block;
  text-align: center;
  margin-right: 20px;
  margin-left: 20px;
  /*margin-top: 10px;*/
}

.guests.singular {
  text-align: center;
}

.guests.singular .guest {
  /*padding-left: 60px;*/
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  display: inline-block;
  width: 100%;
}

.guest .guest-name {
  font-size: 12px;
  padding-top: 5px;
  color: white;
}

.guest img.img {
  height: 128px;
  border: 2px solid gray;
}

.guest-and-sponsor-section {
  background-color: #222;
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #444;
  margin-top: 0px;
  margin-bottom: 40px;
}

.main-text .sponsor-header a {
  font-size: 12px;
  color: white;
}

.sponsor-header img {
  height: 125px;
  border: 1px solid gray;
  border-radius: 5px;
  margin: 10px 20px 0px;
  vertical-align: baseline;
}

.guest,
.sponsor-header {
  text-align: center;
  display: inline-block;
}

.guest-row {
  margin-top: 20px;
}

.guest-and-sponsor-area {
  border: 1px solid gray;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #333;
}

.title {
  font-size: 24px;
}

.player {
  /*float: left;*/
  margin-top: 0px;
  text-align: center;
}

/*.player .btn {*/
/*    font-size: 16px;*/
/*    width: 250px;*/
/*    margin-top: 5px;*/
/*}*/

/*.player .btn.first {*/
/*    margin-top: 24px;*/
/*}*/

.show-main .action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.show-main .action-buttons a.btn {
  display: inline-block;
  margin: 0px 3px 10px;
  color: white;
}

.show-main .action-buttons a.btn.btn-default {
  color: black;
}

/* Action button hierarchy on the episode page.
   co-primary   (Deep Dive + Links)    = bright cyan border, fills blue on hover.
   co-subscribe (Subscribe)            = bright red mirror of co-primary.
   utility      (Transcript, Download) = ghost: nearly invisible until hover.
   Spacing is uniform — differentiation is by color/style, not gap size. */
.show-main .action-buttons .button.co-primary-btn {
  background-color: transparent;
  border-color: #888;
  border-color: transparent;
  color: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.show-main .action-buttons .button.co-primary-btn:hover,
.show-main .action-buttons .button.co-primary-btn:focus {
  background-color: #2980b9;
  border-color: #3498db;
  color: #fff;
}

.show-main .action-buttons .button.co-primary-btn span {
  color: #5bc0de;
  transition: color 0.15s ease;
}

.show-main .action-buttons .button.co-primary-btn:hover span,
.show-main .action-buttons .button.co-primary-btn:focus span {
  color: #fff;
}

.show-main .action-buttons .button.co-subscribe-btn {
  background-color: transparent;
  border-color: transparent;
  color: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.show-main .action-buttons .button.co-subscribe-btn:hover,
.show-main .action-buttons .button.co-subscribe-btn:focus {
  background-color: #c0392b;
  border-color: #e74c3c;
  color: #fff;
}

.show-main .action-buttons .button.co-subscribe-btn span {
  color: #ee6b6b;
  transition: color 0.15s ease;
}

.show-main .action-buttons .button.co-subscribe-btn:hover span,
.show-main .action-buttons .button.co-subscribe-btn:focus span {
  color: #fff;
}

.show-main .action-buttons .button.utility-btn {
  background-color: transparent;
  border-color: transparent;
  color: #b5b5b5;
}

.show-main .action-buttons .button.utility-btn:hover,
.show-main .action-buttons .button.utility-btn:focus {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.btn.soundcloud {
  background-color: #ff6b1f;
}

.btn.tx-btn {
  background-color: #4fd5d9;
}

.host-image {
  height: 200px;
  margin-top: 40px;
  margin-bottom: 10px;
}

.host-image-area.about .host-image {
  margin-top: 0px;
}

.host-image-area.about {
  font-size: 18px;
  text-align: left;
}

.host-image-area {
  text-align: left;
  font-size: 24px;
}

.host-image-caption {
  text-align: center;
  display: inline-block;
}

/*.full-page-head {*/
/*margin-top: 51px;*/
/*background-size: cover;*/
/*height: 175px;*/
/*}*/
/*.full-page-head.contact {*/
/*background: url(/static/img/about-banner-short.png) no-repeat center center;*/
/*}*/

/*.contact .header-image {text-align: center;}*/
/*.contact .header-image img {*/
/*width: 700px;*/
/*margin-top: -10px;*/
/*}*/

.contact .contact-side img {
  width: 400px;
  margin-top: 20px;
}

.contact .main-text {
  font-size: 20px;
  text-align: left;
}

.friends .main-text {
  font-size: 20px;
  text-align: left;
}

.friends .twitter {
  font-size: 24px;
  margin-left: 100px;
}

.logo-image {
  height: 40px;
  margin-top: -10px;
}

.main-text a,
.about a,
.episodes a,
a.light-access-link {
  color: #5bc0de;
}

.contact .contact-types {
  /*text-align: center;*/
  font-size: 20px;
  margin-left: 0px;
}

.contact .contact-types a {
  color: #5bc0de;
  display: inline-block;
  /*margin-right: 20px;*/
  padding: 5px;
}

.main-text {
  text-align: left;
}

.large-content-text {
  font-size: 17px;
}

.main-text,
.large-content-text {
  font-weight: 400;
}

.error-msg {
  color: pink;
}

#account-login input,
#account-login textarea {
  color: black;
  width: 500px;
  padding: 5px;
  font-size: 20px;
}

#account-login input,
#account-login button {
  margin-top: 10px;
}

.show-episode-page .download-coming {
  text-align: center;
}

.show-episode-page .guest-bio {
  text-align: left;
  font-weight: 300;
  padding-top: 10px;
  font-size: 12px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.show-episode-page-placement.patreon-section {
  margin-top: 0px;
}

.all-episodes-page .subscribe-buttons {
  background-color: transparent;
  border: none;
  margin-top: 10px;
  margin-bottom: 30px;
  padding-top: 0px;
}

.all-episodes-page h1 {
  text-align: center;
}

.title-area {
  text-align: center;
}

@media (max-width: 800px) {
  .show-episode-page h1 {
    font-size: 28px;
  }

  .show-episode-page .published-date {
    font-size: 13px;
  }
}

@media (max-width: 600px) {
  .show-episode-page h1 {
    font-size: 24px;
  }

  .show-episode-page .published-date {
    font-size: 11px;
  }
}

@media (max-width: 500px) {
  .show-episode-page h1 {
    font-size: 20px;
  }

  .show-episode-page .published-date {
    font-size: 10px;
  }
}

.episode-buttons .btn {
  width: 250px;
  margin-right: auto;
  margin-left: auto;
}

.extras-msg {
  color: white;
  padding-bottom: 10px;
}

.extras-area-show-page {
  text-align: center;
  font-size: inherit;
  margin-top: 20px;
  margin-bottom: 10px;
  /*padding-right: 25px;*/
}

.extras-area-show-page.e2 {
  padding-right: 0px;
}

.extras-area-show-page img {
  width: 252px;
  border: 1px solid #666;
}

.error-content-section {
  text-align: center;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 125px;
  margin-bottom: 150px;
}

.error-content-section img {
  height: 450px;
}

.patreon-section {
  font-weight: 300;
  line-height: 2em;
  width: 490px;
  /*text-align: center;*/
  margin: 50px auto 0px;
}

.patreon-section .text {
  margin-left: 0px;
}

.full-page-content.comments {
  padding-top: 5px;
  margin-top: 0px;
}

.transcript-main {
  line-height: 2.2em;
}

.transcript-main p {
  padding: 10px;
  padding-bottom: 20px;
  font-size: 20px;
}

.active-transcript-segment {
  background-color: lightblue;
  color: black;
}

.transcript-episode-page {
  margin-top: 50px;
}

.transcript-episode-page .transcript-sponsor {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.transcript-episode-page audio {
  width: 100%;
  margin-top: 20px;
}

.transcript-episode-page .filter-section {
  display: block;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

#transcript-player-top {
  background-color: black;
  position: fixed;
  top: 49px;
  width: 100%;
  z-index: 1000;
  padding-left: 0px;
  padding-right: 0px;
  line-height: 1;
  border-bottom: 2px solid #333;
}

#transcript-player-top #tx-global-message {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  display: block;
}

#transcript-player-top #tx-global-message a {
  color: white;
}

#tx-global-message .tx-s-name {
  font-weight: bold;
  color: #2aabd2;
}

#tx-global-message .tx-s-msg {
  color: yellow;
}

#transcript-player-top audio {
  width: 100%;
  /*height: 40px;*/
  background-color: white;
}

.transcript-actions {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

.highlight {
  background-color: #ff8;
  color: black;
}

#filter-msg {
  color: #777;
  font-size: 14px;
  padding: 20px;
  padding-bottom: 0px;
  text-align: center;
}

.fa-heart {
  color: red;
}

footer {
  margin-top: 40px;
  font-weight: normal;
}

.copyright,
.made-with-love {
  line-height: 1.5em;
  letter-spacing: 2px;
}

.published-date {
  font-weight: 300;
}

.recorded-date {
  color: #999;
  font-weight: 300;
}

#global-livestream-message {
  display: block;
  text-align: center;
  padding: 8px;
  background-color: #8c1717;
  color: #ffffff;
  margin-top: 50px;
  margin-bottom: 0px;
  font-weight: normal;
  font-size: 24px;
  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 1.2px;
}

.page-home #global-livestream-message {
  margin-top: 0px;
}

#global-livestream-message div {
  display: inline-block;
  vertical-align: middle;
}

#global-livestream-message img {
  height: 100px;
  border-radius: 5px;
  vertical-align: middle;
}

#global-sponsor-message {
  display: block;
  text-align: center;
  padding: 8px;
  background-color: #333;
  color: #ffffff;
  margin-top: 50px;
  margin-bottom: -50px;
  font-size: 16px;
  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 2px;
  position: relative;
  z-index: 10;
}

#global-sponsor-message #name_text {
  color: white;
}

.rollbar_orange {
  color: #f7941c;
}

.rollbar_green {
  color: #bfd730;
}

.rollbar_blue {
  color: #02b9d9;
}

#global-sponsor-message .mono {
  font-family: monospace;
}

#global-sponsor-message .strong {
  font-weight: bold;
}

#second-slot {
  margin-top: 1em;
}

.extras-area-show-page img {
  border-radius: 6px;
}

.course-img {
  max-width: 350px;
  text-align: center;
  display: inline-block;
  padding: 8px;
  padding-top: 20px;
  font-size: 12px;
}

.course-img img {
  border-radius: 5px;
}

.course-img a:hover {
  text-decoration: none;
}

.course-img img.sm {
  width: 135px;
}

.episodes .date-text {
  white-space: nowrap;
}

.github-link a {
  /*color: white;*/
  font-size: 24px;
}

.well {
  background-color: #444;
  border: #353535;
}

.navbar-brand.image {
  vertical-align: middle;
}

.navbar-brand.name {
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 1.1px;
}

.nav > li > a {
  font-size: 16px;
  padding-left: 10px;
  padding-right: 10px;
}

.logo-key {
  color: #fffd82;
}

.logo-operator {
  color: #fff;
}

.logo-var {
  color: #fff;
}

/* ************ SEARCH ************ */
.search_page input {
  display: inline-block;
  width: 350px;
  font-weight: bold;
  margin-right: 20px;
}

.search_page h1,
.search_page h2 {
  text-align: center;
}

.search_page form {
  text-align: center;
  margin-top: 20px;
}

.search-results-summary {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 10px;
}

.search-result {
  margin-bottom: 48px;
}

.search-result .search-icon img {
  width: 64px;
  height: 64px;
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
}

.search-result .e_title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.search-result .e_title a {
  color: #fffd82;
}

.search-result .e_date {
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: #777;
}

.search-results-summary {
  margin-bottom: 18px;
}

.search-result .e_desc {
  line-height: 1.5;
}

.clearfix {
  clear: both;
}

/* ******** EPISODE PLAYER ********** */

.tp-player {
  --tp-player-fg: #e8e8e8;
  --tp-player-dim: #888;
  --tp-player-caption: #d9d9d9;
  --tp-player-accent: #62b245;
  --tp-player-accent-soft: rgba(98, 178, 69, 0.25);
  --tp-player-track: #3a3a3a;
  --tp-player-buffer: #4a4a4a;

  width: 100%;
  color: var(--tp-player-fg);
}

.tp-player audio[controls] {
  display: block;
  width: 100%;
}

html.js .tp-player audio[controls] {
  display: none;
}

html:not(.js) .tp-player__ui,
html:not(.js) .tp-player__caption {
  display: none;
}

.tp-player__ui {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.tp-player__btn {
  background: transparent;
  border: 0;
  color: var(--tp-player-fg);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.tp-player__btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.tp-player__btn:focus-visible {
  outline: 2px solid var(--tp-player-accent);
  outline-offset: 2px;
}

.tp-player__btn--play {
  width: 48px;
  height: 48px;
  background-color: var(--tp-player-accent);
  color: #fff;
  font-size: 1.25rem;
}

.tp-player__btn--play:hover {
  background-color: var(--tp-player-accent);
  transform: scale(1.05);
}

.tp-player__btn--play .tp-player__icon-pause {
  display: none;
}

.tp-player.is-playing .tp-player__btn--play .tp-player__icon-play {
  display: none;
}

.tp-player.is-playing .tp-player__btn--play .tp-player__icon-pause {
  display: inline-block;
}

.tp-player__btn--back,
.tp-player__btn--fwd {
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
  padding: 2px;
}

.tp-player__btn--back,
.tp-player__btn--fwd,
.tp-player__btn--speed {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: background-color 150ms ease,
              color 150ms ease,
              opacity 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tp-player.has-started .tp-player__btn--back,
.tp-player.has-started .tp-player__btn--fwd,
.tp-player.has-started .tp-player__btn--speed {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.tp-player.has-started .tp-player__btn--back  { transition-delay: 0ms; }
.tp-player.has-started .tp-player__btn--fwd   { transition-delay: 90ms; }
.tp-player.has-started .tp-player__btn--speed { transition-delay: 180ms; }

.tp-player__btn--speed {
  min-width: 52px;
  height: 32px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.06);
  font-weight: 600;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  padding: 0 12px;
}

.tp-player__btn--speed:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.tp-player__time {
  color: var(--tp-player-dim);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  min-width: 3.5em;
  text-align: center;
}

.tp-player__scrub {
  position: relative;
  height: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  touch-action: none;
  flex: 1;
  min-width: 0;
}

.tp-player__scrub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--tp-player-track);
  border-radius: 2px;
}

.tp-player__scrub-buffer,
.tp-player__scrub-fill {
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
}

.tp-player__scrub-buffer {
  width: 0%;
  background-color: var(--tp-player-buffer);
}

.tp-player__scrub-fill {
  width: 0%;
  background-color: var(--tp-player-accent);
}

.tp-player__scrub-thumb {
  position: absolute;
  left: 0%;
  top: 50%;
  width: 14px;
  height: 14px;
  background-color: var(--tp-player-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 150ms ease;
  pointer-events: none;
}

.tp-player__scrub:hover .tp-player__scrub-thumb,
.tp-player__scrub:focus-visible .tp-player__scrub-thumb {
  transform: translate(-50%, -50%) scale(1);
}

.tp-player__scrub:focus-visible {
  outline: 2px solid var(--tp-player-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.tp-player__sub-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  max-height: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  transition: max-height 250ms ease, min-height 250ms ease, padding 250ms ease;
}

.tp-player.has-started .tp-player__sub-row {
  max-height: 4.4em;
  min-height: 3.4em;
  padding: 4px 0 8px;
}

.tp-player__skip-controls {
  grid-column: 1;
  justify-self: start;
  width: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tp-player__caption {
  grid-column: 2;
  color: var(--tp-player-caption);
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  opacity: 0;
  transition: opacity 200ms ease;
}

.tp-player__caption.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tp-player__caption,
  .tp-player__scrub-thumb,
  .tp-player__btn,
  .tp-player__btn--play {
    transition: none;
  }

  .tp-player__btn--back,
  .tp-player__btn--fwd,
  .tp-player__btn--speed {
    transition: none;
  }
}

@media (max-width: 600px) {
  .tp-player__ui {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "play scrub speed"
      "cur  dur   dur";
    gap: 8px 10px;
    padding: 8px 0;
  }

  .tp-player__btn--play  { grid-area: play; }
  .tp-player__scrub      { grid-area: scrub; }
  .tp-player__btn--speed { grid-area: speed; }
  .tp-player__time--cur  { grid-area: cur; text-align: left; }
  .tp-player__time--dur  { grid-area: dur; text-align: right; }
}

.become-a-friend {
  text-align: center;
}

/* ******** SUBSCRIBE FOOTER ********** */
#subscribe-area {
  min-height: 200px;
  width: 100%;
  color: #444;
  background: white;

  position: fixed;
  bottom: 0px;
  text-align: center;

  display: none;
  z-index: 10000;
}

#subscribe-area #cta {
  margin-top: 25px;
}

#cta .main-cta {
  padding-top: 10px;
  font-size: 24px;
  color: black;
}

#cta .secondary-cta {
  padding-top: 0px;
  font-size: 18px;
  padding-bottom: 10px;
}

#subscribe-area .btn.btn-primary {
  background-color: #444;
  border-color: #555;
  margin-top: -1px;
}

#subscribe-area form > * {
  margin-top: 5px;
  margin-bottom: 5px;
}

#subscribe-area a#closer {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #999;
  font-weight: lighter;
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 24px;
}

#subscribe-area input {
  text-align: center;
}

/* ************************************ */

#comment-button {
  width: 80%;
  background-color: #426082;
  color: white;
  cursor: pointer;
  padding: 15px;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
}

.ethical {
  margin-top: 20px;
  font-style: italic;
  color: #999;
  font-size: 12px;
}

.admin-home .published-episode {
  color: #777;
}

.admin-home {
  font-size: 16px;
}

.admin-home .published-episode i {
  color: lightgreen;
}

.admin-home .upcoming-episode i {
  color: yellow;
}

.admin-home .add-show i,
.admin-home .add-show a {
  color: #ff890e;
}

.admin-home .add-user i,
.admin-home .add-user a {
  color: #00b158;
}

.admin-home .guests .user-id {
  color: orange;
}

.admin-home .guests .user-name {
  color: white;
}

.admin-home .published-episode i,
.admin-home .upcoming-episode i,
.admin-home .add-show i,
.admin-home .add-user i,
.admin-home .guests i {
  display: inline-block;
  min-width: 20px;
}

.admin-section a.btn {
  color: white;
}

.admin-section li.redirect-list {
  margin: 5px;
  color: lightblue;
}

li.redirect-list.ad {
  color: lightgreen;
}

.carbon-offset {
  margin-top: 15px;
  margin-bottom: 15px;
  color: grey;
  font-size: 11px;
  text-align: center;
}

.carbon-offset img {
  height: 20px;
  opacity: 0.6;
  vertical-align: middle;
  margin-top: -5px;
}

.carbon-offset span {
  display: inline-block;
}

.friends .main-text.sponsors .sponsor {
  text-align: center;
  font-size: 14px;
}

.sponsors .sponsor {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  padding: 10px;
  max-width: 210px;
  margin-bottom: 30px;
  vertical-align: top;
}

.sponsors .sponsor img {
  /*height: 150px;*/
  width: 150px;
  margin-bottom: 10px;
  border: 1px solid gray;
  border-radius: 5px;
}

.sponsor a.company {
  color: white;
  font-weight: bold;
}

.sponsor a.product {
  color: #bbb;
  font-size: 0.85em;
  font-weight: 300;
}

.list-inline.social {
  font-size: 36px;
}

footer .social {
  font-size: 36px;
}

.redirect-modified-date {
  display: inline-block;
  min-width: 100px;
  margin-left: 5px;
}

.redirect-count {
  display: inline-block;
  min-width: 45px;
  text-align: right;
  padding-right: 5px;
}

.redirects.main-text {
  font-weight: normal;
}

.streaming-page h1 {
  text-align: center;
  margin-bottom: 20px;
}

.streaming.live {
}

.youtube-banner {
  font-size: 128px;
  display: block;
}

a.youtube-brand {
  color: #ff3737;
  font-weight: bold;
}

.streaming-page .cta-now {
  text-decoration: underline;
}

.streaming-page .active-now {
  color: #00b158;
}

.streaming-page .off-now {
  color: #ff3737;
}

.streaming-page .subtitle {
  text-align: center;
}

.streaming-page .subtitle > div {
  margin-bottom: 20px;
}

.streaming-page a.btn {
  color: white;
}

.streaming.off .subtitle {
  margin-top: 20px;
  font-size: 0.85em;
}

.streaming.off img {
  border-radius: 5px;
}

.live-stream-list .live-stream {
  font-family: monospace;
}

.live-stream-list .live-stream.past {
  color: #636363;
}

/* ******************* Start Youtube overlay image ******************** */
/* Main container */
.youtube-overlay-image {
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.youtube-overlay-image .youtube-container {
  text-align: center;
  width: 100%;
}

/* Original text overlay */
.youtube-overlay-image .normal .text {
  color: red;
  font-size: 48px;
}

.youtube-overlay-image .hover .text {
  color: white;
  font-size: 24px;
}

.youtube-overlay-image .text {
  color: red;
  line-height: 1.5em;
  text-shadow: 2px 2px 2px #000;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* New overlay on hover */
.youtube-overlay-image .hover {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  margin-top: 30px;
  transition: 0.5s ease;
  color: white;
}

/* New overlay appearance on hover */
.youtube-overlay-image:hover .hover {
  opacity: 1;
}

/* Original image */
.youtube-overlay-image .youtube-image {
  border: 1px solid #3b3b3b;
  /*display: block;*/
  width: 560px;
  height: auto;
  border-radius: 5px;
}

/* On screens that are 00px or less */
@media screen and (max-width: 800px) {
  .youtube-overlay-image {
    width: 400px;
  }

  .youtube-overlay-image .youtube-image {
    width: 400px;
  }

  .youtube-overlay-image .youtube-container {
    width: 400px;
  }

  .youtube-overlay-image .text {
    width: 400px;
  }

  .youtube-overlay-image .hover {
    width: 400px;
  }
}

/* On screens that are 500px or less */
@media screen and (max-width: 500px) {
  .youtube-overlay-image {
    width: 300px;
  }

  .youtube-overlay-image .youtube-image {
    width: 300px;
  }

  .youtube-overlay-image .youtube-container {
    width: 300px;
  }

  .youtube-overlay-image .text {
    width: 300px;
  }

  .youtube-overlay-image .hover {
    width: 300px;
  }
}

.live-stream-subtitle {
  text-align: center;
  color: #9f9f9f;
  font-size: 0.75em;
}

/* ******************* End Youtube overlay image ******************** */

.admin-home .upcoming-episode i.clear-youtube-image-button,
.admin-home .published-episode i.clear-youtube-image-button {
  color: #fa7474;
}

.form-control.smaller {
  max-width: 350px;
}

footer .fa-youtube {
  color: #fd1f1f;
}

footer .fa-mastodon {
  /*color: #47aeff;*/
}

.course-footer-link {
  color: #54ff54;
}

/* *********************** Subscribe in your player ******************* */
.subscribe-buttons {
  font-size: 10px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
  /*background-color: #000;*/
  padding-top: 20px;
  padding-bottom: 10px;
  /*border-radius: 10px;*/
  /*border: 1px solid #444444;*/
}

.subscribe-buttons a {
  display: inline-block;
  color: white;
  margin: 3px;
  text-align: center;
}

.subscribe-buttons img {
  margin-left: auto;
  margin-right: auto;
  padding-left: 2px;
  padding-right: 2px;

  width: 42px;
  display: block;
}

.subscribe-buttons .subscribe-cta {
  font-size: 1.5em;
  margin-top: 5px;
  font-weight: bold;
  color: white;
}

footer .footer-column {
  text-align: left;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

footer .footer-column.first {
  line-height: 1.64em;
  font-size: 13px;
  font-weight: 400;
  margin-top: 10px;
}

footer .footer-column.first i {
  display: inline-block;
  width: 20px;
  text-align: center;
  vertical-align: middle;
}

footer .footer-column.social a {
  text-align: left;
}

footer .footer-column.social .icon-box {
  display: inline-block;
  width: 60px;
  text-align: center;
}

footer .footer-column a {
  display: block;
}

footer .footer-title {
  font-size: 12px;
}

footer .copyright-footer {
  padding: 20px;
  font-size: 13px;
  text-align: center;
}

footer .copyright-footer a {
  font-weight: 700;
}

footer .admin {
  font-size: 12px;
}

footer .footer-player {
  color: #28bf20;
}

footer {
  /* border-top: 1px solid #1d1d1d; */
  background-color: #131313;
}

footer,
footer a {
  /*background: #222;*/
  color: #ccc;
}

footer a:hover {
  color: #5bc0de;
}

/* General social grid styling for all screen sizes */
footer .social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  align-items: start;
}

footer .social-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

footer .social-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

footer .social-link .icon-box {
  margin-right: 0.75rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer .social-link .icon-box i {
  font-size: 24px;
}

footer .social-link .icon-box img {
  width: 24px;
  height: 24px;
}

footer .social-link .footer-title {
  font-size: 14px;
  font-weight: 500;
}

/* Mobile responsive footer improvements */
@media (max-width: 768px) {
  footer .container {
    padding: 1rem;
  }

  footer .columns {
    flex-direction: column;
    margin: 0;
  }

  footer .column {
    padding: 0.5rem;
    width: 100% !important;
    flex: none !important;
  }

  footer .column.is-2 {
    display: none; /* Hide spacing column on mobile */
  }

  footer .footer-column {
    width: 100%;
    margin: 0;
    text-align: center;
    padding: 1rem 0;
  }

  footer .footer-column.first {
    border-bottom: 1px solid #333;
    margin-bottom: 1rem;
    padding-bottom: 1.5rem;
  }

  footer .footer-column.first a {
    display: inline-block;
    margin: 0.25rem 0.5rem;
    white-space: nowrap;
  }

  /* Social links section styling */
  footer .footer-column.social-links {
    padding: 1.5rem 0;
    border-top: 1px solid #333;
    position: relative;
  }

  /* Add a "Connect with us" label */
  footer .footer-column.social-links::before {
    content: 'Connect with us';
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0a0a0a;
    color: #888;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 1rem;
  }

  footer .social-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    align-items: start;
    justify-items: center;
    max-width: 400px;
    margin: 0 auto;
  }

  footer .social-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    max-width: 180px;
    padding: 0.75rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    text-decoration: none;
  }

  footer .social-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    text-decoration: none;
  }

  footer .social-link .icon-box {
    margin-right: 0.75rem;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  footer .social-link .icon-box i {
    font-size: 24px;
  }

  footer .social-link .icon-box img {
    width: 24px;
    height: 24px;
  }

  footer .social-link .footer-title {
    font-size: 14px;
    white-space: nowrap;
  }

  footer .footer-title {
    font-size: 14px;
  }

  footer .copyright-footer {
    padding: 1.5rem 1rem;
    border-top: 1px solid #333;
    margin-top: 1rem;
  }

  footer .copyright-footer p {
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }
}

/* Extra small mobile screens */
@media (max-width: 480px) {
  footer .container {
    padding: 0.75rem;
  }

  footer .footer-column.first a {
    display: block;
    margin: 0.5rem auto;
    text-align: center;
    max-width: 200px;
  }

  /* Single column layout for very small screens */
  footer .social-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    max-width: 280px;
  }

  footer .social-link {
    max-width: 260px;
    padding: 0.8rem 1rem;
    justify-content: center;
    text-align: center;
  }

  footer .social-link .icon-box {
    width: 28px;
    margin-right: 0.6rem;
  }

  footer .social-link .icon-box i {
    font-size: 20px;
  }

  footer .social-link .icon-box img {
    width: 20px;
    height: 20px;
  }

  footer .social-link .footer-title {
    font-size: 13px;
  }

  footer .footer-title {
    font-size: 13px;
  }

  footer .copyright-footer {
    padding: 1rem 0.75rem;
  }

  footer .copyright-footer p {
    font-size: 12px;
  }
}

.subscribe-page h1,
.subscribe-page h2 {
  text-align: center;
}

blockquote footer,
blockquote small,
blockquote .small {
  border: none;
}

.review-text {
  margin-left: 0px;
  padding-left: 0px;
}

.reviews .section-heading {
  text-align: center;
}

/*.review-text {*/
/*    border: 1px solid #111;*/
/*    border-radius: 10px;*/
/*    background-color: #444;*/
/*    padding: 10px;*/
/*    !*margin: 10px;*!*/
/*    margin-top: 15px;*/
/*    margin-bottom: 15px;*/
/*}*/

.extras-area-show-page .partner-slot img {
  border: 1px solid #333;
  border-radius: 5px;
}

.show-episode-page .partner-slot {
  margin-top: 10px;
}

.cta-button-rect {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid #fffa1f;
  padding: 1px 4px;
  font-size: 11px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*background-color: #fffd82;*/
  background-color: #fffdc9;
  color: black;
  margin-top: -2px;
  margin-left: 5px;
}

.msg-container {
  display: inline-block;
  margin-top: 2px;
}

.banner-yellow {
  color: #fffd82;
}

.banner-purple {
  color: #584675;
}

#global-sponsor-message {
  font-size: 13px;
  letter-spacing: -0.1px;
  font-weight: 400;
}

#global-sponsor-message img {
  height: 26px;
  padding-bottom: 1px;
}

.other_thing .test_watcher {
  background-color: #131325;
}

footer .blog-link {
  color: #f18c1d;
}

.takeaways {
  color: #eee;
}

.takeaways strong {
  font-weight: 300;
  text-decoration: underline;
  /*text-transform: uppercase;*/
}

#takeaways-anchor {
  /*margin-bottom: 60px;*/
}

.takeaways h2 .fontawesome {
  font-size: 16px;
  vertical-align: top;
}

.full_html_text,
.takeaways {
  line-height: 1.75em;
}

.some_thing {
}

summary {
  cursor: pointer;
  text-decoration: underline;
  color: #5bc0de;
  margin-top: 20px;
  margin-bottom: 20px;
}

.transcript-actions a {
  color: white;
}

.transcript-actions a.btn-default {
  color: black;
}

.gallery-heading {
  margin-top: 0px;
  margin-bottom: 5px;
}

/* Global livestream banner fix for Bulma pages */
#global-livestream-message {
  margin: 0;
}

/* ******************* Guests Page Styles ******************** */
.guests-page .title {
  color: var(--tp-text-color, #fff);
  font-size: 36px;
  font-weight: 500;
  margin-top: 18px;
  margin-bottom: 10px;
}

.guests-page .guest-in-list {
  font-size: 17px;
  font-weight: 400;
  padding: 1.5rem;
  margin: 0px auto 1.25rem auto;
  width: 800px;
  max-width: 800px;
  border: 1px solid #333;
  border-radius: 10px;
  background-color: #242424;
  color: var(--tp-text-color, #fff);
}

.guests-page .guest-separator {
  margin-top: 10px;
  margin-bottom: 20px;
}

.guests-page .guest-in-list img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 1px solid #222;
  border-radius: 50%;
  margin-right: 1.25rem;
  flex-shrink: 0;
}

.guests-page .guest-box {
  display: flex;
  align-items: flex-start;
}

.guests-page .guest-content {
  flex: 1;
  min-width: 0;
}

.guests-page .guest-in-list .bio-in-list {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0.5rem;
}

.guests-page .guest-in-list .bio-in-list a {
  color: #5bc0de;
  text-decoration: none;
}

.guests-page .guest-in-list .bio-in-list a:hover {
  color: #5bc0de;
  text-decoration: underline;
}

.guests-page .guest-in-list .guest-name {
  font-size: 20px;
  font-weight: 500;
  text-decoration: underline;
  color: #fff;
}

.guests-page .guest-in-list .episode-header {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 14px;
  font-weight: 400;
  color: var(--tp-text-color, #fff);
}

.guests-page .guest-in-list .episode-for-guest {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
}

.guests-page .guest-in-list .episode-for-guest a {
  color: #5bc0de;
  text-decoration: none;
}

.guests-page .guest-in-list .episode-for-guest a:hover {
  color: #5bc0de;
  text-decoration: underline;
}

.guests-page .episode-list {
  list-style-type: disc;
  padding-inline-start: 40px;
  margin-block-start: 0px;
  margin-block-end: 10px;
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #dddddd;
}

.guests-page .episode-list li {
  margin-bottom: 0;
  line-height: 1.2;
  padding: 0;
}

/* Responsive design for smaller screens */
@media (max-width: 600px) {
  .guests-page .guest-in-list {
    width: 100%;
    max-width: none;
    margin: 0 10px 1.25rem 10px;
  }

  .guests-page .guest-box {
    flex-direction: column;
  }

  .guests-page .guest-in-list img {
    align-self: center;
    margin-right: 0;
    margin-bottom: 1rem;
  }

  .guests-page .guest-content {
    width: 100%;
  }

  .guests-page .guest-in-list .guest-name,
  .guests-page .guest-in-list .bio-in-list {
    text-align: center;
  }

  .guests-page .guest-in-list .episode-header {
    margin-top: 1.5rem;
  }

  .guests-page .episode-list {
    width: 100%;
  }
}

/* ******************* Privacy Page Styles ******************** */
.privacy-page h2 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 5px;
  margin-top: 24px;
}

.privacy-page p {
  margin-bottom: 1em;
}

/* ******************* Admin Page Styles ******************** */
.admin-button {
  width: 120px;
  margin: 10px;
  font-size: 15px;
}

.admin-button.is-light {
  color: black;
}

.admin-footer-info {
  margin-bottom: 20px;
  margin-left: 10px;
  margin-top: 20px;
}

/* ******************* Episodes Admin Page Styles ******************** */
.episodes-admin-page .upcoming-episode {
  margin-bottom: 0px !important;
  padding-bottom: 0 !important;
}

/* More specific rule to override Bulma's .container */
.episodes-admin-page.container,
div.episodes-admin-page.container,
body .episodes-admin-page.container {
  max-width: none !important;
  width: 95% !important;
  margin: 0 auto !important;
}

.takeaway-indicator.has-takeaways {
  color: lightgreen !important;
}

.takeaway-indicator.no-takeaways {
  color: gray !important;
}

/* ******************* Checkbox Alignment Fix ******************** */
.checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.checkbox input[type='checkbox'] {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* ******************* Page-Specific Inline CSS Moved from Templates ******************** */

/* Layout/Shared Styles */
body.bulma-page {
  padding-top: 50px;
}

.navbar-brand .logo-image {
  width: 40px;
  height: 40px;
  margin-top: -10px;
  border-radius: 50%;
}

.navbar-brand .logo-var {
  color: white !important;
}

.navbar-brand .logo-operator {
  color: white !important;
}

.navbar-brand .logo-key {
  color: #f0db4f !important;
}

.mastodon-verification-links {
  display: none;
}

/* About Page Styles */
.about-page .main-column {
  width: 70%;
}

.about-page.container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

/* Community Page Styles */
.community-page .main-column {
  width: 70%;
}

.community-page.container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

/* Contact Page Styles */
.contact-page .main-column {
  width: 70%;
}

.contact-page .container {
  max-width: none !important;
}

.contact-page .light-access-link {
  color: #1fc75f;
  text-decoration: none;
}

.contact-page .light-access-link:hover {
  color: #19a34a;
  text-decoration: underline;
}

/* Stats Page Styles */
.stats-page .main-column {
  width: 70%;
}

.stats-page.container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

/* Search Page Styles */
.search_page .search-results-container {
  text-align: center;
  margin-right: 75px;
  margin-top: 10px;
  font-weight: normal;
}

.search_page .search-summary {
  text-align: center;
  margin-right: 75px;
  margin-top: 10px;
  font-weight: normal;
}

.search_page .search-input-column {
  width: 33%;
}

/* Privacy Page Styles */
.privacy-page .privacy-centered {
  text-align: center;
}

.privacy-page .privacy-content-column {
  max-width: 800px;
}

/* Sponsorship Terms Page Styles */
.sponsorship-terms-page .main-column {
  width: 70%;
}

.sponsorship-terms-page .container {
  max-width: none !important;
}

.sponsorship-terms-page .content.is-large p {
  margin-bottom: 1em;
}

/* T-shirt Page Styles */
.tshirt-page .full-page-content {
  padding-bottom: 0px;
}

.tshirt-page .tshirt-image {
  height: 350px;
  border-radius: 5px;
  background-color: #777;
}

.tshirt-page .tshirt-button {
  color: white;
  font-size: 20px;
  margin-bottom: 10px;
}

/* Sponsor Page Styles */
.sponsor-page .full-page-content.contact {
  max-width: 800px;
}

.sponsor-page .sponsor-title {
  font-size: 2em;
}

.sponsor-page .sponsor-link {
  color: white;
}

.sponsor-page .sponsor-image {
  margin: 20px;
  margin-bottom: 0px;
  border: 1px solid gray;
  max-height: 400px;
  border-radius: 5px;
}

.full-page-content.contact strong {
  color: #ddd;
}

.full-page-content.contact {
  padding: 40px;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px !important;
  color: #ddd;
  font-size: 16px;
}

/* Home Page Styles */
.home-page .guest-image {
  width: 128px;
  height: 128px;
  border-radius: 50%;
}

.home-page .courses-title {
  margin-top: 0px;
}

.home-page .course-image {
  width: 334px;
  height: 192px;
}

.home-page .review-guest-image {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.home-page .book-image {
  border-radius: 5px;
}

.home-page .book-title {
  margin-bottom: 10px;
}

.home-page .book-sample-image {
  max-height: 225px;
  border-radius: 5px;
  background-color: #777;
  margin: 10px;
}

.home-page .host-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.home-page .suggest-email {
  font-size: 24px;
}

.home-page .banner {
  padding-bottom: 50px !important;
}

/* Friends of Show Page Styles */
.friends-page .full-page-content {
  max-width: 900px;
}

.friends-page .error-message {
  color: pink;
}

.friends-page .form-label {
  display: inline-block;
  width: 210px;
  font-weight: bold;
  margin-right: 22px;
}

.friends-page .form-label-wide {
  display: inline-block;
  width: 210px;
  font-weight: bold;
  margin-bottom: 20px;
}

.friends-page .form-input-wide {
  display: inline-block;
  width: 525px;
  font-weight: bold;
  margin-right: 20px;
}

.friends-page .submit-section {
  margin-top: 20px;
}

.friends-page .disclaimer {
  margin-top: 10px;
  font-weight: normal;
  font-size: 11pt;
}

/* Friends of Show Subscribed Page Styles */
.friends-subscribed-page .full-page-content {
  max-width: 900px;
}

/* Friends of Show Sponsors Page Styles */
.friends-sponsors-page .full-page-content {
  max-width: 900px;
}

.friends-sponsors-page .sponsor-image {
  width: 180px;
  height: auto;
  max-width: 100%;
  margin-bottom: 10px;
}

.friends-sponsors-page .sponsor-company-link {
  display: block;
  margin-bottom: 5px;
}

/* Episodes Subscribe Page Styles */
.episodes-subscribe-page .subscribe-content {
  max-width: 750px;
  margin: auto;
}

.episodes-subscribe-page .subscribe-title {
  font-size: 36px;
  font-weight: 500;
  margin-top: 40px;
}

.episodes-subscribe-page .years-underline {
  text-decoration: underline;
}

/* Episodes Show Page Styles */
.show-episode-page .episode-error-button {
  background-color: red;
  color: white;
  border-color: #ff3e3e;
}

.show-episode-page .guest-image-rounded {
  width: 128px;
  height: 128px;
}

.show-episode-page .share-section {
  text-align: center;
}

.show-episode-page .transcript-intro {
  margin-top: 60px;
}

.show-episode-page .transcript-header {
  margin-top: 60px;
}

/* Episodes Transcript Section Styles */
.transcript-section .transcript-error {
  color: orange;
}

/* Episodes Subscribe in Players Styles */
.subscribe-in-players .player-icon {
  width: 42px;
  height: 38px;
}

.subscribe-in-players .rss-icon {
  width: 42px;
  height: 38px;
}

.subscribe-in-players .castro-icon {
  border-radius: 6px;
  width: 42px;
  height: 38px;
}

.subscribe-in-players .canary-link {
  display: none;
}

/* Episodes Guests Page Styles */
.episodes-guests-page .full-page-content {
  max-width: 900px;
}

.episodes-guests-page .content.guests {
  font-size: 17px;
  font-weight: 400;
}

/* Episodes All Page Styles */
.all-episodes-page .episode-number-column {
  width: 80px;
  white-space: nowrap;
}

.all-episodes-page .episode-number-cell {
  text-align: center;
}

.all-episodes-page .episode-date-cell {
  white-space: nowrap;
}

.all-episodes-page .attention-needed {
  background-color: #444;
}

/* DevOps Book Page Styles */
.devops-book-page .book-nav-icon {
  padding-top: 20px;
  padding-left: 20px;
  vertical-align: center;
  margin-top: -10px;
}

.devops-book-page .book-title {
  vertical-align: center;
}

/* DevOps Book Index Page Styles */
.devops-book-index-page .book-cover-container {
  width: 100%;
  display: block;
}

.devops-book-index-page .book-title {
  margin-top: 30px;
}

.devops-book-index-page .github-link {
  font-weight: bold;
}

.devops-book-index-page .chapter-icon {
  width: 96px;
}

.devops-book-index-page .chapter-icon-small {
  width: 60px;
}

.devops-book-index-page .chapter-icon-medium {
  width: 70px;
}

.devops-book-index-page .chapter-icon-large {
  width: 80px;
}

.devops-book-index-page .chapter-audio {
  width: 100%;
}

/* DevOps Book Buy Page Styles */
.devops-book-buy-page .buy-header-spacing {
  padding-top: 20px;
}

.devops-book-buy-page .book-display {
  padding-top: 0px;
}

.devops-book-buy-page .book-cover-left {
  width: 150px;
  margin-right: 10px;
  margin-left: 10px;
}

.devops-book-buy-page .book-cover-right {
  width: 150px;
  margin-right: 10px;
  margin-left: 10px;
  border: 1px solid gray;
}

.devops-book-buy-page .book-description {
  font-size: 0.85em;
  color: #4b4b4b;
}

.devops-book-buy-page .price-display {
  text-align: center;
  font-weight: bold;
  font-size: 1.25em;
  color: green;
  margin-bottom: 50px;
  margin-top: 20px;
}

.devops-book-buy-page .sold-out-message {
  text-align: center;
  font-weight: bold;
  color: red;
  margin-bottom: 20px;
}

.devops-book-buy-page .buy-form {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  margin-bottom: 100px;
  margin-top: 20px;
}

.devops-book-buy-page .field {
  margin-bottom: 16px;
}

/* Streaming Live Page Styles */
.streaming-page .container.full-page-content {
  padding-bottom: 0px;
}

.streaming-page h1 {
  margin-top: 10px;
  margin-bottom: 20px;
}

.streaming-page .streaming-content {
  text-align: center;
  font-size: 24px;
  margin-top: 40px;
  padding: 40px;
  background-color: #222;
  border-radius: 10px;
  border: 1px solid #444;
}

.streaming-page .stream-status {
  font-size: 18px;
  margin-bottom: 20px;
}

.streaming-page .youtube-embed {
  margin-top: 30px;
  margin-bottom: 30px;
}

.streaming-page .stream-schedule {
  font-size: 16px;
  color: #aaa;
  margin-top: 20px;
}

/* 404 Error Page Styles */
.four04-page .full-width-image-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Advertiser Pages Styles */
.advertiser-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.advertiser-report-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

/* Admin Pages Styles */
.admin-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.admin-guest-image {
  width: 40px !important;
  height: 40px !important;
  margin: 2px;
  border-radius: 50%;
  object-fit: cover;
}

.admin-subscribe-platform-stats-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.admin-reviews-page .show-main strong {
  color: white !important;
  margin-top: 18px;
  display: block;
}

.admin-redirects-page .show-main strong {
  color: #eee !important;
}

.admin-redirects-page .button.is-danger {
  background-color: #8b1538 !important;
  border-color: #8b1538 !important;
}

.admin-guests-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.admin-guests-page .show-main {
  text-align: left !important;
}

.admin-guests-page .show-main ul {
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

.admin-guests-page .show-main li {
  text-align: left !important;
  display: block !important;
  margin: 4px 0 !important;
}

.admin-guests-page .show-main li.guests {
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.admin-guests-page .show-main li.guests a,
.admin-guests-page .show-main li.guests span,
.admin-guests-page .show-main li.guests img {
  flex-shrink: 0 !important;
}

.admin-guests-page .user-id {
  display: inline-block;
  min-width: 40px;
}

.admin-change-show-number-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.admin-add-show-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.admin-add-livestream-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

.admin-add-guest-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

/* Account Page Styles */
.account-page .container {
  max-width: none !important;
  width: 70% !important;
  margin: 0 auto !important;
}

/* Black Friday Banner Styles */
.black_friday {
  margin-top: 30px;
  margin-bottom: 20px;
  text-align: center;
  /* background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); */
  /* border: 2px solid #ff6b35; */
  border-radius: 12px;
  padding: 20px;
  /* box-shadow: 0 8px 32px rgba(255, 107, 53, 0.3); */
  /* animation: pulse-glow 2s ease-in-out infinite alternate; */
}

@keyframes pulse-glow {
  from {
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.3);
  }
  to {
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.6);
  }
}

.black_friday h2 {
  color: #ff6b35;
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.black_friday .discount {
  color: #ffff00;
  font-size: 4em;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  display: block;
  margin: 0.2em 0;
}

.black_friday .offer-text {
  color: #ffffff;
  font-size: 1.5em;
  margin-bottom: 1em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.black_friday .cta-button {
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
  color: white;
  font-size: 1.5em;
  font-weight: bold;
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  margin: 10px;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.black_friday .cta-button:hover {
  background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
  color: white;
  text-decoration: none;
}

.black_friday .deadline {
  color: #ff6b35;
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 1em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.black_friday .terms {
  color: #cccccc;
  font-size: 0.9em;
  margin-top: 1em;
  font-style: italic;
}

strong {
  margin-right: 0px;
}

/* Fix upcoming episodes alignment - remove weird offset */
.upcoming-details {
  padding-left: 0 !important;
}

/* Align episode details text with top of guest image */
.upcoming-episode .columns {
  align-items: flex-start !important;
}

.upcoming-episode .upcoming-details {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.upcoming-episode .episode-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
  line-height: 1.2 !important;
}

.upcoming-episode .episode-desc-short {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Make upcoming episodes guest section consistent regardless of name length */
.upcoming-episode .guest {
  min-height: 100px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.upcoming-episode .guest .name {
  width: 100% !important;
  text-align: center !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.2 !important;
  min-height: 38px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.upcoming-episode .guest .and-then {
  margin-top: 2px !important;
}

/* Admin Guests Page - Enhanced Desktop Layout */
@media (min-width: 769px) {
  .admin-guests-page.container {
    max-width: none !important;
    width: 85% !important;
    margin: 0 auto !important;
  }

  .admin-guests-page .column.main-column {
    width: 80% !important;
    margin: 0 auto !important;
  }

  .admin-guests-page .show-main ul {
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: left !important;
  }
}

/* Transcript Upload Interface Styling */
.transcript-upload-page .file-upload-section {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid #2c3e50;
  border-radius: 12px;
  padding: 2rem;
  margin: 1rem 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.transcript-upload-page .file-preview-zone {
  min-height: 120px;
  border: 2px dashed #34495e;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
  background: rgba(52, 73, 94, 0.1);
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.transcript-upload-page .file-preview-zone:hover {
  border-color: #3498db;
  background: rgba(52, 152, 219, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(52, 152, 219, 0.2);
}

.transcript-upload-page .file-preview-zone.drag-over {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.1);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
  }
}

.transcript-upload-page .file-info {
  background: rgba(44, 62, 80, 0.8);
  border-radius: 6px;
  padding: 0.75rem;
  margin: 0.5rem 0;
  border-left: 4px solid #3498db;
}

.transcript-upload-page .file-info.vtt-file {
  border-left-color: #f39c12;
}

.transcript-upload-page .file-size {
  font-size: 0.9em;
  color: #95a5a6;
  font-weight: normal;
}

.transcript-upload-page .file-size.large {
  color: #e67e22;
  font-weight: bold;
}

.transcript-upload-page .file-size.too-large {
  color: #e74c3c;
  font-weight: bold;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0.5;
  }
}

.transcript-upload-page .upload-progress {
  margin: 1rem 0;
  display: none;
}

.transcript-upload-page .upload-progress.active {
  display: block;
}

.transcript-upload-page .progress-bar {
  background: linear-gradient(90deg, #3498db 0%, #2ecc71 100%);
  height: 8px;
  border-radius: 4px;
  transition: width 0.3s ease;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.transcript-upload-page .episode-status-banner {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
  border-left: 6px solid;
}

.transcript-upload-page .episode-status-banner.has-transcript {
  border-left-color: #2ecc71;
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}

.transcript-upload-page .episode-status-banner.no-transcript {
  border-left-color: #f39c12;
  background: linear-gradient(135deg, #d35400 0%, #f39c12 100%);
}

.transcript-upload-page .validation-summary {
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  display: none;
  /* Default to informational styling */
  background: rgba(52, 152, 219, 0.1);
  border: 1px solid #3498db;
}

.transcript-upload-page .validation-summary.has-errors {
  /* Error styling - red */
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid #e74c3c;
}

.transcript-upload-page .validation-summary.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page-wide drag and drop styling */
body.drag-active {
  background: linear-gradient(
    135deg,
    rgba(52, 152, 219, 0.1) 0%,
    rgba(46, 204, 113, 0.1) 100%
  );
}

body.drag-active::before {
  content: '📁 Drop your transcript files anywhere on this page';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(52, 152, 219, 0.95);
  color: white;
  padding: 20px 40px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(52, 152, 219, 0.3);
  z-index: 10000;
  pointer-events: none;
  animation: dropHint 0.3s ease;
}

@keyframes dropHint {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Episode Selection Enhancement */
.transcript-upload-page .episode-selector {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 12px;
  padding: 2rem;
  margin: 1rem 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.transcript-upload-page .episode-selector .select select {
  background: rgba(52, 73, 94, 0.8);
  border: 2px solid #34495e;
  color: #ecf0f1;
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 1.1em;
  transition: all 0.3s ease;
}

.transcript-upload-page .episode-selector .select select:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.transcript-upload-page .episode-selector .select select option {
  background: #2c3e50;
  color: #ecf0f1;
  padding: 0.5rem;
}

/* File upload enhancements */
.transcript-upload-page .file-label {
  cursor: pointer;
  transition: all 0.3s ease;
}

.transcript-upload-page .file-label:hover .file-cta {
  background: #3498db;
  transform: translateY(-1px);
}

/* Ensure Bulma file component allows proper truncation */
.transcript-upload-page .file.has-name {
  overflow: hidden;
}

.transcript-upload-page .file.has-name .file-label {
  overflow: hidden;
}

/* Bulma file upload name display - force truncation */
.transcript-upload-page .file-name,
.transcript-upload-page .file .file-name,
.transcript-upload-page .file.has-name .file-name {
  font-weight: 500;
  color: #ecf0f1;
  background: rgba(52, 73, 94, 0.6);

  /* File name truncation and overflow handling */
  max-width: 180px !important;
  min-width: 0 !important; /* Allow shrinking */
  width: 180px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block !important;
  vertical-align: middle;
  flex-shrink: 1 !important;

  /* Override Bulma's default 16em max-width */
  --bulma-file-name-max-width: 180px;
}

/* Responsive file name truncation */
@media (max-width: 768px) {
  .transcript-upload-page .file-name,
  .transcript-upload-page .file .file-name,
  .transcript-upload-page .file.has-name .file-name {
    max-width: 140px !important;
    width: 140px !important;
    --bulma-file-name-max-width: 140px;
  }
}

@media (max-width: 480px) {
  .transcript-upload-page .file-name,
  .transcript-upload-page .file .file-name,
  .transcript-upload-page .file.has-name .file-name {
    max-width: 110px !important;
    width: 110px !important;
    --bulma-file-name-max-width: 110px;
  }
}

/* File name tooltip for full name on hover */
.transcript-upload-page .file-name:hover {
  position: relative;
  z-index: 100;
}

.transcript-upload-page .file-name.has-tooltip:hover::after {
  content: attr(data-full-name);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(44, 62, 80, 0.95);
  color: #ecf0f1;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(149, 165, 166, 0.2);
  z-index: 1000;
  pointer-events: none;

  /* Small arrow pointing down */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 -4px 0 0 rgba(44, 62, 80, 0.95);
  margin-bottom: 4px;
}

/* Alternative: Wrapped file name version for better mobile experience */
.transcript-upload-page .file-name.wrapped {
  max-width: none;
  white-space: normal;
  word-break: break-all;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 3px;
}

/* Improve file-info display layout for long names */
.transcript-upload-page .file-info {
  margin-top: 0.5rem;
}

.transcript-upload-page .file-info span {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

/* Better responsive behavior for file upload sections */
@media (max-width: 768px) {
  .transcript-upload-page .file.has-name .file-name {
    max-width: 120px;
  }

  .transcript-upload-page .file-info span {
    max-width: 140px;
  }
}

@media (max-width: 480px) {
  .transcript-upload-page .file.has-name .file-name {
    max-width: 100px;
  }

  .transcript-upload-page .file-info span {
    max-width: 120px;
    font-size: 0.875rem;
  }

  /* Stack file upload columns on very small screens */
  .transcript-upload-page .columns .column {
    margin-bottom: 1rem;
  }
}

/* Final failsafe - target any file name display that might be overflowing */
.transcript-upload-page [class*='file-name'] {
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  .transcript-upload-page [class*='file-name'] {
    max-width: 140px !important;
  }
}

@media (max-width: 480px) {
  .transcript-upload-page [class*='file-name'] {
    max-width: 110px !important;
  }
}

.transcript-upload-page .help {
  font-style: italic;
  margin-top: 0.5rem;
}

/* Strong text styling for transcript upload page */
.transcript-upload-page strong {
  color: #f39c12;
  font-weight: 600;
}

/* Modern button styling for transcript upload page */
.transcript-upload-page .submit-section {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 16px;
  padding: 2.5rem;
  margin: 2rem 0;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.transcript-upload-page .submit-button {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border: none;
  color: white;
  font-size: 1.1em;
  font-weight: 600;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  min-width: 220px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
  position: relative;
  overflow: hidden;
}

.transcript-upload-page .submit-button:hover {
  background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
}

.transcript-upload-page .submit-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.transcript-upload-page .submit-button:disabled {
  background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.transcript-upload-page .cancel-button {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  border: none;
  color: white;
  font-size: 1.1em;
  font-weight: 600;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  min-width: 160px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
  margin-left: 1rem;
}

.transcript-upload-page .cancel-button:hover {
  background: linear-gradient(135deg, #5a6268 0%, #6c757d 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(108, 117, 125, 0.4);
  color: white;
  text-decoration: none;
}

.transcript-upload-page .cancel-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

/* Button loading state animation */
.transcript-upload-page .submit-button.uploading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Responsive button layout */
@media (max-width: 768px) {
  .transcript-upload-page .submit-section .field.is-grouped {
    flex-direction: column;
    align-items: center;
  }

  .transcript-upload-page .cancel-button {
    margin-left: 0;
    margin-top: 1rem;
  }

  .transcript-upload-page .submit-button,
  .transcript-upload-page .cancel-button {
    width: 100%;
    max-width: 280px;
  }
}

/* ******************* Episodes Admin Page - Icon Styles ******************** */
.transcript-status-icon {
  text-decoration: none;
}

.transcript-status-icon:hover i {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.transcript-status-icon i {
  transition: transform 0.2s ease;
}

.mp3-status-icon {
  display: inline-block;
  margin-left: 0.25rem;
}

.mp3-status-icon i {
  transition: transform 0.2s ease;
}

.mp3-status-icon i:hover {
  transform: scale(1.1);
}

/* ==========================================================================
   MP3 Upload Page Styles
   ========================================================================== */

.mp3-upload-page .file-label {
  cursor: pointer;
  transition: all 0.3s ease;
}

.mp3-upload-page .file-label:hover {
  transform: translateY(-2px);
}

.mp3-upload-page .file-label.drag-over {
  background: rgba(46, 204, 113, 0.1);
  border-color: #2ecc71 !important;
  animation: pulse 1s infinite;
}

.mp3-upload-page .file-info {
  background: rgba(44, 62, 80, 0.8);
  border-radius: 6px;
  padding: 0.75rem;
  margin: 0.5rem 0;
  border-left: 4px solid #3498db;
}

.mp3-upload-page .episode-status-banner {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
  border-left: 6px solid #3498db;
}

.mp3-upload-page .upload-progress {
  margin: 1rem 0;
  display: none;
}

.mp3-upload-page .upload-progress.active {
  display: block;
}

/* Page-wide drag and drop hint for MP3 files */
.mp3-upload-page.drag-active::before {
  content: '🎵 Drop your MP3 files anywhere on this page';
}

/* Override Bulma's dark strong text color for MP3 upload page */
.mp3-upload-page .show-main strong {
  color: #ffffff;
}

/* Ensure Bulma colored notifications have readable dark text on light backgrounds */
.notification.is-success,
.notification.is-success p,
.notification.is-warning,
.notification.is-warning p {
  color: rgba(0, 0, 0, 0.7);
}

.notification.is-success strong,
.notification.is-warning strong {
  color: rgba(0, 0, 0, 0.9);
}

/* Notification animations for smart routing feedback */
@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

/* iOS-Style Hot Reload Toggle */
.hot-reload-toggle-container {
  margin-top: 1rem;
  padding-top: 1rem;
}

.hot-reload-toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  user-select: none;
}

.toggle-text {
  opacity: 0.9;
}

.toggle-status {
  opacity: 0.9;
  font-weight: 600;
  min-width: 1.8rem;
  text-align: left;
  font-size: 0.65rem;
}

/* iOS Toggle Switch - Extra Small Size */
.ios-toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
}

.ios-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ios-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(136, 136, 136, 0.3);
  transition: all 0.3s ease;
  border-radius: 18px;
  border: 1.5px solid rgba(136, 136, 136, 0.2);
}

.ios-slider:before {
  position: absolute;
  content: '';
  height: 14px;
  width: 14px;
  left: 1.5px;
  bottom: 1.5px;
  background-color: #888;
  transition: all 0.3s ease;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Toggle ON state - Yellow theme with !important for specificity */
.ios-toggle input:checked + .ios-slider {
  background-color: #fbbf24 !important; /* Yellow/amber color */
  border-color: #f59e0b !important; /* Darker amber border */
}

.ios-toggle input:checked + .ios-slider:before {
  transform: translateX(14px);
  background-color: white !important;
}

/* Toggle OFF state */
.ios-toggle input:not(:checked) + .ios-slider {
  background-color: rgba(136, 136, 136, 0.3);
  border-color: rgba(136, 136, 136, 0.2);
}

/* Hover effects */
.ios-toggle:hover .ios-slider {
  opacity: 0.95;
}

.ios-toggle:hover .ios-slider:before {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Focus state for accessibility */
.ios-toggle input:focus + .ios-slider {
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .hot-reload-toggle-label {
    font-size: 0.8rem;
    gap: 0.5rem;
  }

  .ios-toggle {
    width: 45px;
    height: 27px;
  }

  .ios-slider:before {
    height: 23px;
    width: 23px;
  }

  input:checked + .ios-slider:before {
    transform: translateX(18px);
  }
}

/* Neon banner text.

   Two stacked copies of the text crossfade with opacity rather than animating
   text-shadow directly. text-shadow is a paint property, so animating it makes
   the CPU re-rasterize five stacked blurs (the largest 160px) every frame, which
   pins a core for as long as the tab is in the foreground. Here each layer paints
   its shadows once and the compositor blends them on the GPU from then on.

   The pink layer stays fully opaque underneath and only the cyan layer on top
   animates, so the white glyph never dips in brightness at the crossover. */

.neon-text {
  display: inline-grid;
  color: #fff;
}

.neon-text-layer {
  grid-area: 1 / 1;
}

.neon-text-pink {
  text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e,
    0 0 40px #ff005e, 0 0 80px #ff005e;
}

.neon-text-cyan {
  text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff,
    0 0 80px #00d4ff, 0 0 160px #00d4ff;
  user-select: none;
  will-change: opacity;
  animation: neon-crossfade 1.5s ease-in-out infinite alternate;
}

@keyframes neon-crossfade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon-text-cyan {
    opacity: 0;
    will-change: auto;
    animation: none;
  }
}

/* Disable OS dark mode adaptation - force browser to not apply automatic dark mode styles */
:root {
  color-scheme: only light;
}

html,
body {
  color-scheme: only light;
}

/* Override Bulma's dark mode media query to prevent it from applying dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    /* Reset Bulma's dark mode text colors to light mode values */
    --bulma-text-strong-l: 21% !important;
    --bulma-text-l: 29% !important;
    --bulma-text-weak-l: 48% !important;
  }
  
  /* Ensure strong tags remain dark/readable on light backgrounds */
  strong {
    color: #363636 !important;
  }
}

/* Guest and Sponsor Image Alignment Fix */
/* Ensure all images in the guest-and-sponsor-section have consistent sizing */
.guest-and-sponsor-section .guest img,
.guest-and-sponsor-section .sponsor-header img {
    width: 125px !important;
    height: 125px !important;
    object-fit: cover;
    vertical-align: top !important;
    margin: 0 0 2px 0 !important;
}

/* Ensure guest circular image maintains proper sizing */
.guest-and-sponsor-section .guest img.image.is-rounded {
    width: 125px !important;
    height: 125px !important;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 0 2px 0 !important;
}

/* Increase spacing in the guest-and-sponsor-section container */
.guest-and-sponsor-section {
    padding: 15px 50px !important;
}

/* Increase spacing between guest and sponsor items */
.guest-and-sponsor-section .guest,
.guest-and-sponsor-section .sponsor-header {
    margin: 0 15px !important;
}

/* Align sponsor names to match guest name position */
.guest-and-sponsor-section .sponsor-header span {
    margin-top: 15px !important;
}

/* ******************* Default Paragraph Spacing ******************** */
/* Restore standard paragraph spacing after Bulma's CSS reset */
p, blockquote {
    margin-bottom: 1em;
    color: #ccc;
}

p:last-child, blockquote:last-child {
    margin-bottom: 0;
}


code {
  padding: 0;
  border: none;
  background-color: transparent;
  color: hsl(348deg 97.98% 67.12%);
}

/* ******************* MCP Documentation Page Styles ******************** */
/* Dark mode table styling for MCP docs */
.mcp-docs-page .table {
  background-color: #1a1a1a;
  color: #ddd;
}

.mcp-docs-page .table th {
  background-color: #2a2a2a;
  color: #fff;
  border-color: #444;
}

.mcp-docs-page .table td {
  background-color: #1a1a1a;
  color: #ddd;
  border-color: #444;
}

.mcp-docs-page .table.is-striped tbody tr:nth-child(even) td {
  background-color: #222;
}

.mcp-docs-page .table.is-striped tbody tr:nth-child(odd) td {
  background-color: #1a1a1a;
}

.mcp-docs-page .table thead th {
  background-color: #333;
  color: #fff;
  border-color: #444;
}

/* Make strong/bold content white in MCP docs */
.mcp-docs-page strong,
.mcp-docs-page b,
.mcp-docs-page .content strong,
.mcp-docs-page .content b {
  color: #fff;
}

/* Override Bulma's content heading colors for dark mode */
.mcp-docs-page .content h1,
.mcp-docs-page .content h2,
.mcp-docs-page .content h3,
.mcp-docs-page .content h4,
.mcp-docs-page .content h5,
.mcp-docs-page .content h6 {
  color: #fff;
}

/* Tool boxes styling */
.mcp-docs-page .box {
  background-color: #1c1c1c;
  border: 1px solid #333;
}

/* ================== Multi-Guest Photo Grid on Episode Pages ================== */
/* Shown below the guest-and-sponsor box when episode has 2+ guests */

.show-episode-page .multi-guest-grid {
    margin-top: -20px;
    margin-bottom: 10px;
}

.show-episode-page .multi-guest-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 170px));
    gap: 1.5rem;
    padding: 2rem 0;
    margin: 0 auto;
    justify-content: center;
    justify-items: center;
}

.show-episode-page .multi-guest-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.show-episode-page .multi-guest-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.show-episode-page .multi-guest-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.show-episode-page .multi-guest-image:hover {
    transform: scale(1.03);
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.show-episode-page .multi-guest-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

/* Tablet adjustments */
@media screen and (max-width: 768px) {
    .show-episode-page .multi-guest-container {
        grid-template-columns: repeat(auto-fit, minmax(130px, 170px));
        gap: 1.5rem;
        max-width: 700px;
    }

    .show-episode-page .multi-guest-image {
        width: 130px;
        height: 130px;
    }

    .show-episode-page .multi-guest-name {
        font-size: 0.9rem;
    }
}

/* Mobile adjustments */
@media screen and (max-width: 480px) {
    .show-episode-page .multi-guest-container {
        grid-template-columns: repeat(auto-fit, minmax(110px, 140px));
        gap: 1.25rem;
        padding: 1.5rem 1rem;
    }

    .show-episode-page .multi-guest-image {
        width: 110px;
        height: 110px;
    }

    .show-episode-page .multi-guest-name {
        font-size: 0.85rem;
    }
}