/*
 * Woodstock Arts - Sponsor Wall widget
 *
 * WHY EVERY RULE IS SCOPED TO .wa-sponsor-wall--el
 * ------------------------------------------------
 * The [wa_sponsors] shortcode renders the same class names with a DIFFERENT structure.
 * An unscoped stylesheet would restyle the shortcode on any page carrying both, and the
 * page most likely to carry both is the one somebody is mid-way through converting from
 * one to the other. The modifier class is the widget's own, so the shortcode is
 * untouched and can go on being the thing that works.
 *
 * WHY THE DEFAULTS ARE ON :root
 * -----------------------------
 * Elementor writes a control's value onto {{WRAPPER}} and this markup renders inside
 * that wrapper. Custom properties resolve by proximity in the tree rather than by
 * selector specificity, so a default declared on .wa-sponsor-wall would sit nearer than
 * the wrapper and shadow every control in the panel. That killed every base control in
 * both ticketing widgets before it was found, so it is written down wherever it matters.
 */
:root {
	--wa-sw-per-row: 3;
	--wa-sw-gap-x: 40px;
	--wa-sw-gap-y: 40px;
	--wa-sw-group-gap: 64px;
	--wa-sw-logo-h: 90px;
	--wa-sw-logo-fit: contain;
	--wa-sw-last-row: center;
	--wa-sw-heading-color: #6b6b70;
	--wa-sw-heading-gap: 24px;
	--wa-sw-grayscale: 0;
	--wa-sw-opacity: 1;
	--wa-sw-logo-valign: center;
}

.wa-sponsor-wall--el {
	display: flex;
	flex-direction: column;
	gap: var(--wa-sw-group-gap);
}

.wa-sponsor-wall--el .wa-sponsor-group__heading {
	margin: 0 0 var(--wa-sw-heading-gap);
	color: var(--wa-sw-heading-color);
	text-align: center;
}

/*
 * THE ORPHAN ROW, AND WHY NO SELECTOR TARGETS IT
 * ----------------------------------------------
 * Every item is sized to an exact column: the container width, minus every gutter,
 * divided by the number per row. A line holding a full set consumes the line exactly,
 * so there is no free space on it and justify-content cannot move anything. Only the
 * LAST line of a wrapped flex container can be short, so it is the only line with free
 * space, and it is therefore the only line that centres.
 *
 * Seven Gold logos at three per row come out three, three, then one centred underneath.
 * A single Silver logo is one short line, centred. No :nth-child arithmetic, no count
 * baked into a selector, nothing to update when a sponsor is added.
 *
 * The 0.02px shave is insurance against sub-pixel rounding, not a fix for a bug observed
 * here: a calc landing a hair over the line width would drop the last item onto a line of
 * its own, where it would then centre and read as a fault. It costs about five
 * thousandths of a percent of a column.
 */
.wa-sponsor-wall--el .wa-sponsor-group__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--wa-sw-last-row);
	align-items: var(--wa-sw-logo-valign);
	column-gap: var(--wa-sw-gap-x);
	row-gap: var(--wa-sw-gap-y);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wa-sponsor-wall--el .wa-sponsor {
	flex: 0 0 calc((100% - (var(--wa-sw-per-row) - 1) * var(--wa-sw-gap-x)) / var(--wa-sw-per-row) - 0.02px);
	max-width: calc((100% - (var(--wa-sw-per-row) - 1) * var(--wa-sw-gap-x)) / var(--wa-sw-per-row));
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wa-sponsor-wall--el .wa-sponsor__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--wa-sw-logo-h);
	text-decoration: none;
	color: inherit;
}

.wa-sponsor-wall--el .wa-sponsor__img {
	max-width: 100%;
	max-height: var(--wa-sw-logo-h);
	width: auto;
	height: auto;
	object-fit: var(--wa-sw-logo-fit);
	filter: grayscale(var(--wa-sw-grayscale));
	opacity: var(--wa-sw-opacity);
	transition: filter 0.25s ease, opacity 0.25s ease;
}

/*
 * Hover is its own pair rather than a hardcoded "colour comes back", because a wall
 * whose artwork is already greyscale has nothing to restore and the control would do
 * nothing. Blank in both and a logo simply does not react, which is a legitimate design.
 */
.wa-sponsor-wall--el .wa-sponsor__link:hover .wa-sponsor__img,
.wa-sponsor-wall--el .wa-sponsor__link:focus-visible .wa-sponsor__img {
	filter: grayscale(var(--wa-sw-grayscale-hover, var(--wa-sw-grayscale)));
	opacity: var(--wa-sw-opacity-hover, var(--wa-sw-opacity));
}

.wa-sponsor-wall--el .wa-sponsor__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/*
 * The name, shown when a sponsor has no usable logo. Not a fallback nobody sees: a
 * sponsor whose logo attachment has been deleted would otherwise render an anchor with
 * no accessible name at all, which a screen reader announces as a link to nowhere.
 */
.wa-sponsor-wall--el .wa-sponsor__name {
	box-sizing: border-box;
	margin: var(--wa-sw-name-margin, 0);
	padding: var(--wa-sw-name-pad, 0);
	border-radius: var(--wa-sw-name-radius, 0);
	background-color: var(--wa-sw-name-bg, transparent);
	color: var(--wa-sw-name-color, var(--wa-sw-heading-color));
	text-align: var(--wa-sw-name-align, center);
	transition: color 0.25s ease, background-color 0.25s ease;
}

/*
 * WHY THE NAME DEFAULTS LIVE IN var() FALLBACKS AND NOT ON :root
 * ---------------------------------------------------------------
 * The name follows the tier heading color until somebody picks its own. A custom property
 * that names another one is resolved where it is declared, so --wa-sw-name-color set to
 * var(--wa-sw-heading-color) on :root would freeze the :root grey and ignore the heading
 * color chosen in the panel. The fallback is read on the name itself, where the wrapper's
 * value is already inherited. The other fallbacks are the values a span had before these
 * controls existed, so a wall nobody has touched draws the same pixels.
 *
 * Centering at the logo height needs nothing new. .wa-sponsor__link is already a flex box
 * as tall as the logo height and centers whatever it holds, a name included.
 *
 * Hover only reaches a linked name. The unlinked wrapper is a span with the same class,
 * so the rule names the anchor.
 */
.wa-sponsor-wall--el a.wa-sponsor__link:hover .wa-sponsor__name,
.wa-sponsor-wall--el a.wa-sponsor__link:focus-visible .wa-sponsor__name {
	color: var(--wa-sw-name-color-hover, var(--wa-sw-name-color, var(--wa-sw-heading-color)));
}

/*
 * "Fill the logo cell". Elementor puts the switch's class on the widget wrapper. Stretching
 * inside .wa-sponsor__link takes the logo height of the name's own tier, so a Presenting
 * tile and a Gold tile come out the size of their logos.
 */
.wa-sw-name-fill-yes .wa-sponsor-wall--el .wa-sponsor__name {
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0;
	min-height: var(--wa-sw-logo-h);
	display: flex;
	align-items: center;
	justify-content: var(--wa-sw-name-justify, center);
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wa-sponsor-wall--el .wa-sponsor__img,
	.wa-sponsor-wall--el .wa-sponsor__name {
		transition: none;
	}
}