/**
 * HopeMirror base: design tokens, reset, layout helpers.
 *
 * Desktop sizes are written in design pixels from the 2000px-wide artboard
 * using --hm-u, so calc(69 * var(--hm-u)) is "69px on the artboard" and
 * scales with the width of the site. Brand colours are overridden from the
 * Customizer (see hopemirror_brand_css()).
 */

:root {
	--hm-color-primary: #034e9d;
	--hm-color-primary-dark: #004888;
	--hm-color-accent: #055e30;
	--hm-color-text: #153d68;
	--hm-color-nav: #0f3a72;
	--hm-color-highlight: #0e66c3;
	--hm-topbar-bg: #014d90;
	--hm-color-white: #fff;

	--hm-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--hm-font-heading: "Inter Tight", var(--hm-font-sans);
	--hm-font-script: "Kalam", "Segoe Print", "Bradley Hand", cursive;

	/* One artboard pixel. cqi follows .hm-site's width; capped for very wide screens. */
	--hm-u: min(0.05cqi, 1.28px);

	--hm-gutter: 16px;
	--hm-radius-pill: 999px;
	--hm-focus-ring: 0 0 0 3px #fff, 0 0 0 6px var(--hm-color-accent);
}

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

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

body {
	margin: 0;
	font-family: var(--hm-font-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--hm-color-text);
	background: var(--hm-color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
svg {
	max-width: 100%;
}

a {
	color: var(--hm-color-primary);
}

.hm-site {
	container-type: inline-size;
	overflow-x: clip;
}

.hm-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--hm-gutter);
}

.hm-skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 10px 16px;
	border-radius: 6px;
	background: var(--hm-color-white);
	color: var(--hm-color-primary);
	font-weight: 600;
	transform: translateY(-200%);
}

.hm-skip-link:focus {
	transform: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 768px) {
	:root {
		--hm-gutter: 32px;
	}
}

@media (min-width: 768px) {
	.hm-container {
		padding-inline: calc(103 * var(--hm-u));
	}
}

/*
 * Tablets and small laptops (768–1199px) use the desktop layout on a
 * 1500px artboard, so everything is ~33% larger than a straight scale-down
 * of the 2000px design and stays readable.
 */
@media (max-width: 1199px) {
	:root {
		--hm-u: calc(100cqi / 1500);
	}
}

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