/*
 * Sticky Banner — front-end stylesheet.
 *
 * Layout + animations only. Dynamic values (colours, font size, top offset,
 * font family) are emitted as a scoped inline <style> block by Render::html()
 * so the same CSS file works regardless of the admin configuration.
 *
 * Specificity is kept low so themes can override with ease.
 */

/* ── Root ─────────────────────────────────────────────────────── */
#sticky-banner {
	position: fixed;
	left: 0;
	right: 0;
	padding: 12px 56px 12px 16px;
	text-align: center;
	z-index: 99999;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.2s ease;
	animation: sticky-banner-fade-in 0.25s ease forwards;
}

/*
 * Persistent mode: drop out of fixed positioning so the banner sits in the
 * normal document flow. Because Hooks.php renders at wp_body_open (before the
 * theme header), this naturally pushes the header + menu down. Padding-right
 * also tightens since there is no close button to leave room for.
 */
#sticky-banner.sticky-banner--persistent {
	position: static;
	left: auto;
	right: auto;
	z-index: auto;
	padding-right: 16px;
}

#sticky-banner * {
	box-sizing: border-box;
}

@keyframes sticky-banner-fade-in {
	to { opacity: 1; }
}

/* ── Content + CTA ────────────────────────────────────────────── */
#sticky-banner .sticky-banner__content {
	display: inline;
	vertical-align: middle;
	line-height: 1.4;
}

#sticky-banner .sticky-banner__content p {
	display: inline;
	margin: 0;
}

#sticky-banner .sticky-banner__content a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#sticky-banner .sticky-banner__cta {
	display: inline-block;
	margin-left: 12px;
	padding: 6px 16px;
	border-radius: 3px;
	font-weight: 600;
	text-decoration: none;
	vertical-align: middle;
	transition: background 0.15s ease;
}

/* ── Lead-capture form ────────────────────────────────────────── */
#sticky-banner .sticky-banner__form {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: 12px;
	vertical-align: middle;
	align-items: center;
}

#sticky-banner .sticky-banner__form input[type="text"],
#sticky-banner .sticky-banner__form input[type="email"],
#sticky-banner .sticky-banner__form input[type="tel"] {
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.95);
	color: #111;
	font: inherit;
	min-width: 180px;
}

#sticky-banner .sticky-banner__submit {
	padding: 6px 14px;
	border-radius: 3px;
	font: inherit;
	cursor: pointer;
	border: 0;
}

#sticky-banner .sticky-banner__consent {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85em;
}

#sticky-banner .sticky-banner__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
}

#sticky-banner .sticky-banner__form-status {
	margin-left: 6px;
	font-size: 0.85em;
	opacity: 0.85;
}

/* ── Close button ─────────────────────────────────────────────── */
#sticky-banner .sticky-banner__close {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 24px;
	line-height: 1;
	padding: 4px 10px;
	cursor: pointer;
	display: none;
	opacity: 0.85;
}

#sticky-banner .sticky-banner__close:hover {
	opacity: 1;
}

#sticky-banner.sticky-banner--dismiss-show-desktop .sticky-banner__close {
	display: inline-block;
}

@media (max-width: 782px) {
	#sticky-banner .sticky-banner__close {
		display: none;
	}
	#sticky-banner.sticky-banner--dismiss-show-mobile .sticky-banner__close {
		display: inline-block;
	}
}

/* ── Attention animations ─────────────────────────────────────── */
@keyframes sticky-banner-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.02); }
}
@keyframes sticky-banner-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}
@keyframes sticky-banner-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-4px); }
	75%      { transform: translateX(4px); }
}

#sticky-banner.sticky-banner--animation-pulse {
	animation: sticky-banner-fade-in 0.25s ease forwards, sticky-banner-pulse 2.4s ease-in-out infinite 0.4s;
}
#sticky-banner.sticky-banner--animation-bounce {
	animation: sticky-banner-fade-in 0.25s ease forwards, sticky-banner-bounce 1.6s ease infinite 0.4s;
}
#sticky-banner.sticky-banner--animation-shake {
	animation: sticky-banner-fade-in 0.25s ease forwards, sticky-banner-shake 0.6s ease;
}

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
	#sticky-banner,
	#sticky-banner.sticky-banner--animation-pulse,
	#sticky-banner.sticky-banner--animation-bounce,
	#sticky-banner.sticky-banner--animation-shake {
		animation: none;
		opacity: 1;
	}
}