/*
 * WhatsApp floating button
 * ------------------------
 * Site-wide, fixed bottom-right. Rendered conditionally by
 * `tobi_skatechop_child_render_whatsapp_button()` en functions.php —
 * el helper hace early-return si el número (`skc_whatsapp_number`)
 * está vacío, así que el botón no aparece en el DOM.
 *
 * z-index 95: arriba de .skc-toast-region (90), debajo de mobile
 * drawers (100). El tap target es 56px en desktop / 52px en mobile
 * (WCAG 2.5.5 pide ≥44px).
 *
 * Consume tokens:
 *   --skc-whatsapp       (verde WhatsApp, #25d366)
 *   --skc-on-primary     (blanco para el icono)
 *   --skc-md / --skc-sm  (offset desde el borde)
 *   --skc-transition     (duración de la animación del hover)
 *
 * El override de `prefers-reduced-motion` está en `skc-base.css`
 * (junto a los demás overrides globales — no se duplica acá).
 */

.skc-whatsapp-button {
	position: fixed;
	right: var(--skc-md);
	bottom: var(--skc-md);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--skc-whatsapp);
	color: var(--skc-on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	z-index: 95;
	text-decoration: none;
	transition: transform var(--skc-transition), box-shadow var(--skc-transition);
}

.skc-whatsapp-button:hover,
.skc-whatsapp-button:focus-visible {
	transform: scale(1.05);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.skc-whatsapp-button:focus-visible {
	outline: 2px solid var(--skc-whatsapp);
	outline-offset: 3px;
}

.skc-whatsapp-button:visited {
	/* El visited-tint de los browsers pinta morado los links ya
	   visitados. El botón es funcional, no histórico — neutralizamos. */
	color: var(--skc-on-primary);
}

.skc-whatsapp-button .material-symbols-outlined {
	/*
	 * Font-variation-settings fijo: el glifo `chat` por defecto sale
	 * con FILL 0 + wght 400 — visualmente finito y con poco
	 * contraste sobre el verde. Forzamos wght 600 para que tenga
	 * presencia sin tocar el FILL (sigue siendo outline, no sólido).
	 */
	font-size: 28px;
	font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

@media (max-width: 600px) {
	.skc-whatsapp-button {
		width: 52px;
		height: 52px;
		right: var(--skc-sm);
		bottom: var(--skc-sm);
	}
	.skc-whatsapp-button .material-symbols-outlined {
		font-size: 24px;
	}
}