/**
 * CurrencyFlow - Responsive Styles
 *
 * @package CurrencyFlow
 */

/* ========================================
   Tablet (768px)
   ======================================== */
@media (max-width: 768px) {
	:root {
		--cf-font-size-5xl: 2.25rem;
		--cf-font-size-4xl: 1.875rem;
		--cf-font-size-3xl: 1.5rem;
		--cf-space-4xl: 4rem;
		--cf-space-5xl: 5rem;
	}

	.section {
		padding-block: var(--cf-space-3xl);
	}

	.section__header {
		margin-bottom: var(--cf-space-2xl);
	}

	body {
		padding-top: 80px;
	}
}

/* ========================================
   Mobile (390px)
   ======================================== */
@media (max-width: 480px) {
	:root {
		--cf-font-size-5xl: 2rem;
		--cf-font-size-4xl: 1.625rem;
		--cf-font-size-3xl: 1.375rem;
		--cf-container-padding: 1rem;
		--cf-space-4xl: 3rem;
	}

	.btn {
		padding: 0.75rem 1.5rem;
		font-size: var(--cf-font-size-sm);
	}

	.btn--lg {
		padding: 0.875rem 1.75rem;
		font-size: var(--cf-font-size-base);
	}
}

/* ========================================
   Desktop Large (1440px+)
   ======================================== */
@media (min-width: 1440px) {
	:root {
		--cf-container-max: 1320px;
	}
}

/* ========================================
   Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.fade-in,
	.slide-up {
		opacity: 1;
		transform: none;
	}
}

/* ========================================
   Body padding for fixed header (90px)
   ======================================== */
body {
	padding-top: 90px;
}

/* Front page: hero handles its own top clearance */
body.home {
	padding-top: 0;
}