/**
 * Registration prompt shown in place of a gated asset.
 *
 * Plain CSS rather than a SCSS partial on purpose: the theme's SCSS compiles
 * into dist/, which is gitignored and built separately, so a partial added here
 * would look correct in the repo and render unstyled on any environment where
 * the build had not been re-run. This file needs no build step, which means the
 * prompt looks the same everywhere from the first deploy.
 *
 * Tokens are read from the theme where available, with fallbacks, so the prompt
 * picks up the per-post theme colours the guide/webinar/demo templates already
 * set on their article wrapper.
 */

.dh-gated-prompt {
	--dh-gp-bg: var(--global-palette8, #f6f4ef);
	--dh-gp-border: var(--global-palette7, #e2ddd2);
	--dh-gp-text: var(--global-palette4, #1a1a1a);
	--dh-gp-muted: var(--global-palette5, #55606d);

	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 0 2rem;
}

.dh-gated-prompt__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 46rem;
	padding: clamp(1.75rem, 4vw, 3rem);
	text-align: center;
	background: var(--dh-gp-bg);
	border: 1px solid var(--dh-gp-border);
	border-radius: 12px;
}

.dh-gated-prompt__heading {
	margin: 0 0 0.75rem;
	color: var(--dh-gp-text);
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	line-height: 1.25;
}

.dh-gated-prompt__body {
	margin: 0 auto 1.5rem;
	max-width: 34rem;
	color: var(--dh-gp-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.dh-gated-prompt__actions {
	margin: 0;
}

/* Inherits the theme's button styling via wp-block-button__link; this only
   guarantees a sane size when that class is restyled or absent. */
.dh-gated-prompt__cta {
	display: inline-block;
	padding: 0.85em 1.75em;
	font-weight: 600;
	text-decoration: none;
}

/* The dark child-hero on webinar and demo video pages needs light text. */
.dh-single-webinar__child-hero .dh-gated-prompt,
.dh-single-demo__child-hero .dh-gated-prompt {
	--dh-gp-bg: rgba( 255, 255, 255, 0.06 );
	--dh-gp-border: rgba( 255, 255, 255, 0.18 );
	--dh-gp-text: #ffffff;
	--dh-gp-muted: rgba( 255, 255, 255, 0.78 );

	padding: clamp(2rem, 6vw, 4rem) 1rem;
}

@media (prefers-reduced-motion: no-preference) {
	.dh-gated-prompt__inner {
		transition: border-color 0.2s ease;
	}
}

/* ── Confirming state ────────────────────────────────────────────────── */

/* Shown while the server re-asks HubSpot about a submission it has not listed
   yet. Only one state is ever visible; the poller swaps them. */
.dh-gated-prompt__state--hidden {
	display: none;
}

.dh-gated-prompt__spinner {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	margin: 0 auto 1.25rem;
	border: 2px solid var(--dh-gp-border);
	border-top-color: var(--dh-gp-text);
	border-radius: 50%;
}

/* The spinner is decoration, not information — the heading already says what
   is happening — so it simply stops for anyone who asked motion to stop. */
@media (prefers-reduced-motion: no-preference) {
	.dh-gated-prompt__spinner {
		animation: dh-gp-spin 0.8s linear infinite;
	}
}

@keyframes dh-gp-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* The retry control is a <button>, so it needs the resets an <a> did not. */
button.dh-gated-prompt__cta {
	border: 0;
	cursor: pointer;
	font: inherit;
}

/* ── Document frame (guide /pdf/ pages) ──────────────────────────────── */

/* Mirrors the File block frame in _single-guide.scss: the same themed band,
   lifted into the hero by the same amounts, with the panel where the PDF
   embed sits and the button where Download sits. When access is granted the
   page reloads and the document takes the panel's place in the same frame.
   Values are copied rather than shared because this file sits outside the
   SCSS build; keep them in step with `.dh-single-guide--child … .wp-block-file`. */
.dh-single-guide--child .dh-gated-prompt--frame {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;                   /* content-box like the File block, so both are the lane plus the 2px band */
	margin: -252px 0 0;
	padding: 2px;
	background: var(--dh-guide-pdf-band, #e3e1d6);
	border-radius: 2.5px;
	overflow: clip;
}

@media (max-width: 1024px) {
	.dh-single-guide--child .dh-gated-prompt--frame { margin-top: -188px; }
}

@media (max-width: 767px) {
	.dh-single-guide--child .dh-gated-prompt--frame { margin-top: -132px; }
}

.dh-single-guide--child .dh-gated-prompt--frame .dh-gated-prompt__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: none;
	min-height: 600px;
	padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 6vw, 5rem);
	background: #000000;
	border: 0;
	border-radius: 10px;
}

.dh-single-guide--child .dh-gated-prompt--frame .dh-gated-prompt__heading {
	max-width: 32rem;
	margin: 0 auto 1rem;
	font-family: var(--dh-font-primary);
	font-weight: 400;
	font-size: 2.25rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-wrap: balance;
}

.dh-single-guide--child .dh-gated-prompt--frame .dh-gated-prompt__body {
	max-width: 30rem;
	margin: 0 auto;
	font-family: var(--dh-font-secondary);
	font-weight: 300;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 767px) {
	.dh-single-guide--child .dh-gated-prompt--frame .dh-gated-prompt__heading { font-size: 1.75rem; }
}

.dh-single-guide--child .dh-gated-prompt--frame .dh-gated-prompt__spinner {
	margin-bottom: 1.5rem;
	border-color: rgba(255, 255, 255, 0.2);
	border-top-color: var(--dh-guide-pdf-btn-text, #cff6ff);
}

/* The bar: the same pill as the document's Download button. */
.dh-gated-prompt__bar {
	display: flex;
}

.dh-gated-prompt--frame .dh-gated-prompt__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 36px;
	margin: 0;
	padding: 0 12px;
	background: var(--dh-guide-pdf-btn-bg, #000000);
	border: 0;
	border-radius: 6px;
	font-family: var(--dh-font-secondary);
	font-weight: 300;
	font-size: 20px;
	line-height: 24px;
	color: var(--dh-guide-pdf-btn-text, #cff6ff);
	text-decoration: none;
	cursor: pointer;
	transition: filter 150ms ease;
}

.dh-gated-prompt--frame .dh-gated-prompt__cta:hover,
.dh-gated-prompt--frame .dh-gated-prompt__cta:focus-visible {
	filter: brightness(1.12);
	color: var(--dh-guide-pdf-btn-text, #cff6ff);
}

.dh-gated-prompt--frame .dh-gated-prompt__cta--pending {
	cursor: default;
	opacity: 0.7;
}

.dh-gated-prompt--frame .dh-gated-prompt__cta--pending:hover {
	filter: none;
}

/* .dh-gated-prompt__state--hidden is declared above; the bar's button needs it
   to beat the display:flex the frame CTA rule sets. */
.dh-gated-prompt--frame .dh-gated-prompt__cta.dh-gated-prompt__state--hidden {
	display: none;
}