/**
 * Ask Jen block — front end and editor preview.
 *
 * Lifted from the home page CTA panel (templates/home-v2.php, section 7):
 * Midnight panel, light centred heading with optional gradient words, Jen's
 * avatar with the online dot, her card popping out on hover/focus (static on
 * touch and narrow screens), optional demo button. A looping pointer hint
 * nudges visitors to hover; view.js retires it after the first hover/focus.
 * Self-contained: no dependency on the theme stylesheet.
 */
.wp-block-veramatic-askjen {
	--vaj-navy: var(--v-midnight, #070028);
	--vaj-cloud: var(--v-cloud, #eaefff);
	--vaj-blurple: var(--v-blurple, #7a5cff);
	--vaj-grad: var(--v-grad, linear-gradient(90deg, #7a5cff 0%, #cd45e9 20%, #ff5973 40%, #ff854c 60%, #ffaf24 80%, #ffd500 100%));
	--vaj-s2: var(--v-s2, 1rem);
	--vaj-s3: var(--v-s3, 1.618rem);
	--vaj-s4: var(--v-s4, 2.618rem);
	--vaj-s5: var(--v-s5, 4.236rem);
	box-sizing: border-box;
	margin: 0; /* plugin blocks carry no outer margin; spacing is their own padding */
	padding: var(--vaj-s5);
	border-radius: var(--v-r-panel, 20px);
	background: var(--vaj-navy);
	color: #fff;
	font-family: var(--v-font, "Be Vietnam Pro", sans-serif);
	text-align: center;
}

/* Heading */
.wp-block-veramatic-askjen .vaj__title {
	max-width: 940px;
	margin: 0 auto;
	font-family: var(--v-font, "Be Vietnam Pro", sans-serif);
	font-size: var(--v-fs-h1, clamp(1.618rem, 2.6vw, 2.058rem));
	font-weight: var(--v-fw-light, 300);
	line-height: var(--v-lh-head, 1.2);
	letter-spacing: var(--v-ls-head, -0.01em);
	color: #fff;
	text-wrap: pretty;
}
.wp-block-veramatic-askjen .vaj__title em {
	font-style: normal;
	background: var(--vaj-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.wp-block-veramatic-askjen .vaj__deck {
	max-width: 520px;
	margin: var(--vaj-s2) auto 0;
	font-size: var(--v-fs-lead, 1.128rem);
	font-weight: var(--v-fw-regular, 400);
	line-height: var(--v-lh-body, 1.618);
	color: var(--v-on-dark-2, rgba(234, 239, 255, 0.854));
}

/* Actions row */
.wp-block-veramatic-askjen .vaj__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--vaj-s2) var(--vaj-s3);
	margin-top: var(--vaj-s4);
}

/* Jen: avatar + card, one link */
.wp-block-veramatic-askjen .vaj__jen {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
	text-align: left;
	border-radius: var(--v-r-btn, 6px);
}
.wp-block-veramatic-askjen .vaj__jen:visited { color: #fff; }
.wp-block-veramatic-askjen .vaj__jen:focus-visible {
	outline: 3px solid var(--vaj-blurple);
	outline-offset: 6px;
}
/* Square, the height of the demo button, with the same solid offset shadow:
   Cloud sits behind and the photo is shifted up-left, as .link-button is built. */
.wp-block-veramatic-askjen .vaj__avatar {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 54px;
	height: 54px;
	border-radius: var(--v-r-btn, 6px);
	background: var(--vaj-cloud);
	transition: background 0.2s;
}
.wp-block-veramatic-askjen .vaj__jen:hover .vaj__avatar,
.wp-block-veramatic-askjen .vaj__jen:focus-visible .vaj__avatar { background: var(--vaj-blurple); }
.wp-block-veramatic-askjen .vaj__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: var(--v-r-btn, 6px);
	object-fit: cover;
	object-position: 50% 38%;
	background: #fff;
	transform: translate(-6px, -4px);
}
.wp-block-veramatic-askjen .vaj__dot {
	position: absolute;
	right: 0;
	bottom: -2px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--v-green, #00b15a);
	border: 2px solid var(--vaj-navy);
}
.wp-block-veramatic-askjen .vaj__dot::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid var(--v-green, #00b15a);
	animation: vaj-pulse 2.4s ease-out infinite;
}
@keyframes vaj-pulse {
	0% { transform: scale(1); opacity: 0.7; }
	70%, 100% { transform: scale(2); opacity: 0; }
}
/* Card pops out beside the avatar on hover/focus; it is positioned, so the
   pop never shifts the button next to it. */
.wp-block-veramatic-askjen .vaj__card {
	position: absolute;
	right: calc(100% + 14px);
	top: 50%;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--v-s1, 0.618rem) var(--v-s2, 1rem);
	border-radius: var(--v-r-btn, 6px);
	border: 1px solid var(--v-line-dark, rgba(234, 239, 255, 0.146));
	background: var(--v-fill-dark-2, rgba(234, 239, 255, 0.09));
	line-height: var(--v-lh-sub, 1.3);
	text-align: left;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translate(8px, -50%);
	transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
.wp-block-veramatic-askjen .vaj__jen:hover .vaj__card,
.wp-block-veramatic-askjen .vaj__jen:focus-visible .vaj__card {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
}
.wp-block-veramatic-askjen .vaj__card b {
	font-weight: var(--v-fw-semibold, 600);
	font-size: var(--v-fs-body, 1rem);
}
.wp-block-veramatic-askjen .vaj__card span {
	font-size: var(--v-fs-small, 0.887rem);
	color: var(--v-on-dark-3, rgba(234, 239, 255, 0.618));
}

/* Pointer hint: a cursor drifts onto the avatar, presses, and fades, on a
   loop, until the visitor hovers or focuses the link (view.js adds .is-seen). */
.wp-block-veramatic-askjen .vaj__hint {
	position: absolute;
	right: -16px;
	bottom: -18px;
	width: 22px;
	height: 22px;
	pointer-events: none;
	opacity: 0;
	filter: drop-shadow(0 1px 2px rgba(7, 0, 40, 0.55));
	animation: vaj-point 3.6s ease-in-out 1.2s infinite;
}
.wp-block-veramatic-askjen .vaj__hint svg {
	display: block;
	width: 100%;
	height: 100%;
}
.wp-block-veramatic-askjen .vaj__hint::before {
	/* tap ring at the cursor tip */
	content: "";
	position: absolute;
	left: -1px;
	top: -3px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid #fff;
	opacity: 0;
	transform: scale(0.4);
	animation: vaj-tap 3.6s ease-out 1.2s infinite;
}
.wp-block-veramatic-askjen .vaj__jen:hover .vaj__hint,
.wp-block-veramatic-askjen .vaj__jen:focus-visible .vaj__hint,
.wp-block-veramatic-askjen .vaj__jen.is-seen .vaj__hint {
	animation: none;
	opacity: 0;
}
.wp-block-veramatic-askjen .vaj__jen:hover .vaj__hint::before,
.wp-block-veramatic-askjen .vaj__jen:focus-visible .vaj__hint::before,
.wp-block-veramatic-askjen .vaj__jen.is-seen .vaj__hint::before {
	animation: none;
}
@keyframes vaj-point {
	0%   { opacity: 0; transform: translate(18px, 18px); }
	12%  { opacity: 1; transform: translate(18px, 18px); }
	45%  { opacity: 1; transform: translate(0, 0); }
	52%  { transform: translate(0, 0) scale(0.82); }
	60%  { transform: translate(0, 0) scale(1); }
	80%  { opacity: 1; transform: translate(0, 0); }
	100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes vaj-tap {
	0%, 50%   { opacity: 0; transform: scale(0.4); }
	54%       { opacity: 0.9; transform: scale(0.7); }
	72%, 100% { opacity: 0; transform: scale(2.6); }
}

/* Demo button: the theme's .link-button, copied so the block styles itself */
.wp-block-veramatic-askjen .vaj__btn {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 10px 24px 20px 20px;
	border: none;
	border-radius: var(--v-r-btn, 6px);
	background: linear-gradient(90deg, #6343ff 0%, #9500bc 15%, #f86e38 60%, #fccc00 100%);
	color: var(--vaj-navy);
	font-weight: var(--v-fw-semibold, 600);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.35s ease-in-out;
}
.wp-block-veramatic-askjen .vaj__btn:visited { color: var(--vaj-navy); }
.wp-block-veramatic-askjen .vaj__btn:hover { background: #fdd500; }
.wp-block-veramatic-askjen .vaj__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: #fff;
	transform: translate(-6px, -4px);
}

/* Responsive */
@media (max-width: 700px) {
	.wp-block-veramatic-askjen { padding: var(--vaj-s4) var(--vaj-s3); }
	.wp-block-veramatic-askjen .vaj__title { font-size: var(--v-fs-h2, 1.618rem); }
	.wp-block-veramatic-askjen .vaj__actions { flex-direction: column; }
}
/* No hover on touch, and no room on phones: the card sits beside the avatar, always visible */
@media (hover: none), (max-width: 700px) {
	.wp-block-veramatic-askjen .vaj__card {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		padding: 0 0 0 var(--v-s1h, 0.786rem);
		border: 0;
		background: none;
		white-space: normal;
		transition: none;
	}
	.wp-block-veramatic-askjen .vaj__hint { display: none; }
}
/* Phones: one column of two full-width targets. The demo button leads; Jen follows
   as a card the whole width of the panel, so the pair reads as a choice instead of
   a centred button under a left-aligned line of text. */
@media (max-width: 600px) {
	.wp-block-veramatic-askjen { padding: var(--vaj-s3) var(--v-s2h, 1.272rem); }
	.wp-block-veramatic-askjen .vaj__deck { font-size: var(--v-fs-body, 1rem); }
	.wp-block-veramatic-askjen .vaj__actions { align-items: stretch; gap: var(--v-s2h, 1.272rem); margin-top: var(--vaj-s3); }
	.wp-block-veramatic-askjen .vaj__btn { order: -1; box-sizing: border-box; width: calc(100% - 6px); margin-left: 6px; text-align: center; } /* its white plate sits 6px to the left */
	.wp-block-veramatic-askjen .vaj__jen {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: var(--v-s1h, 0.786rem) var(--v-s2, 1rem) var(--v-s1h, 0.786rem) calc(var(--v-s2, 1rem) + 6px);
		border: 1px solid var(--v-line-dark, rgba(234, 239, 255, 0.146));
		background: var(--v-fill-dark, rgba(234, 239, 255, 0.056));
	}
	.wp-block-veramatic-askjen .vaj__card { flex: 1 1 auto; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-veramatic-askjen .vaj__dot::after { animation: none; }
	.wp-block-veramatic-askjen .vaj__hint { display: none; }
	.wp-block-veramatic-askjen .vaj__avatar,
	.wp-block-veramatic-askjen .vaj__card,
	.wp-block-veramatic-askjen .vaj__btn { transition: none; }
}

/* First block on a page: swallow .entry-content's 1.5em top margin so it sits flush under the header */
.entry-content > .wp-block-veramatic-askjen:first-child { margin-top: -1.5em; }