/*
 * Shared design system for the modernised Wix pages.
 *
 * Colours are ONLY the ones the old site already uses — nothing here adds a
 * new hue. Everything else (spacing, radius, shadow, type scale, motion, the
 * button and focus styles) is what the redesign standardises, so the four
 * pages and the header/footer read as one site instead of four canvases.
 *
 * Loaded on every page before wix-global.css. Classes here start with `wx-`
 * and do nothing on the previous design's pages, which never use them.
 */

:root {
	/* The old site's palette, unchanged. */
	--wx-magenta: #ff00bb;
	--wx-magenta-dark: #aa007d; /* already on the site: the magenta button's own shadow */
	--wx-blue: #002fa6;
	--wx-yellow: #fff200;
	--wx-ice: #ccf3ff;
	--wx-sky: #17c6ff;
	--wx-red: #e21c21;
	--wx-orange: #ff7117;
	--wx-green: #46a646;
	--wx-ink: #2f2e2e;
	--wx-grey: #868686;
	--wx-white: #ffffff;

	/* Type. Families are the ones already loaded. */
	--wx-font-body: 'Poppins', Helvetica, Arial, sans-serif;
	--wx-font-alt: 'Raleway', Helvetica, Arial, sans-serif;
	--wx-font-display: 'Montserrat', 'Poppins', Helvetica, Arial, sans-serif; /* stands in for Lulo Clean */
	--wx-fs-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
	--wx-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--wx-fs-lead: clamp(1.1rem, 1rem + 0.5vw, 1.375rem);
	--wx-fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	--wx-fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.75rem);
	--wx-fs-h1: clamp(2rem, 1.4rem + 3vw, 3.75rem);
	--wx-lh-tight: 1.1;
	--wx-lh-body: 1.6;

	/* Layout. The client prefers compact sections — no large empty gaps. */
	--wx-container: 1200px;
	--wx-container-narrow: 820px;
	--wx-gutter: clamp(16px, 4vw, 32px);
	--wx-section: clamp(2.25rem, 4.5vw, 4rem);
	--wx-gap: clamp(1rem, 2.4vw, 1.75rem);
	--wx-gap-sm: clamp(0.5rem, 1.2vw, 0.875rem);

	/* Shape and depth. */
	--wx-radius-sm: 10px;
	--wx-radius: 18px;
	--wx-radius-lg: 28px;
	--wx-radius-pill: 999px;
	--wx-shadow-sm: 0 2px 8px rgba(0, 47, 166, 0.10);
	--wx-shadow: 0 10px 30px -12px rgba(0, 47, 166, 0.28);
	--wx-shadow-lg: 0 24px 60px -24px rgba(0, 47, 166, 0.40);

	/* Motion. */
	--wx-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--wx-dur: 0.28s;

	/* Hit area floor for anything tappable. */
	--wx-tap: 44px;
}

/* A centred content column. */
.wx-container {
	width: 100%;
	max-width: var(--wx-container);
	margin-inline: auto;
	padding-inline: var(--wx-gutter);
	box-sizing: border-box;
}
.wx-container--narrow { max-width: var(--wx-container-narrow); }

/* One button system, in the site's existing colours. */
.wx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--wx-tap);
	padding: 0.7em 1.5em;
	border: 2px solid transparent;
	border-radius: var(--wx-radius-pill);
	font-family: var(--wx-font-body);
	font-size: var(--wx-fs-body);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--wx-shadow-sm);
	transition: transform var(--wx-dur) var(--wx-ease), box-shadow var(--wx-dur) var(--wx-ease), background-color var(--wx-dur) var(--wx-ease), color var(--wx-dur) var(--wx-ease);
}
.wx-btn:hover { transform: translateY(-2px); box-shadow: var(--wx-shadow); }
.wx-btn:active { transform: translateY(0); box-shadow: var(--wx-shadow-sm); }
.wx-btn--magenta { background: var(--wx-magenta); color: var(--wx-white); }
.wx-btn--yellow { background: var(--wx-yellow); color: var(--wx-ink); }
.wx-btn--blue { background: var(--wx-blue); color: var(--wx-white); }
.wx-btn--green { background: var(--wx-green); color: var(--wx-white); }
.wx-btn--outline { background: transparent; border-color: currentColor; box-shadow: none; }

/* Visible keyboard focus everywhere on the replica pages. */
body.wx-page :focus-visible {
	outline: 3px solid var(--wx-magenta);
	outline-offset: 3px;
}

/*
 * Section heading: the same structure and spacing everywhere.
 *
 *   <header class="wx-head">                 (add wx-head--left to left-align)
 *     <p class="wx-eyebrow">Small label</p>   (only when the section already has such a line)
 *     <h2 class="wx-title">Title</h2>
 *     <p class="wx-lead">Supporting line</p>  (only when the section already has one)
 *   </header>
 *
 * Two families only: Montserrat for display, Poppins for text. The title
 * inherits its colour, so each section keeps the colour it already uses; set it
 * on the section or with a modifier class, never here.
 */
.wx-head {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	max-width: 48rem;
	margin: 0 auto clamp(1.25rem, 3vw, 2.25rem);
	text-align: center;
}
.wx-head--left {
	justify-items: start;
	margin-inline: 0;
	text-align: left;
}
.wx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	font: 800 0.8rem/1.2 var(--wx-font-display);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wx-magenta);
}
.wx-eyebrow::before {
	content: '';
	width: 1.75em;
	height: 3px;
	border-radius: 3px;
	background: currentColor;
}
.wx-title {
	margin: 0;
	font: 800 var(--wx-fs-h2)/1.12 var(--wx-font-display);
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: inherit;
}
.wx-lead {
	max-width: 42rem;
	margin: 0;
	font: 400 var(--wx-fs-lead)/1.55 var(--wx-font-body);
	text-wrap: pretty;
}

/* Rounded, lightly lifted media — same images, modern frame. */
.wx-media {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wx-radius);
	object-fit: cover;
}

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