/* ==========================================================================
   Buttons — .btn plus its color/size variants, used across every page.
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	border: 2px solid transparent;
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-secondary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-secondary-dark); box-shadow: var(--shadow-md); color: #fff; }
.btn-outline { background: transparent; border-color: currentColor; color: var(--color-primary-dark); }
.btn-outline:hover { background: var(--color-primary-dark); color: #fff; border-color: var(--color-primary-dark); }
.section--dark .btn-outline { color: #fff; }
.section--dark .btn-outline:hover { background: #fff; color: var(--color-primary-dark); }
.btn-light { background: #fff; color: var(--color-primary-dark); }
.btn-light:hover { background: var(--color-bg-alt); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }

/* Social buttons: each fills with its network's official colour on hover
   (Facebook blue, Instagram gradient, YouTube red). The "a" keeps these
   ahead of generic outline-button hovers such as ".cta-banner .btn-outline:hover". */
a.btn.btn-social--facebook:hover,
a.btn.btn-social--facebook:focus-visible { color: #fff; background: #1877f2; border-color: #1877f2; }
a.btn.btn-social--instagram:hover,
a.btn.btn-social--instagram:focus-visible {
	color: #fff;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
	border-color: #d6249f;
}
a.btn.btn-social--youtube:hover,
a.btn.btn-social--youtube:focus-visible { color: #fff; background: #ff0000; border-color: #ff0000; }
a.btn[class*="btn-social--"] svg { width: 18px; height: 18px; flex-shrink: 0; }
a.btn.btn-social--tiktok:hover,
a.btn.btn-social--tiktok:focus-visible { color: #fff; background: #000; border-color: #000; box-shadow: -3px 3px 0 #25f4ee, 3px -3px 0 #fe2c55; }

/* ---- WhatsApp button (sty_whatsapp_button() in inc/social-links.php) ----
   "WhatsApp 977 9861044810" with the WhatsApp logo in a soft green circle.
   On hover the whole button fills with the official WhatsApp green, the
   circle turns white and the logo gives a little tilt. The "a.btn" and the
   !important beat the hero banner's own outline-button hover rules. */
a.btn.btn-whatsapp {
	gap: 10px;
	padding-left: 14px;
}
.btn-whatsapp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(37, 211, 102, 0.18);
	color: #25d366;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn-whatsapp-icon svg { width: 17px; height: 17px; }
/* The hero banner styles its own outline buttons with !important, so the
   WhatsApp green is repeated with a hero-level selector to stay on top. */
a.btn.btn-whatsapp:hover,
a.btn.btn-whatsapp:focus-visible,
.hero .hero-actions a.btn.btn-whatsapp:hover,
.hero .hero-actions a.btn.btn-whatsapp:focus-visible {
	background: #25d366 !important;
	border-color: #25d366 !important;
	color: #fff !important;
	box-shadow: 0 10px 26px rgba(37, 211, 102, 0.4) !important;
}
a.btn.btn-whatsapp:hover .btn-whatsapp-icon,
a.btn.btn-whatsapp:focus-visible .btn-whatsapp-icon,
.hero .hero-actions a.btn.btn-whatsapp:hover .btn-whatsapp-icon,
.hero .hero-actions a.btn.btn-whatsapp:focus-visible .btn-whatsapp-icon {
	background: #fff;
	color: #25d366;
	transform: scale(1.08) rotate(-8deg);
}
@media (prefers-reduced-motion: reduce) {
	.btn-whatsapp-icon { transition: none; }
	a.btn.btn-whatsapp:hover .btn-whatsapp-icon { transform: none; }
}