/**
 * Lumero responsive foundation.
 *
 * This stylesheet supplies safe defaults and opt-in utility classes. Visual
 * page design remains controlled through Elementor Pro's Site Settings and
 * templates. Breakpoints align with the planned Elementor configuration:
 * mobile-first, tablet at 768px, desktop at 1025px and wide at 1441px.
 */

:root {
	/* Provisional brand tokens: refine during visual design. */
	--lumero-colour-ink: #102632;
	--lumero-colour-muted: #536872;
	--lumero-colour-surface: #ffffff;
	--lumero-colour-surface-soft: #f3f7f8;
	--lumero-colour-border: #d9e3e6;
	--lumero-colour-accent: #087f8c;
	--lumero-colour-accent-dark: #055e68;
	--lumero-colour-focus: #006fd6;

	--lumero-content-width: 75rem;
	--lumero-reading-width: 46rem;
	--lumero-gutter: clamp(1rem, 4vw, 2rem);
	--lumero-section-space: clamp(3rem, 8vw, 7rem);
	--lumero-grid-gap: clamp(1rem, 3vw, 2rem);
	--lumero-radius-small: 0.5rem;
	--lumero-radius-medium: 1rem;
	--lumero-shadow-soft: 0 0.75rem 2.5rem rgba(16, 38, 50, 0.1);

	--lumero-text-small: clamp(0.875rem, 0.84rem + 0.16vw, 0.95rem);
	--lumero-text-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	--lumero-text-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.4rem);
	--lumero-heading-small: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
	--lumero-heading-medium: clamp(2rem, 1.55rem + 1.8vw, 3.2rem);
	--lumero-heading-large: clamp(2.5rem, 1.75rem + 3vw, 4.75rem);
}

html {
	overflow-x: hidden;
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	background: var(--lumero-colour-surface);
	color: var(--lumero-colour-ink);
	overflow-wrap: break-word;
}

img,
svg,
video,
canvas {
	display: block;
	max-inline-size: 100%;
	height: auto;
}

iframe {
	max-inline-size: 100%;
}

button,
input,
select,
textarea {
	max-inline-size: 100%;
	font: inherit;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 0.1875rem solid var(--lumero-colour-focus);
	outline-offset: 0.1875rem;
}

/* Prevent long technical strings and URLs from breaking mobile layouts. */
:where(p, li, dd, td, th, figcaption) {
	overflow-wrap: anywhere;
}

/* Opt-in content containers for Elementor's CSS Classes field. */
.lumero-container {
	inline-size: min(100% - (2 * var(--lumero-gutter)), var(--lumero-content-width));
	margin-inline: auto;
}

.lumero-reading-width {
	inline-size: min(100%, var(--lumero-reading-width));
}

.lumero-section {
	padding-block: var(--lumero-section-space);
}

.lumero-stack > * {
	margin-block: 0;
}

.lumero-stack > * + * {
	margin-block-start: var(--lumero-grid-gap);
}

.lumero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lumero-grid-gap);
}

.lumero-card {
	min-inline-size: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--lumero-colour-surface);
	border: 1px solid var(--lumero-colour-border);
	border-radius: var(--lumero-radius-medium);
}

.lumero-card--raised {
	box-shadow: var(--lumero-shadow-soft);
}

.lumero-lead {
	font-size: var(--lumero-text-lead);
	line-height: 1.55;
}

.lumero-heading--small {
	font-size: var(--lumero-heading-small);
	line-height: 1.2;
}

.lumero-heading--medium {
	font-size: var(--lumero-heading-medium);
	line-height: 1.12;
}

.lumero-heading--large {
	font-size: var(--lumero-heading-large);
	line-height: 1.05;
}

/* Wrap data tables in an element with this class. */
.lumero-table-scroll {
	inline-size: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

.lumero-table-scroll table {
	min-inline-size: 40rem;
	margin: 0;
}

/* Maintains a useful mobile aspect ratio for result charts and embeds. */
.lumero-chart,
.lumero-responsive-embed {
	position: relative;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.lumero-chart > *,
.lumero-responsive-embed > * {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* HubSpot forms inherit sizing without imposing visual branding. */
.hbspt-form,
.hbspt-form form,
.hbspt-form fieldset,
.hbspt-form .hs-form-field,
.hbspt-form input,
.hbspt-form select,
.hbspt-form textarea {
	max-inline-size: 100% !important;
}

.hbspt-form fieldset {
	inline-size: 100% !important;
}

.hbspt-form input:not([type='checkbox']):not([type='radio']),
.hbspt-form select,
.hbspt-form textarea {
	inline-size: 100% !important;
}

/* WordPress accessibility helper used by themes and plugins. */
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	inline-size: auto;
	block-size: auto;
	padding: 0.75rem 1rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	background: var(--lumero-colour-surface);
	color: var(--lumero-colour-ink);
	box-shadow: var(--lumero-shadow-soft);
}

@media (min-width: 48rem) {
	.lumero-grid--two,
	.lumero-grid--three {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lumero-chart,
	.lumero-responsive-embed {
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 64.0625rem) {
	.lumero-grid--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lumero-grid--four {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 47.9375rem) {
	/* Opt-in mobile ordering for two-column Elementor layouts. */
	.lumero-mobile-first {
		order: -1;
	}

	/* Avoid overly wide controls generated by third-party forms. */
	.elementor-button,
	.hbspt-form .hs-button {
		max-inline-size: 100%;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.elementor-location-header,
	.elementor-location-footer,
	.lumero-no-print {
		display: none !important;
	}

	a[href^='http']::after {
		content: ' (' attr(href) ')';
		font-size: 0.85em;
	}
}