/**
 * 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-color-white: #fff;

	/*
	 * Buttons, links, icons and active states all follow the highlight
	 * colour (Customizer: Brand Colours → Buttons & accents); hover and
	 * tints are worked out from it.
	 */
	--hm-color-button: var(--hm-color-highlight);
	--hm-color-button-hover: color-mix(in srgb, var(--hm-color-highlight) 80%, #000);
	--hm-color-button-soft: color-mix(in srgb, var(--hm-color-highlight) 11%, #fff);
	--hm-color-button-tint: color-mix(in srgb, var(--hm-color-highlight) 18%, #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;

	/*
	 * Top and bottom padding of the page sections: the same on every
	 * section of a phone (48px) or tablet (56px); desktop follows the
	 * artboard. Customize → Section Spacing sets --hm-section-top/-bottom.
	 */
	--hm-section-space: 48px;
	--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%;
	scroll-behavior: smooth;
}

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;
		--hm-section-space: 56px;
	}
}

@media (min-width: 1200px) {
	:root {
		--hm-section-space: max(56px, calc(96 * var(--hm-u)));
	}
}

/*
 * Each section pads itself with these. A section's own spacing boxes in
 * the Customizer set them on its ID (inc/customizer/spacing.php).
 */
.hm-founder,
.hm-about,
.hm-wwd,
.hm-team,
.hm-activities,
.hm-news,
.hm-stats,
.hm-stories,
.hm-cta,
.hm-donate,
.hm-logos,
.hm-contact,
.hm-journey,
.hm-beyond,
.hm-iwwd,
.hm-hope {
	--hm-space-top: var(--hm-section-top, var(--hm-section-space));
	--hm-space-bottom: var(--hm-section-bottom, var(--hm-section-space));
}

@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);
	}
}

/* Floating WhatsApp button --------------------------------------------- */

/*
 * "Liquid glass": a frosted, see-through ring with a bright rim and a
 * soft highlight, around the WhatsApp logo. --hm-wa-ring (0–1) is how solid
 * the glass is (Customizer: WhatsApp Button → Glass ring).
 */
.hm-whatsapp {
	--hm-wa-ring: 0.62;

	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 900;
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	padding: 5px;
	border: 1px solid rgb(255 255 255 / calc(0.25 + var(--hm-wa-ring) * 0.75));
	border-radius: 50%;
	background: linear-gradient(150deg, rgb(255 255 255 / var(--hm-wa-ring)) 0%, rgb(255 255 255 / calc(var(--hm-wa-ring) * 0.35)) 55%, rgb(255 255 255 / calc(var(--hm-wa-ring) * 0.65)) 100%);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	backdrop-filter: blur(14px) saturate(180%);
	color: var(--hm-color-white);
	box-shadow:
		inset 0 1px 1px rgb(255 255 255 / 0.95),
		inset 0 -3px 8px rgb(15 40 70 / 0.08),
		0 12px 28px -10px rgb(10 30 60 / 0.45),
		0 2px 6px rgb(10 30 60 / 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Glossy highlight across the top of the glass. */
.hm-whatsapp::before {
	content: "";
	position: absolute;
	inset: 2px 6px auto;
	height: 45%;
	border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
	background: linear-gradient(rgb(255 255 255 / min(0.7, var(--hm-wa-ring) + 0.1)), rgb(255 255 255 / 0));
	pointer-events: none;
}

.hm-whatsapp--left {
	right: auto;
	left: 20px;
}

/* Out of the way while the menu panel is open. */
html.hm-menu-open .hm-whatsapp {
	visibility: hidden;
}

.hm-whatsapp:hover {
	color: var(--hm-color-white);
	box-shadow:
		inset 0 1px 1px rgb(255 255 255 / 0.95),
		inset 0 -3px 8px rgb(15 40 70 / 0.08),
		0 16px 32px -10px rgb(10 30 60 / 0.5),
		0 2px 6px rgb(10 30 60 / 0.12);
	transform: translateY(-2px) scale(1.04);
}

.hm-whatsapp:focus-visible {
	outline: 3px solid #25d366;
	outline-offset: 3px;
}

/*
 * The picture fills the circle inside the ring and never crosses it:
 * whatever sticks out, like the tip of the speech bubble, is cut off.
 */
.hm-whatsapp__disc {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 50%;
}

.hm-whatsapp__logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Read by screen readers always; shown as a tip on hover where possible. */
.hm-whatsapp__label {
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	padding: 8px 14px;
	border-radius: var(--hm-radius-pill);
	background: var(--hm-color-white);
	box-shadow: 0 8px 20px -10px rgb(0 0 0 / 0.35);
	font-family: var(--hm-font-heading);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: #1f2d3d;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity 0.2s ease;
}

.hm-whatsapp--left .hm-whatsapp__label {
	right: auto;
	left: calc(100% + 12px);
}

@media (hover: hover) {
	.hm-whatsapp:hover .hm-whatsapp__label,
	.hm-whatsapp:focus-visible .hm-whatsapp__label {
		opacity: 1;
	}
}

@media (max-width: 767px) {
	.hm-whatsapp {
		right: 16px;
		bottom: 16px;
		width: 58px;
		height: 58px;
		padding: 4px;
	}

	.hm-whatsapp--left {
		left: 16px;
	}
}

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}