/*
 * Bridge: theme tokens (.btn, .card, .eyebrow, .section-band) applied to Elementor wrappers
 * propagate down into Elementor's inner widget structure.
 * Loaded after theme.css so it overrides Elementor's own widget styling where needed.
 */

/* Headings: theme's .eyebrow class lives on .elementor-element; the actual <p>/<h*> is inside .elementor-widget-container */
.elementor-widget-heading.eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--accent);
}
.elementor-widget-heading.eyebrow .elementor-heading-title::before {
	content: "";
	width: 18px;
	height: 2px;
	background: var(--accent);
}

/* Buttons: Elementor renders .elementor-button (an <a>) inside .elementor-widget-button */
.elementor-widget-button.btn .elementor-button,
.elementor-widget-button.btn-primary .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 10px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	background: var(--accent);
	color: #fff;
	border: 2px solid var(--line);
	box-shadow: 3px 3px 0 var(--line);
	text-decoration: none;
	transition: transform .12s ease, box-shadow .12s ease;
}
.elementor-widget-button.btn .elementor-button:hover,
.elementor-widget-button.btn-primary .elementor-button:hover {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--line);
}
.elementor-widget-button.btn-secondary .elementor-button {
	background: var(--accent-3);
	color: var(--line);
}

/* Icon Box .card: style the wrapper as a card */
.elementor-widget-icon-box.card > .elementor-widget-container {
	background: var(--bg-elev);
	border: 2px solid var(--line);
	border-radius: 14px;
	padding: 16px 18px;
	box-shadow: var(--shadow);
}
.elementor-widget-icon-box.card .elementor-icon-box-title {
	font-family: var(--font-display);
	font-size: 17px;
	margin-bottom: 4px;
	color: var(--ink);
}
.elementor-widget-icon-box.card .elementor-icon-box-description {
	font-size: 13px;
	color: var(--ink-soft);
}
.elementor-widget-icon-box.card .elementor-icon {
	color: var(--accent);
	font-size: 22px;
}

/* Container .card: when a container is tagged .card it should look like a card too */
.elementor-element.e-con.card,
.elementor-element.elementor-element.card {
	background: var(--bg-elev);
	border: 2px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--shadow);
}

/* Section band: rely on theme.css's existing .section-band rule via descendant combinator
   from .site[data-theme="pop"], but Elementor's outer container needs the ink rules to draw */
.site[data-theme="pop"] .elementor-element.e-con.section-band,
.site[data-theme="pop"] .elementor-element.section-band {
	border-top: 2px solid var(--line);
	border-bottom: 2px solid var(--line);
	position: relative;
}
.site[data-theme="pop"] .elementor-element.section-band + .elementor-element.section-band {
	border-top: none;
}

/* Constrained inner section width (matches theme .section) */
.elementor-element.e-con.section,
.elementor-element.section {
	max-width: var(--maxw);
	margin-left: auto;
	margin-right: auto;
}

/* Text editor inherits theme typography by default; ensure inline styles still win for the colored bands */
.elementor-widget-text-editor p {
	margin: 0 0 .75em;
}