/*
 * Y. Greengrass — shared design tokens and primitives.
 * Loaded once per page; per-widget stylesheets layer on top.
 *
 * Tokens are defined on :root so they're overridable by:
 *   1. Theme CSS (highest design authority — Yuval defines tokens via tailwind.config / shadcn equivalent later)
 *   2. Elementor "Site Settings" → Custom CSS
 *   3. Elementor per-section settings
 */

/* Global guard: nothing may cause horizontal scroll on any page (off-canvas drawer,
 * full-bleed 100vw sections, long nowrap text). `clip` keeps position:sticky working
 * (unlike `hidden`); applied to both html and body since the overflow can land on either. */
html,
body {
	overflow-x: clip;
}

/* ── Utility classes — add to any Elementor container/widget via Advanced → CSS Classes ── */

/* Drop a container's forced min-height on phones so it shrinks to its content
 * (e.g. add to the hero's wrapping container so it isn't a tall stretched band). */
@media (max-width: 767px) {
	.gg-mobile-auto-height {
		min-height: 0 !important;
		height: auto !important;
	}
}

:root {
	/* Colors — placeholders; swap when Yuval ships the design tokens. */
	--gg-color-text: #0f172a;
	--gg-color-muted: #475569;
	--gg-color-accent: #e63946;      /* hero CTA red */
	--gg-color-cta: #16a34a;         /* header pill green */
	--gg-color-bg-soft: #f8fafc;
	--gg-color-bg-cta: #f0fdf4;      /* lead-form section background */
	--gg-color-bg-dark: #0f172a;
	--gg-color-card-bg: #f8fafc;

	/* Layout */
	--gg-container-max: 1280px;
	--gg-container-pad: clamp(16px, 3vw, 32px);
	--gg-section-pad: clamp(48px, 6vw, 96px);
	--gg-section-pad-sm: clamp(32px, 4vw, 64px);

	/* Type */
	--gg-font-family: inherit; /* let the theme decide */
}

/*
 * Buttons — used across widgets. Two named variants so each call-site picks a clear semantic
 * (`primary` = red, hero/CTA emphasis; `cta` = green, header conversion pill; `link` = text link with arrow).
 */
.greengrass-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: clamp(14px, 1.1vw, 16px);
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	line-height: 1.2;
}

.greengrass-btn--primary {
	background: var(--gg-color-accent);
	color: #fff;
}

.greengrass-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(230, 57, 70, 0.28);
}

.greengrass-btn--cta {
	background: var(--gg-color-cta);
	color: #fff;
}

.greengrass-btn--cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(22, 163, 74, 0.28);
}

.greengrass-btn--link {
	background: transparent;
	color: var(--gg-color-accent);
	padding: 6px 0;
	border-radius: 0;
}

.greengrass-btn--link:hover {
	text-decoration: underline;
}

/* RTL-safe focus ring — works for buttons and form controls. */
.greengrass-btn:focus-visible,
.greengrass-lead-form__field input:focus-visible,
.greengrass-lead-form__field textarea:focus-visible {
	outline: 2px solid var(--gg-color-accent);
	outline-offset: 2px;
}