/* FPT CTA — inline call-to-action block + sticky banner. */

:root {
	--fpt-navy: #1F4E78;
	--fpt-navy2: #2A6B9F;
	--fpt-amber: #D9892B;
	--fpt-support: #DCE8F2;
	--fpt-bar-offset: 20px;
	--fpt-bar-z: 9998;
}

/* Inline CTA block.
 * Child selectors are scoped under .fpt-cta (specificity 0,0,2,0) so a theme's
 * `.entry-content p {…}` (0,0,1,1) cannot override the margins, and font sizes
 * are set explicitly so they do not inherit a large article body font. */
.fpt-cta {
	background: linear-gradient(135deg, var(--fpt-navy), var(--fpt-navy2));
	color: #fff;
	padding: 28px 32px;
	border-radius: 8px;
	margin: 32px 0;
}
.fpt-cta .fpt-cta__headline {
	color: #fff;
	margin: 0 0 8px;
	font-size: 1.25rem;
	line-height: 1.3;
}
.fpt-cta .fpt-cta__text {
	color: var(--fpt-support);
	margin: 0 0 16px;
	font-size: 0.95rem;
	line-height: 1.5;
}
.fpt-cta .fpt-cta__actions {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.4;
}
.fpt-cta__btn {
	display: inline-block;
	background: var(--fpt-amber);
	color: var(--fpt-navy);
	font-size: 0.95rem;
	line-height: 1.2;
	white-space: nowrap;
	padding: 11px 24px;
	text-decoration: none;
	border-radius: 5px;
	font-weight: 600;
}
.fpt-cta__btn:hover,
.fpt-cta__btn:focus {
	filter: brightness(1.06);
	color: var(--fpt-navy);
}
.fpt-cta__tel {
	display: inline-block;
	color: #fff;
	font-size: 0.95rem;
	white-space: nowrap;
	padding: 11px 16px;
	text-decoration: underline;
}
.fpt-cta__tel:hover,
.fpt-cta__tel:focus {
	color: #fff;
}

/* Sticky banner — hidden until the script adds .is-visible (revealed and not
 * at the end of the article). The same class drives show/hide on all devices. */
.fpt-cta-bar {
	position: fixed;
	z-index: var(--fpt-bar-z);
	background: linear-gradient(135deg, var(--fpt-navy), var(--fpt-navy2));
	color: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, transform 0.3s ease;
	/* The banner renders in the footer, outside the article, so set an explicit
	 * base size — otherwise the children inherit the theme's large body font. */
	font-size: 0.95rem;
	line-height: 1.4;
}
.fpt-cta-bar.is-visible {
	opacity: 1;
	visibility: visible;
}
.fpt-cta-bar__close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: 0;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.8;
}
.fpt-cta-bar__close:hover {
	opacity: 1;
}
.fpt-cta-bar__label {
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
}
.fpt-cta-bar__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.fpt-cta-bar__btn {
	display: inline-block;
	background: var(--fpt-amber);
	color: var(--fpt-navy);
	font-size: 0.95rem;
	line-height: 1.2;
	white-space: nowrap;
	padding: 11px 22px;
	text-decoration: none;
	border-radius: 5px;
	font-weight: 600;
}
.fpt-cta-bar__btn:hover,
.fpt-cta-bar__btn:focus {
	filter: brightness(1.06);
	color: var(--fpt-navy);
}
.fpt-cta-bar__tel {
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.2;
	text-decoration: underline;
	white-space: nowrap;
}
.fpt-cta-bar__tel:hover,
.fpt-cta-bar__tel:focus {
	color: #fff;
}

/* Mobile: full-width bar pinned to the bottom, content centered. */
@media (max-width: 781px) {
	.fpt-cta-bar {
		left: 0;
		right: 0;
		bottom: 0;
		padding: 14px 16px 16px;
		transform: translateY(100%);
		text-align: center;
	}
	.fpt-cta-bar.is-visible {
		transform: translateY(0);
	}
	/* Center the button + phone as a vertically-centered row. */
	.fpt-cta-bar__actions {
		justify-content: center;
	}
	/* Compact button, balanced with the visual reference (8px 12px / 4px radius). */
	.fpt-cta-bar__btn {
		padding: 8px 12px;
		border-radius: 4px;
		font-size: 0.8rem;
	}
}

/* Desktop: compact card at the bottom-right; width hugs the button + padding. */
@media (min-width: 782px) {
	.fpt-cta-bar {
		right: var(--fpt-bar-offset);
		bottom: var(--fpt-bar-offset);
		width: fit-content;
		max-width: calc(100vw - 2 * var(--fpt-bar-offset));
		padding: 18px 20px;
		border-radius: 10px;
		transform: translateY(12px);
		text-align: center;
	}
	.fpt-cta-bar.is-visible {
		transform: translateY(0);
	}
	/* Stack the button over a centered phone link (matches visual reference). */
	.fpt-cta-bar__actions {
		display: block;
	}
	.fpt-cta-bar__btn {
		display: block;
		text-align: center;
	}
	.fpt-cta-bar__tel {
		display: block;
		text-align: center;
		margin-top: 8px;
	}
}