/* Shared button styles. Loaded globally so any header/section can use a button without pulling in
   another component's CSS. Markup is produced by ppc_render_button() (inc/buttons.php). */

/* Primary CTA — filled blue with the sparkle icon (Figma hero "Kennismaken?" / "Bekijk pakketten"). */
.ppc-button__maincta {
	position: relative;
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	/* 0.7rem vertical (vs the design's 16px) compensates for the untrimmed line leading,
	   yielding the design's ~45px button height so the icon bleeds/clips like the comp. */
	padding: 0.7rem 3rem 0.7rem 1rem;
	border: 0.7px solid var(--ppc-color-hero-cta-border);
	border-radius: var(--ppc-hero-cta-radius);
	background:
		linear-gradient(175deg, rgba(162, 185, 255, 0.2) 12%, rgba(25, 79, 141, 0.2) 88%),
		var(--ppc-color-hero-cta);
	color: #ffffff;
	font-family: var(--ppc-font-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: 1.125rem;
	line-height: var(--ppc-line-height-tight);
	text-decoration: none;
	box-shadow: var(--ppc-shadow-maincta);
	transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out, background-color 0.2s ease-in;
}

.ppc-button__maincta:hover,
.ppc-button__maincta:focus-visible {
	transform: scale(1.03);
	filter: brightness(1.04);
	/* Dark hover fill; the translucent gradient layer stays on top (same combo as the design's
	   dark toggle pill). */
	background-color: var(--ppc-color-picton-blue-darkest);
}

.ppc-button__maincta-icon {
	position: absolute;
	right: -9px;
	top: 4px;
	width: 46px;
	height: 46px;
	pointer-events: none;
}

/* White variant (Figma "cta banner"): white pill with navy label + sparkle. On hover it fills
   with picton-blue-dark and turns white, like the package outline buttons. Placed after the
   generic :hover so this variant's hover wins the source-order tie. */
.ppc-button__maincta--white {
	background:
		linear-gradient(175deg, rgba(255, 255, 255, 0.2) 12%, rgba(98, 171, 255, 0.2) 88%),
		#ffffff;
	border-color: var(--ppc-color-cta-border);
	color: var(--ppc-color-credit-text);
	box-shadow:
		0 3px 7.7px rgba(0, 0, 0, 0.2),
		inset 4px 3px 8.1px #ffffff,
		inset -4px -4px 3.667px rgba(0, 0, 0, 0.14);
	transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ppc-button__maincta--white:hover,
.ppc-button__maincta--white:focus-visible {
	background: var(--ppc-color-picton-blue-dark);
	border-color: var(--ppc-color-picton-blue-dark);
	color: #ffffff;
	box-shadow: var(--ppc-shadow-maincta);
}

/* Text link button — transparent, blue-zodiac label + chevron that nudges right on hover. */
.ppc-button__textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: 12px;
	color: var(--ppc-color-blue-zodiac);
	font-family: var(--ppc-font-open-sans);
	font-weight: var(--ppc-font-weight-semibold);
	font-size: 1rem;
	line-height: var(--ppc-line-height-body);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ppc-button__textlink-icon {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.ppc-button__textlink:hover .ppc-button__textlink-icon,
.ppc-button__textlink:focus-visible .ppc-button__textlink-icon {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.ppc-button__maincta,
	.ppc-button__textlink-icon {
		transition: none;
	}
}