/*
 * Woodstock Arts - Venue widget
 *
 * WHY EVERY RULE IS SCOPED TO .wa-venue--el
 * -----------------------------------------
 * [wa_venue] prints its own <style> block inline in the body, unscoped, against the same
 * class names this markup uses. On a page carrying both, that inline block sits later in
 * the document than this file, so at equal specificity it wins and its fixed margins
 * override every spacing control in the panel. The modifier class is the widget's own, so
 * these rules score one class higher and the shortcode goes 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-venue 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.
 *
 * WHY THE ADDRESS IS NOT DIMMED HERE
 * ----------------------------------
 * The shortcode mutes the address with opacity .85 and inherits its color. This widget
 * offers a color control for the address instead, and an opacity underneath it would mean
 * somebody picks black and gets grey. opacity: 1 is declared rather than left out, because
 * the shortcode's inline rule would otherwise dim this markup on a page carrying both.
 */
:root {
	--wa-vn-align: inherit;
	--wa-vn-heading-gap: 8px;
	--wa-vn-name-gap: 4px;
	--wa-vn-address-gap: 8px;
	--wa-vn-row-gap: 4px;
	--wa-vn-heading-color: inherit;
	--wa-vn-name-color: inherit;
	--wa-vn-address-color: inherit;
	--wa-vn-phone-color: inherit;
	--wa-vn-phone-link: inherit;
	--wa-vn-notes-color: inherit;
	--wa-vn-label-color: inherit;
	--wa-vn-map-color: inherit;
	--wa-vn-map-gap: 16px;
}

/*
 * margin: 0 so the space around the whole block belongs to the Advanced tab, which writes
 * onto Elementor's own wrapper one level up. Two classes, so it also beats the shortcode's
 * 1.5em bottom margin on a page carrying both.
 */
.wa-venue.wa-venue--el {
	margin: 0;
	text-align: var(--wa-vn-align);
}

.wa-venue--el .wa-venue__heading {
	margin: 0 0 var(--wa-vn-heading-gap);
	color: var(--wa-vn-heading-color);
}

.wa-venue--el .wa-venue__name {
	margin: 0 0 var(--wa-vn-name-gap);
	color: var(--wa-vn-name-color);
}

/*
 * The bold name keeps the shortcode's weight, in a :where() so the rule scores as one
 * class, a step below what Elementor writes for a typography control. A control the panel
 * offers has to be able to win, and where both sides declare font-weight at the same
 * specificity the winner is whichever stylesheet the page happened to load last.
 */
:where(.wa-venue--el) .wa-venue__name {
	font-weight: 700;
}

.wa-venue--el .wa-venue__address {
	margin: 0 0 var(--wa-vn-address-gap);
	color: var(--wa-vn-address-color);
	opacity: 1;
}

.wa-venue--el .wa-venue__phone {
	margin: 0 0 var(--wa-vn-row-gap);
	color: var(--wa-vn-phone-color);
}

.wa-venue--el .wa-venue__parking,
.wa-venue--el .wa-venue__access {
	margin: 0 0 var(--wa-vn-row-gap);
	color: var(--wa-vn-notes-color);
	opacity: 1;
}

.wa-venue--el .wa-venue__access strong {
	color: var(--wa-vn-label-color);
}

.wa-venue--el .wa-venue__map {
	margin: 0 0 var(--wa-vn-row-gap);
}

/*
 * A link here takes the color of the text around it until somebody says otherwise, because
 * an address block reads better as one voice than as a stock blue line through the middle
 * of it. Hover is its own variable with the resting color as the fallback, so leaving it
 * empty means the link does not react to the pointer at all, which is a real design choice
 * rather than an unfinished one.
 */
.wa-venue--el .wa-venue__phone a {
	color: var(--wa-vn-phone-link);
	transition: color 0.2s ease;
}

.wa-venue--el .wa-venue__phone a:hover,
.wa-venue--el .wa-venue__phone a:focus-visible {
	color: var(--wa-vn-phone-link-hover, var(--wa-vn-phone-link));
}

.wa-venue--el .wa-venue__map a {
	color: var(--wa-vn-map-color);
	transition: color 0.2s ease;
}

.wa-venue--el .wa-venue__map a:hover,
.wa-venue--el .wa-venue__map a:focus-visible {
	color: var(--wa-vn-map-hover, var(--wa-vn-map-color));
}

.wa-venue--el a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * The map frame. line-height 0 keeps the inline frame from leaving a descender gap under it,
 * and overflow hidden lets the Corner radius control clip the frame's square corners. The
 * 300px height only holds until the Height control writes one, which it does by default.
 */
.wa-venue--el .wa-venue__embed {
	line-height: 0;
	overflow: hidden;
}

.wa-venue--el .wa-venue__embed iframe {
	display: block;
	width: 100%;
	height: 300px;
	border: 0;
}

.wa-venue--el.wa-venue--both .wa-venue__embed {
	margin-top: var(--wa-vn-map-gap);
}

/*
 * Whichever row ends up last drops its own space, so the gap under the block stays one
 * decision made in the Advanced tab. Which row that is changes with the switches in the
 * panel, so no selector can name it. This sits last in the file because it ties with the
 * per-row rules above on specificity.
 */
.wa-venue--el > :last-child {
	margin-bottom: 0;
}

/*
 * The editor hint. It renders only for somebody inside Elementor, in place of an empty box
 * that gives no clue which Venue field is missing.
 */
.wa-venue-hint {
	display: block;
	padding: 8px 10px;
	border: 1px dashed #c3c4c7;
	border-radius: 3px;
	color: #6b6b70;
	font-size: 12px;
	line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
	.wa-venue--el .wa-venue__phone a,
	.wa-venue--el .wa-venue__map a {
		transition: none;
	}
}