/*
 * Summer's End Page Kit: kit layer.
 *
 * Two jobs. First, containers: a new container sits on the page the way the
 * site's own blocks do, full width with the side margin, and a piece dropped
 * between two of the site's blocks keeps that margin too. Second, Elementor's
 * own Heading, Text Editor, Image, Button and Divider in the brand.
 *
 * Typography and colour belong to Site Settings (the Kit); this file only adds
 * what Site Settings cannot say, and every fallback here is weighted below the
 * Site Settings rule and below a widget's own Style tab, so both still win.
 * Sizes are rem or vw, so everything grows with the root size above 1920.
 */

:root {
	/* A section's space above and below: 120px at 1920, 64px on a phone. */
	--sepk-block: clamp(4rem, 6.25vw, 7.5rem);

	/* Space around a piece dropped between two of the site's blocks. */
	--sepk-run: clamp(2.5rem, 4.17vw, 5rem);

	/* Space between two pieces dropped one after the other. */
	--sepk-gap: 2rem;
}

/* ------------------------------------------------------------ containers */

/*
 * base.css zeroes the resolved padding of every container, which also threw
 * away any padding set in Elementor's panel and the Site Settings default.
 * Elementor's own chain is put back: explicit values win, the Site Settings
 * default applies otherwise. Every container the site shipped with carries an
 * explicit zero, so none of them moves.
 */
body.se-site .e-con,
body.se-site .e-con-inner {
	--padding-block-start: var(--padding-top);
	--padding-block-end: var(--padding-bottom);
	--padding-inline-start: var(--padding-left);
	--padding-inline-end: var(--padding-right);
}

/*
 * A section at the top level of a page breathes like the site's blocks. The
 * Site Settings default is zero above and below so that containers nested
 * inside one another never stack their space; only the outermost one gets it.
 * Containers holding the site's own blocks are left exactly as they were.
 * (In the editor the top level sits one wrapper deeper, in the section wrap.)
 */
body.se-site :is(.elementor-section-wrap, [data-elementor-id]) > .e-con:not(:has(> [class*="elementor-widget-se-"], > [class*="elementor-widget-sea-"], > .e-con-inner > [class*="elementor-widget-se-"], > .e-con-inner > [class*="elementor-widget-sea-"])) {
	--container-default-padding-top: var(--sepk-block);
	--container-default-padding-bottom: var(--sepk-block);
}

/*
 * A container nested inside another is a column: it takes no side margin of
 * its own, so its text lines up with everything else on the page. The one
 * exception is a container dropped into the site's own full bleed page
 * container, which behaves like a top level section.
 */
body.se-site :is(.e-con, .e-con-inner):not(:has(> [class*="elementor-widget-se-"], > [class*="elementor-widget-sea-"])) > .e-con {
	--container-default-padding-left: 0px;
	--container-default-padding-right: 0px;
}

body.se-site :is(.e-con, .e-con-inner):has(> [class*="elementor-widget-se-"], > [class*="elementor-widget-sea-"]) > .e-con {
	--container-default-padding-top: var(--sepk-block);
	--container-default-padding-bottom: var(--sepk-block);
}

/*
 * The header is fixed. A page that opens on anything other than a hero moves
 * its first section down by the header's height, or the header would sit on
 * the first line. A margin set in the panel still wins.
 */
:where(body.se-site :is(.elementor[data-elementor-type="wp-page"], .elementor[data-elementor-type="wp-page"] > .elementor-section-wrap)) > .e-con:where(:first-child:not(:has([data-se-hero], > [class*="elementor-widget-se-"], > [class*="elementor-widget-sea-"], > .e-con-inner > [class*="elementor-widget-se-"], > .e-con-inner > [class*="elementor-widget-sea-"]))) {
	--margin-top: var(--se-header-h);
}

/*
 * Pieces dropped straight into the site's own page container, between its
 * blocks. That container has no side padding (the blocks pad themselves), so
 * a piece keeps the side margin itself, and a run of pieces gets space at
 * both ends and between its members. Weighted low: padding set on the widget
 * in the panel wins.
 */
:where(body.se-site :is(.e-con, .e-con-inner):has(> [class*="elementor-widget-se-"], > [class*="elementor-widget-sea-"])) > .elementor-widget:where(:not([class*="elementor-widget-se-"]):not([class*="elementor-widget-sea-"])) {
	--sepk-own-pad: var(--se-pad);
	padding-inline: var(--se-pad);
}

:where(body.se-site :is(.e-con, .e-con-inner):has(> [class*="elementor-widget-se-"], > [class*="elementor-widget-sea-"])) > .elementor-widget:where(:not([class*="elementor-widget-se-"]):not([class*="elementor-widget-sea-"])):where(:not(.elementor-widget:not([class*="elementor-widget-se-"]):not([class*="elementor-widget-sea-"]) + *)) {
	padding-block-start: var(--sepk-run);
}

:where(body.se-site :is(.e-con, .e-con-inner):has(> [class*="elementor-widget-se-"], > [class*="elementor-widget-sea-"])) > .elementor-widget:where(:not([class*="elementor-widget-se-"]):not([class*="elementor-widget-sea-"])):where(:not(:has(+ .elementor-widget:not([class*="elementor-widget-se-"]):not([class*="elementor-widget-sea-"])))) {
	padding-block-end: var(--sepk-run);
}

:where(body.se-site :is(.e-con, .e-con-inner):has(> [class*="elementor-widget-se-"], > [class*="elementor-widget-sea-"])) > .elementor-widget:where(:not([class*="elementor-widget-se-"]):not([class*="elementor-widget-sea-"])) + .elementor-widget:where(:not([class*="elementor-widget-se-"]):not([class*="elementor-widget-sea-"])) {
	margin-block-start: var(--sepk-gap);
}

/*
 * The kit's blocks fill their column. On a phone every Elementor container
 * wraps, and a wrapping column measures each widget at its content width
 * before it stretches it: a block whose only content is a photo measured as
 * zero wide, so zero tall, and the next section slid up over it. Elementor
 * does the same for its own video and map widgets. Weighted low, so a width
 * set on the widget in the panel still wins.
 */
:where(.e-con, .e-con-inner) > .elementor-widget:where([class*="elementor-widget-sepk-"]) {
	width: 100%;
}

/* ---------------------------------------------------------------- heading */

/*
 * Site Settings sets each heading level's family, weight, case, size and
 * spacing. These are the same values one step lighter, for a Heading whose
 * tag is set to a div, p or span, which Site Settings does not reach.
 */
:where(body.se-site .elementor-widget-heading) .elementor-heading-title {
	font-family: var(--se-font-display);
	font-weight: 900;
	font-style: normal;
	text-transform: uppercase;
	line-height: 0.9;
	letter-spacing: -0.01em;
}

/* The page hides sideways overflow, so a word too long for its box breaks
   rather than being silently cut off. */
body.se-site .elementor-widget-heading .elementor-heading-title {
	overflow-wrap: break-word;
}

/*
 * Elementor's atomic Heading prints the tag itself, with no widget around it.
 * Site Settings reaches it too (see the Kit guard); this is the same fallback
 * as above. Weighted below the atomic style panel.
 */
:where(body.se-site) .e-heading-base {
	font-family: var(--se-font-display);
	font-weight: 900;
	font-style: normal;
	text-transform: uppercase;
	line-height: 0.9;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------ text editor */

:where(body.se-site) .elementor-widget-text-editor {
	font-family: var(--se-font-body);
	font-size: 1.25rem;
	line-height: 1.55;
}

:where(body.se-site .elementor-widget-text-editor) :where(p, ul, ol, blockquote) {
	max-width: 46rem;
	margin-block: 0 1em;
}

:where(body.se-site .elementor-widget-text-editor) :where(p, ul, ol, blockquote):last-child {
	margin-block-end: 0;
}

:where(body.se-site .elementor-widget-text-editor) :where(strong, b) {
	font-weight: 600;
}

body.se-site .elementor-widget-text-editor a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--se-dur) var(--se-ease);
}

/* The atomic Paragraph reads like the Text Editor. */
:where(body.se-site) .e-paragraph-base {
	max-width: 46rem;
	font-family: var(--se-font-body);
	font-size: 1.25rem;
	line-height: 1.55;
}

:where(body.se-site) .e-paragraph-base a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--se-dur) var(--se-ease);
}

@media (max-width: 767px) {
	:where(body.se-site) .elementor-widget-text-editor,
	:where(body.se-site) .e-paragraph-base {
		font-size: 1.125rem;
	}
}

/* ------------------------------------------------------------------ image */

/* Photos fill their column and keep square corners, as the site's do, and are
   never taller than the screen: a tall phone photo is cropped from the middle
   rather than running on for three screens. A width, height or radius set on
   the widget still wins. */
:where(body.se-site .elementor-widget-image) img {
	width: 100%;
	max-height: 100vh;
	max-height: 100svh;
	object-fit: cover;
	border-radius: 0;
}

body.se-site .elementor-widget-image figure {
	margin: 0;
}

body.se-site .elementor-widget-image .widget-image-caption {
	margin: 1rem 0 0;
	font-family: var(--se-font-mono);
	font-weight: 400;
	font-size: clamp(0.75rem, 0.73vw, 0.875rem);
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: start;
	color: var(--se-grey);
}

/* ----------------------------------------------------------------- button */

body.se-site .elementor-widget-button .elementor-button {
	transition: background-color var(--se-dur) var(--se-ease), color var(--se-dur) var(--se-ease);
}

body.se-site .elementor-widget-button .elementor-button-content-wrapper {
	align-items: center;
	gap: 0.75rem;
}

/* The site's arrow, sliding on hover. Left out when the button has an icon. */
body.se-site .elementor-widget-button .elementor-button-content-wrapper::after {
	content: "\2192";
	display: inline-block;
	font-family: var(--se-font-body);
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
	transition: transform var(--se-dur) var(--se-ease);
}

body.se-site .elementor-widget-button .elementor-button:hover .elementor-button-content-wrapper::after,
body.se-site .elementor-widget-button .elementor-button:focus-visible .elementor-button-content-wrapper::after {
	transform: translateX(0.25rem);
}

body.se-site .elementor-widget-button .elementor-button-content-wrapper:has(.elementor-button-icon)::after {
	content: none;
}

body.se-site .elementor-widget-button .elementor-button:focus-visible {
	outline: 2px solid var(--se-red-hot);
	outline-offset: 3px;
}

/* Variant: type se-black in the widget's Advanced, CSS Classes box. For a
   button on a red band. */
body.se-site .elementor-widget-button.se-black .elementor-button {
	background-color: var(--se-black);
	color: var(--se-bone);
}

body.se-site .elementor-widget-button.se-black .elementor-button:hover,
body.se-site .elementor-widget-button.se-black .elementor-button:focus {
	background-color: var(--se-night);
	color: var(--se-bone);
}

/* Variant: type se-outline. The brand has no borders, so this is the no fill
   button: the words and the arrow on their own, turning red on hover. The
   quiet second choice beside a red button. */
body.se-site .elementor-widget-button.se-outline .elementor-button {
	background-color: transparent;
	color: var(--se-bone);
	padding-inline: 0;
}

body.se-site .elementor-widget-button.se-outline .elementor-button:hover,
body.se-site .elementor-widget-button.se-outline .elementor-button:focus {
	background-color: transparent;
	color: var(--se-red-hot);
}

/* On a phone a button runs the full width, as the site's buttons do. */
@media (max-width: 767px) {
	:where(body.se-site .elementor-widget-button) .elementor-button {
		width: 100%;
	}
}

/* ---------------------------------------------------------------- divider */

/* A quiet hairline. A colour or weight set on the widget still wins. */
body.se-site .elementor-widget-divider {
	--divider-color: var(--se-grey-dark);
	--divider-border-width: 1px;
}