/* ==========================================================================
   Joy Pest Controls — Components (buttons, badges, pills)
   Warm editorial system: soft pill buttons, quiet hovers.
   ========================================================================== */

/* --- Buttons ---------------------------------------------------------------- */

.jpc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base);
	line-height: 1;
	text-decoration: none;
	text-align: center;
	color: var(--green);
	background: var(--lime);
	padding: 17px 32px;
	border: none;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.jpc-btn:hover {
	background: var(--lime-deep);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(199, 242, 104, 0.4);
}

.jpc-btn:active { transform: translateY(0); }

.jpc-btn .jpc-btn-arrow { transition: transform 0.3s ease; }
.jpc-btn:hover .jpc-btn-arrow { transform: translateX(4px); }

/* Secondary — quiet outline */
.jpc-btn-outline {
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--line);
}

.jpc-btn-outline:hover {
	background: var(--white);
	color: var(--green-dark);
	box-shadow: inset 0 0 0 1.5px var(--green), 0 10px 26px rgba(30, 43, 35, 0.1);
}

/* On dark green sections the outline flips to cream */
.jpc-section-dark .jpc-btn-outline,
.jpc-section-navy .jpc-btn-outline,
.jpc-section-accent .jpc-btn-outline,
.jpc-cta-band .jpc-btn-outline {
	color: var(--cream);
	box-shadow: inset 0 0 0 1.5px rgba(250, 246, 239, 0.4);
}

.jpc-section-dark .jpc-btn-outline:hover,
.jpc-section-navy .jpc-btn-outline:hover,
.jpc-section-accent .jpc-btn-outline:hover,
.jpc-cta-band .jpc-btn-outline:hover {
	background: var(--cream);
	color: var(--green-dark);
	box-shadow: none;
}

/* Primary on dark green sections becomes lime for contrast */
.jpc-section-dark .jpc-btn:not(.jpc-btn-outline),
.jpc-section-navy .jpc-btn:not(.jpc-btn-outline),
.jpc-section-accent .jpc-btn:not(.jpc-btn-outline),
.jpc-cta-band .jpc-btn:not(.jpc-btn-outline) {
	background: var(--lime);
	color: var(--green);
}

.jpc-section-dark .jpc-btn:not(.jpc-btn-outline):hover,
.jpc-section-navy .jpc-btn:not(.jpc-btn-outline):hover,
.jpc-section-accent .jpc-btn:not(.jpc-btn-outline):hover,
.jpc-cta-band .jpc-btn:not(.jpc-btn-outline):hover {
	background: var(--lime-bright);
	box-shadow: 0 12px 30px rgba(199, 242, 104, 0.3);
}

/* Inverse — kept as an alias of the primary for legacy markup */
.jpc-btn-inverse {
	background: var(--lime);
	color: var(--green);
}

.jpc-btn-sm { padding: 12px 22px; font-size: var(--text-sm); }

/* Legacy pulse dot — retired in this design, hidden if present */
.jpc-pulse-dot { display: none; }

/* --- Carousel ------------------------------------------------------------------ */
/* Applied on top of the grid classes: .jpc-carousel-track flips the grid to a
   scroll-snap flex row; 3 cards per view on desktop, 2 on tablet, 1 on mobile. */

.jpc-carousel { position: relative; }

.jpc-carousel-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 26px;
	padding-bottom: 18px; /* room for card hover lift/shadow inside the scroll clip */
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.jpc-carousel-track::-webkit-scrollbar { display: none; }

.jpc-carousel-track > * {
	flex: 0 0 calc((100% - 52px) / 3);
	min-width: 0;
	scroll-snap-align: start;
}

.jpc-carousel-nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 14px;
}

.jpc-carousel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	min-width: 0;
	padding: 0; /* override Astra's global button padding that turns the circle into an oval */
	border-radius: 50%;
	border: none;
	background: var(--green);
	color: var(--white);
	cursor: pointer;
	box-shadow: var(--shadow-soft);
	transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.jpc-carousel-btn svg {
	width: 20px;
	height: 20px;
	stroke: currentColor; /* ensure the arrow paints in the button's text colour, not the background */
}

.jpc-carousel-btn:hover:not(:disabled) {
	background: var(--lime);
	color: var(--green);
}

.jpc-carousel-btn:disabled { opacity: 0.4; cursor: default; }

/* --- Generic card ------------------------------------------------------------- */

.jpc-card {
	background: var(--white);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-card);
	padding: 34px 30px;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.jpc-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
}

/* --- Phone pill (inline phone number emphasis) -------------------------------- */

.jpc-phone-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--tint);
	border-radius: var(--radius-pill);
	padding: 10px 20px;
	color: var(--green-dark);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.jpc-phone-pill:hover {
	background: var(--green);
	color: var(--cream);
	transform: translateY(-2px);
}