/* Phone in the header and the floating WhatsApp button. Own file, loaded after main.css
   by inc/contact.php, so it ships on its own. */

/* Header phone: the mono register of the nav, a hair quieter than the devis pill. Gone
   under 960px where the bar is already full; the floating button carries the phone there. */
.hd__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--sand);
	font-family: var(--mono);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s var(--ease);
}
.hd__tel:hover { color: var(--plaster); }
.hd__tel svg { flex: none; }
@media (max-width: 960px) {
	.hd__tel { display: none; }
}

/* Floating WhatsApp. Sits under the menu (60) and the filter sheet (80) in z-order and
   disappears entirely while either is open. */
.mk-wa {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 55;
	display: inline-flex;
	align-items: center;
	gap: 0;
	min-width: 56px;
	height: 56px;
	padding: 0 15px;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transition: gap 0.25s var(--ease), padding 0.25s var(--ease), transform 0.25s var(--ease);
}
.mk-wa:hover,
.mk-wa:focus-visible { color: #fff; gap: 10px; padding-right: 20px; transform: translateY(-2px); }
.mk-wa__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-family: var(--mono);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: max-width 0.25s var(--ease);
}
.mk-wa:hover .mk-wa__label,
.mk-wa:focus-visible .mk-wa__label { max-width: 120px; }
body.is-locked .mk-wa { display: none; }
@media (max-width: 640px) {
	.mk-wa { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.mk-wa, .mk-wa__label, .hd__tel { transition: none; }
}