/* V26: highlight the November 14 dance only; preserve the calendar dimensions. */
.calendar-day.featured-dance-day {
  position: relative;
  background: #fff4df;
  box-shadow: inset 0 0 0 2px #efa13a;
}

.featured-dance-day > .day-number {
  width: 26px;
  height: 26px;
  color: #8d3800;
  background: #ffe2b8;
}

.event-chip.featured-dance-chip {
  position: absolute;
  isolation: isolate;
  left: 8px;
  bottom: 6px;
  width: calc(100% - 16px);
  height: 34px;
  margin: 0;
  padding: 0 6px;
  border-radius: 5px;
  color: #351a05;
  background: transparent;
  font-size: clamp(.78rem, 1vw, .92rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-5deg);
  filter: drop-shadow(0 1px 1px rgba(115, 49, 0, .24));
}

.featured-dance-chip::before,
.featured-dance-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(4% 20%, 15% 22%, 14% 3%, 29% 15%, 35% 0%, 46% 12%, 56% 0%, 65% 13%, 81% 3%, 80% 20%, 97% 15%, 91% 38%, 100% 50%, 91% 62%, 97% 85%, 80% 80%, 81% 97%, 65% 87%, 56% 100%, 46% 88%, 35% 100%, 29% 85%, 14% 97%, 15% 78%, 4% 80%, 9% 61%, 0% 50%, 9% 39%);
}

.featured-dance-chip::before {
  z-index: -2;
  background: #994100;
}

.featured-dance-chip::after {
  z-index: -1;
  inset: 2px;
  background: #ffab32;
}

.event-chip.featured-dance-chip:hover::after {
  background: #ffc565;
}

.event-chip.featured-dance-chip:hover,
.event-chip.featured-dance-chip:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.calendar-legend .legend-dot.dance {
  background: #ffab32;
  box-shadow: inset 0 0 0 1px #994100;
}

/* Phones use the readable event list instead of the small month cells. */
.mobile-event-item.featured-dance-item {
  padding-inline: .75rem;
  border-bottom: 0;
  border-radius: 12px;
  background: #fff0d9;
  box-shadow: inset 0 0 0 2px #efa13a;
}

.featured-dance-item button strong {
  color: #8d3800;
}

.featured-dance-item button span {
  color: #351a05;
  font-weight: 700;
}

.featured-dance-item button:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (forced-colors: active) {
  .event-chip.featured-dance-chip {
    color: ButtonText;
    background: ButtonFace;
    border: 2px solid ButtonText;
    filter: none;
  }

  .featured-dance-chip::before,
  .featured-dance-chip::after {
    display: none;
  }
}