/*
 * Performance List.
 *
 * Every value the widget exposes is a custom property declared here, so a
 * control that is left blank falls through to a sensible default instead of
 * writing an empty rule. Hover and state properties chain back to their normal
 * counterpart, which is what makes "leave it blank to keep the normal color"
 * true rather than a promise in a tooltip.
 */
/*
 * WHY THE DEFAULTS ARE ON :root AND NOT ON THE WIDGET'S OWN ELEMENT
 * ----------------------------------------------------------------
 * They used to sit on .wa-perf, which reads better and silently killed every
 * control in the panel.
 *
 * Elementor writes a control's value onto {{WRAPPER}}, the .elementor-element
 * div. .wa-perf is rendered INSIDE that div. Custom properties resolve by
 * proximity in the tree rather than by selector specificity, so for anything
 * inside .wa-perf the nearest declaration wins, and that was this block. The
 * editor's color landed on an ancestor nobody was reading from.
 *
 * Nothing errored and the generated CSS looked correct in the file, which is why
 * this survived a check that only confirmed the declaration was emitted.
 * Measured in a browser: wrapper set #FF00FF, computed background came back
 * rgb(10,131,80), the default below.
 *
 * On :root the order comes out right: :root, then the wrapper the controls
 * write to, then the row or card a per-state color writes to. Each step is
 * nearer than the last, so the more specific intent wins.
 */
:root {
	--wasp-col-gap: 16px;

	--wasp-row-pad-top: 8px;
	--wasp-row-pad-right: 0px;
	--wasp-row-pad-bottom: 8px;
	--wasp-row-pad-left: 0px;
	--wasp-row-bg: transparent;
	--wasp-row-gone-opacity: 0.55;

	--wasp-rule-width: 2px;
	--wasp-rule-style: solid;
	--wasp-rule-color: rgba(54, 47, 39, 0.15);

	--wasp-date-color: #1d1d1f;
	--wasp-note-color: #6b6b70;
	--wasp-time-color: #6b6b70;

	--wasp-act-pad-top: 6px;
	--wasp-act-pad-right: 14px;
	--wasp-act-pad-bottom: 6px;
	--wasp-act-pad-left: 14px;
	--wasp-act-color: #fff;
	--wasp-act-bg: #0a8350;
	--wasp-act-gone-color: #44444a;
	--wasp-act-gone-bg: transparent;
}

.wa-perf__heading {
	margin: 0 0 0.6em;
}

.wa-perf__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wa-perf__row {
	/*
	 * 0.42.1. Row layout writes these per device. Unset, every var() falls back
	 * to the flex row this widget has always drawn. Two lines is a grid: the date
	 * and the note take the whole width, then the time sits left and the ticket
	 * link right, centered on each other.
	 */
	display: var(--wasp-row-display, flex);
	grid-template-columns: var(--wasp-row-cols, none);
	align-items: var(--wasp-row-align, baseline);
	gap: var(--wasp-line-gap, var(--wasp-col-gap)) var(--wasp-col-gap);
	padding: var(--wasp-row-pad-top) var(--wasp-row-pad-right) var(--wasp-row-pad-bottom) var(--wasp-row-pad-left);
	background: var(--wasp-row-bg);
	border-bottom: var(--wasp-rule-width) var(--wasp-rule-style) var(--wasp-rule-color);
	transition: background-color 0.18s ease, opacity 0.18s ease;
}

.wa-perf__row:last-child {
	border-bottom: 0;
}

.wa-perf__row:hover {
	background: var(--wasp-row-bg-hover, var(--wasp-row-bg));
}

/*
 * A row nobody can buy does not respond to a pointer.
 *
 * A hover state is a promise that something will happen when you press, and
 * there is nothing to press on a sold-out night. Keeping the highlight made the
 * row look live right up until the click that did not happen.
 */
.wa-perf__row--gone:hover {
	background: var(--wasp-row-bg);
}

.wa-perf__action--gone {
	cursor: default;
	pointer-events: none;
}

/*
 * A performance nobody can buy is dimmed rather than hidden. It is still the
 * answer to "what happened to the Saturday?".
 *
 * The fade is applied to the DATE AND TIME only, never to the words that say
 * why. Fading the whole row took "Sold Out" to 2.21:1 against a 4.5:1
 * requirement, which made the one thing a low-vision reader needs the hardest
 * thing on the row to read.
 */
.wa-perf__row--gone .wa-perf__date,
.wa-perf__row--gone .wa-perf__time,
.wa-perf__row--gone .wa-perf__note {
	opacity: var(--wasp-row-gone-opacity);
}

.wa-perf__date {
	color: var(--wasp-date-color);
	font-weight: 600;
}

/* The note takes the free space, so the time and the link stay put down the
   right edge however long a note happens to be. */
.wa-perf__date,
.wa-perf__note {
	grid-column: var(--wasp-span, auto);
}

.wa-perf__note {
	flex: 1 1 auto;
	color: var(--wasp-note-color);
}

.wa-perf__note:only-of-type,
.wa-perf__row > .wa-perf__date + .wa-perf__time {
	margin-left: var(--wasp-push, auto);
}

.wa-perf__time {
	color: var(--wasp-time-color);
	white-space: nowrap;
}

.wa-perf__action {
	display: inline-block;
	padding: var(--wasp-act-pad-top) var(--wasp-act-pad-right) var(--wasp-act-pad-bottom) var(--wasp-act-pad-left);
	/*
	 * PER-STATE COLORS SIT IN FRONT OF THE TWO BASE PAIRS
	 *
	 * The Ticket link section sets one color for a row that can be bought and
	 * one for a row that cannot. That covers the common case and stops there:
	 * "Sold Out", "Tickets at the Door" and "Coming Soon" all come out the same
	 * gray, when they are three different things a visitor needs to tell apart.
	 *
	 * --wasp-act-state-* is set by the Ticket states section against a single
	 * data-state, on the row rather than on the widget, so it only reaches the
	 * rows in that state. Unset, every var() here falls through to the base
	 * pair, which is why adding this changed nothing that was already styled.
	 */
	color: var(--wasp-act-state-color, var(--wasp-act-color));
	background: var(--wasp-act-state-bg, var(--wasp-act-bg));
	border-radius: 8px;
	/* 0.42.1. Unset, the link keeps a flex item's automatic minimum, so it never
	   shrinks below its words, as it always was. A 0px fallback let it shrink. */
	min-width: var(--wasp-act-min-w, auto);
	/* box-sizing and a centered label come from the Minimum width control itself,
	   so a list saved before 0.42.1 keeps the computed text-align it inherited. */
	justify-self: var(--wasp-act-justify, auto);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wa-perf__action:hover,
.wa-perf__action:focus-visible {
	/*
	 * FOUR DEEP, MOST SPECIFIC FIRST
	 *
	 * this state's hover, then the hover set for every state, then this state's
	 * resting color, then the resting color for every state. So a green On Sale
	 * link with no hover of its own darkens to the shared hover, and a gold
	 * Members Only link with its own hover uses that instead of the shared one.
	 *
	 * Only the four buyable states reach this rule at all. Everything else has
	 * pointer-events removed below, because a hover response on a night nobody
	 * can buy is a promise the click cannot keep.
	 */
	color: var(--wasp-act-state-color-hover, var(--wasp-act-color-hover, var(--wasp-act-state-color, var(--wasp-act-color))));
	background: var(--wasp-act-state-bg-hover, var(--wasp-act-bg-hover, var(--wasp-act-state-bg, var(--wasp-act-bg))));
}

/* Sold out, canceled, at the door and coming soon print as words with no link. */
.wa-perf__action--gone {
	color: var(--wasp-act-state-color, var(--wasp-act-gone-color));
	background: var(--wasp-act-state-bg, var(--wasp-act-gone-bg));
}

.wa-perf-stacked-yes .wa-perf__row {
	/* 0.42.1. The three-class margin-left: auto above used to beat the reset below,
	   so a stacked time sat against the right edge. */
	--wasp-push: 0px;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--wasp-col-gap) / 3);
}

.wa-perf-stacked-yes .wa-perf__note,
.wa-perf-stacked-yes .wa-perf__time {
	margin-left: 0;
}

/* Elementor's editor renders widgets without the theme's own reset in places,
   so the focus ring is declared rather than inherited. */
/*
 * A two-tone ring, NOT currentColor.
 *
 * currentColor on a filled pill is the label color, white, and the 2px offset
 * puts the ring outside the pill on whatever the section background happens to
 * be. On this widget's own light palette that was a white ring on a light page,
 * which is no indicator at all, on the only interactive element the widget has.
 *
 * The inner white separates the ring from the pill and the outer dark carries
 * the contrast, so it survives on a light or a dark section.
 */
.wa-perf__action:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1d1f;
}

@media (prefers-reduced-motion: reduce) {
	.wa-perf__row,
	.wa-perf__action {
		transition: none;
	}
}