/**
 * GHS design tokens — maps Elementor global colors to semantic roles.
 *
 * Elementor kit mapping (GHS):
 *   --e-global-color-primary   → ink / headings / dark UI (#1A1A1A)
 *   --e-global-color-secondary → brand salmon (#E0A390)
 *   --e-global-color-text      → light text on dark surfaces (#FAFAFA)
 *   --e-global-color-accent    → muted labels (#909090)
 */

:where(
	.ghs-auth,
	.ghs-portal,
	.ghs-directory,
	.ghs-dir-layout,
	.ghs-profile,
	.ghs-billing,
	.ghs-countdown,
	.ghs-member-card,
	.ghs-directory[data-ghs-directory],
	.ghs-events-public
) {
	--ghs-ink: var(--e-global-color-primary);
	--ghs-brand: var(--e-global-color-secondary);
	--ghs-light: var(--e-global-color-text);
	--ghs-muted: var(--e-global-color-accent);
	--ghs-surface: color-mix(in srgb, var(--ghs-light) 6%, white);
	--ghs-canvas: color-mix(in srgb, var(--ghs-brand) 7%, var(--ghs-light));
	--ghs-line: color-mix(in srgb, var(--ghs-muted) 28%, transparent);
	--ghs-line-soft: color-mix(in srgb, var(--ghs-muted) 16%, transparent);
	--ghs-input-bg: color-mix(in srgb, var(--ghs-muted) 6%, var(--ghs-light));
	--ghs-input-border: color-mix(in srgb, var(--ghs-muted) 38%, transparent);
	--ghs-shadow-sm: 0 1px 4px color-mix(in srgb, var(--ghs-ink) 4%, transparent);
	--ghs-shadow-md: 0 4px 24px color-mix(in srgb, var(--ghs-ink) 7%, transparent);
	--ghs-radius-sm: 0.5rem;
	--ghs-radius-md: 0.75rem;
	--ghs-radius-lg: 0.875rem;
	color: var(--ghs-ink);
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}

:where(.ghs-auth, .ghs-portal, .ghs-directory, .ghs-profile, .ghs-billing, .ghs-events-public) :where(
	h1, h2, h3, h4, h5, h6
) {
	color: inherit;
	font-family: inherit;
}

:where(.ghs-auth, .ghs-portal, .ghs-directory, .ghs-profile, .ghs-billing, .ghs-events-public) :where(
	input, textarea, select, button
) {
	font-family: inherit;
}

/* -------------------------------------------------------------------------
   Full-width breakout — Elementor boxed containers → viewport edge
   ------------------------------------------------------------------------- */

body.ghs-plugin-page {
	overflow-x: clip;
}

:where(
	.ghs-portal,
	.ghs-auth,
	.ghs-directory,
	.ghs-directory[data-ghs-directory],
	.ghs-profile,
	.ghs-directory-preview,
	.ghs-directory-join-wrap
) {
	box-sizing: border-box;
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

body.ghs-plugin-page :where(
	.elementor-element,
	.elementor-widget-wrap,
	.elementor-widget-shortcode,
	.elementor-widget-container,
	.elementor-column,
	.elementor-container,
	.e-con,
	.e-con-inner
):has(
	:where(
		.ghs-portal,
		.ghs-auth,
		.ghs-directory,
		.ghs-directory[data-ghs-directory],
		.ghs-profile,
		.ghs-directory-preview,
		.ghs-directory-join-wrap
	)
) {
	--width: 100% !important;
	--container-max-width: 100% !important;
	max-width: none !important;
	padding-inline: 0 !important;
	width: 100% !important;
}

body.ghs-plugin-page .elementor-section.elementor-section-boxed > .elementor-container:has(
	:where(
		.ghs-portal,
		.ghs-auth,
		.ghs-directory,
		.ghs-directory[data-ghs-directory],
		.ghs-profile,
		.ghs-directory-preview,
		.ghs-directory-join-wrap
	)
) {
	max-width: none !important;
	width: 100% !important;
}

body.ghs-plugin-page .ghs-elementor-stretch {
	--width: 100% !important;
	--container-max-width: 100% !important;
	max-width: none !important;
	padding-inline: 0 !important;
	width: 100% !important;
}

body.ghs-plugin-page :where(
	.entry-content,
	.site-main,
	.page-content,
	#main-content
) > :has(
	:where(
		.ghs-portal,
		.ghs-auth,
		.ghs-directory,
		.ghs-directory[data-ghs-directory],
		.ghs-profile,
		.ghs-directory-preview,
		.ghs-directory-join-wrap
	)
) {
	max-width: none;
	padding-inline: 0;
}

/* Remove Elementor vertical gaps around GHS shortcode widgets */
body.ghs-plugin-page :where(
	.elementor-widget-shortcode,
	.elementor-widget-text-editor
):has(
	:where(
		.ghs-portal,
		.ghs-auth,
		.ghs-directory,
		.ghs-directory-config,
		.ghs-dir-layout,
		.ghs-dir-sidebar,
		.ghs-dir-main,
		.ghs-dir-search-wrap,
		.ghs-dir-filters,
		.ghs-dir-grid,
		.ghs-profile,
		.ghs-billing,
		.ghs-countdown,
		.ghs-member-card,
		.ghs-directory-preview,
		.ghs-directory-join-wrap,
		.ghs-events-public
	)
) {
	margin-block: 0 !important;
	padding-block: 0 !important;
}

body.ghs-plugin-page :where(
	.elementor-element,
	.elementor-widget-wrap,
	.elementor-widget-container,
	.e-con,
	.e-con-inner
):has(
	:where(
		.ghs-portal,
		.ghs-auth,
		.ghs-directory,
		.ghs-directory[data-ghs-directory],
		.ghs-profile,
		.ghs-directory-preview,
		.ghs-directory-join-wrap
	)
) {
	--padding-top: 0px !important;
	--padding-bottom: 0px !important;
	--e-con-padding-block-start: 0px !important;
	--e-con-padding-block-end: 0px !important;
}

body.ghs-plugin-page :where(.ghs-profile, .ghs-directory-preview, .ghs-directory-join-wrap) {
	padding-block: clamp(0.75rem, 2vw, 1.25rem);
}