/**
 * Reusable utility classes: container system and button system.
 */

.sh-container {
	width: min(calc(100% - 48px), var(--sh-container-width));
	margin-inline: auto;
}

/* Button system */
.sh-button {
	display: inline-flex;
	align-items: center;
	gap: var(--sh-space-2);
	font-family: var(--sh-font-button);
	font-weight: 600;
	font-size: 0.9375rem;
	padding: var(--sh-space-3) var(--sh-space-6);
	border-radius: var(--sh-radius-pill);
	transition: transform var(--sh-transition-fast), box-shadow var(--sh-transition-fast), background-color var(--sh-transition-fast), color var(--sh-transition-fast);
	border: 1px solid transparent;
	min-height: 44px;
	white-space: nowrap;
}

.sh-button__icon {
	transition: transform var(--sh-transition-fast);
}

.sh-button:hover .sh-button__icon,
.sh-button:focus-visible .sh-button__icon {
	transform: translateX(3px);
}

.sh-button--primary {
	background: var(--sh-button-bg);
	color: var(--sh-button-text);
	box-shadow: 0 6px 20px rgba(217, 168, 63, 0.25);
}

.sh-button--primary:hover,
.sh-button--primary:focus-visible {
	background: var(--sh-button-hover);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(217, 168, 63, 0.35);
	color: var(--sh-button-text);
}

.sh-button--secondary {
	background: var(--sh-secondary);
	color: var(--sh-text);
}

.sh-button--secondary:hover,
.sh-button--secondary:focus-visible {
	background: var(--sh-primary);
	transform: translateY(-2px);
	color: var(--sh-text);
}

.sh-button--outline {
	background: transparent;
	color: var(--sh-heading);
	border-color: var(--sh-border);
}

.sh-button--outline:hover,
.sh-button--outline:focus-visible {
	border-color: var(--sh-accent);
	color: var(--sh-accent);
	transform: translateY(-2px);
}

.sh-button:disabled,
.sh-button[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

/* Body scroll lock while mobile menu is open */
.sh-scroll-locked {
	overflow: hidden;
	height: 100vh;
}

/* Spacing helpers */
.sh-mt-0 { margin-top: 0; }
.sh-mb-0 { margin-bottom: 0; }

/**
 * Light-section override.
 *
 * The theme's default text variables (--sh-heading, --sh-text,
 * --sh-text-muted, --sh-link) are tuned for the dark cosmic background
 * used across the header, footer, and dark hero sections. If an
 * Elementor section/container is given a light or white background,
 * apply this class (Advanced → CSS Classes) to re-scope those same
 * variables to dark equivalents for everything inside it — headings,
 * paragraphs, links, and the SH Hero/Heading widgets all read these
 * variables already, so no other component needs to change.
 */
.sh-section--light {
	--sh-heading: #000000;
	--sh-text: #000000;
	--sh-text-muted: #000000;
	--sh-link: var(--sh-secondary);
	--sh-link-hover: var(--sh-primary);
	--sh-border: rgba(43, 10, 74, 0.12);
	--sh-surface: rgba(43, 10, 74, 0.06);
}

/**
 * Frosted-glass surface.
 *
 * Same glassmorphism treatment as the site header (translucent surface,
 * blur, subtle border) as a reusable utility for any element — apply
 * via Elementor's Advanced → CSS Classes to a section/container, or use
 * directly in theme markup. All values read from theme CSS variables so
 * admin color/blur settings stay in sync automatically.
 */
.sh-glass {
	background: var(--sh-surface);
	backdrop-filter: blur(var(--sh-header-blur));
	-webkit-backdrop-filter: blur(var(--sh-header-blur));
	border: 1px solid var(--sh-border);
	border-radius: var(--sh-radius-md);
}

.sh-glass--pill {
	border-radius: var(--sh-radius-pill);
}

.sh-glass--sm {
	border-radius: var(--sh-radius-sm);
}

.sh-glass--lg {
	border-radius: var(--sh-radius-lg);
}

/**
 * Element reveal-on-scroll.
 *
 * Applied automatically by assets/js/theme.js to every individual
 * Elementor widget. Starts blurred/faded/offset, then transitions to
 * its natural state once .sh-reveal--visible is added by the
 * IntersectionObserver. Skipped entirely under prefers-reduced-motion
 * (widgets stay visible, no filter/transform).
 */
.sh-reveal {
	opacity: 0;
	transform: translateY(18px);
	filter: blur(10px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform, filter;
}

.sh-reveal--visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
	.sh-reveal {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}