/*
 * Woodstock Arts Spektrix - Dynamic Date Headline
 *
 * WHY THE DEFAULTS READ THE KIT WHERE THEY ARE USED
 * -------------------------------------------------
 * The kit declares its --e-global-* variables on the body class
 * .elementor-kit-2848, so a :root value pointing at one would resolve to
 * nothing. Each kit-linked default is the last step of a var() chain on the
 * element that uses it. The typeface is the kit's Three style, Tungsten
 * Condensed, which the kit also sizes down on phones. Only literal defaults
 * live on :root.
 *
 * WHY :root AND NEVER .wa-dh FOR A DEFAULT
 * ----------------------------------------
 * Elementor writes each control's value onto {{WRAPPER}}, and .wa-dh sits inside
 * it. A custom property resolves by nearness in the tree, so a default declared
 * on .wa-dh would shadow the control above it.
 *
 * WHY SOME RULES NAME THE WIDGET CLASS
 * ------------------------------------
 * Hello's reset styles every heading and link at (0,0,1), its a:hover at (0,1,1),
 * and Elementor's frontend styles `.elementor a` at (0,1,1). A rule inside
 * :where(.wa-dh) weighs nothing and lost to all three. The rules that need to
 * win name the widget's own class inside :where() and one or two classes of
 * their own, which puts them at (0,1,0) to (0,3,0). Every control lands at
 * (0,4,0), so controls still win.
 */
:root {
	--wadh-gap: 0.1em;
	--wadh-fade: 0.28s;
}

:where(.elementor-widget-wa_spektrix_date_headline) .wa-dh {
	box-sizing: border-box;
	max-width: var(--wadh-max-width, none);
	margin-block: 0;
	margin-inline: var(--wadh-inline-start, 0) var(--wadh-inline-end, 0);
	padding: 0;
	color: var(--wadh-color, var(--e-global-color-primary, #362f27));
	font-family: var(--e-global-typography-bb10f69-font-family, "Tungsten Condensed"), "Montserrat", sans-serif;
	font-size: var(--e-global-typography-bb10f69-font-size, 50px);
	font-weight: var(--e-global-typography-bb10f69-font-weight, 300);
	font-style: normal;
	/* Unitless, so a span with its own larger size gets a line to match. The kit's 1em would not scale. */
	line-height: 1.05;
	letter-spacing: var(--e-global-typography-bb10f69-letter-spacing, 2px);
	text-transform: var(--e-global-typography-bb10f69-text-transform, uppercase);
	text-align: var(--wadh-align, start);
	text-wrap: balance;
	overflow-wrap: break-word;
}

:where(.wa-dh) .wa-dh__lead {
	color: var(--wadh-lead-color, currentColor);
}

/*
 * Inline or block, from Layout. A block prompt takes the gap above it, and an
 * inline one ignores a block margin, so the gap needs no condition.
 */
:where(.wa-dh) .wa-dh__prompt {
	display: var(--wadh-prompt-display, inline);
	margin-block-start: var(--wadh-gap);
	color: var(--wadh-prompt-color, currentColor);
}

:where(.wa-dh) .wa-dh__weekday {
	color: var(--wadh-weekday-color, currentColor);
}

:where(.wa-dh) .wa-dh__next {
	color: var(--wadh-next-color, currentColor);
}

:where(.elementor-widget-wa_spektrix_date_headline) .wa-dh .wa-dh__link {
	color: inherit;
	text-decoration-line: var(--wadh-link-decoration, underline);
	text-decoration-color: currentColor;
	text-decoration-thickness: max(1px, 0.04em);
	text-underline-offset: 0.12em;
}

:where(.elementor-widget-wa_spektrix_date_headline) .wa-dh .wa-dh__link:hover {
	color: var(--wadh-prompt-hover, currentColor);
}

/*
 * A Weekday word or Next day and date color sits on the token's own span, so
 * the link's hover color never reached it and only part of the prompt changed.
 * With no hover color set, each token keeps its own. At (0,3,0) this still
 * loses to every control.
 */
:where(.elementor-widget-wa_spektrix_date_headline .wa-dh) .wa-dh__link:hover .wa-dh__next {
	color: var(--wadh-prompt-hover, var(--wadh-next-color, currentColor));
}

:where(.elementor-widget-wa_spektrix_date_headline .wa-dh) .wa-dh__link:hover .wa-dh__weekday {
	color: var(--wadh-prompt-hover, var(--wadh-weekday-color, currentColor));
}

:where(.wa-dh) .wa-dh__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 0.08em;
	border-radius: 2px;
}

/*
 * Soft change. The script marks the part that is about to change, waits for it
 * to fade, swaps the words and takes the mark away. Only opacity moves, so the
 * layout shifts no further than the new words themselves.
 */
:where(.wa-dh) [data-wa-dh-out] {
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	:where(.wa-dh[data-wa-dh-soft="yes"]) .wa-dh__lead,
	:where(.wa-dh[data-wa-dh-soft="yes"]) .wa-dh__prompt {
		transition: opacity var(--wadh-fade) ease;
	}

	:where(.wa-dh) .wa-dh__link,
	:where(.wa-dh) .wa-dh__link :is(.wa-dh__next, .wa-dh__weekday) {
		transition: color 0.2s ease;
	}
}

/* The script never fades under reduced motion. This keeps a stray mark from hiding anything. */
@media (prefers-reduced-motion: reduce) {
	:where(.wa-dh) [data-wa-dh-out] {
		opacity: 1;
	}
}

.wa-dh-hint {
	margin: 0 0 0.75em;
	padding: 0.6em 0.8em;
	border: 1px dashed rgba(54, 47, 39, 0.4);
	border-radius: 6px;
	font: 13px/1.4 sans-serif;
	color: #362f27;
}