/**
 * Regional Prestige Concierge - Responsive Design
 * 
 * Media queries for tablet and mobile devices
 */

/* ============================================================================
   TABLET BREAKPOINT (1024px and below)
   ============================================================================ */

@media(max-width:1024px) {
	#site-nav {
		padding: 1rem 1.5rem;
	}
	
	.nav-container {
		justify-content: space-between;
	}
	
	.mobile-menu-toggle {
		display: flex;
		order: 1;
	}
	
	.nav-brand {
		position: absolute;
		left: 50%;
		transform: translateX(-50%) scale(0.85);
		transform-origin: center center;
		order: 2;
		max-width: calc(100% - 140px);
	}

	.logo {
		height: 35px;
	}
	
	.nav-menu {
		display: none;
		position: fixed;
		top: 0;
		right: -100%;
		width: min(300px, 80vw);
		height: 100vh;
		background: rgba(10, 10, 25, .98);
		backdrop-filter: blur(10px);
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 5rem 2rem;
		gap: 1.5rem;
		transition: right .3s ease, left .3s ease;
		z-index: 999;
		border-left: 1px solid var(--gold);
		transform: none !important;
		left: auto;
		margin: 0;
	}
	
	.nav-menu.active {
		right: 0;
		display: flex;
	}
	
	.nav-menu li {
		width: 100%;
	}
	
	.nav-link {
		font-size: 16px;
		padding: 0.75rem 0;
		border-bottom: 1px solid rgba(199, 160, 100, 0.2);
		width: 100%;
		display: block;
		text-align: left;
	}

	/* Hide CTA button on tablet/mobile */
	.nav-cta {
		display: none;
	}

	.language-toggle {
		position: relative;
		right: 0;
		padding: 6px 12px;
		font-size: 12px;
		margin-left: auto;
		margin-right: 0;
		order: 99;
	}
	
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================================
   MOBILE BREAKPOINT (768px and below)
   ============================================================================ */

@media(max-width:768px) {
	.nav-brand {
		transform: translateX(-50%) scale(0.75);
		max-width: calc(100% - 120px);
	}

	.services-grid {
		grid-template-columns: 1fr;
	}
	
	.philosophy-container {
		grid-template-columns: 1fr;
		text-align: center;
	}
	
	.philosophy-text {
		font-size: 24px;
	}

	.footer-content {
		grid-template-columns: 1fr;
	}

	.footer-links {
		grid-template-columns: 1fr;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 20px;
		text-align: center;
		padding-left: 24px;
		padding-right: 24px;
	}

	.footer-copyright {
		text-align: center;
	}
}

/* ============================================================================
   SMALL MOBILE BREAKPOINT (480px and below)
   ============================================================================ */

@media(max-width:480px) {
	.nav-brand {
		transform: translateX(-50%) scale(0.65);
		max-width: calc(100% - 100px);
	}

	.footer-bottom {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.footer-copyright {
		font-size: 13px;
	}
}