/**
 * @file
 * Conference page: layout and the pieces that only exist here.
 *
 * Cards, tags, the hero, topic pills, section headings and the segmented
 * control are theme components (rheumnow_theme/components) and bring their
 * own styles.
 */

/* The hero breaks out of the page container to the full window width. */
body.conference-app-page {
  overflow-x: clip;
}

/* The theme fixes .container at 1404px from 1200px up (custom.css), so on
   windows narrower than that the page overflows and gets clipped: the hero
   breakout is measured from an off-centre container and the sidebar's right
   edge is cut. Here it shrinks with the window instead. */
body.conference-app-page .container {
  width: auto;
  max-width: 1404px;
}

/* The hero sits directly under the site navigation. */
body.conference-app-page .main-page {
  padding-top: 0;
}

/* The theme's overflow: hidden here would stop the sidebar from sticking;
   clip still clips, and flow-root still contains floats. */
body.conference-app-page #content {
  display: flow-root;
  overflow: clip;
}

.rn-conf {
  margin: 0 0 48px;
  font-family: Poppins, sans-serif;
  color: #121212;
}

.rn-conf__hero {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

/* Temporary: marks the page as a trial beside the current one. */
.rn-conf__notice {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: #686868;
}

.rn-conf__notice-label {
  font-weight: 600;
  text-transform: uppercase;
  color: #ce4d0f;
}

.rn-conf .rn-conf__notice-link {
  color: #1585fe;
  text-decoration: none;
}

.rn-conf .rn-conf__notice-link:hover {
  text-decoration: underline;
}

/* Layout ------------------------------------------------------------------ */

.rn-conf__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 335px;
  gap: 40px;
  align-items: start;
  max-width: 1320px;
  margin: 24px auto 0;
}

.rn-conf__main {
  min-width: 0;
}

.rn-conf__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 16px 0 24px;
}

.rn-conf__toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  min-width: 0;
}

/* Best Of: a checkbox drawn to sit beside the segmented control. The real
   input stays in place, invisible, so it keeps keyboard and screen reader
   behaviour. */
.rn-conf .rn-conf__best {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: #686868;
  white-space: nowrap;
  cursor: pointer;
}

.rn-conf .rn-conf__best:hover,
.rn-conf .rn-conf__best.is-active {
  color: #121212;
}

.rn-conf__best-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.rn-conf__best-box {
  flex: 0 0 18px;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 1px solid #b5b5b5;
  background: #fff center / 12px 12px no-repeat;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.rn-conf__best.is-active .rn-conf__best-box {
  border-color: #121212;
  background-color: #121212;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.rn-conf__best-input:focus-visible + .rn-conf__best-box {
  outline: 2px solid #121212;
  outline-offset: 2px;
}

/* Starts small and grows to 330px, so it stays on the filters' line
   whenever there is room (a wrapping row would drop it before shrinking
   it from 330px). */
.rn-conf__search {
  flex: 1 1 180px;
  min-width: 180px;
  max-width: 330px;
  margin: 0;
}

.rn-conf .rn-conf__search-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 8px 16px 8px 46px;
  border: 1px solid #dedede;
  border-radius: 0;
  background: #fff url(../images/search.svg) 16px center / 20px 20px no-repeat;
  box-shadow: none;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #121212;
  appearance: none;
}

.rn-conf .rn-conf__search-input::placeholder {
  color: #686868;
  opacity: 1;
}

.rn-conf .rn-conf__search-input:focus {
  border-color: #1585fe;
  outline: none;
}

.rn-conf__status {
  margin: 0;
  padding: 24px 0;
  font-size: 14px;
  line-height: 21px;
  color: #686868;
}

/* What's Hot -------------------------------------------------------------- */

.rn-conf__hot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 40px;
  padding: 24px;
  border-top: 5px solid #ce4d0f;
  background: rgba(206, 77, 15, 0.08);
}

/* custom.css forces its own heading font and weight with !important. */
.rn-conf .rn-conf__hot-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-family: Inter, sans-serif !important;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600 !important;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: #121212;
}

.rn-conf__hot-title::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../../../../themes/custom/rheumnow_theme/assets/images/fire.svg) center / 20px 20px no-repeat;
}

/* Three cards to a screenful; each dot scrolls one screenful. */
.rn-conf__hot-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.rn-conf__hot-track::-webkit-scrollbar {
  display: none;
}

.rn-conf__hot-track .rn-feature-card {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
}

.rn-conf__hot-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.rn-conf .rn-conf__hot-dot {
  width: 10px;
  height: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #dedede;
  cursor: pointer;
}

.rn-conf .rn-conf__hot-dot.is-active {
  background: #ce4d0f;
}

/* Coverage ---------------------------------------------------------------- */

.rn-conf__coverage > .rn-section-heading {
  margin-bottom: 16px;
}

.rn-conf__feed {
  transition: opacity 300ms ease;
}

.rn-conf__feed.is-loading {
  opacity: 0.5;
}

/* The parts only fix the ads' place in the list; they add no box. */
.rn-conf__feed-part {
  display: contents;
}

.rn-conf__feed .rn-article-card,
.rn-conf__feed .rn-tweet-card {
  margin-bottom: 16px;
}

.rn-conf__more {
  display: flex;
  justify-content: center;
  padding: 16px 0 0;
}

/* Entrance for newly loaded cards; the same motion as the /videos grid
   (video-card-grid.css). conference-app.js sets the stagger delay. */
@keyframes rn-conf-card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rn-conf__card-enter,
.rn-conf__hot.is-entering .rn-feature-card {
  animation: rn-conf-card-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Only the first cards are in view; later ones share the last delay. */
.rn-conf__hot.is-entering .rn-feature-card:nth-child(2) { animation-delay: 80ms; }
.rn-conf__hot.is-entering .rn-feature-card:nth-child(3) { animation-delay: 160ms; }
.rn-conf__hot.is-entering .rn-feature-card:nth-child(4) { animation-delay: 240ms; }
.rn-conf__hot.is-entering .rn-feature-card:nth-child(n+5) { animation-delay: 320ms; }

/* Save: the star pops; the new row slides into Saved with a blue wash. */
@keyframes rn-conf-star-pop {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.45) rotate(-12deg);
  }

  65% {
    transform: scale(0.9) rotate(4deg);
  }

  100% {
    transform: none;
  }
}

.rn-conf .flag.is-popping svg {
  animation: rn-conf-star-pop 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rn-conf-saved-in {
  0% {
    max-height: 0;
    opacity: 0;
    transform: translateX(24px);
    background-color: #e8f2ff;
  }

  45% {
    max-height: 160px;
    opacity: 1;
    transform: none;
    background-color: #e8f2ff;
  }

  100% {
    max-height: 160px;
    background-color: #fff;
  }
}

.rn-conf .rn-conf__saved-item.is-new {
  overflow: hidden;
  animation: rn-conf-saved-in 1400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .rn-conf__card-enter,
  .rn-conf__hot.is-entering .rn-feature-card,
  .rn-conf .flag.is-popping svg,
  .rn-conf .rn-conf__saved-item.is-new {
    animation: none;
  }
}

.rn-conf .rn-conf__load-more {
  height: 40px;
  padding: 0 20px;
  border: 1px solid #dedede;
  border-radius: 0;
  background: #fff;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: #121212;
  cursor: pointer;
}

.rn-conf .rn-conf__load-more:hover {
  border-color: #121212;
}

/* Sidebar ----------------------------------------------------------------- */

/* Collapse toggle and the lower "View all podcasts" link: phones only. */
.rn-conf .rn-conf__collapse,
.rn-conf .rn-conf__pod-all {
  display: none;
}

.rn-conf .rn-conf__widget .rn-section-heading__aside {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rn-conf__aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.rn-conf__widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rn-conf__chat {
  gap: 24px;
}

.rn-conf__mockup {
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #ce4d0f;
}

/* Ads: the slot itself comes from rheumnow_adds. */
.rn-conf__ad-slot {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
}

.rn-conf__ad-anchor--feed {
  margin: 0 0 16px;
}

/* Ask RheumNow */

.rn-conf__chat-log {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 168px;
  max-height: 420px;
  padding: 16px 16px 24px;
  overflow-y: auto;
  background: #f6f6f6;
}

.rn-conf .rn-conf__chat-bubble {
  position: relative;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  max-width: 272px;
  margin: 0;
  padding: 12px 16px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.rn-conf .rn-conf__chat-bubble--bot {
  align-self: flex-start;
  margin-left: 2px;
  background: #fff;
  color: #494949;
}

/* The bubble's tail, on its lower left corner. */
.rn-conf__chat-bubble--bot::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: -8px;
  width: 16.45px;
  height: 14.25px;
  background: url(../images/chat-tail.svg) center / contain no-repeat;
  transform: rotate(-142.73deg);
}

.rn-conf .rn-conf__chat-bubble--user {
  align-self: flex-end;
  background: #1585fe;
  color: #fff;
}

.rn-conf__chat-bubble.is-pending {
  opacity: 0.7;
}

.rn-conf .rn-conf__chat-bubble.is-error {
  color: #9a3412;
}

.rn-conf__chat-line {
  display: block;
}

.rn-conf__chat-line + .rn-conf__chat-line {
  margin-top: 8px;
}

.rn-conf .rn-conf__chat-cite {
  margin-left: 1px;
  font-size: 10px;
  font-weight: 600;
  color: #1585fe;
}

/* [2][3] reads as "2,3". */
.rn-conf .rn-conf__chat-cite + .rn-conf__chat-cite::before {
  content: ",";
}

/* "Please email info@rheumnow.com…" under answers the coverage can't give. */
.rn-conf .rn-conf__chat-email {
  color: #1585fe;
  font-weight: 600;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* Sources under an answer, numbered like its citations. */
.rn-conf .rn-conf__chat-sources {
  margin: 12px 0 0;
  padding: 10px 0 0 18px;
  border-top: 1px solid #ececec;
  font-size: 13px;
  line-height: 18px;
}

.rn-conf .rn-conf__chat-sources li {
  margin: 0 0 6px;
  padding: 0;
}

.rn-conf .rn-conf__chat-sources a {
  color: #1585fe;
  text-decoration: none;
}

.rn-conf .rn-conf__chat-sources a:hover {
  text-decoration: underline;
}

.rn-conf .rn-conf__chat-source-type {
  margin-left: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #8a8a8a;
}

.rn-conf .rn-conf__chat-retry {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1585fe;
  cursor: pointer;
}

.rn-conf .rn-conf__chat-note {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: #686868;
}

.rn-conf__chat-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px;
  border: solid #ececec;
  border-width: 0 1px 1px;
  background: #fff;
}

.rn-conf__chat-chips {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  gap: 12px;
}

/* Starter questions come from editors and can be long: they wrap rather
   than push the sidebar sideways. */
.rn-conf .rn-conf__chat-chip {
  min-height: 32px;
  max-width: 100%;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 0;
  background: #ececec;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #121212;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  cursor: pointer;
}

.rn-conf .rn-conf__chat-chip:hover {
  background: #dedede;
}

.rn-conf .rn-conf__chat-chip:disabled {
  opacity: 0.5;
  cursor: default;
}

.rn-conf__chat-form {
  display: flex;
  gap: 12px;
  margin: 0;
}

.rn-conf .rn-conf__chat-input {
  flex: 1 1 0;
  box-sizing: border-box;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid #dedede;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #121212;
}

.rn-conf .rn-conf__chat-input::placeholder {
  color: #686868;
  opacity: 1;
}

.rn-conf .rn-conf__chat-send {
  flex: 0 0 auto;
  height: 40px;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  background: #1585fe;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
}

.rn-conf .rn-conf__chat-input:disabled {
  background: #f6f6f6;
}

.rn-conf .rn-conf__chat-send:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Podcasts */

.rn-conf .rn-conf__pod-list {
  margin: 0;
  padding: 0;
  background: #fff;
  list-style: none;
}

.rn-conf .rn-conf__pod-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 12px;
  border-bottom: 1px solid #dedede;
  list-style: none;
}

.rn-conf .rn-conf__pod-item:last-child {
  border-bottom: 0;
}

.rn-conf__pod-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rn-conf .rn-conf__pod-art {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #e5e7eb;
  cursor: pointer;
}

.rn-conf__pod-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.rn-conf__pod-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  word-break: break-word;
}

.rn-conf .rn-conf__pod-title {
  display: block;
  margin: 0;
  text-decoration: none;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: #121212;
}

.rn-conf .rn-conf__pod-date {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #8f8f8f;
}

/* The player slides open under the chosen episode and shut under the one
   it leaves (PLAYER_SLIDE_MS in conference-sidebar.js). */
.rn-conf__pod-player-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 300ms ease, opacity 200ms ease;
}

.rn-conf__pod-player-wrap.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.rn-conf__pod-player-inner {
  min-height: 0;
  overflow: hidden;
}

.rn-conf__pod-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}

/* A new topic's list fades in. */
.rn-conf .rn-conf__pod-list {
  animation: rn-conf-pod-list-in 300ms ease both;
}

@keyframes rn-conf-pod-list-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rn-conf__pod-player-wrap,
  .rn-conf .rn-conf__pod-list {
    transition: none;
    animation: none;
  }
}

.rn-conf .rn-conf__pod-play {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url(../images/podcast-play.svg) center / 32px 32px no-repeat;
  cursor: pointer;
}

.rn-conf .rn-conf__pod-play.is-playing {
  background: #1585fe;
}

/* Pause: two bars in place of the play triangle. */
.rn-conf .rn-conf__pod-play.is-playing::before {
  content: "";
  display: block;
  width: 10px;
  height: 12px;
  margin: 10px auto;
  border: solid #fff;
  border-width: 0 3px;
}

.rn-conf__pod-time {
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #8f8f8f;
  white-space: nowrap;
}

.rn-conf__pod-bar {
  position: relative;
  flex: 1 1 0;
  height: 3px;
  border-radius: 2px;
  background: #dedede;
  cursor: pointer;
}

/* A taller hit area than the 3px line. */
.rn-conf__pod-bar::before {
  content: "";
  position: absolute;
  inset: -8px 0;
}

.rn-conf__pod-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 2px;
  background: #1585fe;
}

.rn-conf .rn-conf__pod-title:hover {
  color: #1585fe;
}

/* Saved */

.rn-conf .rn-conf__saved-empty {
  margin: 0;
  padding: 12px;
  background: #f6f6f6;
  font-size: 14px;
  line-height: 20px;
  color: #686868;
}

.rn-conf .rn-conf__saved-empty a {
  color: #1585fe;
  text-decoration: none;
}

.rn-conf .rn-conf__saved-list {
  max-height: 510px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  background: #fff;
  list-style: none;
}

.rn-conf .rn-conf__saved-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #dedede;
  list-style: none;
}

.rn-conf .rn-conf__saved-link {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  color: inherit;
  text-decoration: none;
}

.rn-conf__saved-image {
  flex: 0 0 60px;
  width: 60px;
  min-height: 60px;
  overflow: hidden;
  background: #e5e7eb;
}

.rn-conf__saved-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.rn-conf__saved-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  word-break: break-word;
}

.rn-conf__saved-title {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: #121212;
}

.rn-conf__saved-link:hover .rn-conf__saved-title {
  color: #1585fe;
}

/* Poster Hall: stacked cards, full-width 16:9 image, title clipped at three
   lines. */
.rn-conf .rn-conf__poster-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rn-conf .rn-conf__poster-item {
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid #dedede;
  list-style: none;
}

.rn-conf .rn-conf__poster-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.rn-conf__poster-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e5e7eb;
}

.rn-conf__poster-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 300ms ease;
}

/* Play badge, as on the video cards. */
.rn-conf__poster-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5v9l7-4.5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 18px 18px no-repeat;
  transform: translate(-50%, -50%);
  transition: background-color 200ms ease;
}

.rn-conf__poster-card:hover .rn-conf__poster-image img {
  transform: scale(1.03);
}

.rn-conf__poster-card:hover .rn-conf__poster-play {
  background-color: rgba(21, 133, 254, 0.85);
}

.rn-conf__poster-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.rn-conf .rn-conf__poster-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #121212;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.rn-conf__poster-card:hover .rn-conf__poster-title {
  color: #1585fe;
}

.rn-conf .rn-conf__poster-author {
  font-size: 12px;
  line-height: 16px;
  font-style: italic;
  color: #686868;
}

@media (prefers-reduced-motion: reduce) {
  .rn-conf__poster-image img {
    transition: none;
  }
}

/* Therapeutic Updates and Daily Download reuse the Poster Hall cards. */
.rn-conf .rn-conf__update-summary {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 18px;
  color: #4a4f55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.rn-conf .rn-conf__update-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.rn-conf .rn-conf__update-date {
  font-size: 12px;
  line-height: 16px;
  color: #686868;
}

.rn-conf a.rn-conf__download-title {
  text-decoration: none;
}

.rn-conf a.rn-conf__download-title:hover,
.rn-conf a.rn-conf__download-title:focus-visible {
  color: #1585fe;
}

.rn-conf .rn-conf__download-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 7px 14px;
  border-radius: 4px;
  background: #1585fe;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

/* Download arrow. */
.rn-conf .rn-conf__download-button::before {
  content: "";
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v8M4.5 6.5 8 10l3.5-3.5M3 13.5h10'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rn-conf .rn-conf__download-button:hover,
.rn-conf .rn-conf__download-button:focus-visible {
  background: #0f6fd8;
  color: #fff;
}

/* "Catch up on Conference Podcasts": podcast app logos. */
.rn-conf .rn-conf__pod-apps-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rn-conf .rn-conf__pod-apps-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rn-conf .rn-conf__pod-apps-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid #dedede;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: #121212;
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.rn-conf .rn-conf__pod-apps-link:hover,
.rn-conf .rn-conf__pod-apps-link:focus-visible {
  border-color: #1585fe;
  box-shadow: 0 2px 8px rgba(21, 133, 254, 0.15);
}

.rn-conf .rn-conf__pod-apps-link img {
  display: block;
  width: auto;
  max-width: 110px;
  height: 26px;
  object-fit: contain;
}

/* Narrow screens: sticky filter bar and filter sheet ------------------------
   conference-app.js only renders these below 992px. */

.rn-conf__filterbar {
  position: fixed;
  z-index: 500; /* just under the site header (501) */
  top: var(--rn-conf-filterbar-top, 64px);
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 8px 16px;
  border-bottom: 1px solid #ececec;
  background: #fff;
  box-shadow: 0 4px 12px rgba(18, 18, 18, 0.08);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform 250ms ease, visibility 0s linear 250ms;
}

.rn-conf__filterbar.is-visible {
  transform: none;
  visibility: visible;
  transition: transform 250ms ease;
}

.rn-conf .rn-conf__filterbar-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: #121212;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

/* Funnel icon. */
.rn-conf__filterbar-icon {
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h12l-4.5 5.4V13l-3-1.5V8.4z' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.rn-conf__filterbar-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 9px;
  background: #1585fe;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.rn-conf__filterbar-summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #494949;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rn-conf__sheet {
  position: fixed;
  z-index: 1000;
  inset: 0;
  visibility: hidden;
  transition: visibility 0s linear 300ms;
}

.rn-conf__sheet.is-open {
  visibility: visible;
  transition: none;
}

.rn-conf__sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 18, 0.45);
  opacity: 0;
  transition: opacity 300ms ease;
}

.rn-conf__sheet.is-open .rn-conf__sheet-backdrop {
  opacity: 1;
}

.rn-conf__sheet-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  max-height: 88dvh;
  background: #fff;
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rn-conf__sheet.is-open .rn-conf__sheet-panel {
  transform: none;
}

.rn-conf__sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #ececec;
}

/* custom.css forces its own heading font and weight with !important. */
.rn-conf .rn-conf__sheet-title,
.rn-conf .rn-conf__sheet-label {
  margin: 0;
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: #121212;
}

.rn-conf .rn-conf__sheet-title {
  font-size: 16px;
  line-height: 20px;
}

.rn-conf .rn-conf__sheet-close {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='%23121212' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  cursor: pointer;
}

.rn-conf__sheet-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rn-conf__sheet-body .rn-conf__search {
  flex: 0 0 auto;
  max-width: none;
}

.rn-conf__sheet-body .rn-segmented {
  display: flex;
}

.rn-conf__sheet-body .rn-segmented .rn-segmented__item {
  flex: 1 1 0;
  gap: 6px;
  padding: 0 8px;
}

.rn-conf .rn-conf__sheet-label {
  margin-bottom: -4px;
  font-size: 13px;
  line-height: 16px;
}

.rn-conf__sheet-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rn-conf .rn-conf__sheet-topic {
  min-height: 32px;
  margin: 0;
  padding: 5px 14px;
  border: 1px solid #dedede;
  border-radius: 0;
  background: #fff;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--rn-pill-color, #121212);
  text-align: left;
  cursor: pointer;
}

.rn-conf .rn-conf__sheet-topic.is-active {
  border-color: #121212;
  background: #121212;
  color: #fff;
}

/* "More topics": the topics outside the featured ones, as on wide screens. */
.rn-conf__sheet-more {
  margin-top: 8px;
}

.rn-conf .rn-conf__sheet-more-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px 8px 14px;
  border: 1px solid #dedede;
  border-radius: 0;
  background: #fff;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #121212;
  text-align: left;
  cursor: pointer;
}

.rn-conf .rn-conf__sheet-more-toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23121212' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  transition: transform 150ms ease;
}

.rn-conf__sheet-more.is-open .rn-conf__sheet-more-toggle::after {
  transform: rotate(180deg);
}

/* A topic from the list is chosen: the toggle carries it, like a pill. */
.rn-conf .rn-conf__sheet-more.is-active .rn-conf__sheet-more-toggle {
  border-color: #121212;
  background: #121212;
  color: #fff;
}

.rn-conf .rn-conf__sheet-more.is-active .rn-conf__sheet-more-toggle::after {
  filter: invert(1);
}

.rn-conf .rn-conf__sheet-more-list {
  margin: 0;
  padding: 4px 0;
  border: 1px solid #dedede;
  border-top: 0;
  background: #fff;
  list-style: none;
}

.rn-conf .rn-conf__sheet-more-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rn-conf .rn-conf__sheet-more-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #121212;
  text-align: left;
  cursor: pointer;
}

.rn-conf .rn-conf__sheet-more-option:hover,
.rn-conf .rn-conf__sheet-more-option:focus-visible {
  background: #f6f6f6;
}

.rn-conf .rn-conf__sheet-more-option.is-active {
  background: #121212;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .rn-conf .rn-conf__sheet-more-toggle::after {
    transition: none;
  }
}

.rn-conf__sheet-foot {
  display: flex;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #ececec;
}

.rn-conf .rn-conf__sheet-clear,
.rn-conf .rn-conf__sheet-apply {
  height: 44px;
  margin: 0;
  padding: 0 16px;
  border-radius: 0;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.rn-conf .rn-conf__sheet-clear {
  flex: 0 0 auto;
  border: 1px solid #dedede;
  background: #fff;
  color: #121212;
}

.rn-conf .rn-conf__sheet-clear:disabled {
  opacity: 0.5;
  cursor: default;
}

.rn-conf .rn-conf__sheet-apply {
  flex: 1 1 auto;
  border: 0;
  background: #1585fe;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .rn-conf__filterbar,
  .rn-conf__sheet-backdrop,
  .rn-conf__sheet-panel {
    transition: none;
  }
}

/* Wide screens: the sidebar stays in view under the site header and scrolls
   on its own; conference-app.js sets --rn-conf-sticky-top from the header. */
@media (min-width: 992px) {
  .rn-conf__aside {
    position: sticky;
    top: var(--rn-conf-sticky-top, 88px);
    /* conference-app.js narrows this to the visible space as the page
       scrolls. Not overscroll-contained: at its end the wheel moves on to
       the page. */
    max-height: calc(100vh - var(--rn-conf-sticky-top, 88px) - 16px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #dedede transparent;
  }

  /* The sidebar scrolls, so the list does not need a scroll of its own. */
  .rn-conf .rn-conf__saved-list {
    max-height: none;
    overflow: visible;
  }
}

/* Narrow screens ---------------------------------------------------------- */

@media (max-width: 1199px) {
  .rn-conf__layout {
    gap: 24px;
  }

  .rn-conf__hot-track .rn-feature-card {
    flex-basis: calc((100% - 16px) / 2);
  }
}

/* One column; the ads move from the sidebar into the feed (see
   IN_FEED_ADS in conference-app.js, which uses the same width). */
@media (max-width: 991px) {
  .rn-conf__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Podcasts and Saved fold away under the feed. */
  .rn-conf .rn-conf__collapse {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: url(../../../../themes/custom/rheumnow_theme/assets/images/chevron-down-blue.svg) center / 20px 20px no-repeat;
    transform: rotate(180deg);
    transition: transform 150ms ease;
    cursor: pointer;
  }

  .rn-conf .rn-conf__widget.is-collapsed .rn-conf__collapse {
    transform: none;
  }

  .rn-conf__widget.is-collapsed .rn-conf__collapsible {
    display: none !important;
  }

  .rn-conf .rn-conf__podcasts .rn-section-heading__aside,
  .rn-conf .rn-conf__posters .rn-section-heading__aside,
  .rn-conf .rn-conf__saved .rn-section-heading__aside {
    flex: 1 1 auto;
  }

  .rn-conf .rn-conf__pod-all-top {
    display: none;
  }

  .rn-conf .rn-conf__pod-all {
    display: block;
    padding: 12px 0 20px;
    border-bottom: 1px solid #ececec;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
    color: #1585fe;
    text-decoration: none;
  }

  /* Saved: the count sits next to the title, the toggle on the right. */
  .rn-conf__saved .rn-section-heading {
    justify-content: flex-start;
  }

  .rn-conf .rn-conf__load-more {
    width: 100%;
    border: 0;
    background: #1585fe;
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #fff;
  }

  .rn-conf .rn-conf__load-more:hover {
    background: #0f6fd6;
  }
}

@media (max-width: 600px) {
  .rn-conf__toolbar {
    margin-bottom: 16px;
  }

  .rn-conf__toolbar-filters,
  .rn-conf__search {
    flex: 1 1 100%;
    max-width: none;
  }

  .rn-conf__toolbar-filters .rn-segmented {
    flex: 1 1 100%;
  }

  /* One card at a time, filling the box. */
  .rn-conf__hot {
    margin-bottom: 32px;
    padding: 16px;
  }

  .rn-conf__hot-track .rn-feature-card {
    flex-basis: 100%;
  }

  /* Feed cards sit a little in from their dividers. */
  .rn-conf__feed .rn-article-card,
  .rn-conf__feed .rn-tweet-card {
    padding-right: 12px;
    padding-left: 12px;
  }

  /* A tweet's image goes above the author, as on the article cards. */
  .rn-conf__feed .rn-tweet-card__media {
    order: -1;
  }
}

/* Tweet images open at full size ------------------------------------------- */

.rn-conf .rn-tweet-card .rn-tweet-card__zoom {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: zoom-in;
}

.rn-conf .rn-tweet-card .rn-tweet-card__zoom img {
  transition: transform 300ms ease;
}

.rn-conf .rn-tweet-card .rn-tweet-card__zoom:hover img,
.rn-conf .rn-tweet-card .rn-tweet-card__zoom:focus-visible img {
  transform: scale(1.03);
}

.rn-conf .rn-tweet-card .rn-tweet-card__zoom:focus-visible {
  outline: 2px solid #1585fe;
  outline-offset: -2px;
}

/* The popup is portalled to <body>, outside .rn-conf. Above the site header
   (501) and the filter sheet (1000). */
.rn-conf-lightbox {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 24px;
  background: rgba(18, 18, 18, 0.85);
  animation: rn-conf-lightbox-in 150ms ease-out;
}

.rn-conf-lightbox__image {
  display: block;
  max-width: min(1100px, 100%);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.rn-conf-lightbox .rn-conf-lightbox__close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  cursor: pointer;
}

.rn-conf-lightbox .rn-conf-lightbox__close:hover,
.rn-conf-lightbox .rn-conf-lightbox__close:focus-visible {
  background-color: rgba(255, 255, 255, 0.3);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes rn-conf-lightbox-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rn-conf-lightbox {
    animation: none;
  }

  .rn-conf .rn-tweet-card .rn-tweet-card__zoom img {
    transition: none;
  }
}