/* Reset and Base Styles for Cross-Browser Compatibility */
* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Ensure images are responsive */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Fix for IE11 flexbox issues */
.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

/* Existing font styles */
.font-display {
	font-family: 'Playfair Display', serif;
}

.font-body {
	font-family: 'Lato', sans-serif;
}

/* Sun Animation with browser prefixes */
.sun-animation {
	-webkit-animation: float 6s ease-in-out infinite;
	-moz-animation: float 6s ease-in-out infinite;
	-o-animation: float 6s ease-in-out infinite;
	animation: float 6s ease-in-out infinite;
}

@-webkit-keyframes float {
	0% {
		-webkit-transform: translateY(0px) rotate(0deg);
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		-webkit-transform: translateY(-10px) rotate(3deg);
		transform: translateY(-10px) rotate(3deg);
	}
	100% {
		-webkit-transform: translateY(0px) rotate(0deg);
		transform: translateY(0px) rotate(0deg);
	}
}

@keyframes float {
	0% {
		-webkit-transform: translateY(0px) rotate(0deg);
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		-webkit-transform: translateY(-10px) rotate(3deg);
		transform: translateY(-10px) rotate(3deg);
	}
	100% {
		-webkit-transform: translateY(0px) rotate(0deg);
		transform: translateY(0px) rotate(0deg);
	}
}

/* Wave Animation Styles */
.waves {
	position: relative;
	width: 100%;
	height: 15vh;
	margin-bottom: -7px;
	min-height: 100px;
	max-height: 150px;
}

.parallax > use {
	-webkit-animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
	-moz-animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
	-o-animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
	animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.parallax > use:nth-child(1) {
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
	-webkit-animation-duration: 7s;
	animation-duration: 7s;
}

.parallax > use:nth-child(2) {
	-webkit-animation-delay: -3s;
	animation-delay: -3s;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
}

.parallax > use:nth-child(3) {
	-webkit-animation-delay: -4s;
	animation-delay: -4s;
	-webkit-animation-duration: 13s;
	animation-duration: 13s;
}

.parallax > use:nth-child(4) {
	-webkit-animation-delay: -5s;
	animation-delay: -5s;
	-webkit-animation-duration: 20s;
	animation-duration: 20s;
}

@-webkit-keyframes move-forever {
	0% {
		-webkit-transform: translate3d(-90px,0,0);
		transform: translate3d(-90px,0,0);
	}
	100% { 
		-webkit-transform: translate3d(85px,0,0);
		transform: translate3d(85px,0,0);
	}
}

@keyframes move-forever {
	0% {
		-webkit-transform: translate3d(-90px,0,0);
		transform: translate3d(-90px,0,0);
	}
	100% { 
		-webkit-transform: translate3d(85px,0,0);
		transform: translate3d(85px,0,0);
	}
}

/* Mobile Navigation Fix */
#mobileMenu {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

/* Fix for Safari mobile viewport issues */
@supports (-webkit-touch-callout: none) {
	.min-h-screen {
		min-height: -webkit-fill-available;
	}
}

/* Responsive Styles */
@media (max-width: 768px) {
	.waves {
		height: 40px;
		min-height: 40px;
	}
	
	/* Ensure mobile menu is properly positioned */
	#mobileMenu {
		position: absolute;
		top: 80px;
		left: 0;
		right: 0;
		z-index: 50;
	}
	
	/* Fix for small mobile screens */
	.text-4xl {
		font-size: 2rem !important;
	}
	
	.text-3xl {
		font-size: 1.75rem !important;
	}
	
	/* Ensure footer is readable on mobile */
	.grid-cols-1 {
		text-align: center;
	}
}

/* Extra small devices */
@media (max-width: 480px) {
	/* Adjust padding for very small screens */
	.px-4 {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	
	/* Ensure buttons are touch-friendly */
	button, a {
		min-height: 44px;
		min-width: 44px;
	}
	
	/* Fix logo size on very small screens */
	.h-16 {
		height: 3rem !important;
	}
	
	/* Fix wave animation on small screens */
	.waves {
		display: block !important;
	}
	
	/* Ensure form inputs are readable */
	input, select, textarea {
		font-size: 16px !important; /* Prevents zoom on iOS */
	}
}

/* iOS/Safari specific fixes */
@supports (-webkit-touch-callout: none) {
	/* Use custom viewport height */
	.min-h-screen {
		min-height: calc(var(--vh, 1vh) * 100);
	}
	
	/* Fix Safari padding issues */
	.py-12 {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}
	
	.py-24 {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}
	
	/* Reduce excessive spacing in Safari */
	.mb-16 {
		margin-bottom: 2rem !important;
	}
	
	/* Fix navigation padding in Safari */
	.py-4 {
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
	}
}

/* Fix for Edge and IE flexbox issues */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.flex {
		display: -ms-flexbox;
	}
	
	.flex-col {
		-ms-flex-direction: column;
	}
	
	.justify-between {
		-ms-flex-pack: justify;
	}
	
	.items-center {
		-ms-flex-align: center;
	}
}

/* Print styles */
@media print {
	.no-print, nav, footer {
		display: none !important;
	}
	
	body {
		font-size: 12pt;
	}
	
	a {
		text-decoration: none;
		color: #000;
	}
}