/*
 * Woodstock Arts - Event Date 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-event-date 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 EVERY RULE IS SCOPED TO .wa-event-date--el
 * ----------------------------------------------
 * "wa-event-date" is a generic enough name that something else will reach for it one
 * day, and a widget stylesheet that restyles somebody else's markup is a trap nobody
 * can see. The modifier keeps this file talking about this widget only, the same way
 * the sponsor wall keeps clear of its own shortcode.
 *
 * WHY STACKING IS A FLEX BASIS AND NOT A COLUMN DIRECTION
 * -------------------------------------------------------
 * The choice between reading across and stacking is per breakpoint, so it has to
 * travel as a custom property. A column direction would then need align-items to
 * place the parts horizontally while a row needs justify-content and a baseline, and
 * those two answers cannot come from one variable. A wrapping row solves both at
 * once. At auto basis the parts share a line, at full basis each takes a line of its
 * own, and justify-content plus text-align place them either way.
 */
:root {
	--wa-ed-gap: 8px;
	--wa-ed-gap-y: 4px;
	--wa-ed-basis: auto;
	/*
	 * normal and inherit, so a widget nobody has aligned yet behaves like the text
	 * around it. A centered card centers its date without anybody setting a control,
	 * and the Alignment control overrides both of these the moment it is used.
	 */
	--wa-ed-align: normal;
	--wa-ed-text-align: inherit;
	--wa-ed-sep-display: inline;
	--wa-ed-sep-before: 0px;
	--wa-ed-dow-color: inherit;
	--wa-ed-date-color: inherit;
	--wa-ed-time-color: inherit;
	--wa-ed-sep-color: inherit;
	--wa-ed-affix-color: inherit;
}

.wa-event-date--el {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: var(--wa-ed-align);
	column-gap: var(--wa-ed-gap);
	row-gap: var(--wa-ed-gap-y);
	text-align: var(--wa-ed-text-align);
}

/*
 * Baseline alignment is what makes a hero row work. A date at 48px beside a time at
 * 16px sits on one line rather than hanging from the top of it, and every part here
 * is free to take its own type scale because of it.
 */
.wa-event-date--el > * {
	flex: 0 1 var(--wa-ed-basis);
	min-width: 0;
}

.wa-event-date--el .wa-event-date__dow {
	color: var(--wa-ed-dow-color);
}

.wa-event-date--el .wa-event-date__date {
	color: var(--wa-ed-date-color);
}

.wa-event-date--el .wa-event-date__time {
	color: var(--wa-ed-time-color);
}

/*
 * The start and end time are one part, so "7:30 PM to 10:00 PM" stays together on a
 * stacked line instead of breaking into three of them. The gap inside matches the gap
 * outside, which is why the separator between them needs no typed spaces.
 */
.wa-event-date--el .wa-event-date__times {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: baseline;
	column-gap: var(--wa-ed-gap);
}

.wa-event-date--el .wa-event-date__sep {
	color: var(--wa-ed-sep-color);
}

/*
 * The part separator is punctuation, and punctuation at the end of every stacked line
 * is litter. The layout control hides it in the same breath as it stacks the parts.
 * The range separator is a word carrying meaning between two dates and is never
 * hidden, which is why only this one reads the variable.
 */
.wa-event-date--el .wa-event-date__sep--part {
	display: var(--wa-ed-sep-display, inline);
	/*
	 * The space in front of the separator, from Space before the separator. 0px unless set,
	 * so a widget nobody has touched keeps its comma tight against the part before it.
	 */
	margin-inline-start: var(--wa-ed-sep-before);
}

.wa-event-date--el .wa-event-date__affix {
	color: var(--wa-ed-affix-color);
}

/* Editor only. Nothing prints this on the front end. */
.wa-event-date--el .wa-event-date__hint {
	font-size: 13px;
	font-style: italic;
	opacity: 0.6;
}