/*
 * Base — reset, typography, layout primitives, brand button styles, helpers.
 *
 * Every primitive used by block stylesheets lives here so blocks stay small
 * and consistent. No design tokens are hard-coded — see tokens.css.
 */

/* Reset ----------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	margin: 0 !important;
	padding: 0 !important;
}

body {
	margin: 0 !important;
	padding-inline: 0 !important;
	font-family: var(--ff-body);
	font-size: var(--font-body);
	line-height: var(--lh-normal);
	color: var(--eqx-text-primary);
	background: var(--eqx-warm-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--eqx-brand-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color var(--transition-base);
}
a:hover, a:focus { color: var(--eqx-brand-accent); }

button { font: inherit; cursor: pointer; }

ul, ol { padding-left: 1.25rem; }

/* Typography ------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-display);
	font-weight: 700;
	line-height: var(--lh-tight);
	color: var(--eqx-brand-dark);
	margin: 0 0 var(--spacing-sm);
	letter-spacing: -0.01em;
}

h1, .eqx-display { font-size: var(--font-display); }
h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); }
.eqx-h1 { font-size: var(--font-h1); }

.eqx-eyebrow {
	display: inline-block;
	font-family: var(--ff-body);
	font-size: var(--font-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--eqx-brand-accent);
	margin-bottom: var(--spacing-xs);
}

p { margin: 0 0 var(--spacing-sm); }
.eqx-meta { font-size: var(--font-small); color: var(--eqx-text-muted); }

/* Layout primitives ---------------------------------------------- */

.eqx-container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

.eqx-mw--narrow   { max-width: var(--mw-narrow);   margin-left: auto; margin-right: auto; }
.eqx-mw--prose    { max-width: var(--mw-prose);    margin-left: auto; margin-right: auto; }
.eqx-mw--standard { max-width: var(--mw-standard); margin-left: auto; margin-right: auto; }
.eqx-mw--wide     { max-width: var(--mw-wide);     margin-left: auto; margin-right: auto; }
.eqx-mw--full     { max-width: 100%; }

/* Section padding */
.eqx-section { width: 100%; }
.eqx-pad--none { padding-block: 0; }
.eqx-pad--sm   { padding-block: var(--spacing-md); }
.eqx-pad--md   { padding-block: var(--spacing-lg); }
.eqx-pad--lg   { padding-block: var(--spacing-2xl); }

/* Two adjacent sections sharing a background read as one surface, so their
   facing paddings stack into a single void — 96px + 96px between the reviews
   slider and the trust cards below it, with no colour change to justify it
   (client, 11/08). Halve the second section's top padding in that case; where
   the background *does* change, the full step still separates the two. */
.eqx-bg--white  + .eqx-bg--white.eqx-pad--lg,
.eqx-bg--light  + .eqx-bg--light.eqx-pad--lg,
.eqx-bg--dark   + .eqx-bg--dark.eqx-pad--lg,
.eqx-bg--accent + .eqx-bg--accent.eqx-pad--lg { padding-top: var(--spacing-lg); }

.eqx-bg--white  + .eqx-bg--white.eqx-pad--md,
.eqx-bg--light  + .eqx-bg--light.eqx-pad--md,
.eqx-bg--dark   + .eqx-bg--dark.eqx-pad--md,
.eqx-bg--accent + .eqx-bg--accent.eqx-pad--md { padding-top: var(--spacing-md); }

/* …and the facing side of the section above it, so the join is symmetrical
   rather than trimmed only underneath. */
.eqx-pad--lg.eqx-bg--white:has(+ .eqx-bg--white),
.eqx-pad--lg.eqx-bg--light:has(+ .eqx-bg--light),
.eqx-pad--lg.eqx-bg--dark:has(+ .eqx-bg--dark),
.eqx-pad--lg.eqx-bg--accent:has(+ .eqx-bg--accent) { padding-bottom: var(--spacing-lg); }

.eqx-pad--md.eqx-bg--white:has(+ .eqx-bg--white),
.eqx-pad--md.eqx-bg--light:has(+ .eqx-bg--light),
.eqx-pad--md.eqx-bg--dark:has(+ .eqx-bg--dark),
.eqx-pad--md.eqx-bg--accent:has(+ .eqx-bg--accent) { padding-bottom: var(--spacing-md); }

/* Section backgrounds */
.eqx-bg--white   { background: var(--eqx-warm-white); }
.eqx-bg--light   { background: var(--eqx-brand-light); }
.eqx-bg--dark    { background: var(--eqx-brand-dark); color: var(--eqx-warm-white); }
.eqx-bg--dark h1, .eqx-bg--dark h2, .eqx-bg--dark h3 { color: var(--eqx-warm-white); }
.eqx-bg--dark a:not(.eqx-button)  { color: var(--eqx-brand-accent); }
.eqx-bg--accent  { background: var(--eqx-brand-accent); color: var(--eqx-brand-dark); }

.eqx-main { display: block; }
.eqx-front-page > * { display: block; } /* ACF blocks render as section nodes */

/* Buttons --------------------------------------------------------- */

.eqx-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.95em 1.75em;
	border-radius: var(--radius-button);
	font-family: var(--ff-body);
	font-weight: 600;
	font-size: var(--font-body);
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
	cursor: pointer;
}
.eqx-button:hover { transform: translateY(-1px); }

.eqx-button--primary {
	background: var(--eqx-brand-accent);
	color: var(--eqx-warm-white);
	border-color: var(--eqx-brand-accent);
}
.eqx-button--primary:hover, .eqx-button--primary:focus {
	background: var(--eqx-brand-accent-dk);
	border-color: var(--eqx-brand-accent-dk);
	color: var(--eqx-warm-white);
}

.eqx-button--secondary {
	background: transparent;
	color: var(--eqx-warm-white);
	border-color: var(--eqx-warm-white);
}
.eqx-button--secondary:hover, .eqx-button--secondary:focus {
	background: var(--eqx-warm-white);
	color: var(--eqx-brand-dark);
}

.eqx-button--dark {
	background: var(--eqx-brand-dark);
	color: var(--eqx-warm-white);
	border-color: var(--eqx-brand-dark);
}
.eqx-button--dark:hover, .eqx-button--dark:focus {
	background: var(--eqx-brand-accent);
	color: var(--eqx-brand-dark);
	border-color: var(--eqx-brand-accent);
}

.eqx-button--text-link {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--eqx-brand-dark);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}
.eqx-button--text-link:hover, .eqx-button--text-link:focus {
	color: var(--eqx-brand-accent);
}

/* Form fields ----------------------------------------------------- */

input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="url"], input[type="password"],
input[type="number"], textarea, select {
	width: 100%;
	font-family: var(--ff-body);
	font-size: var(--font-body);
	color: var(--eqx-text-primary);
	background: var(--eqx-warm-white);
	border: 1px solid var(--eqx-border);
	border-radius: var(--radius-button);
	padding: 0.75em 0.95em;
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
input:focus, textarea:focus, select:focus {
	outline: 0;
	border-color: var(--eqx-brand-accent);
	box-shadow: 0 0 0 3px rgba(var(--eqx-brand-accent-rgb), 0.22);
}

/* Visually-hidden helper for screen readers ----------------------- */

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

/* Skip link ------------------------------------------------------- */

.eqx-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--eqx-brand-dark);
	color: var(--eqx-warm-white);
	padding: var(--spacing-xs) var(--spacing-sm);
	z-index: var(--z-modal);
	text-decoration: none;
}
.eqx-skip-link:focus { left: var(--spacing-xs); }

/* Icons ----------------------------------------------------------- */

.eqx-icon { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }

/* Text-columns card defaults --------------------------------------- *
 * Mirrored from blocks/text-columns/style.css. Lives here too because
 * per-block stylesheets occasionally enqueue late behind page caches —
 * base.css is always loaded so these rules are guaranteed to apply. */

.eqx-text-columns .eqx-text-columns__grid {
	display: grid;
	gap: var(--spacing-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}
.eqx-text-columns--cols-2 .eqx-text-columns__grid { grid-template-columns: repeat(2, 1fr); }
.eqx-text-columns--cols-3 .eqx-text-columns__grid { grid-template-columns: repeat(3, 1fr); }
.eqx-text-columns--cols-4 .eqx-text-columns__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.eqx-text-columns--cols-3 .eqx-text-columns__grid,
	.eqx-text-columns--cols-4 .eqx-text-columns__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Two classes, not one — a media query adds no specificity, so a bare
   `.eqx-text-columns__grid` here loses to `--cols-3 .eqx-text-columns__grid`
   above and the block never collapses to a single column. */
@media (max-width: 560px) {
	.eqx-text-columns--cols-2 .eqx-text-columns__grid,
	.eqx-text-columns--cols-3 .eqx-text-columns__grid,
	.eqx-text-columns--cols-4 .eqx-text-columns__grid { grid-template-columns: 1fr; }
}
.eqx-text-columns .eqx-text-column--has-icon { text-align: center; }

.eqx-text-columns .eqx-text-column {
	background: var(--eqx-warm-white);
	border: 1px solid var(--eqx-border);
	border-radius: var(--radius-card);
	padding: var(--spacing-md) calc(var(--spacing-md) + 4px);
}
.eqx-text-columns--style-plain .eqx-text-column {
	background: transparent;
	border: 0;
	padding: 0;
}

/* Reduced motion -------------------------------------------------- */

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