/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-docsy-support-hours-block {
	padding: var(--sh-padding, 4rem 0 5rem 0);
	margin-top: var(--section-margin-top, 0) !important;
	max-width: var(--section-max-width, 1920px) !important;

	.support-hours-container {
		margin-left: auto;
		margin-right: auto;
		max-width: var(--container-max-width, 896px) !important;
		padding-top: var(--container-pt, 0);
		padding-bottom: var(--container-pb, 0);
		padding-left: var(--container-pl, 2rem);
		padding-right: var(--container-pr, 2rem);
	}

	.support-hours-card {
		background-color: var(--sh-bg, #2563eb);
		border-radius: var(--sh-radius, 1rem);
		padding: 2rem;
		color: var(--sh-text, #ffffff);
		text-align: var(--sh-header-align, center);
		box-shadow: var(--sh-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
	}

	.support-hours-title {
		font-size: var(--sh-title-font-size, 1.875rem);
		font-weight: var(--sh-title-font-weight, 700);
		margin-bottom: 1rem;
		color: var(--sh-title, #ffffff);
	}

	.support-hours-subtitle {
		font-size: var(--sh-subtitle-font-size, 1.25rem);
		color: var(--sh-subtitle, #bfdbfe);
		margin-bottom: 2rem;
	}

	.support-hours-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--sh-card-gap, 2rem);
		text-align: var(--sh-align, center);
	}

	@media (min-width: 768px) {
		.support-hours-grid {
			grid-template-columns: repeat(var(--sh-grid-columns, 2), 1fr);
		}
	}

	.support-hours-heading {
		font-size: var(--sh-card-heading-font-size, 1.25rem);
		font-weight: var(--sh-card-heading-font-weight, 600);
		margin-bottom: 1rem;
		color: var(--sh-card-heading-color, #ffffff);
	}

	.support-hours-text {
		font-size: var(--sh-content-text-font-size, 1rem);
		color: var(--sh-text, #dbeafe);
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
}