/*
 * Softliro — Elementor bridge.
 *
 * Two jobs, and nothing beyond them:
 *   1. Give Elementor pages the room to be full width.
 *   2. Make Elementor's default widgets inherit the theme tokens.
 *
 * Every rule here is written at the lowest specificity that works, so an
 * Elementor control always wins. There is no !important in this file.
 */

/* An Elementor-built page owns its own vertical rhythm. */
.sl-entry-content--elementor {
	padding: 0;
}

/* Elementor's container should use the theme's measurement, not its own. */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con {
	--container-max-width: var(--sl-container);
}

/* Type: Elementor headings and text inherit the display and body faces. */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--sl-font-display);
	font-weight: var(--sl-h-weight);
	letter-spacing: var(--sl-h-tracking);
	line-height: 1.05;
}

.elementor-widget-text-editor,
.elementor-widget-theme-post-content {
	font-family: var(--sl-font-body);
	color: var(--sl-text-soft);
}

/* Buttons pick up the theme's button tokens by default. */
.elementor-button {
	border-radius: var(--sl-btn-radius);
	font-family: var(--sl-font-ui);
	font-weight: var(--sl-btn-weight);
	letter-spacing: var(--sl-btn-tracking);
	padding: var(--sl-btn-py) var(--sl-btn-px);
	transition:
		background-color var(--sl-duration) var(--sl-ease),
		color var(--sl-duration) var(--sl-ease),
		border-color var(--sl-duration) var(--sl-ease);
}

.elementor-button-wrapper .elementor-button:not(.elementor-button-link):not([class*="elementor-background"]) {
	background-color: var(--sl-btn-bg);
	color: var(--sl-btn-text);
}

/* Dividers and icon strokes follow the motif: hairlines and round caps. */
.elementor-divider-separator {
	border-top-color: var(--sl-hairline);
}

.elementor-widget-icon svg,
.elementor-icon svg {
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Form fields match the theme's inputs so a form plugin looks native. */
.elementor-field-group .elementor-field,
.elementor-field-textual {
	background: var(--sl-surface);
	color: var(--sl-text);
	border: var(--sl-border-w) solid var(--sl-hairline-strong);
	border-radius: var(--sl-radius);
	font-family: var(--sl-font-ui);
	font-size: var(--sl-ui-size);
}

.elementor-field-textual:focus {
	outline: 2px solid var(--sl-focus);
	outline-offset: 1px;
	border-color: transparent;
}

/* Accordions, tabs and toggles: hairline rules, no card chrome. */
.elementor-accordion .elementor-accordion-item,
.elementor-toggle .elementor-tab-title {
	border-color: var(--sl-hairline);
}

.elementor-tab-title {
	font-family: var(--sl-font-ui);
}

/* Elementor's own images should respect the theme radius. */
.elementor-widget-image img {
	border-radius: var(--sl-radius);
}

/* Keep the editor's controls visible against a dark canvas. */
.elementor-editor-active .sl-header--transparent {
	position: relative;
}

/*
 * When Elementor Pro owns the header location, the theme's sticky offset would
 * double up. Stand down.
 */
.elementor-location-header ~ .sl-header {
	display: none;
}


/* ------------------------------------------------------------- Buttons */

/*
 * Elementor puts a widget's CSS classes on the *wrapper*, not on the element
 * inside it. So `sl-button sl-button--primary` on a Button widget paints the
 * wrapping div — a violet box — while the actual <a class="elementor-button">
 * keeps Elementor's defaults. These rules undo that and hand the styling down
 * to the anchor where it belongs.
 *
 * Specificity note. These were originally wrapped in :where() so an Elementor
 * control would always win. That was wrong: Elementor's *kit default* for a
 * button is the Accent global, which the theme maps to Signal Lime — so a
 * zero-specificity rule meant `sl-button--primary` rendered lime, never violet.
 *
 * A class the author typed is an explicit choice and should beat a framework
 * default, so the colour rules carry real specificity (0-3-0). To style a button
 * from Elementor's own controls instead, remove the sl-button class.
 */

.elementor-widget-button.sl-button,
.elementor-widget-button.sl-button--primary,
.elementor-widget-button.sl-button--secondary,
.elementor-widget-button.sl-button--outline,
.elementor-widget-button.sl-button--ghost {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.elementor-widget-button.sl-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--sl-btn-py) var(--sl-btn-px);
	border: var(--sl-border-w) solid transparent;
	border-radius: var(--sl-btn-radius);
	font-family: var(--sl-font-ui);
	font-size: var(--sl-btn-size);
	font-weight: var(--sl-btn-weight);
	letter-spacing: var(--sl-btn-tracking);
	line-height: 1.4;
}

.elementor-widget-button.sl-button--primary .elementor-button {
	background-color: var(--sl-btn-bg);
	border-color: var(--sl-btn-bg);
	color: var(--sl-btn-text);
}

.elementor-widget-button.sl-button--primary .elementor-button:hover,
.elementor-widget-button.sl-button--primary .elementor-button:focus-visible {
	background-color: var(--sl-btn-bg-hover);
	border-color: var(--sl-btn-bg-hover);
	color: var(--sl-btn-text-hover);
}

.elementor-widget-button.sl-button--secondary .elementor-button,
.elementor-widget-button.sl-button--outline .elementor-button {
	background-color: transparent;
	border-color: var(--sl-hairline-strong);
	color: var(--sl-text);
}

.elementor-widget-button.sl-button--secondary .elementor-button:hover,
.elementor-widget-button.sl-button--secondary .elementor-button:focus-visible,
.elementor-widget-button.sl-button--outline .elementor-button:hover,
.elementor-widget-button.sl-button--outline .elementor-button:focus-visible {
	border-color: var(--sl-text);
	background-color: var(--sl-wash);
	color: var(--sl-text);
}

.elementor-widget-button.sl-button--ghost .elementor-button {
	background-color: transparent;
	color: var(--sl-text);
}

.elementor-widget-button.sl-button--ghost .elementor-button:hover {
	background-color: var(--sl-wash);
}

/* ------------------------------------------------------- Mega panels */

/*
 * Panels built as Elementor templates. These rules live here rather than in
 * mega.css because mega.css only loads once a menu item actually has a panel
 * enabled — so a freshly imported template, or one open in the editor, would
 * otherwise render with no styling at all.
 *
 * Scoped to .sl-mega-panel; nothing here leaks into ordinary page content.
 */

.sl-mega-panel {
	width: 100%;
}

/* The icon-list is used purely as an editable link repeater. */
.sl-mega-panel .elementor-icon-list-icon {
	display: none;
}

.sl-mega-panel .elementor-icon-list-items {
	padding: 0;
	margin: 0;
	list-style: none;
}

.sl-mega-panel .elementor-icon-list-item {
	margin: 0;
	font-family: var(--sl-font-ui);
	font-size: var(--sl-ui-size);
	line-height: 1.4;
}

.sl-mega-panel .elementor-icon-list-item > a {
	display: block;
	padding-block: 9px;
	color: var(--sl-text);
	transition: color var(--sl-duration) var(--sl-ease);
}

.sl-mega-panel .elementor-icon-list-item > a:hover,
.sl-mega-panel .elementor-icon-list-item > a:focus-visible {
	color: var(--sl-link);
}

/*
 * Heading widgets are emitted with header_size "div" so no h-level rule fights
 * these classes, but the title element still needs the type set on it directly
 * rather than inherited.
 */
.sl-mega-panel .sl-mega__headline .elementor-heading-title {
	font-family: var(--sl-font-display);
	font-weight: 300;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--sl-text);
	margin: 0;
}

.sl-mega-panel .sl-mega__eyebrow .elementor-heading-title,
.sl-mega-panel .sl-mega__column-title .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/*
 * Repeated from mega.css rather than referenced, because that file may not be
 * on the page — see the note above.
 */
.sl-mega-panel .sl-mega__column-title {
	display: block;
	padding-bottom: 12px;
	margin-bottom: 6px;
	border-bottom: var(--sl-border-w) solid var(--sl-hairline);
}

.sl-mega-panel .sl-mega__eyebrow {
	margin-bottom: 18px;
}

.sl-mega-panel .sl-mega__headline {
	margin-bottom: 22px;
}

.sl-mega-panel .sl-mega__cta p {
	margin: 0;
}

@media (max-width: 1180px) {
	.sl-mega-panel {
		flex-wrap: wrap;
	}
}