/*!
 * QA Sold Out 1.0.0
 *
 * Greys out sold-out events in The Events Calendar views and labels them "Sold Out".
 * qa-sold-out.php adds .qa-event--sold-out to every sold-out event wrapper.
 *
 * Built against The Events Calendar 6.17.5.1 and Event Tickets 5.29.5.2. The week-view
 * class names (Events Calendar Pro) come from TEC's own category-colour stylesheet.
 *
 * Contrast, WCAG AA: dark text at 70% opacity measures 5.3:1 on the page and 4.85:1 on
 * the darkest hatch stripe. Champagne on navy measures 8.0:1.
 */

/* 1. Tokens, set on every sold-out event inside a calendar view ---------------------- */

.tribe-events.tribe-events-view .qa-event--sold-out {
	--qa-so-ink: var(--qa-ink, #14202E);
	--qa-so-slate: var(--qa-slate, #5C6B7A);
	--qa-so-line: var(--qa-mist, #8A95A1);
	--qa-so-fill: #EEF0F3;
	--qa-so-fill-hover: #E4E7EB;
	--qa-so-hatch: repeating-linear-gradient(135deg, transparent 0 5px, rgb(15 44 77 / 0.06) 5px 10px);
	--qa-so-fade: 0.7;

	/* TEC category colours: grey pill and edge, ink text. */
	--tec-color-category-primary: var(--qa-so-line);
	--tec-color-category-secondary: var(--qa-so-fill);
	--tec-color-category-text: var(--qa-so-ink);

	/* TEC multiday bars, for events without a category colour. */
	--tec-color-background-primary-multiday: var(--qa-so-fill);
	--tec-color-background-primary-multiday-hover: var(--qa-so-fill-hover);
	--tec-color-background-secondary-multiday: var(--qa-so-fill);
	--tec-color-background-secondary-multiday-hover: var(--qa-so-fill-hover);
}

/* 2. Every view: featured images in greyscale ---------------------------------------- */

.tribe-events.tribe-events-view .qa-event--sold-out img {
	filter: grayscale(1);
	opacity: 0.5;
}

/* 3. Cards: list, day, month mobile, week mobile --------------------------------------
      Everything except the cost line drops to 70%, and the price does too. */

.tribe-events.tribe-events-view .qa-event--sold-out :is(
	.tribe-events-calendar-list__event-details,
	.tribe-events-calendar-day__event-details,
	.tribe-events-calendar-month-mobile-events__mobile-event-details,
	.tribe-events-pro-week-mobile-events__event-details
) > :not(.tribe-events-c-small-cta),
.tribe-events.tribe-events-view .qa-event--sold-out .tribe-events-c-small-cta__price {
	opacity: var(--qa-so-fade);
}

/* List date tag: day number in slate (5.2:1). */
.tribe-events.tribe-events-view .qa-event--sold-out .tribe-events-calendar-list__event-date-tag-daynum {
	color: var(--qa-so-slate);
}

/* 4. Grids: month, week and multiday bars --------------------------------------------
      Grey hatched fill, the usual calendar signal for "unavailable". background-color is
      !important because TEC's Customizer prints month multiday colours at higher
      specificity whenever a custom accent colour is set. */

.tribe-events.tribe-events-view .qa-event--sold-out :is(
	.tribe-events-calendar-month__calendar-event-details,
	.tribe-events-calendar-month__multiday-event-bar-inner,
	.tribe-events-pro-week-grid__event-link-inner,
	.tribe-events-pro-week-grid__multiday-event-bar-inner
) {
	background-color: var(--qa-so-fill) !important;
	background-image: var(--qa-so-hatch);
}

.tribe-events.tribe-events-view .qa-event--sold-out :is(
	.tribe-events-calendar-month__multiday-event-bar-inner:hover,
	.tribe-events-calendar-month__multiday-event-bar-inner--hover,
	.tribe-events-calendar-month__multiday-event-bar-inner--focus,
	.tribe-events-pro-week-grid__multiday-event-bar-inner:hover,
	.tribe-events-pro-week-grid__event-link:is(:hover, :focus) .tribe-events-pro-week-grid__event-link-inner
) {
	background-color: var(--qa-so-fill-hover) !important;
	filter: none;
}

/* Keeps the pill on the title's line in Pro's week bars. */
.tribe-events.tribe-events-view .qa-event--sold-out .tribe-events-pro-week-grid__multiday-event-bar-inner {
	align-items: center;
	display: flex;
}

.tribe-events.tribe-events-view .qa-event--sold-out :is(
	.tribe-events-calendar-month__calendar-event-datetime,
	.tribe-events-calendar-month__multiday-event-bar-inner,
	.tribe-events-pro-week-grid__event-datetime,
	.tribe-events-pro-week-grid__multiday-event-bar-inner
) > *,
.tribe-events.tribe-events-view .qa-event--sold-out :is(
	.tribe-events-calendar-month__calendar-event-title,
	.tribe-events-pro-week-grid__event-title
) {
	opacity: var(--qa-so-fade);
}

/* 5. Text colour -----------------------------------------------------------------------
      TEC prints some date lines in grey (#5D5D5D), which falls to 3.2:1 at 70%.
      Date lines and grid titles are set to ink before they fade. */

.tribe-events.tribe-events-view .qa-event--sold-out :is(
	.tribe-events-calendar-list__event-datetime,
	.tribe-events-calendar-day__event-datetime,
	.tribe-events-calendar-month__calendar-event-datetime,
	.tribe-events-calendar-month__calendar-event-title-link,
	.tribe-events-calendar-month__multiday-event-bar-title,
	.tribe-events-calendar-month-mobile-events__mobile-event-datetime,
	.tribe-events-pro-week-grid__event-datetime,
	.tribe-events-pro-week-grid__event-title,
	.tribe-events-pro-week-grid__multiday-event-bar-inner > *,
	.tribe-events-pro-week-mobile-events__event-details [class*="datetime"]
) {
	color: var(--qa-so-ink);
}

/* 6. The "Sold Out" pill ---------------------------------------------------------------- */

/* Event Tickets' own label: list, day, mobile lists, photo view and hover tooltips. */
.tribe-events .tribe-events-c-small-cta .tribe-events-c-small-cta__sold-out {
	background-color: var(--qa-navy, #0F2C4D);
	border-radius: 1em;
	color: var(--qa-champagne, #D8C189);
	display: inline-block;
	font-size: 0.875em;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.4;
	padding: 0.2em 0.75em;
	white-space: nowrap;
}

/* Month and week grids print no label, so the pill is drawn here. */
.tribe-events.tribe-events-view .qa-event--sold-out :is(
	.tribe-events-calendar-month__calendar-event-datetime,
	.tribe-events-calendar-month__multiday-event-bar-inner,
	.tribe-events-pro-week-grid__event-datetime,
	.tribe-events-pro-week-grid__multiday-event-bar-inner
)::before {
	background-color: var(--qa-navy, #0F2C4D);
	border-radius: 1em;
	color: var(--qa-champagne, #D8C189);
	content: "Sold Out";
	display: inline-block;
	flex: none;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.4;
	margin-inline-end: 0.4em;
	padding: 0.05em 0.6em;
	white-space: nowrap;
}

/* In month cells and week blocks the pill takes its own line above the time. */
.tribe-events.tribe-events-view .qa-event--sold-out :is(
	.tribe-events-calendar-month__calendar-event-datetime,
	.tribe-events-pro-week-grid__event-datetime
)::before {
	display: block;
	margin-block-end: 0.3em;
	margin-inline-end: 0;
	width: fit-content;
}

/* Windows high-contrast mode removes backgrounds; an outline keeps the pill visible. */
@media (forced-colors: active) {
	.tribe-events .tribe-events-c-small-cta .tribe-events-c-small-cta__sold-out,
	.tribe-events.tribe-events-view .qa-event--sold-out :is(
		.tribe-events-calendar-month__calendar-event-datetime,
		.tribe-events-calendar-month__multiday-event-bar-inner,
		.tribe-events-pro-week-grid__event-datetime,
		.tribe-events-pro-week-grid__multiday-event-bar-inner
	)::before {
		border: 1px solid CanvasText;
	}
}