/* Accessibility Font Controls Styles */
.accessibility-font-controls {
	padding: 15px;
	margin: 20px;
}

.accessibility-controls-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.accessibility-label {
	font-weight: 600;
	color: #495057;
	margin-right: 15px;
	font-size: 14px;
}

.font-control-link {
	text-decoration: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
}

.font-control-link.active {
	color: #495057;
	text-decoration: none;
	cursor: default;
	font-weight: 700;
}

/* Responsive design */
@media (max-width: 768px) {
	.accessibility-font-controls {
		margin: 10px;
		padding: 10px;
	}

	.accessibility-controls-container {
		flex-direction: column;
		gap: 8px;
	}

	.accessibility-label {
		margin-right: 0;
		margin-bottom: 5px;
		text-align: center;
	}

	.font-control-btn {
		width: 100%;
		max-width: 200px;
	}
}

/* For the specific theme layout - position below navigation */
@media (min-width: 768px) {
	.accessibility-font-controls {
		margin-left: 20px;
		margin-right: 20px;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.accessibility-label {
		color: #000;
	}
}

/* Smooth transitions for zoom changes */
.font-size-transition {
	transition: transform 0.3s ease, width 0.3s ease !important;
}

/* Ensure proper layout when zoomed */
body[style*='transform: scale'] {
	overflow-x: auto !important;
}

/* Fix for zoomed content layout */
body[style*='transform: scale'] .wrapper {
	width: 100% !important;
	height: auto !important;
}

/* Ensure zoom controls stay visible and properly positioned */
.accessibility-font-controls {
	position: relative !important;
	z-index: 10000 !important;
	transform: none !important;
}