/* Tablet and Landscape Mobile Responsive Menu Styles */
/* All navigation styles (mobile, tablet, desktop) are now centrally managed in styles.css */

/* Mobile Landscape (up to 768px height in landscape) - excluding tablet resolutions */
@media (max-height: 768px) and (orientation: landscape) and (max-width: 1024px) {
	.top-bar {
		display: none;
	}

	.header-nav-main {
		height: 60px;
		padding: 0.5rem 1rem;
	}

	.header-logo img {
		max-height: 40px;
	}

	.mobile-nav-toggle {
		display: flex !important;
		background: var(--primary-blue);
		border-radius: 6px;
		padding: 8px;
		width: 40px;
		height: 40px;
		box-shadow: 0 2px 8px rgba(1, 158, 189, 0.3);
	}

	.mobile-nav-toggle span {
		background-color: var(--white);
		width: 20px;
		height: 2px;
		margin: 1.5px 0;
	}

	.header-nav ul {
		display: none;
		width: 100%;
		background: var(--white);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
		border-radius: 0 0 12px 12px;
		position: absolute;
		top: 100%;
		left: 0;
		flex-direction: column;
		z-index: 1000;
		max-height: calc(100vh - 60px);
		overflow-y: auto;
	}

	.header-nav ul.active {
		display: flex;
	}

	.header-nav ul li a {
		padding: 1rem 1.5rem;
		border-bottom: 1px solid var(--light-gray);
		color: var(--primary-darkgray);
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.header-nav ul li a:hover {
		background-color: var(--light-gray);
		color: var(--primary-blue);
	}
}

/* Specific fixes for iPad and tablet devices */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	.header-nav ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.header-nav ul::-webkit-scrollbar {
		display: none;
	}

	.header-nav ul li {
		flex-shrink: 0;
	}

	/* Ensure proper header positioning */
	#header {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 1001;
	}

	.top-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1002;
		height: 40px;
	}

	/* Additional hero adjustments for iPad portrait */
	.hero {
		margin-top: -105px !important;
		padding-top: 150px !important;
	}
}

/* Ensure mobile toggle is hidden on larger screens */

/* Enhanced touch targets for tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	.header-nav ul li a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.dynamic li a {
		min-height: 40px;
	}

	/* Fix hero banner overlap for tablet */
	.hero {
		margin-top: -105px !important; /* Adjust for tablet header height (65px + 40px top bar) */
		padding-top: 150px !important; /* Ensure content is below header */
		min-height: 70vh !important;
	}

	/* Ensure video background covers properly */
	.hero-video-bg {
		object-fit: cover;
		object-position: center center;
	}

	/* Adjust hero content positioning */
	.hero-content {
		position: relative;
		z-index: 3;
		padding-top: 2rem;
	}
}

/* Tablet landscape specific fixes */
@media (min-width: 1025px) and (max-width: 1199px) {
	.hero {
		margin-top: -147px !important; /* Standard desktop overlap */
		padding-top: 200px !important;
	}
}