/**
 * Developer Hack Screen Critters — Frontend Styles
 *
 * CTA slide-down bar, animations, and screen-reader utility.
 * All visual properties use CSS custom properties for full customization.
 */

/* --- CTA Bar (slides from top) --- */

.dh-sc-cta-bar {
	--dh-sc-cta-bg: rgba(17, 24, 39, 0.97);
	--dh-sc-cta-text: #f9fafb;
	--dh-sc-cta-accent: #10B981;
	--dh-sc-cta-radius: 0;
	--dh-sc-cta-padding: 24px;
	--dh-sc-cta-max-width: 600px;
	--dh-sc-cta-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--dh-sc-cta-headline-size: 1.25rem;
	--dh-sc-cta-body-size: 0.95rem;
	--dh-sc-cta-btn-bg: var(--dh-sc-cta-accent);
	--dh-sc-cta-btn-text: #ffffff;
	--dh-sc-cta-btn-radius: 8px;
	--dh-sc-cta-btn-padding: 12px 28px;
	--dh-sc-cta-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
	--dh-sc-cta-enter-duration: 400ms;
	--dh-sc-cta-exit-duration: 300ms;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2147483647;
	background: var(--dh-sc-cta-bg);
	font-family: var(--dh-sc-cta-font-family);
	box-shadow: var(--dh-sc-cta-shadow);
	transform: translateY(-100%);
	transition: transform var(--dh-sc-cta-enter-duration) cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: auto;
}

.dh-sc-cta-bar.dh-sc-cta-visible {
	transform: translateY(0);
}

.dh-sc-cta-bar.dh-sc-cta-exiting {
	transform: translateY(-100%);
	transition: transform var(--dh-sc-cta-exit-duration) cubic-bezier(0.55, 0, 1, 0.45);
}

/* Container — centered content */
.dh-sc-cta-container {
	position: relative;
	max-width: var(--dh-sc-cta-max-width);
	margin: 0 auto;
	padding: var(--dh-sc-cta-padding);
}

/* Close button — doubled class beats Kadence global button resets */
.dh-sc-cta-bar .dh-sc-cta-close.dh-sc-cta-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	background-image: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	display: inline;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--dh-sc-cta-text);
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.dh-sc-cta-bar .dh-sc-cta-close.dh-sc-cta-close:hover {
	background: none;
	background-image: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: var(--dh-sc-cta-text);
	opacity: 1;
}

.dh-sc-cta-bar .dh-sc-cta-close.dh-sc-cta-close:focus,
.dh-sc-cta-bar .dh-sc-cta-close.dh-sc-cta-close:active {
	outline: none;
	box-shadow: none;
	border: none;
	background: none;
	color: var(--dh-sc-cta-text);
	opacity: 0.5;
}

.dh-sc-cta-bar .dh-sc-cta-close.dh-sc-cta-close:focus-visible {
	outline: 2px solid var(--dh-sc-cta-accent);
	outline-offset: 4px;
	opacity: 1;
}

/* Content area */
.dh-sc-cta-content {
	text-align: center;
	padding-right: 32px; /* space for close button */
}

/* Headline */
.dh-sc-cta-headline {
	margin: 0 0 8px 0;
	font-family: var(--dh-sc-cta-font-family);
	font-size: var(--dh-sc-cta-headline-size);
	font-weight: 700;
	line-height: 1.3;
	color: var(--dh-sc-cta-text);
}

/* Body text (optional) */
.dh-sc-cta-body-text {
	margin: 0 0 16px 0;
	font-size: var(--dh-sc-cta-body-size);
	line-height: 1.5;
	color: var(--dh-sc-cta-text);
	opacity: 0.85;
}

/* CTA button / link */
.dh-sc-cta-button {
	display: inline-block;
	padding: var(--dh-sc-cta-btn-padding);
	border: none;
	border-radius: var(--dh-sc-cta-btn-radius);
	background-color: var(--dh-sc-cta-btn-bg);
	color: var(--dh-sc-cta-btn-text);
	font-family: var(--dh-sc-cta-font-family);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.dh-sc-cta-button:hover {
	background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12));
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-1px);
}

.dh-sc-cta-button:active {
	transform: translateY(0);
}

.dh-sc-cta-button:focus-visible {
	outline: 2px solid var(--dh-sc-cta-accent);
	outline-offset: 2px;
}

/* Shortcode container — force dark text to override Kadence global palette */
.dh-sc-cta-bar .dh-sc-cta-shortcode {
	margin-top: 12px;
	text-align: left;
	color: #1f2937;
}

.dh-sc-cta-bar .dh-sc-cta-shortcode label,
.dh-sc-cta-bar .dh-sc-cta-shortcode .ff-el-input--label,
.dh-sc-cta-bar .dh-sc-cta-shortcode .ff_el_input--label,
.dh-sc-cta-bar .dh-sc-cta-shortcode .ff-el-input--label label,
.dh-sc-cta-bar .dh-sc-cta-shortcode .ff-label,
.dh-sc-cta-bar .dh-sc-cta-shortcode .ff_label {
	color: #374151;
}

.dh-sc-cta-bar .dh-sc-cta-shortcode input,
.dh-sc-cta-bar .dh-sc-cta-shortcode select,
.dh-sc-cta-bar .dh-sc-cta-shortcode textarea {
	color: #1f2937;
	background-color: #ffffff;
}

.dh-sc-cta-bar .dh-sc-cta-shortcode a {
	color: var(--dh-sc-cta-accent);
}

.dh-sc-cta-bar .dh-sc-cta-shortcode .ff-btn-submit,
.dh-sc-cta-bar .dh-sc-cta-shortcode button[type="submit"] {
	color: #ffffff;
}

/* Shortcode form background container */
.dh-sc-cta-bar .dh-sc-cta-shortcode.dh-sc-cta-shortcode--has-bg {
	background-color: var(--dh-sc-cta-form-bg, #ffffff);
	border-radius: 12px;
	padding: 24px 28px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	margin-top: 12px;
}

/* Auto-dismiss progress bar */
.dh-sc-cta-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.08);
}

.dh-sc-cta-progress-bar {
	height: 100%;
	background: var(--dh-sc-cta-accent);
	animation: dh-sc-countdown linear forwards;
	animation-play-state: running;
}

@keyframes dh-sc-countdown {
	from { width: 100%; }
	to { width: 0%; }
}

/* --- Screen reader only utility --- */

.dh-sc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}