/**
 * Frontend styles for Support Hours Block
 * Uses CSS custom properties for dynamic styling
 */

/* Support Hours Block */
#support-hours,
.wp-block-docsy-support-hours-block {
	margin-top: var(--section-margin-top, 0) !important;
	padding: var(--sh-padding, 4rem 0 5rem 0);
	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));
}

@media (min-width: 1024px) {
	.support-hours-card {
		padding: 3rem;
	}
}

.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;
}