/* Swaraa Theme Custom Styles */

/* Material Symbols - Icons - Force font loading with maximum priority */
.material-symbols-outlined,
span.material-symbols-outlined { 
	font-family: 'Material Symbols Outlined' !important;
	font-weight: normal !important;
	font-style: normal !important;
	font-size: 24px !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	display: inline-block !important;
	white-space: nowrap !important;
	word-wrap: normal !important;
	direction: ltr !important;
	font-feature-settings: 'liga' !important;
	-webkit-font-feature-settings: 'liga' !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
	vertical-align: middle !important;
	text-rendering: optimizeLegibility !important;
	user-select: none !important;
}

/* Icon colors */
.material-symbols-outlined.text-yellow-400 {
	color: #facc15 !important;
}

.material-symbols-outlined.text-green-400 {
	color: #4ade80 !important;
}

/* Dark Theme Base */
body.dark { 
	background-color: #0a0e17 !important; 
	color: #ffffff !important; 
}

body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 { 
	color: #ffffff !important; 
}

body.dark .text-muted { 
	color: #a0a0a0 !important; 
}

body.dark .bg-card { 
	background-color: #1a1f2c !important; 
}

body.dark .bg-surface { 
	background-color: #151c24 !important; 
}

body.dark .text-accent { 
	color: #00e0e5 !important; 
}

/* Smooth Animations */
.swaraa-section {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.swaraa-section.visible {
	opacity: 1;
	transform: translateY(0);
}

.swaraa-feature-card,
.swaraa-use-case-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.swaraa-feature-card:hover,
.swaraa-use-case-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 224, 230, 0.2) !important;
}

.swaraa-btn-primary,
.eyekon-btn-primary {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.swaraa-btn-primary:hover,
.eyekon-btn-primary:hover {
	transform: scale(1.05);
	box-shadow: 0 0 40px rgba(0, 224, 230, 0.6) !important;
}

.swaraa-btn-secondary,
.eyekon-btn-secondary {
	transition: background-color 0.3s ease;
}

.swaraa-btn-secondary:hover,
.eyekon-btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile Menu Animation */
.swaraa-mobile-menu,
.eyekon-mobile-menu {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* Mobile Menu Styling */
.swaraa-mobile-menu nav,
.eyekon-mobile-menu nav {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.swaraa-mobile-menu nav::-webkit-scrollbar,
.eyekon-mobile-menu nav::-webkit-scrollbar {
	width: 6px;
}

.swaraa-mobile-menu nav::-webkit-scrollbar-track,
.eyekon-mobile-menu nav::-webkit-scrollbar-track {
	background: transparent;
}

.swaraa-mobile-menu nav::-webkit-scrollbar-thumb,
.eyekon-mobile-menu nav::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
}

.swaraa-mobile-menu nav::-webkit-scrollbar-thumb:hover,
.eyekon-mobile-menu nav::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

/* Mobile Nav Link Hover Effects - Production Ready */
.mobile-nav-link {
	position: relative;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex !important;
	align-items: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.mobile-nav-link:hover {
	transform: translateX(6px);
	border-left-color: #00e0e5 !important;
	background-color: rgba(0, 224, 230, 0.15) !important;
	color: #ffffff !important;
}

.mobile-nav-link:active {
	transform: translateX(4px) scale(0.98);
	opacity: 0.95;
	background-color: rgba(0, 224, 230, 0.2) !important;
}

.mobile-nav-link .material-symbols-outlined {
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.mobile-nav-link:hover .material-symbols-outlined {
	transform: scale(1.15);
	color: #00e0e5 !important;
}

/* Ensure mobile menu links are clickable */
.mobile-nav-link,
.mobile-nav-link * {
	pointer-events: auto;
	user-select: none;
	-webkit-user-select: none;
}

/* Improve touch targets for mobile */
@media (max-width: 1023px) {
	.mobile-nav-link {
		min-height: 48px;
		padding: 12px 16px !important;
	}
}

/* Ensure mobile menu is visible and properly styled */
#mobile-menu {
	display: block !important;
	opacity: 1 !important;
	width: 100% !important;
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: 0 !important;
	min-height: calc(100vh - 80px) !important;
	max-height: calc(100vh - 80px) !important;
	overflow: hidden !important;
}

#mobile-menu.translate-x-full {
	transform: translateX(100%) !important;
	pointer-events: none;
}

#mobile-menu.translate-x-0 {
	transform: translateX(0) !important;
	visibility: visible !important;
	pointer-events: auto;
}

/* Ensure mobile menu content is visible */
#mobile-menu > div {
	display: flex !important;
	width: 100% !important;
	height: 100% !important;
}

#mobile-menu nav {
	display: flex !important;
	flex-direction: column !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
}

#mobile-menu .mobile-nav-link {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
}

#mobile-menu button,
#mobile-menu a {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Mobile menu toggle button visibility */
#mobile-menu-toggle {
	display: flex !important;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

@media (min-width: 1024px) {
	#mobile-menu-toggle {
		display: none !important;
	}
	
	#mobile-menu {
		display: none !important;
	}
}

/* Tablet and mobile header adjustments */
@media (max-width: 1023px) {
	.swaraa-header nav {
		display: none !important;
	}
	
	.swaraa-header .hidden.lg\\:flex {
		display: none !important;
	}
	
	/* Ensure header content doesn't overflow */
	.swaraa-header > div {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: relative;
	}
	
	/* Logo container */
	.swaraa-header .flex-shrink-0 {
		flex-shrink: 0;
		min-width: 0;
		overflow: hidden;
		max-width: calc(100% - 100px); /* Leave space for burger menu */
	}
	
	/* Burger menu button styling */
	#mobile-menu-toggle {
		flex-shrink: 0;
		order: 3; /* Move to end */
	}
}

/* Ensure mobile menu is always accessible on small screens */
@media (max-width: 1023px) {
	#mobile-menu {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		min-height: calc(100vh - 80px) !important;
		z-index: 9999 !important;
		margin-left: calc(-1 * var(--header-padding, 1rem)) !important;
		margin-right: calc(-1 * var(--header-padding, 1rem)) !important;
	}
	
	/* Prevent body scroll when menu is open */
	body.menu-open {
		overflow: hidden !important;
		position: fixed !important;
		width: 100% !important;
	}
	
	/* Ensure header container is relative for absolute menu positioning */
	.swaraa-header > div {
		position: relative !important;
	}
}

/* FAQ Animation */
.faq-answer {
	transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
}

.faq-answer:not(.hidden) {
	max-height: 500px;
	opacity: 1;
}

/* Scroll Reveal */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-fade-in-up {
	animation: fadeInUp 0.6s ease-out;
}

/* Fixed/Sticky Header */
.swaraa-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.swaraa-header nav {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.swaraa-header .nav-link {
	white-space: nowrap;
	display: flex;
	align-items: center;
}

.swaraa-header .group:hover .nav-link {
	color: #ffffff !important;
}

/* Ensure all header elements are vertically aligned */
.swaraa-header > div {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.swaraa-header nav,
.swaraa-header a,
.swaraa-header button {
	display: flex;
	align-items: center;
}

/* Desktop/Laptop header spacing */
@media (min-width: 1024px) {
	.swaraa-header > div {
		gap: 1.5rem;
	}
	
	.swaraa-header nav {
		gap: 1.5rem;
		flex: 1;
		justify-content: center;
		min-width: 0;
	}
	
	/* Prevent logo and nav from overlapping */
	.swaraa-header .flex-shrink-0:first-child {
		flex-shrink: 0;
		min-width: 120px;
		max-width: 200px;
	}
	
	/* Ensure buttons don't shrink */
	.swaraa-header .lg\\:flex:last-child {
		flex-shrink: 0;
		min-width: 180px;
	}
}

/* Tablet view - prevent overlap */
@media (min-width: 768px) and (max-width: 1023px) {
	.swaraa-header > div {
		gap: 0.75rem;
	}
	
	.swaraa-header .flex-shrink-0:first-child {
		max-width: 150px;
	}
}

/* Mobile menu toggle - visible on mobile and tablet */
#mobile-menu-toggle {
	display: flex !important;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	position: relative;
	background: transparent;
	border: none;
	outline: none;
}

#mobile-menu-toggle .material-symbols-outlined {
	display: block !important;
	font-size: 28px !important;
	line-height: 1 !important;
}

/* Show burger menu on tablet and mobile (below 1024px) */
@media (max-width: 1023px) {
	#mobile-menu-toggle {
		display: flex !important;
	}
	
	/* Hide desktop nav on tablet */
	.swaraa-header nav.lg\\:flex {
		display: none !important;
	}
	
	.swaraa-header .lg\\:flex {
		display: none !important;
	}
}

/* Hide burger menu on desktop (1024px and above) */
@media (min-width: 1024px) {
	#mobile-menu-toggle {
		display: none !important;
	}
	
	#mobile-menu {
		display: none !important;
	}
}

/* Desktop navigation - hidden on mobile */
@media (max-width: 767px) {
	.swaraa-header nav:not(.swaraa-mobile-menu nav),
	.swaraa-header > div > div.hidden {
		display: none !important;
	}
}

/* Header scrolled state - more opaque and shadow */
.swaraa-header.scrolled {
	background-color: #0a0e17 !important;
	border-bottom-color: rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Add padding to body to account for fixed header */
body.swaraa-landing {
	padding-top: 0;
}

/* Main content spacing for fixed header */
.swaraa-container {
	padding-top: 0;
}

/* Logo Styling for Dark Background - Option 1: CSS Filter */
/* Converts any logo to white for visibility on dark backgrounds */
body.dark .custom-logo,
body.dark .custom-logo-link img,
.swaraa-header .custom-logo,
.swaraa-header .custom-logo-link img {
	filter: brightness(0) invert(1); /* Converts logo to white */
	opacity: 1;
	transition: opacity 0.3s ease;
	max-height: 50px;
	width: auto;
	height: auto;
}

/* Logo Responsive Styling */
.custom-logo-link {
	display: flex !important;
	align-items: center;
	flex-shrink: 0;
}

.custom-logo {
	max-height: 45px !important;
	width: auto !important;
	height: auto !important;
	display: block !important;
}

/* Tablet view (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	.custom-logo {
		max-height: 40px !important;
	}
	
	.swaraa-header {
		padding: 12px 16px !important;
	}
}

/* Mobile view (below 768px) */
@media (max-width: 767px) {
	.custom-logo {
		max-height: 35px !important;
	}
	
	.swaraa-header {
		padding: 10px 16px !important;
	}
	
	#mobile-menu-toggle {
		display: flex !important;
	}
}

/* Ensure logo maintains visibility in mobile menu */
.swaraa-mobile-menu .custom-logo,
.swaraa-mobile-menu .custom-logo-link img,
.eyekon-mobile-menu .custom-logo,
.eyekon-mobile-menu .custom-logo-link img {
	filter: brightness(0) invert(1);
	max-height: 40px;
	width: auto;
	height: auto;
	display: block !important;
}

/* Footer logo - different styling, smaller size */
.swaraa-footer .custom-logo,
.swaraa-footer .custom-logo-link img,
footer .custom-logo,
footer .custom-logo-link img {
	filter: brightness(0) invert(1);
	max-height: 32px;
	width: auto;
	height: auto;
	opacity: 0.9;
}

.swaraa-footer .footer-logo img {
	max-height: 32px;
}

/* Logo link styling */
.custom-logo-link {
	display: inline-block;
	text-decoration: none;
	vertical-align: middle;
	line-height: 0;
}

/* Ensure logo image is properly aligned */
.custom-logo-link img,
.custom-logo {
	display: block;
	vertical-align: middle;
	object-fit: contain;
}

/* Smooth Scroll */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.swaraa-section,
	.swaraa-feature-card,
	.swaraa-use-case-card {
		transition: none;
	}
}