/* Support page only (enqueued by inc/helpers/assets.php). Tokens live in @wp-rollback/site-chrome/tokens.css, loaded globally by global.css. *//*
 * Support page (page-templates/template-support.php, src/components/pages/support/).
 * Tailwind does the layout. This file covers what it can't reach: the display and
 * mono faces, Kadence's link, button and form rules, the FAQ accordion, and the
 * callouts on the step screenshots.
 */

.wpr-support {
	background: var(--wpr-surface);
	color: var(--wpr-body);
}

/* inc/setup.php forces `font-family: var(--font-primary) !important` on headings, so
   switch the face through the variable, as the blog does. */
.wpr-support__display {
	--font-primary: var(--wpr-font-display);

	font-family: var(--font-primary);
	letter-spacing: -0.03em;
}

.wpr-support__mono {
	font-family: var(--wpr-font-mono);
}

.wpr-support__eyebrow {
	font-family: var(--wpr-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wpr-accent-text);
}

/* Lighter than --wpr-accent-gradient so the highlight keeps its contrast on the dark hero. */
.wpr-support__accent {
	background: linear-gradient(100deg, var(--wpr-accent-text), var(--wpr-pink-text));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Kadence styles blockquote; these quotes are plain text. */
.wpr-support blockquote.wpr-support__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

.wpr-support code.wpr-support__code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--wpr-border);
	color: var(--wpr-lead);
	font-family: var(--wpr-font-mono);
	font-size: 0.9em;
}

.wpr-support code.wpr-support__code--block {
	max-width: 100%;
	overflow-x: auto;
	padding: 12px 16px;
	border: 1px solid var(--wpr-border-strong);
	border-radius: 10px;
	background: var(--wpr-surface);
	font-size: 14px;
	white-space: nowrap;
}

.wpr-support :focus-visible {
	outline: 2px solid var(--wpr-accent-text);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Links. `.wpr-support a.x` (0,2,1) outranks Kadence's a:hover/:focus/:active
 * recolor (0,1,1) in every state, so each link only sets its hover color.
 * ------------------------------------------------------------------------ */

.wpr-support a.wpr-support__link {
	color: var(--wpr-accent-text);
	text-decoration: none;
}

.wpr-support a.wpr-support__link:hover {
	color: #ddd0fd;
}

/* A bordered row link (SupportCardLink.jsx). Its layout is Tailwind. */
.wpr-support a.wpr-support__card {
	color: var(--wpr-text);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.wpr-support a.wpr-support__card:hover {
	border-color: #3d3656;
	transform: translateY(-2px);
}

/* The hero's search field is a button that opens the docs search. Two classes
   beat Kadence's button rules in every state. */
.wpr-support button.wpr-support__search {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 540px;
	height: 60px;
	margin: 0;
	padding: 0 12px 0 18px;
	border: 1px solid var(--wpr-border-strong);
	border-radius: 14px;
	background: var(--wpr-surface-2);
	box-shadow: none;
	color: var(--wpr-muted);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	text-align: left;
	cursor: text;
	transition: border-color 0.2s ease;
}

.wpr-support button.wpr-support__search:hover {
	border-color: var(--wpr-accent-border);
}

/* ---------------------------------------------------------------------------
 * Hero backdrop
 * ------------------------------------------------------------------------ */

.wpr-support-hero__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgb(236 233 246 / 7%) 1px, transparent 1px);
	background-size: 28px 28px;
	-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
	mask-image: linear-gradient(to bottom, #000 40%, transparent);
	pointer-events: none;
}

.wpr-support-hero__glow {
	position: absolute;
	top: 4%;
	right: -12%;
	width: 820px;
	height: 820px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(139 92 246 / 22%), transparent 64%);
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Quick answers accordion (native <details>)
 * ------------------------------------------------------------------------ */

.wpr-support .wpr-support__faq {
	border-bottom: 1px solid var(--wpr-border-strong);
}

.wpr-support .wpr-support__faq summary {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 68px;
	padding: 18px 4px;
	line-height: 1.35;
	color: var(--wpr-text);
	font-family: var(--wpr-font-display);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	list-style: none;
	cursor: pointer;
}

.wpr-support .wpr-support__faq summary::-webkit-details-marker {
	display: none;
}

.wpr-support .wpr-support__faq summary:hover {
	color: #fff;
}

.wpr-support .wpr-support__faq strong {
	color: var(--wpr-text);
}

.wpr-support__faq-chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.wpr-support__faq[open] .wpr-support__faq-chevron {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
 * Step screenshot callouts. GuidedHelp.jsx sets each ring's box inline.
 * ------------------------------------------------------------------------ */

.wpr-support__ring {
	position: absolute;
	border: 3px solid var(--wpr-accent);
	border-radius: 8px;
	box-shadow: 0 0 0 5px rgb(139 92 246 / 28%);
	pointer-events: none;
}

.wpr-support__callout {
	position: absolute;
	top: calc(100% + 12px);
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--wpr-accent-deep);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * The support form card. The form is a Kadence Advanced Form in the page
 * content; its CSS variables take these values unless the form's own style
 * settings override them.
 * ------------------------------------------------------------------------ */

.wpr-support-form {
	--wpr-form-text: #16132a;
	--wpr-form-muted: #5a5470;

	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(24px, 3vw, 40px);
	border-radius: 22px;
	background: #f6f4fb;
	box-shadow: 0 40px 80px -32px rgb(0 0 0 / 70%);
	color: var(--wpr-form-text);
}

.wpr-support-form .wpr-support-form__title {
	--font-primary: var(--wpr-font-display);

	margin: 0;
	color: var(--wpr-form-text);
	font-family: var(--font-primary);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.wpr-support-form .wpr-support-form__intro {
	margin: 0 0 14px;
	color: var(--wpr-form-muted);
	font-size: 15px;
	line-height: 1.55;
}

.wpr-support-form .wp-block-kadence-advanced-form {
	--kb-form-text-color: var(--wpr-form-text);
	--kb-form-text-focus-color: var(--wpr-form-text);
	--kb-form-background-color: #fff;
	--kb-form-background-focus-color: #fff;
	--kb-form-border-color: #d4cfe3;
	--kb-form-border-focus-color: var(--wpr-accent);
	--kb-form-border-width: 1px;
	--kb-form-border-radius: 10px;
	--kb-form-placeholder-color: #77708f;
	--kb-form-help-color: var(--wpr-form-muted);
	--kb-form-font-size: 15px;
	--kb-form-line-height: 1.5;
	--kb-form-v-padding: 12px;
	--kb-form-h-padding: 14px;
	--kb-form-success-color: #14532d;
	--kb-form-success-background: #e3f6e8;

	margin: 0;
}

.wpr-support-form .wp-block-kadence-advanced-form .kb-advanced-form {
	gap: 20px 16px;
}

.wpr-support-form .wp-block-kadence-advanced-form .kb-adv-form-label {
	margin-bottom: 6px;
	color: #2b2640;
	font-size: 14px;
	font-weight: 600;
}

.wpr-support-form .wp-block-kadence-advanced-form .kb-adv-form-required {
	color: #c0262d;
}

.wpr-support-form .wp-block-kadence-advanced-form .kb-adv-form-help {
	margin-top: 6px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.45;
}

.wpr-support-form .wp-block-kadence-advanced-form :is(input, select, textarea):focus {
	outline: 2px solid var(--wpr-accent);
	outline-offset: 1px;
}

/* Full-width submit in the site's primary button color. */
.wpr-support-form .wp-block-kadence-advanced-form .kb-adv-form-submit-button {
	width: 100%;
	min-height: 52px;
	border-radius: 12px;
	background: var(--wpr-accent-deep);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}

.wpr-support-form .wp-block-kadence-advanced-form .kb-adv-form-submit-button:hover {
	background: var(--wpr-accent-deep-hover);
	color: #fff;
}

.wpr-support-form .wp-block-kadence-advanced-form .kb-adv-form-message {
	border-radius: 12px;
	font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {

	.wpr-support a.wpr-support__card,
	.wpr-support__faq-chevron {
		transition: none;
	}

	.wpr-support a.wpr-support__card:hover {
		transform: none;
	}
}