/* Shared .innerg-btn base — used by Header Buttons and both Hero widgets.
   The Hero widgets still set colour per-instance via Elementor controls
   (those inline styles win by specificity); Header Buttons has no such
   per-instance colour control, so the --solid/--outline/--text variants
   below carry real default colours matching the reference design. */

.innerg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.5rem;
	padding: 0.875rem 2rem;
	font-size: 0.8125rem; /* 13px — reference's enhanced --text-xs at desktop widths */
	/* Not 1 — Cairo's ascent/descent aren't symmetric around its own
	   em-box, so a tight line-height of exactly 1 leaves the glyphs
	   sitting visibly off-centre inside the flex box even though the box
	   itself is centred correctly; 1.2 gives the glyph enough room to
	   land centred. */
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}

.innerg-btn--solid {
	background-color: var( --brand-dark, #2b291a );
	color: var( --background, #fff );
}

.innerg-btn--solid:hover {
	background-color: var( --accent, #73947c );
}

.innerg-btn--outline,
.innerg-btn--text {
	background-color: transparent;
}

.innerg-btn--outline {
	border-color: var( --border );
	color: var( --muted-foreground );
}

.innerg-btn--outline:hover {
	border-color: var( --accent );
	color: var( --foreground );
}

.innerg-btn--text {
	border-color: transparent !important;
	padding-inline: 0;
	color: var( --muted-foreground );
}

.innerg-btn--text:hover {
	color: var( --foreground );
}

.innerg-header-buttons,
.innerg-hero-split__buttons,
.innerg-hero-full__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.innerg-header-buttons {
	gap: 1rem;
}

.innerg-hero-split__buttons,
.innerg-hero-full__buttons {
	gap: 0.75rem; /* 12px, reference's gap-3 */
}

/* Mobile: stack instead of wrap, each stretched to the full row width —
   side-by-side buttons size to their own text (inline-flex), so two CTAs
   of different lengths ("Explore Disciplines" vs "View Membership") never
   match width no matter how they wrap. Full-width stacking makes both
   identical regardless of their text. */
@media ( max-width: 640px ) {
	.innerg-hero-split__buttons,
	.innerg-hero-full__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.innerg-hero-split__buttons .innerg-btn,
	.innerg-hero-full__buttons .innerg-btn {
		width: 100%;
	}
}

.innerg-btn__icon {
	width: 15px; /* reference's svg[width="12"] renders at 15px at desktop widths, not the raw 12px attribute */
	height: 15px;
	transition: transform 0.2s ease;
}

.innerg-btn:hover .innerg-btn__icon {
	transform: translateX( 4px );
}

/* Header-specific sizing (matches the reference's exact per-role button
   sizes — "Join Now" solid at 10/24px, "Demo Account"-style outline at
   8/16px, plain-text "Sign in" at 15px/no padding — rather than the one
   uniform size above). Scoped to #innerg-header so Hero's own CTA
   buttons, which share this same .innerg-btn component, are unaffected. */
#innerg-header .innerg-btn--solid {
	padding: 0.625rem 1.5rem; /* 10px 24px */
}

#innerg-header .innerg-btn--outline {
	padding: 0.5rem 1rem; /* 8px 16px */
}

#innerg-header .innerg-btn--text {
	padding: 0;
	font-size: 0.9375rem; /* 15px — the reference's plain-text "Sign in" is body-text sized, not button-sized */
}