/*
 * Styling for the "Was this helpful?" feedback widget and Related
 * Articles section appended to single Knowledge Base articles (see
 * WPHD_KB_Extras::append_article_extras()). Relies on --wphd-accent and
 * its derived tint variables, output onto :root specifically for these
 * pages by WPHD_KB_Block_Styles::output_accent_variable() — a single
 * article renders through the theme's own template, entirely outside
 * .wphd-kb-wrap's own scope, so those variables aren't otherwise
 * available here.
 */

.wphd-kb-article-extras {
	margin-top: 48px;
}

/* ---------- Feedback ---------- */
.wphd-kb-feedback {
	padding: 24px;
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fafafa;
	text-align: center;
}
.wphd-kb-feedback-question {
	margin: 0 0 14px;
	font-weight: 600;
}
.wphd-kb-feedback-buttons {
	display: inline-flex;
	gap: 10px;
}
.wphd-kb-feedback-btn {
	padding: 8px 24px;
	border: 1px solid #8c8f94; /* 3.24:1 (was #ddd = 1.36:1) */
	border-radius: 999px;
	background: #fff;
	font-weight: 600;
	min-height: 44px;
	min-width: 44px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.wphd-kb-feedback-btn:hover {
	border-color: var(--wphd-accent, #2271b1);
	color: var(--wphd-accent, #2271b1);
	background: var(--wphd-accent-softer, #f5f5f5);
}
.wphd-kb-feedback-thanks {
	margin: 0;
	font-weight: 600;
	color: var(--wphd-accent, #2271b1);
}

/* ---------- Related articles ---------- */
.wphd-kb-related {
	margin-top: 32px;
}
.wphd-kb-related-heading {
	font-size: 1.05em;
	font-weight: 700;
	margin: 0 0 14px;
}
.wphd-kb-related-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}
.wphd-kb-related-item {
	display: block;
	padding: 14px 16px;
	border: 1px solid #ececec;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	font-size: 0.92em;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.wphd-kb-related-item:hover {
	border-color: var(--wphd-accent-line, #ccc);
	color: var(--wphd-accent, #2271b1);
	transform: translateY(-2px);
}

.wphd-kb-feedback-btn:focus-visible,
.wphd-kb-related-item:focus-visible {
	outline: 2px solid var(--wphd-accent, #2271b1);
	outline-offset: 2px;
}
.wphd-kb-related-item {
	min-height: 44px;
	overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
	.wphd-kb-feedback-btn,
	.wphd-kb-related-item {
		transition: none;
	}
	.wphd-kb-related-item:hover {
		transform: none;
	}
}

@media (max-width: 480px) {
	.wphd-kb-related-list {
		grid-template-columns: 1fr;
	}
	.wphd-kb-feedback {
		padding: 16px;
	}
}
.wphd-kb-feedback-error {
	margin: 12px 0 0;
	color: #b32d2e; /* 5.9:1 on #fafafa */
	font-weight: 600;
}