/* Cards use the theme's ghost recipe. These are defaults: document selectors
 * remain stronger, and panel geometry/backgrounds stay native to Elementor. */
.elementor :is(.elementor-widget-n-tabs, .elementor-widget-tabs) {
	/* Selection uses brand green, independently of ghost hover's black tone. */
	--sggw-tabs-selected-background: light-dark(var(--sggw-color-green-15), var(--sggw-color-green-100));
	--sggw-tabs-selected-foreground: light-dark(var(--sggw-color-green-100), var(--sggw-color-green-15));
}
:where(html.sggw-a11y-high-contrast) .elementor :is(.elementor-widget-n-tabs, .elementor-widget-tabs) {
	--sggw-tabs-selected-background: var(--sggw-button-background-hover);
	--sggw-tabs-selected-foreground: var(--sggw-button-foreground-hover);
}
.elementor .elementor-widget-n-tabs {
	--n-tabs-title-color: var(--sggw-text);
	--n-tabs-title-color-hover: var(--sggw-button-foreground-hover);
	--n-tabs-title-color-active: var(--sggw-tabs-selected-foreground);
	--n-tabs-icon-color: var(--n-tabs-title-color);
	--n-tabs-icon-color-hover: var(--n-tabs-title-color-hover);
	--n-tabs-icon-color-active: var(--n-tabs-title-color-active);
	--n-tabs-title-background-color: color-mix(in srgb, var(--sggw-text) var(--wp--custom--state-layer--hover, 8%), transparent);
	--n-tabs-title-background-color-hover: var(--sggw-button-background-hover);
	--n-tabs-title-background-color-active: var(--sggw-tabs-selected-background);
	--n-tabs-title-font-size: var(--wp--preset--font-size--medium);
	--n-tabs-default-padding-block: calc(var(--wp--preset--spacing--20) - var(--wp--custom--line--width, 1px));
	--n-tabs-default-padding-inline: calc(var(--wp--preset--spacing--40) - var(--wp--custom--line--width, 1px));
	--n-tabs-title-border-radius: var(--wp--custom--radius--small, 4px);
}

.elementor .elementor-widget-n-tabs .e-n-tab-title,
.elementor .elementor-widget-tabs .elementor-tab-title {
	box-sizing: border-box;
	min-height: var(--wp--preset--spacing--70, 48px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--typography--font-weight--semibold);
	line-height: var(--wp--custom--typography--line-height--medium);
	border-style: solid;
	border-width: var(--wp--custom--line--width, 1px);
	border-color: transparent;
}

/* Preserve native padding/radius variables and locally authored typography. */
.elementor .elementor-widget-n-tabs .e-n-tab-title {
	font-size: var(--n-tabs-title-font-size);
}
.elementor .elementor-widget-n-tabs .e-n-tab-title-text {
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* Legacy titles are divs; keep their table/flex/mobile layout and ARIA intact. */
.elementor .elementor-widget-tabs .elementor-tab-title {
	padding-block: calc(var(--wp--preset--spacing--20) - var(--wp--custom--line--width, 1px));
	padding-inline: calc(var(--wp--preset--spacing--40) - var(--wp--custom--line--width, 1px));
	border-radius: var(--wp--custom--radius--small, 4px);
	color: var(--sggw-text);
	background-color: color-mix(in srgb, var(--sggw-text) var(--wp--custom--state-layer--hover, 8%), transparent);
}
.elementor .elementor-widget-tabs .elementor-tab-title:where(.elementor-active)::before,
.elementor .elementor-widget-tabs .elementor-tab-title:where(.elementor-active)::after {
	/* Native connector lines belong to the old tab shape, not to ghost buttons. */
	content: none;
}
.elementor .elementor-widget-tabs .elementor-tab-title a { color: inherit; }
.elementor .elementor-widget-tabs .elementor-tab-content {
	font-family: inherit;
	color: var(--sggw-text);
}

.elementor .elementor-widget-n-tabs .e-n-tab-title:focus-visible,
.elementor .elementor-widget-tabs .elementor-tab-title:focus-visible {
	outline: var(--wp--custom--line--focus-ring-width, 3px) solid var(--sggw-line-focus);
	outline-offset: var(--wp--custom--line--focus-ring-offset, 3px);
}
.elementor .elementor-widget-tabs .elementor-tab-title:focus:not(:focus-visible) { outline: none; }

@media (hover: hover) {
	.elementor .elementor-widget-tabs .elementor-tab-title:where(:hover) {
		background-color: var(--sggw-button-background-hover);
		color: var(--sggw-button-foreground-hover);
	}
}
/* Pressed unselected cards follow ghost's state layer. The selected card keeps
 * its full fill on hover, focus and press. Native paint uses these variables. */
.elementor .elementor-widget-n-tabs .e-n-tab-title:where([aria-selected="false"]:active) {
	--n-tabs-title-background-color: color-mix(in srgb, var(--sggw-text) var(--wp--custom--state-layer--pressed, 12%), transparent);
	--n-tabs-title-background-color-hover: var(--n-tabs-title-background-color);
	--n-tabs-title-background-color-active: var(--n-tabs-title-background-color);
	--n-tabs-title-color-hover: var(--sggw-text);
	--n-tabs-title-color-active: var(--sggw-text);
}
.elementor .elementor-widget-tabs .elementor-tab-title:where(:active) {
	background-color: color-mix(in srgb, var(--sggw-text) var(--wp--custom--state-layer--pressed, 12%), transparent);
	color: var(--sggw-text);
}
.elementor .elementor-widget-tabs .elementor-tab-title:where(.elementor-active) {
	background-color: var(--sggw-tabs-selected-background);
	color: var(--sggw-tabs-selected-foreground);
}

@media (forced-colors: active) {
	.elementor .elementor-widget-n-tabs .e-n-tab-title,
	.elementor .elementor-widget-tabs .elementor-tab-title {
		forced-color-adjust: none;
		background: ButtonFace !important;
		border-color: ButtonText !important;
		color: ButtonText !important;
	}
	.elementor .elementor-widget-n-tabs .e-n-tab-title:where([aria-selected="true"]),
	.elementor .elementor-widget-tabs .elementor-tab-title:where(.elementor-active) {
		background: Highlight !important;
		color: HighlightText !important;
	}
	.elementor .elementor-widget-n-tabs .e-n-tab-title:focus-visible,
	.elementor .elementor-widget-tabs .elementor-tab-title:focus-visible { outline-color: Highlight; }
	.elementor .elementor-widget-n-tabs .e-n-tab-title :where(a, i, svg),
	.elementor .elementor-widget-tabs .elementor-tab-title :where(a, i, svg) {
		color: inherit !important;
		fill: currentColor !important;
	}
}