/*
 * Woodstock Arts - ACF Pairs widget
 *
 * 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-acf-pairs 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, and sponsor-wall.css carries the same note.
 *
 * WHY THE COLORS ARE NOT PROPERTIES
 * ---------------------------------
 * A property is only useful with a default, and a color default here would apply while
 * the control sat empty. Empty has to keep meaning "whatever the theme says", which
 * matters most for a link. Give it a default and the theme's own link color is lost the
 * moment this stylesheet loads. So the color controls write color straight onto the
 * element and this file declares none.
 *
 * WHY THERE IS NO MODIFIER CLASS ON THE ROOT
 * ------------------------------------------
 * sponsor-wall.css scopes everything to .wa-sponsor-wall--el because a shortcode renders
 * the same class names with a different structure. Nothing else on this site renders
 * .wa-acf-pairs, so there is no second structure to protect and no modifier to carry.
 */
:root {
	--wa-ap-align: left;
	--wa-ap-pair-gap: 4px;
	--wa-ap-row-gap: 20px;
	--wa-ap-item-pad: 0px;
	--wa-ap-heading-gap: 16px;
	--wa-ap-divider-style: none;
	--wa-ap-divider-width: 1px;
	--wa-ap-divider-color: #dedede;
}

/*
 * WHY THE OUTER GAP IS WORKED OUT HERE AND NOT ON :root (1.37.0, review round 3)
 * -----------------------------------------------------------------------------
 * Space between pairs writes `--wa-ap-row-gap` on the widget wrapper, and the list reads
 * `--wa-ap-gap-outer`. While the indirection sat on `:root`, `var(--wa-ap-row-gap)` was
 * substituted there, against the 20px above, and the computed 20px then inherited down past
 * the wrapper's own value. So the control wrote a variable nothing read and every list printed
 * 20px whatever the slider said. Both published templates that use this widget store 30px and
 * print 20px, which is how it went unnoticed.
 *
 * Substituting it on `.wa-acf-pairs` reads the wrapper's value, because the wrapper is an
 * ancestor of this element. The divider halves the gap, and it cannot declare
 * `--wa-ap-gap-outer` on the wrapper any more, since this declaration is nearer the list and
 * would win. It sets `--wa-ap-gap-half` instead, which this line prefers when it is there.
 */
.wa-acf-pairs {
	--wa-ap-gap-outer: var(--wa-ap-gap-half, var(--wa-ap-row-gap));
	text-align: var(--wa-ap-align);
}

.wa-acf-pairs__heading {
	margin: 0 0 var(--wa-ap-heading-gap);
}

/*
 * A dl gets flex treatment rather than the browser's block layout so the gap between one
 * pair and the next is a single property. The div wrapping each dt and dd is valid inside
 * a dl, and it is what makes both gaps possible: the outer gap separates the boxes, the
 * inner one separates the label from its value.
 */
.wa-acf-pairs__list {
	display: flex;
	flex-direction: column;
	row-gap: var(--wa-ap-gap-outer);
	margin: 0;
	padding: 0;
}

.wa-acf-pairs__item {
	display: flex;
	flex-direction: column;
	row-gap: var(--wa-ap-pair-gap);
	min-width: 0;
	margin: 0;
}

/*
 * The label as the link text prints a ul of links in place of the dl. The flex rules above
 * already space it, and this takes away the bullets and the start padding a list carries.
 */
.wa-acf-pairs__list--links {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * The rule sits on every pair but the first, so a list of one never draws a line above
 * nothing. Border style none is the off state, which costs no space even while a weight
 * and a color are set, so the Divider switch has something to turn on and off.
 */
.wa-acf-pairs__item + .wa-acf-pairs__item {
	padding-top: var(--wa-ap-item-pad);
	border-top: var(--wa-ap-divider-width) var(--wa-ap-divider-style) var(--wa-ap-divider-color);
}

/* dd carries an inline start margin of about 40px in every browser. */
.wa-acf-pairs__label,
.wa-acf-pairs__value {
	margin: 0;
	padding: 0;
}

/*
 * A raw address used as its own link text has no break opportunity in it, and one long
 * one in a narrow column pushes the whole template sideways.
 */
.wa-acf-pairs__value {
	overflow-wrap: anywhere;
}

/*
 * A row with a label and no value, or the reverse, still prints both elements because a
 * dt without a dd after it describes nothing. Hiding the empty one keeps it from drawing
 * the pair gap around a blank line.
 */
.wa-acf-pairs__label:empty,
.wa-acf-pairs__value:empty {
	display: none;
}

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