/*
 * Elementor page-template bridge.
 *
 * Genotyp keeps ownership of the block-theme Header and Footer, while the
 * Elementor document owns all spacing and width decisions inside Post
 * Content. The selectors remain template-scoped so ordinary Gutenberg pages
 * retain their constrained editorial flow.
 */

body.sggw-elementor-template :where(
	.sggw-elementor-page-main,
	.sggw-elementor-page-content
) {
	box-sizing: border-box;
	inline-size: 100%;
	margin-block: 0;
	max-inline-size: none;
	min-inline-size: 0;
	padding: 0;
}

/* Core constrained-layout rules use important inline margins for direct
 * children. Reset only Elementor's document root and leave its containers in
 * control of their own boxed or full-width geometry. */
body.sggw-elementor-template
	.sggw-elementor-page-content.wp-block-post-content
	> .elementor {
	inline-size: 100%;
	margin-block: 0 !important;
	margin-inline: 0 !important;
	max-inline-size: none !important;
}

/*
 * Native Elementor Text Editor defaults and Genotyp list recipes.
 *
 * Two classes of specificity beat Elementor Kit defaults without important.
 * A value authored directly on one widget is emitted later with equal or
 * greater specificity and therefore remains authoritative.
 */
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-text-editor {
	color: var(--sggw-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--regular);
	line-height: var(--wp--custom--typography--line-height--body);
	margin: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-text-editor
	:where(.elementor-widget-container, p, ul, ol, li) {
	color: inherit;
	font: inherit;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-text-editor
	.elementor-widget-container
	> :where(p, ul, ol) {
	margin: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-text-editor
	.elementor-widget-container
	> p + p {
	margin-block-start: var(--wp--preset--spacing--30, 16px);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-text-editor
	a {
	color: var(--sggw-link-foreground);
	text-decoration-color: currentColor;
	text-decoration-line: var(--sggw-inline-link-decoration-rest);
	text-decoration-skip-ink: auto;
	text-decoration-thickness: var(--sggw-link-decoration-thickness);
	text-underline-offset: var(--sggw-link-underline-offset);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-text-editor
	a:visited {
	color: var(--sggw-link-foreground);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-text-editor
	a:is(:hover, :active, :focus-visible) {
	color: var(--sggw-link-foreground);
	text-decoration-line: var(--sggw-link-decoration-interactive);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-text-editor
	a:focus:not(:focus-visible) {
	outline: none;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-text-editor
	a:focus-visible {
	border-radius: var(--wp--custom--radius--x-small);
	outline: var(--wp--custom--line--focus-ring-width) solid var(--sggw-line-focus);
	outline-offset: var(--wp--custom--line--focus-ring-offset-compact);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.elementor-widget-text-editor,
		.elementor-widget-text-editor > .elementor-widget-container,
		.elementor-widget-text-editor > .elementor-text-editor
	)
	> :where(ul, ol) {
	list-style-position: outside;
	padding-inline-start: 2em;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.elementor-widget-text-editor,
		.elementor-widget-text-editor > .elementor-widget-container,
		.elementor-widget-text-editor > .elementor-text-editor
	)
	> :where(ul, ol)
	:where(ul, ol) {
	margin-block: var(--wp--preset--spacing--10, 8px) 0;
	padding-inline-start: var(--wp--preset--spacing--50, 32px);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.elementor-widget-text-editor,
		.elementor-widget-text-editor > .elementor-widget-container,
		.elementor-widget-text-editor > .elementor-text-editor
	)
	> :where(ul, ol)
	li {
	padding-inline-start: var(--wp--preset--spacing--20, 12px);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.elementor-widget-text-editor,
		.elementor-widget-text-editor > .elementor-widget-container,
		.elementor-widget-text-editor > .elementor-text-editor
	)
	> :where(ul, ol)
	li + li {
	margin-block-start: var(--wp--preset--spacing--10, 8px);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.elementor-widget-text-editor,
		.elementor-widget-text-editor > .elementor-widget-container,
		.elementor-widget-text-editor > .elementor-text-editor
	)
	> ul
	> li,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.elementor-widget-text-editor,
		.elementor-widget-text-editor > .elementor-widget-container,
		.elementor-widget-text-editor > .elementor-text-editor
	)
	> :where(ul, ol)
	ul
	> li {
	position: relative;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.elementor-widget-text-editor,
		.elementor-widget-text-editor > .elementor-widget-container,
		.elementor-widget-text-editor > .elementor-text-editor
	)
	> ul
	> li::marker,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.elementor-widget-text-editor,
		.elementor-widget-text-editor > .elementor-widget-container,
		.elementor-widget-text-editor > .elementor-text-editor
	)
	> :where(ul, ol)
	ul
	> li::marker {
	color: transparent;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.elementor-widget-text-editor,
		.elementor-widget-text-editor > .elementor-widget-container,
		.elementor-widget-text-editor > .elementor-text-editor
	)
	> ul
	> li::before,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.elementor-widget-text-editor,
		.elementor-widget-text-editor > .elementor-widget-container,
		.elementor-widget-text-editor > .elementor-text-editor
	)
	> :where(ul, ol)
	ul
	> li::before {
	background-color: currentColor;
	block-size: 1.5em;
	clip-path: circle(calc(.25em / 2) at center);
	content: "";
	inline-size: 1em;
	inset-block-start: 0;
	inset-inline-start: -1em;
	position: absolute;
}

/* Elementor 4 uses three Text Editor shapes: direct content on the frontend,
 * .elementor-text-editor in edit mode and a legacy widget-container wrapper. */
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.elementor-widget-text-editor.sggw-list-marker-particle,
		.elementor-widget-text-editor.sggw-list-marker-particle > .elementor-widget-container,
		.elementor-widget-text-editor.sggw-list-marker-particle > .elementor-text-editor
	)
	> ul
	> li::before {
	-webkit-mask-image: var(--sggw-particle-shape-pollen);
	-webkit-mask-mode: alpha;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: .54em;
	clip-path: none;
	mask-image: var(--sggw-particle-shape-pollen);
	mask-mode: alpha;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: .54em;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.elementor-widget-text-editor.sggw-list-marker-checkmark,
		.elementor-widget-text-editor.sggw-list-marker-checkmark > .elementor-widget-container,
		.elementor-widget-text-editor.sggw-list-marker-checkmark > .elementor-text-editor
	)
	> ul
	> li::before {
	align-items: center;
	background: none;
	clip-path: none;
	content: "✓";
	display: grid;
	font-size: 1em;
	line-height: 1;
	place-items: center;
}

@media (forced-colors: active) {
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.elementor-widget-text-editor
		a,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.elementor-widget-text-editor
		a:is(:visited, :hover, :active) {
		color: LinkText;
		text-decoration-line: underline;
	}

	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.elementor-widget-text-editor
		a:focus-visible {
		outline-color: Highlight;
	}

	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		:is(
			.elementor-widget-text-editor,
			.elementor-widget-text-editor > .elementor-widget-container,
			.elementor-widget-text-editor > .elementor-text-editor
		)
		> ul
		> li::marker,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		:is(
			.elementor-widget-text-editor,
			.elementor-widget-text-editor > .elementor-widget-container,
			.elementor-widget-text-editor > .elementor-text-editor
		)
		> :where(ul, ol)
		ul
		> li::marker {
		color: CanvasText;
	}

	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		:is(
			.elementor-widget-text-editor,
			.elementor-widget-text-editor > .elementor-widget-container,
			.elementor-widget-text-editor > .elementor-text-editor
		)
		> ul
		> li::before,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		:is(
			.elementor-widget-text-editor,
			.elementor-widget-text-editor > .elementor-widget-container,
			.elementor-widget-text-editor > .elementor-text-editor
		)
		> :where(ul, ol)
		ul
		> li::before {
		display: none;
	}
}

/* Text Editor keeps the semantic lead role used by Core Paragraph without
 * inheriting Elementor Kit typography. Direct editor-authored typography and
 * inline styles remain more specific and can still override this bridge. */
:where(body.sggw-elementor-document)
	.elementor-widget-text-editor
	p.is-sggw-text-role-lead {
	color: var(--sggw-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--regular);
	line-height: var(--wp--custom--typography--line-height--supporting);
	margin: 0;
}

/*
 * Elementor content inside the shared Page with Sidebar shell.
 *
 * The theme keeps the 1200px outer frame, page header, local navigation and
 * 25/75 columns. Only Elementor's document root is released from Gutenberg's
 * constrained content width inside the right-hand column.
 */
:where(body.sggw-elementor-sidebar-page)
	:is(
		.sggw-page-content,
		.wp-block-columns:has(.wp-block-sggw-section-navigation)
			> .wp-block-column:not(:has(.wp-block-sggw-section-navigation))
	) {
	min-inline-size: 0;
}

:where(body.sggw-elementor-sidebar-page)
	:is(
		.sggw-page-with-sidebar-content.wp-block-post-content,
		.sggw-page-content > .wp-block-post-content,
		.wp-block-columns:has(.wp-block-sggw-section-navigation)
			> .wp-block-column:not(:has(.wp-block-sggw-section-navigation))
			> .wp-block-post-content
	) {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: none;
	min-inline-size: 0;
	padding: 0;
}

/* Gutenberg's constrained layout left-aligns the 620px history column inside
 * the wider sidebar content area. Elementor centers a Boxed container's inner
 * wrapper by default, so retain the source page's alignment explicitly. */
:where(body.sggw-elementor-sidebar-page)
	:is(
		.sggw-elementor-faculty-history-content.e-con,
		.sggw-elementor-faculty-council-intro.e-con,
		.sggw-elementor-council-tasks.e-con,
		.sggw-elementor-faculty-discipline-council-intro.e-con
	)
	> .e-con-inner {
	margin-inline: 0 auto;
}
:where(body.sggw-elementor-sidebar-page)
	:is(
		.sggw-page-with-sidebar-content.wp-block-post-content,
		.sggw-page-content > .wp-block-post-content,
		.wp-block-columns:has(.wp-block-sggw-section-navigation)
			> .wp-block-column:not(:has(.wp-block-sggw-section-navigation))
			> .wp-block-post-content
	)
	> .elementor {
	box-sizing: border-box;
	inline-size: 100%;
	margin-block: 0 !important;
	margin-inline: 0 !important;
	max-inline-size: none !important;
	min-inline-size: 0;
	padding: 0;
}

/*
 * Elementor content inside Genotyp's global Single Post shell.
 *
 * Header, post metadata, featured image and Footer stay theme-owned. Only the
 * Elementor document nested in Post Content receives an unconstrained canvas;
 * its own Boxed containers remain responsible for the readable line length.
 */
:where(body.sggw-elementor-post) .wp-block-post-content {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: none;
	padding: 0;
}

:where(body.sggw-elementor-post)
	.wp-block-post-content
	> .elementor {
	box-sizing: border-box;
	inline-size: 100%;
	margin-block: 0 !important;
	margin-inline: 0 !important;
	max-inline-size: none !important;
	min-inline-size: 0;
	padding: 0;
}

:where(body.sggw-elementor-post)
	.sggw-elementor-post-content.e-con {
	inline-size: 100%;
	margin-block: 0;
	min-inline-size: 0;
}

/* One class of specificity beats inherited Elementor Kit typography, while
 * an editor-authored element selector remains more specific and can override
 * every property below. */
:where(body.sggw-elementor-post)
	.sggw-elementor-post-prose {
	color: var(--sggw-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--regular);
	line-height: var(--wp--custom--typography--line-height--body);
	margin: 0;
}

:where(body.sggw-elementor-post)
	.sggw-elementor-post-prose
	:where(.elementor-widget-container) {
	color: inherit;
	font: inherit;
}

:where(body.sggw-elementor-post)
	.sggw-elementor-post-prose
	:where(.elementor-widget-container > p) {
	color: inherit;
	font: inherit;
	margin: 0;
}

:where(body.sggw-elementor-post)
	.sggw-elementor-post-prose
	:where(.elementor-widget-container > p + p) {
	margin-block-start: var(--wp--preset--spacing--30);
}

:where(body.sggw-elementor-post)
	.sggw-elementor-post-prose
	:where(a) {
	color: var(--sggw-link-foreground);
	text-decoration-line: var(--sggw-inline-link-decoration-rest);
	text-decoration-skip-ink: auto;
	text-decoration-thickness: var(--sggw-link-decoration-thickness);
	text-underline-offset: var(--sggw-link-underline-offset);
}

:where(body.sggw-elementor-post)
	.sggw-elementor-post-prose
	:where(a:hover, a:focus-visible) {
	text-decoration-line: var(--sggw-link-decoration-interactive);
}

/*
 * Default Elementor Loop Item: SGGW post card.
 *
 * Its anatomy mirrors patterns/posts-3-col.php: linked 16:9 media, a 12px
 * content offset, an 8px metadata/title gap and the same responsive trailing
 * space used by the zero-height Core Spacer in the Gutenberg Post Template.
 */
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card.e-con {
	align-items: stretch;
	background: transparent;
	block-size: 100%;
	gap: 0;
	inline-size: 100%;
	min-inline-size: 0;
	padding: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card__image.elementor-widget-image {
	aspect-ratio: 16 / 9;
	inline-size: 100%;
	margin: 0;
	overflow: hidden;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card__image
	:where(.elementor-widget-container, a, picture) {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card__image img {
	block-size: 100% !important;
	border-radius: var(--wp--custom--radius--x-small) !important;
	display: block;
	inline-size: 100% !important;
	max-inline-size: none !important;
	object-fit: cover;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card__content.e-con {
	align-items: stretch;
	gap: var(--wp--preset--spacing--10);
	inline-size: 100%;
	margin-block-start: var(--wp--preset--spacing--20);
	min-inline-size: 0;
	padding: 0 0 min(2.5rem, 3vw);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card__date {
	color: var(--sggw-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--regular);
	line-height: 1.6;
	margin: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card__date
	:where(.elementor-icon-list-items, .elementor-icon-list-item) {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card__date .elementor-icon-list-item {
	font-family: inherit !important;
	font-size: inherit !important;
	font-style: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card__date .elementor-icon-list-text {
	color: inherit !important;
	padding: 0 !important;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card__title {
	margin: 0;
	min-inline-size: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card__title .elementor-heading-title {
	color: var(--sggw-text) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-style: normal !important;
	font-weight: var(--wp--custom--typography--font-weight--semibold) !important;
	line-height: 1.25 !important;
	margin: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card__title .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: .08em;
	text-underline-offset: .18em;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-post-card__title .elementor-heading-title a:hover {
	text-decoration: underline;
}

/*
 * Elementor Loop Items: SGGW newspaper news cards.
 *
 * These two variants mirror patterns/posts-newspaper-layout.php. They share
 * the same atomic anatomy, with a 16px media/content offset and an excerpt in
 * the featured card, and a 12px offset without an excerpt in the compact card.
 */
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card.e-con {
	align-items: stretch;
	background: transparent;
	gap: 0;
	inline-size: 100%;
	min-inline-size: 0;
	padding: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__image.elementor-widget-image {
	aspect-ratio: 16 / 9;
	inline-size: 100%;
	margin: 0;
	overflow: hidden;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__image
	:where(.elementor-widget-container, a, picture) {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__image img {
	block-size: 100% !important;
	border-radius: var(--wp--custom--radius--x-small) !important;
	display: block;
	inline-size: 100% !important;
	max-inline-size: none !important;
	object-fit: cover;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__content.e-con {
	align-items: stretch;
	gap: var(--wp--preset--spacing--10);
	inline-size: 100%;
	min-inline-size: 0;
	padding: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card--featured .sggw-loop-news-card__content.e-con {
	margin-block-start: var(--wp--preset--spacing--30);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card--compact .sggw-loop-news-card__content.e-con {
	margin-block-start: var(--wp--preset--spacing--20);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__date {
	color: var(--sggw-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--regular);
	line-height: 1.6;
	margin: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__date
	:where(.elementor-icon-list-items, .elementor-icon-list-item) {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__date .elementor-icon-list-item {
	font-family: inherit !important;
	font-size: inherit !important;
	font-style: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__date .elementor-icon-list-text {
	color: inherit !important;
	padding: 0 !important;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__title {
	margin: 0;
	min-inline-size: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__title .elementor-heading-title {
	color: var(--sggw-text) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-style: normal !important;
	font-weight: var(--wp--custom--typography--font-weight--semibold) !important;
	line-height: 1.25 !important;
	margin: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__title .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: .08em;
	text-underline-offset: .18em;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__title .elementor-heading-title a:hover {
	text-decoration: underline;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__excerpt {
	color: var(--sggw-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--regular);
	line-height: 1.6;
	margin: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-loop-news-card__excerpt :where(.elementor-widget-container, p) {
	color: inherit;
	font: inherit;
	margin: 0;
}

/*
 * Elementor Design System color-role bridge.
 *
 * Elementor V4 Variables require a concrete color in the manager. Genotyp
 * keeps those values as editor swatches only and rebinds their CSS names at
 * every surface boundary. The --e-global-color-v4-* aliases are emitted when
 * a V4 variable is synced for classic V3 widgets.
 *
 * Custom-property references are deliberately repeated on each surface. A
 * reference declared only on :root would resolve in the root context and
 * would no longer react to a nested surface's local token values.
 * Theme Builder also renders these widgets around Gutenberg content, where
 * the body intentionally is not an Elementor document.
 */
:where(body.sggw-elementor-template, body.sggw-elementor-document, body.sggw-elementor-theme-builder)
	:is(
		.elementor,
		.sggw-surface-0,
		.sggw-surface-1,
		.sggw-surface-2,
		.sggw-surface-3,
		.sggw-surface-accent-0,
		.sggw-surface-accent-1,
		.sggw-surface-context-0,
		.sggw-surface-context-1,
		.sggw-surface-context-2,
		.sggw-surface-context-3,
		.sggw-surface-context-accent-0,
		.sggw-surface-context-accent-1
	) {
	--sggw-surface-neutral-0: var(--sggw-surface-0);
	--sggw-surface-neutral-1: var(--sggw-surface-1);
	--sggw-surface-neutral-2: var(--sggw-surface-2);
	--sggw-surface-neutral-3: var(--sggw-surface-3);
	--sggw-surface-accent-0: var(--sggw-accent-surface-0);
	--sggw-surface-accent-1: var(--sggw-accent-surface-1);

	--sggw-role-surface: var(--sggw-surface-current);
	--sggw-role-surface-alt: var(--sggw-surface-alternating);
	--sggw-role-text: var(--sggw-text);
	--sggw-role-text-muted: var(--sggw-text-muted);
	--sggw-role-link: var(--sggw-link-foreground);
	--sggw-role-line: var(--sggw-line-functional);
	--sggw-role-line-subtle: var(--sggw-line-decorative);
	--sggw-role-focus: var(--sggw-line-focus);
	--sggw-role-action: var(--sggw-button-background);
	--sggw-role-on-action: var(--sggw-button-foreground);
	--sggw-role-action-hover: var(--sggw-button-background-hover);
	--sggw-role-on-action-hover: var(--sggw-button-foreground-hover);
	--sggw-role-action-outline: var(--sggw-button-outline);

	/* Classic Elementor text widgets select the built-in global Text color and
	 * typography by default. Rebind that role locally so Text Editor and Post
	 * Excerpt consume Genotyp's body contract, including the nearest surface's
	 * text color. A value configured directly on a widget still wins because
	 * Elementor emits it as an ordinary property rather than through these
	 * defaults. */
	--e-global-color-text: var(--sggw-text);
	--e-global-typography-text-font-family: var(--wp--preset--font-family--body);
	--e-global-typography-text-font-size: var(--wp--preset--font-size--medium);
	--e-global-typography-text-font-style: normal;
	--e-global-typography-text-font-weight: var(--wp--custom--typography--font-weight--regular);
	--e-global-typography-text-line-height: var(--wp--custom--typography--line-height--body);

	/* Secondary remains a supporting-text role, while Accent is the general
	 * interactive/link role. Buttons intentionally use the dedicated local
	 * --sggw-button-* contract below rather than the broad Accent swatch. */
	--e-global-color-secondary: var(--sggw-text-muted);
	--e-global-typography-secondary-font-family: var(--wp--preset--font-family--body);
	--e-global-typography-secondary-font-style: normal;
	--e-global-typography-secondary-font-weight: var(--wp--custom--typography--font-weight--regular);
	--e-global-typography-secondary-line-height: var(--wp--custom--typography--line-height--body);

	--e-global-color-accent: var(--sggw-link-foreground);
	--e-global-typography-accent-font-family: var(--wp--preset--font-family--body);
	--e-global-typography-accent-font-style: normal;
	--e-global-typography-accent-font-weight: var(--wp--custom--typography--font-weight--semibold);
	--e-global-typography-accent-line-height: var(--wp--custom--typography--line-height--medium);

	/* Classic Heading uses Elementor Kit's Primary role by default. Keep that
	 * role local to the nearest Genotyp surface just like the Text role above. */
	--e-global-color-primary: var(--sggw-text);
	--e-global-typography-primary-font-family: var(--wp--preset--font-family--body);
	--e-global-typography-primary-font-style: normal;
	--e-global-typography-primary-font-weight: var(--wp--custom--typography--font-weight--semibold);
	--e-global-typography-primary-line-height: var(--wp--custom--typography--line-height--heading, 1.25);

	--e-global-color-v4-sggw-surface-neutral-0: var(--sggw-surface-0);
	--e-global-color-v4-sggw-surface-neutral-1: var(--sggw-surface-1);
	--e-global-color-v4-sggw-surface-neutral-2: var(--sggw-surface-2);
	--e-global-color-v4-sggw-surface-neutral-3: var(--sggw-surface-3);
	--e-global-color-v4-sggw-surface-accent-0: var(--sggw-accent-surface-0);
	--e-global-color-v4-sggw-surface-accent-1: var(--sggw-accent-surface-1);

	--e-global-color-v4-sggw-role-surface: var(--sggw-surface-current);
	--e-global-color-v4-sggw-role-surface-alt: var(--sggw-surface-alternating);
	--e-global-color-v4-sggw-role-text: var(--sggw-text);
	--e-global-color-v4-sggw-role-text-muted: var(--sggw-text-muted);
	--e-global-color-v4-sggw-role-link: var(--sggw-link-foreground);
	--e-global-color-v4-sggw-role-line: var(--sggw-line-functional);
	--e-global-color-v4-sggw-role-line-subtle: var(--sggw-line-decorative);
	--e-global-color-v4-sggw-role-focus: var(--sggw-line-focus);
	--e-global-color-v4-sggw-role-action: var(--sggw-button-background);
	--e-global-color-v4-sggw-role-on-action: var(--sggw-button-foreground);
	--e-global-color-v4-sggw-role-action-hover: var(--sggw-button-background-hover);
	--e-global-color-v4-sggw-role-on-action-hover: var(--sggw-button-foreground-hover);
	--e-global-color-v4-sggw-role-action-outline: var(--sggw-button-outline);
}

/* The container owns outside spacing; retain spacing inside rich text. */
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(.elementor-widget-text-editor, .elementor-widget-text-editor > .elementor-widget-container, .elementor-widget-text-editor .elementor-text-editor)
	> :where(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote):first-child {
	margin-block-start: 0;
}
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(.elementor-widget-text-editor, .elementor-widget-text-editor > .elementor-widget-container, .elementor-widget-text-editor .elementor-text-editor)
	> :where(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote):last-child {
	margin-block-end: 0;
}

/*
 * Native Elementor Heading defaults.
 *
 * Elementor's generated Kit rule and frontend reset otherwise replace the
 * theme color, family, weight and line height. The extra `.elementor` class
 * beats those defaults without `!important`; a value authored directly on a
 * particular widget is emitted later with enough specificity to remain the
 * final value. Font size is intentionally absent so the semantic h1-h6 sizes
 * from theme.json and Elementor's explicit Size control both keep working.
 */
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-heading:not(:where(.sggw-heading-recipe-column))
	.elementor-heading-title {
	color: var(--sggw-text);
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--semibold);
	line-height: var(--wp--custom--typography--line-height--heading, 1.25);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-heading:not(:where(.sggw-heading-recipe-column))
	h1.elementor-heading-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: var(--wp--custom--typography--font-weight--bold);
}

/*
 * Elementor Cover composition.
 *
 * This is deliberately a composition of native Elementor elements rather
 * than a custom widget. The root Flexbox establishes the surface; an Image
 * widget and an empty Flexbox form the media and overlay layers; the remaining
 * nested Flexboxes keep all editorial content independently editable.
 *
 * Use these theme-owned marker classes on the pasted elements:
 * - sggw-elementor-cover
 * - sggw-elementor-cover__media
 * - sggw-elementor-cover__overlay
 * - sggw-elementor-cover__content
 * - sggw-elementor-cover__copy
 * - sggw-elementor-cover__heading
 * - sggw-elementor-cover__lead
 * - sggw-elementor-cover__actions
 */

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-elementor-cover.e-con {
	align-items: center;
	background-color: var(--sggw-surface-current) !important;
	isolation: isolate;
	overflow: hidden;
	padding-block: 64px 128px;
	padding-inline: var(--wp--preset--spacing--30);
	position: relative;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-elementor-cover__media.elementor-widget-image {
	block-size: 100%;
	inset: 0;
	inline-size: 100%;
	max-inline-size: none;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-elementor-cover__media
	:where(.elementor-widget-container, picture) {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-elementor-cover__media img {
	block-size: 100%;
	display: block;
	filter: var(--wp--custom--component--cover--image-filter--muted);
	inline-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	object-position: 55% 100%;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-elementor-cover__overlay.e-con {
	background: var(--sggw-surface-current);
	block-size: 100%;
	inset: 0;
	inline-size: 100%;
	opacity: .7;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-elementor-cover__content.e-con {
	gap: var(--wp--preset--spacing--50);
	inline-size: 100%;
	max-inline-size: var(--wp--style--global--wide-size, 1200px);
	position: relative;
	z-index: 2;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-elementor-cover__copy.e-con {
	gap: var(--wp--preset--spacing--30);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.sggw-elementor-cover__heading .elementor-heading-title,
		.sggw-elementor-cover__heading.e-heading-base
	) {
	color: var(--sggw-text) !important;
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: var(--wp--preset--font-size--xxx-large) !important;
	font-style: normal !important;
	font-weight: var(--wp--custom--typography--font-weight--bold) !important;
	line-height: var(--wp--custom--typography--line-height--xxx-large) !important;
	margin: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.sggw-elementor-cover__heading,
		.sggw-elementor-cover__lead
	) {
	max-inline-size: var(--wp--style--global--content-size, 620px);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-elementor-cover__lead,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-elementor-cover__lead :where(p) {
	color: var(--sggw-text) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-style: normal !important;
	font-weight: var(--wp--custom--typography--font-weight--semibold) !important;
	line-height: var(--wp--custom--typography--line-height--supporting) !important;
	margin: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-elementor-cover__actions.e-con {
	align-self: flex-start;
	inline-size: auto;
}

@media (max-width: 767px) {
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.sggw-elementor-cover.e-con {
		padding-block: var(--wp--preset--spacing--60) 88px;
		padding-inline: var(--wp--preset--spacing--30);
	}

	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.sggw-elementor-cover__lead br {
		display: none;
	}

	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.sggw-elementor-cover__actions.e-con {
		inline-size: 100%;
	}
}

@media (forced-colors: active) {
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.sggw-elementor-cover__media {
		display: none;
	}

	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.sggw-elementor-cover__overlay.e-con {
		background: Canvas;
		opacity: 1;
	}
}

/*
 * Faculty contact component source.
 *
 * Every node in this composition is an Elementor Atomic element, which lets
 * an editor turn the root Flexbox into a synced Component. Marker classes
 * retain the Genotyp geometry and surface contract even before that one-time
 * conversion, or when the Components experiment is unavailable.
 */

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-faculty-contact.e-con {
	align-items: center;
	background-color: var(--sggw-surface-current) !important;
	border-radius: var(--wp--custom--radius--medium, 8px);
	box-sizing: border-box;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40, 24px);
	inline-size: 100%;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--40, 24px);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-faculty-contact__copy.e-con {
	align-items: flex-start;
	flex: 1 1 320px;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10, 8px);
	inline-size: auto;
	min-inline-size: 0;
	padding: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-faculty-contact__heading.e-heading-base {
	color: var(--sggw-text) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--x-large) !important;
	font-style: normal !important;
	font-weight: var(--wp--custom--typography--font-weight--semibold) !important;
	line-height: var(--wp--custom--typography--line-height--heading, 1.25) !important;
	margin: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-faculty-contact__description.e-paragraph-base {
	color: var(--sggw-text) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-style: normal !important;
	font-weight: var(--wp--custom--typography--font-weight--regular) !important;
	line-height: var(--wp--custom--typography--line-height--body) !important;
	margin: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-faculty-contact__action.e-button-base {
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.sggw-faculty-contact.e-con {
		align-items: stretch;
		flex-direction: column;
	}

	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.sggw-faculty-contact__copy.e-con {
		flex-basis: auto;
		inline-size: 100%;
	}

	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.sggw-faculty-contact__action.e-button-base {
		align-self: flex-start;
	}
}

@media (forced-colors: active) {
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.sggw-faculty-contact.e-con {
		background: Canvas !important;
		border: var(--wp--custom--line--width, 1px) solid CanvasText;
		color: CanvasText;
		forced-color-adjust: none;
	}

	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		:is(
			.sggw-faculty-contact__heading.e-heading-base,
			.sggw-faculty-contact__description.e-paragraph-base
		) {
		color: CanvasText !important;
	}
}

/*
 * Elementor Button adapter.
 *
 * Editor V4 renders Atomic Button as .e-button-base. Editor V3 and widgets
 * retained for backwards compatibility render .elementor-button inside an
 * .elementor-widget-button wrapper. Both consume the same surface-aware
 * tokens and geometry as Genotyp's Core Button.
 *
 * Native buttons receive structured sggw-button--* anchor classes and
 * sggw-button-widget--* wrapper classes from the plugin. The wrapper classes
 * update immediately in the editor; the anchor classes keep frontend and
 * Backbone rendering aligned. The former sggw-button-outline/ghost/small/large
 * markers remain compatibility aliases for hand-authored button-shaped links
 * and older documents.
 *
 * Recipe declarations intentionally avoid !important.
 * The extra `.elementor` class on the classic base and state selectors puts
 * the recipe above late-injected Kit defaults, while Elementor's more specific
 * generated per-element styles remain the explicit override layer.
 */

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.e-button-base:not(.sggw-button),
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-button
	.elementor-button {
	--wp--custom--component--button--background: var(--sggw-button-background);
	--wp--custom--component--button--background-hover: var(--sggw-button-background-hover);
	--wp--custom--component--button--background-pressed: color-mix(
		in srgb,
		var(--sggw-button-foreground) var(--wp--custom--state-layer--pressed),
		var(--sggw-button-background)
	);
	--wp--custom--component--button--foreground: var(--sggw-button-foreground);
	--wp--custom--component--button--foreground-hover: var(--sggw-button-foreground-hover);
	--wp--custom--component--button--outline--border: var(--sggw-button-outline);
	--wp--custom--component--button--outline--foreground: var(--sggw-button-outline);

	align-items: center;
	appearance: none;
	background-color: var(--wp--custom--component--button--background);
	background-image: none;
	border-color: transparent;
	border-radius: var(--wp--custom--radius--small);
	border-style: solid;
	border-width: var(--wp--custom--line--width);
	box-shadow: none;
	box-sizing: border-box;
	color: var(--wp--custom--component--button--foreground);
	display: inline-flex;
	fill: var(--wp--custom--component--button--foreground);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--semibold);
	justify-content: center;
	letter-spacing: normal;
	line-height: var(--wp--custom--typography--line-height--medium);
	min-height: var(--wp--preset--spacing--70);
	overflow-wrap: normal;
	padding-block: calc(var(--wp--preset--spacing--20) - var(--wp--custom--line--width));
	padding-inline: calc(var(--wp--preset--spacing--40) - var(--wp--custom--line--width));
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	transition: none;
	white-space: normal;
	word-break: normal;
}

/* Elementor owns icon selection, direction and an explicitly configured
 * spacing value. The adapter supplies only the default gap and normalizes
 * icon size plus monochrome currentColor behavior. */
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button__content,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-button
	.elementor-button-content-wrapper {
	align-items: center;
	display: inline-flex;
	gap: var(--wp--preset--spacing--10);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button__icon,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-button
	.elementor-button-icon {
	align-items: center;
	color: currentColor;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--sggw-icon-size-medium, 24px);
	line-height: 1;
}

/* The editor preview can temporarily emit an icon wrapper containing an empty
 * <i> before an icon has actually been selected. Remove that flex item so it
 * neither occupies space nor participates in the wrapper's gap calculation. */
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-button
	.elementor-button-icon:not(:has(svg, i[class]:not([class=""]))) {
	display: none;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(.sggw-button__icon, .elementor .elementor-widget-button .elementor-button-icon)
	:is(i, svg) {
	block-size: 1em;
	color: currentColor;
	fill: currentColor !important;
	font-size: inherit;
	inline-size: 1em;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(.sggw-button__icon, .elementor .elementor-widget-button .elementor-button-icon)
	svg * {
	fill: currentColor !important;
}

/* Small and Large deliberately override Elementor's five native size names.
 * Omitting a marker always yields Genotyp's default Button size. */
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button--size-small,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.e-button-base.sggw-button-small,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button .sggw-button--size-small,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-widget--size-small .elementor-button,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-small .elementor-button {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--typography--line-height--small);
	min-height: var(--wp--preset--spacing--50);
	padding-block: calc(4px - var(--wp--custom--line--width));
	padding-inline: calc(var(--wp--preset--spacing--20) - var(--wp--custom--line--width));
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.sggw-button--size-small .sggw-button__content,
		.elementor-widget-button .sggw-button--size-small .elementor-button-content-wrapper,
		.elementor-widget-button.sggw-button-widget--size-small .elementor-button-content-wrapper,
		.elementor-widget-button.sggw-button-small .elementor-button-content-wrapper
	) {
	gap: 4px;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.sggw-button--size-small .sggw-button__icon,
		.elementor-widget-button .sggw-button--size-small .elementor-button-icon,
		.elementor-widget-button.sggw-button-widget--size-small .elementor-button-icon,
		.elementor-widget-button.sggw-button-small .elementor-button-icon
	) {
	font-size: var(--sggw-icon-size-small, 16px);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button--size-large,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.e-button-base.sggw-button-large,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button .sggw-button--size-large,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-widget--size-large .elementor-button,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-large .elementor-button {
	min-height: calc(var(--wp--preset--spacing--70) + (2 * 4px));
	padding-block: calc(calc(var(--wp--preset--spacing--20) + 4px) - var(--wp--custom--line--width));
}

/* The render adapters add this class only after validating the icon and the
 * explicit accessible label. Text remains in the DOM as a safe fallback. */
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button--icon-only {
	block-size: var(--wp--preset--spacing--70);
	inline-size: var(--wp--preset--spacing--70);
	min-inline-size: var(--wp--preset--spacing--70);
	padding: 0;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button--size-small.sggw-button--icon-only {
	block-size: var(--wp--preset--spacing--50);
	inline-size: var(--wp--preset--spacing--50);
	min-inline-size: var(--wp--preset--spacing--50);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button--size-large.sggw-button--icon-only {
	block-size: calc(var(--wp--preset--spacing--70) + (2 * 4px));
	inline-size: calc(var(--wp--preset--spacing--70) + (2 * 4px));
	min-inline-size: calc(var(--wp--preset--spacing--70) + (2 * 4px));
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button--icon-only
	:is(.sggw-button__text, .elementor-button-text) {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button--variant-outline,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-widget--variant-outline .elementor-button,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.e-button-base.sggw-button-outline,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-outline .elementor-button {
	background-color: transparent;
	border-color: var(--wp--custom--component--button--outline--border);
	color: var(--wp--custom--component--button--outline--foreground);
	fill: var(--wp--custom--component--button--outline--foreground);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button--variant-ghost,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-widget--variant-ghost .elementor-button,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.e-button-base.sggw-button-ghost,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-ghost .elementor-button {
	background-color: transparent;
	border-color: transparent;
	color: var(--sggw-text);
	fill: var(--sggw-text);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button:focus:not(:focus-visible),
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.e-button-base:not(.sggw-button):focus:not(:focus-visible),
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-button
	.elementor-button:focus:not(:focus-visible) {
	outline: none !important;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button:focus-visible,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.e-button-base:not(.sggw-button):focus-visible,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-button
	.elementor-button:focus-visible {
	outline: var(--wp--custom--line--focus-ring-width) solid var(--sggw-line-focus) !important;
	outline-offset: var(--wp--custom--line--focus-ring-offset) !important;
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button--variant-outline:focus-visible:not(:active),
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-widget--variant-outline
	.elementor-button:focus-visible:not(:active),
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.e-button-base.sggw-button-outline:focus-visible:not(:active),
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-outline .elementor-button:focus-visible:not(:active) {
	background-color: color-mix(
		in srgb,
		var(--wp--custom--component--button--outline--foreground) var(--wp--custom--state-layer--hover),
		transparent
	);
	border-color: var(--wp--custom--component--button--outline--border);
	color: var(--wp--custom--component--button--outline--foreground);
	fill: var(--wp--custom--component--button--outline--foreground);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button--variant-ghost:focus-visible:not(:active),
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-widget--variant-ghost
	.elementor-button:focus-visible:not(:active),
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.e-button-base.sggw-button-ghost:focus-visible:not(:active),
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-ghost .elementor-button:focus-visible:not(:active) {
	background-color: color-mix(
		in srgb,
		var(--sggw-text) var(--wp--custom--state-layer--hover),
		transparent
	);
	border-color: transparent;
	color: var(--sggw-text);
	fill: var(--sggw-text);
}

@media (hover: hover) {
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.sggw-button:hover,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.sggw-button--variant-outline:hover,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.sggw-button--variant-ghost:hover,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.e-button-base:not(.sggw-button):hover,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.e-button-base.sggw-button-outline:hover,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.e-button-base.sggw-button-ghost:hover,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.elementor
		.elementor-widget-button
		.elementor-button:hover,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.elementor-widget-button.sggw-button-widget--variant-outline
		.elementor-button:hover,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.elementor-widget-button.sggw-button-widget--variant-ghost
		.elementor-button:hover,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.elementor-widget-button.sggw-button-outline .elementor-button:hover,
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		.elementor-widget-button.sggw-button-ghost .elementor-button:hover {
		background-color: var(--wp--custom--component--button--background-hover);
		border-color: transparent;
		color: var(--wp--custom--component--button--foreground-hover);
		fill: var(--wp--custom--component--button--foreground-hover);
	}
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button:active,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.e-button-base:not(.sggw-button):active,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor
	.elementor-widget-button
	.elementor-button:active {
	background-color: var(--wp--custom--component--button--background-pressed);
	border-color: transparent;
	color: var(--wp--custom--component--button--foreground);
	fill: var(--wp--custom--component--button--foreground);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button--variant-outline:active,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-widget--variant-outline .elementor-button:active,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.e-button-base.sggw-button-outline:active,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-outline .elementor-button:active {
	background-color: color-mix(
		in srgb,
		var(--wp--custom--component--button--outline--foreground) var(--wp--custom--state-layer--pressed),
		transparent
	);
	border-color: var(--wp--custom--component--button--outline--border);
	color: var(--wp--custom--component--button--outline--foreground);
	fill: var(--wp--custom--component--button--outline--foreground);
}

:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.sggw-button--variant-ghost:active,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-widget--variant-ghost .elementor-button:active,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.e-button-base.sggw-button-ghost:active,
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	.elementor-widget-button.sggw-button-ghost .elementor-button:active {
	background-color: color-mix(
		in srgb,
		var(--sggw-text) var(--wp--custom--state-layer--pressed),
		transparent
	);
	border-color: transparent;
	color: var(--sggw-text);
	fill: var(--sggw-text);
}

/* Gutenberg's Buttons block maps to a Flexbox carrying this marker class.
 * Elementor remains free to choose horizontal justification. */
:where(body.sggw-elementor-template, body.sggw-elementor-document)
	:is(
		.sggw-buttons,
		.sggw-buttons.e-con > .e-con-inner
	) {
	align-items: center !important;
	display: flex !important;
	flex-flow: row wrap !important;
	gap: var(--wp--preset--spacing--10) !important;
}

@media (prefers-reduced-motion: reduce) {
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		:is(
			.sggw-button,
			.e-button-base,
			.elementor-widget-button .elementor-button
		) {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}

@media (forced-colors: active) {
	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		:is(
			.e-button-base,
			.elementor-widget-button .elementor-button
		) {
		background-color: ButtonFace !important;
		border-color: ButtonBorder !important;
		color: ButtonText !important;
		fill: ButtonText !important;
		forced-color-adjust: none;
	}

	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		:is(
			.e-button-base,
			.elementor-widget-button .elementor-button
		):is(:hover, :focus-visible, :active) {
		background-color: Highlight !important;
		border-color: Highlight !important;
		color: HighlightText !important;
		fill: HighlightText !important;
	}

	:where(body.sggw-elementor-template, body.sggw-elementor-document)
		:is(
			.e-button-base,
			.elementor-widget-button .elementor-button
		):focus-visible {
		outline-color: Highlight !important;
	}
}