/*
 * Summer's End Page Kit: Elementor's newer "atomic" widgets.
 *
 * Elementor 4 lists an Atomic Elements group first in the panel, with its own
 * Heading, Paragraph, Button and Divider. Out of the box that Button is bright
 * blue and the Divider is black on black. These rules give them the brand.
 *
 * Only the Button and the Divider are here, because Elementor's own base
 * styles set their colour and shape. These rules carry the same weight as those
 * and this sheet is printed straight after them (it names them as a dependency)
 * and before any style set in the atomic style panel. So the brand beats the
 * blue default, and anything Gill sets on the widget still beats the brand. The
 * atomic Heading and Paragraph are styled in kit.css and by Site Settings.
 */

.elementor .e-button-base {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	align-self: flex-start;
	padding: 1rem 1.9rem;
	border-width: 0;
	border-radius: 0;
	background-color: var(--e-global-color-primary, var(--se-red));
	color: var(--e-global-color-secondary, var(--se-bone));
	font-family: var(--se-font-display);
	font-weight: 700;
	font-style: normal;
	font-size: 1.3125rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--se-dur) var(--se-ease), color var(--se-dur) var(--se-ease);
}

/* The site's arrow, sliding on hover. */
.elementor .e-button-base::after {
	content: "\2192";
	display: inline-block;
	font-family: var(--se-font-body);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	transition: transform var(--se-dur) var(--se-ease);
}

.elementor .e-button-base:hover,
.elementor .e-button-base:focus-visible {
	background-color: var(--se-black);
	color: var(--se-bone);
}

.elementor .e-button-base:hover::after,
.elementor .e-button-base:focus-visible::after {
	transform: translateX(0.25rem);
}

.elementor .e-divider-base {
	background-color: var(--se-grey-dark);
}

@media (max-width: 767px) {
	.elementor .e-button-base {
		align-self: stretch;
		font-size: 1.0625rem;
	}
}