/* ==========================================================
   Phoenix Radio Header - CSS (drop-in)
   Forces Last 5 list to display TOP -> BOTTOM (newest at top)
   and removes common "reversed list" layout tricks.
   ========================================================== */

/* Container */
#phoenix-header {
  padding: 16px;
  margin: 16px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
}

#phoenix-header h2 {
  margin: 0 0 8px 0;
}

/* Now playing / last five blocks */
#phoenix-now-playing,
#phoenix-lastfive,
#phoenix-play-link {
  margin-top: 12px;
}

/* ----------------------------------------------------------
   LAST FIVE: Hard reset to prevent reversed order
   ---------------------------------------------------------- */

/* Reset any parent flex/grid tricks that might reverse display */
#phoenix-lastfive,
#phoenix-lastfive * {
  transform: none !important;
}

/* Force the UL to behave normally and NOT reverse */
#phoenix-lastfive ul,
#lastFiveList {
  /* Cancel flex/grid-based reversal */
  display: block !important;
  flex-direction: column !important;
  grid-auto-flow: row !important;

  /* Cancel direction tricks */
  direction: ltr !important;

  /* Normal list spacing */
  margin: 8px 0 0 18px;
  padding: 0;
  list-style: disc;
}

/* Force LI items to follow DOM order */
#phoenix-lastfive li,
#lastFiveList li {
  /* Cancel flex item ordering tricks */
  order: 0 !important;

  /* Cancel float/positioning tricks that can visually reorder */
  float: none !important;
  position: static !important;

  /* Standard list item behavior */
  display: list-item !important;
  margin: 4px 0;
  padding: 0;
}

/* Play link styling (optional) */
#phoenix-play-link a {
  text-decoration: underline;
}
/* =========================================
   Phoenix Header – Force visibility of
   Current Show / Live Show Info / Now Playing
   ========================================= */

/* Ensure header container is not collapsing */
#phoenix-header {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

/* Explicitly show current show output */
#phoenix-header p,
#phoenix-header .phoenix-text-message,
#phoenix-now-playing,
#phoenix-lastfive {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
}
/* =========================================================
   Phoenix Live Show Text Message Block
   Force layout + accessibility restoration
   ========================================================= */

.phoenix-text-message {
    /* Ensure it participates in layout */
    display: block !important;
    position: relative !important;

    /* Ensure it is not clipped or hidden */
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;

    /* Ensure it is not removed from a11y tree */
    pointer-events: auto !important;
}

.phoenix-text-message * {
    display: revert !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Restore list semantics explicitly */
.phoenix-text-message ul {
    list-style: disc !important;
    margin: 8px 0 8px 1.5em !important;
    padding: 0 !important;
}

.phoenix-text-message li {
    display: list-item !important;
}