/**
 * AutoExchange — base, tokens and layout primitives.
 *
 * Type scale and spacing read from the Figma file (canvas 5306:706).
 * Color custom properties are injected from inc/design-tokens.php.
 */

:root {
	/**
	 * Fluid interpolation between the two designed frames: 375px and 1440px.
	 * Resolves to a length. Used as:
	 *   clamp(MIN, calc(MIN + (MAX - MIN) * var(--ae-fluid)), MAX)
	 * The clamp is required — this value alone does not stop at either end.
	 */
	--ae-fluid: calc((100vw - 375px) / 1065);

	--ae-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	/* Section container padding. Desktop 100px / 1440px = 6.9444%. */
	--ae-section-padding-desktop: 6.9444%;

	/* Figma effect "basic". */
	--ae-shadow-basic: 5px 5px 20px 0 rgba(0, 0, 0, 0.1);
	/* Figma effect "IMG". */
	--ae-shadow-img: 4px 8px 12px 0 rgba(0, 0, 0, 0.08);
	/* Figma drop shadow on the listing sidebar cards (10344:5064, 10344:5122). */
	--ae-shadow-card: 0 1px 4px 0 rgba(2, 2, 2, 0.1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	overflow-x: hidden;
	font-family: var(--ae-font);
	/* Par: 16/26 mobile → 18/28 desktop */
	font-size: clamp(16px, calc(16px + 2 * var(--ae-fluid)), 18px);
	line-height: clamp(26px, calc(26px + 2 * var(--ae-fluid)), 28px);
	font-weight: 400;
	color: var(--ae-color-black, #000);
	background-color: var(--ae-color-white, #fff);
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Type scale — Figma Desktop/* and Mobile/* variables.
 * Values interpolate between the 375 and 1440 frames.
 * ---------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--ae-font);
}

/* H1: 36/46 700 → 48/58 700 */
h1,
.ae-h1 {
	font-size: clamp(36px, calc(36px + 12 * var(--ae-fluid)), 48px);
	line-height: clamp(46px, calc(46px + 12 * var(--ae-fluid)), 58px);
	font-weight: 700;
}

/* H2: 28/38 600 → 32/42 600 */
h2,
.ae-h2 {
	font-size: clamp(28px, calc(28px + 4 * var(--ae-fluid)), 32px);
	line-height: clamp(38px, calc(38px + 4 * var(--ae-fluid)), 42px);
	font-weight: 600;
}

/* H3: 26/34 600. No mobile token exists in Figma — left static. */
h3,
.ae-h3 {
	font-size: 26px;
	line-height: 34px;
	font-weight: 600;
}

/* H4: 22/30 600 → 24/32 600 */
h4,
.ae-h4 {
	font-size: clamp(22px, calc(22px + 2 * var(--ae-fluid)), 24px);
	line-height: clamp(30px, calc(30px + 2 * var(--ae-fluid)), 32px);
	font-weight: 600;
}

/* H5: 18/26 600 → 22/30 600 */
h5,
.ae-h5 {
	font-size: clamp(18px, calc(18px + 4 * var(--ae-fluid)), 22px);
	line-height: clamp(26px, calc(26px + 4 * var(--ae-fluid)), 30px);
	font-weight: 600;
}

/* H6: 18/28 700. No mobile token exists in Figma — left static. */
h6,
.ae-h6 {
	font-size: 18px;
	line-height: 28px;
	font-weight: 700;
}

/* Figma "Button": 18/18 600 */
.ae-button-text {
	font-size: 18px;
	line-height: 18px;
	font-weight: 600;
}

/* Figma "Label": 18/24 400, letter-spacing 4 */
.ae-label {
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 4px;
}

/* -------------------------------------------------------------------------
 * Section container.
 * Never a fixed max-width — percentages only.
 * Mobile ≤767px: 20px · Tablet 768–1024px: 60px · Desktop ≥1025px: 6.9444%
 * ---------------------------------------------------------------------- */

.ae-container {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding-inline: 20px;
}

@media (min-width: 768px) {
	.ae-container {
		padding-inline: 60px;
	}
}

@media (min-width: 1025px) {
	.ae-container {
		padding-inline: var(--ae-section-padding-desktop);
	}
}

/* Sections whose Figma inset is 120px on 1440 rather than 100px. */
@media (min-width: 1025px) {
	.ae-container--wide-inset {
		padding-inline: 8.3333%;
	}
}

.ae-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

:where(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--ae-color-orange, #ea6042);
	outline-offset: 2px;
}

/* Contact Form 7 — hide the default ajax spinner. */
.wpcf7-spinner {
	display: none;
}