/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 */

/* Need Help Block */
.contact-support,
.wp-block-docsy-need-help-block {
	padding-top: 4rem;
	padding-bottom: 5rem;
	background-color: var(--need-help-bg, #f9fafb);
	border-bottom: 1px solid #e5e7eb;
	padding: var(--need-help-padding, 4rem 0 5rem);
	border-radius: var(--need-help-radius, 0px);
	box-shadow: var(--need-help-shadow, none);
	margin-top: var(--section-margin-top, 0) !important;
	max-width: var(--section-max-width, 1920px) !important;
}

.contact-support__container {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--container-max-width, 64rem) !important;
	padding-top: var(--container-pt, 0);
	padding-bottom: var(--container-pb, 0);
	padding-left: var(--container-pl, 1rem);
	padding-right: var(--container-pr, 1rem);
	text-align: var(--need-help-header-align, center);
}

.contact-support__title {
	font-size: var(--need-help-heading-size, 1.875rem);
	font-weight: var(--need-help-heading-weight, 700);
	color: var(--need-help-heading-color, #111827);
	margin-bottom: 1rem;
}

.contact-support__subtitle {
	font-size: var(--need-help-description-size, 1.125rem);
	color: var(--need-help-description-color, #4B5563);
	margin-bottom: 2rem;
}

.contact-support__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--need-help-button-gap, 1rem);
	justify-content: var(--need-help-button-align, center);
	align-items: center;
	/* Ensures buttons are centered in column mode if needed, or matches alignment */
}

@media (min-width: 640px) {
	.contact-support__buttons {
		flex-direction: row;
	}
}

.btn {
	font-weight: var(--need-help-button-weight, 600);
	border-radius: var(--need-help-button-radius, 0.5rem);
	padding: 1rem 3rem;
	transition: background-color 0.3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: var(--need-help-button-size, 18px);
}

.btn-primary {
	background-color: #2563eb;
	color: #ffffff;
	border: none;
}

.btn-primary:hover {
	background-color: #1d4ed8;
}

.btn-outline {
	background-color: #ffffff;
	color: #374151;
	border: 1px solid #d1d5db;
}

.btn-outline:hover {
	background-color: #f9fafb;
}

.icon {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	height: 24px;
	width: 24px;
}