/*
 * Cevero, site-wide styles.
 *
 * Loaded on every page. Sections add their rules below their own heading;
 * shortcode and widget styles stay in front.css and load only where used.
 *
 * Every colour below is sampled from the Cevero logo. Nothing else is a
 * brand colour. Change them here and nowhere else.
 */

:root {
	/* Sampled from the logo file: red #AD0A04, black #000101, grey #5E5E5D. */
	--cevero-red: #ad0a04;
	--cevero-red-dark: #8c0803;   /* darkened for hover, same hue */
	--cevero-ink: #000101;
	--cevero-grey: #5e5e5d;
	--cevero-paper: #ffffff;

	/* Neutral surfaces, mixed from the logo grey so sections separate by
	   tone rather than by borders. */
	--cevero-surface: #f5f5f4;
	--cevero-surface-deep: #ebebea;

	/* Body text sits slightly lighter than pure logo black for reading
	   comfort; it still passes AA on every surface above. */
	--cevero-text: #1c1c1b;
	--cevero-text-muted: #5e5e5d;

	--cevero-whatsapp: #25d366;
	--cevero-radius: 999px;
	--cevero-measure: 68ch;
}

/* ---------------------------------------------------------------------
 * WhatsApp button (includes/sections/whatsapp-button.php)
 * ------------------------------------------------------------------- */

.cevero-whatsapp {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9000;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px 12px 14px;
	background: var(--cevero-whatsapp);
	color: #fff;
	text-decoration: none;
	font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	border-radius: var(--cevero-radius);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.cevero-whatsapp:hover,
.cevero-whatsapp:focus-visible {
	color: #fff;
	background: #1ebe5a;
	outline: none;
}

.cevero-whatsapp svg {
	width: 22px;
	height: 22px;
	flex: none;
	fill: currentColor;
}

@media (max-width: 600px) {
	.cevero-whatsapp span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.cevero-whatsapp {
		padding: 14px;
	}
}