/**
 * Marqent base styles: design tokens and shared utility classes.
 * Colours mirror the Elementor Global Colors so CSS and the editor stay in sync.
 */

:root {
	/* Brand */
	--mq-primary: #3b0d7a;
	--mq-primary-dark: #2a0858;
	--mq-navy: #1d0841;
	--mq-navy-2: #2a0d55;
	--mq-navy-3: #3b0d7a; /* footer: logo purple */
	--mq-purple: #5b22a8;
	--mq-periwinkle: #8b62cc;
	--mq-violet: #d9fd8a;

	/* Neutrals */
	--mq-text: #4b4560;
	--mq-muted: #6e6787;
	--mq-lavender: #f7f3fc;
	--mq-border: #ebe4f4;
	--mq-white: #ffffff;

	/* Type */
	/* Urbanist = the logo typeface. */
	--mq-font-heading: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mq-font-body: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Accent (the only colour besides logo purple and white). */
	--mq-yellow: #d9fd8a;
	--mq-yellow-dark: #c3ec62;

	/* Shape and motion */
	--mq-radius-sm: 8px;
	--mq-radius: 14px;
	--mq-radius-lg: 20px;
	--mq-shadow: 0 1px 2px rgba(29, 8, 65, 0.04), 0 8px 24px rgba(29, 8, 65, 0.06);
	--mq-shadow-hover: 0 2px 4px rgba(29, 8, 65, 0.05), 0 16px 40px rgba(29, 8, 65, 0.1);
	--mq-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mq-container: 1180px;
}

/* ---------- Base ---------- */

body {
	font-family: var(--mq-font-body);
	font-weight: 500;
	color: var(--mq-text);
	background: var(--mq-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mq-font-heading);
	color: var(--mq-navy);
	letter-spacing: -0.02em;
}

a {
	color: var(--mq-primary);
	transition: color 0.2s var(--mq-ease);
}

a:hover {
	color: var(--mq-primary-dark);
}

::selection {
	background: var(--mq-primary);
	color: var(--mq-white);
}

:focus-visible {
	outline: 2px solid var(--mq-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

img {
	height: auto;
}

/* ---------- Utilities (add these as CSS classes in Elementor) ---------- */

/* Small purple label above section headings, e.g. "SERVICES". */
.mq-eyebrow,
.mq-eyebrow .elementor-heading-title {
	font-family: var(--mq-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mq-purple);
}

/* Reference-style pill label. */
p.mq-eyebrow,
.mq-eyebrow .elementor-heading-title {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: #f1eafb;
}

/* On dark / coloured sections the pill turns translucent. */
.mq-dark p.mq-eyebrow,
.mq-dark .mq-eyebrow .elementor-heading-title,
.mq-on-color p.mq-eyebrow,
.mq-on-color .mq-eyebrow .elementor-heading-title,
p.mq-eyebrow.mq-eyebrow--light {
	background: rgba(255, 255, 255, 0.12);
}

/* White card with a hairline border, used across most sections. */
.mq-card {
	background: var(--mq-white);
	border: 1px solid var(--mq-border);
	border-radius: var(--mq-radius);
	transition: transform 0.35s var(--mq-ease), box-shadow 0.35s var(--mq-ease), border-color 0.35s var(--mq-ease);
}

.mq-card--hover:hover {
	transform: translateY(-4px);
	box-shadow: var(--mq-shadow-hover);
	border-color: transparent;
}

/* Text link with an arrow that nudges on hover, e.g. "Learn more →". */
.mq-arrow-link,
.mq-arrow-link a {
	font-weight: 700;
	text-decoration: none;
}

.mq-arrow-link .mq-arrow {
	display: inline-block;
	transition: transform 0.25s var(--mq-ease);
}

.mq-arrow-link:hover .mq-arrow,
.mq-arrow-link a:hover .mq-arrow {
	transform: translateX(4px);
}

/* Visually hidden but available to screen readers and crawlers. */
.mq-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}