/* ==========================================================================
   Medicuality Theme - Responsive Styles
   ========================================================================== */

/* Tablets (768px and below) */
@media (max-width: 768px) {
	h1 {
		font-size: 1.75rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.25rem;
	}

	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.primary-navigation {
		gap: 1rem;
	}
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
	html {
		font-size: 14px;
	}

	h1 {
		font-size: 1.5rem;
	}

	h2 {
		font-size: 1.25rem;
	}

	.site-header .container {
		flex-direction: column;
		gap: 1rem;
	}

	.menu-toggle {
		display: block;
	}

	.primary-navigation {
		display: none;
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.primary-navigation.active {
		display: flex;
	}

	.primary-navigation a {
		padding: 0.75rem;
		border-bottom: 1px solid var(--border-color);
	}

	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}

	.container {
		padding: 0 0.75rem;
	}
}