/* Away2Study Custom Styles */

	/* CSS Custom Properties */
	:root {
		--primary: #0d6efd;
		--primary-rgb: 13, 110, 253;
		--secondary: #6c757d;
		--success: #198754;
		--info: #0dcaf0;
		--warning: #ffc107;
		--danger: #dc3545;
		--light: #f8f9fa;
		--dark: #212529;
		
		/* Custom brand colors */
		--brand-primary: #1e40af;
		--brand-secondary: #3b82f6;
		--brand-accent: #fbbf24;
		
		/* Spacing */
		--section-padding: 5rem 0;
		--container-padding: 2rem;
		
		/* Shadows */
		--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
		--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
		--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
		--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
		
		/* Transitions */
		--transition-base: all 0.3s ease;
		--transition-fast: all 0.15s ease;
		--transition-slow: all 0.5s ease;
	}
	[data-theme='dark'] {
		--primary: #0d6efd;
		--primary-rgb: 13, 110, 253;
		--secondary: #6c757d;
		--success: #198754;
		--info: #0dcaf0;
		--warning: #ffc107;
		--danger: #dc3545;
	}


	/* Global Styles */
	body {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		line-height: 1.6;
		color: var(--dark);
		background-color: #ffffff;
	}

	/* Typography Enhancements */
	.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.025em;
	}

	.lead {
		font-size: 1.125rem;
		font-weight: 400;
		line-height: 1.7;
	}

	/* Brand Logo Styles */
	.brand-logo .logo-icon {
		width: 40px;
		height: 40px;
		font-size: 0.875rem;
		font-weight: 700;
	}

	.brand-text {
		color: var(--dark);
		text-decoration: none !important;
	}

	/* Navigation Enhancements */
	.navbar {
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		transition: var(--transition-fast);
		color: #a6b8c9;
	}

	.navbar-nav .nav-link {
		font-weight: 500;
		padding: 0.75rem 1rem;
		border-radius: 0.375rem;
		transition: var(--transition-fast);
		position: relative;
		color: light-dark(#6c757d , #a6b8c9) !important;
	}

	.navbar-nav .nav-link:hover {
		background-color: rgba(var(--primary-rgb), 0.1);
		color: var(--primary);
	}

	.navbar-nav .nav-link.active {
		background-color: rgba(var(--primary-rgb), 0.1);
		color: var(--primary);
		font-weight: 600;
	}
	.navbar-nav .dropdown-toggle {
		color: light-dark(#6c757d, #a6b8c9) !important;
	}

	.dropdown-menu {
		border: none;
		box-shadow: var(--shadow-lg);
		border-radius: 0.75rem;
		padding: 0.75rem;
		margin-top: 0.5rem;
	}

	.dropdown-item {
		border-radius: 0.5rem;
		padding: 0.75rem 1rem;
		transition: var(--transition-fast);
	}

	.dropdown-item:hover {
		background-color: rgba(var(--primary-rgb), 0.1);
		color: var(--primary);
	}

	/* Language Switcher */
	.nav-item.dropdown .nav-link .bi-translate {
		display: flex;
		align-items: center;
	}

	.nav-item.dropdown .nav-link:has(.bi-translate) {
		background-color: var(--warning);
		color: var(--dark) !important;
		border-radius: 0.5rem;
		padding: 0.5rem 0.75rem;
		transition: var(--transition-base);
		position: relative;
		overflow: hidden;
		min-width: 60px;
	}

	.nav-item.dropdown .nav-link:has(.bi-translate):hover {
		background-color: #ffca2c;
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
	}

	.nav-item.dropdown .nav-link .bi-translate {
		font-size: 1.1rem;
		margin-right: 0.25rem;
	}

	.nav-item.dropdown .nav-link:has(.bi-translate) span {
		font-weight: 600;
		font-size: 0.875rem;
	}

	.nav-item.dropdown .dropdown-menu {
		min-width: 150px;
	}

	.nav-item.dropdown .dropdown-item img {
		border-radius: 2px;
		object-fit: cover;
	}
	.navbar-toggler {
		--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	/* Language Switcher Animation */
	@keyframes languagePulse {
		0% {
			box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
			transform: scale(1);
		}
		50% {
			box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
			transform: scale(1.05);
		}
		100% {
			box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
			transform: scale(1);
		}
	}

	.language-switcher-intro {
		animation: languagePulse 2s ease-in-out 3;
	}

	/* Initial page load animation delay */
	.loaded .nav-item.dropdown .nav-link:has(.bi-translate) {
		animation: languagePulse 2s ease-in-out 1s 2;
	}
	/* RTL Support for Arabic */
	.rtl {
		direction: rtl;
		text-align: right;
	}

	.rtl .navbar-nav {
		margin-left: 0;
		margin-right: auto;
	}

	.rtl .dropdown-menu {
		left: auto;
		right: 0;
	}

	.rtl .me-1, .rtl .me-2, .rtl .me-3 {
		margin-left: 0.25rem;
		margin-right: 0;
	}

	.rtl .ms-1, .rtl .ms-2, .rtl .ms-3 {
		margin-right: 0.25rem;
		margin-left: 0;
	}
	
	/* Hero Section */
	.hero-section {
		background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
		position: relative;
		overflow: hidden;
	}

	.hero-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
		opacity: 0.1;
	}

	.hero-content {
		position: relative;
		z-index: 2;
	}

	.hero-stats .stat-number {
		font-size: 2rem;
		font-weight: 700;
	}

	.hero-stats .stat-label {
		font-size: 0.875rem;
		opacity: 0.8;
	}

	.hero-graphic {
		position: relative;
		z-index: 2;
	}

	/* Floating Elements Animation */
	.floating-element {
		position: absolute;
		animation: float 6s ease-in-out infinite;
		font-size: 1.5rem;
	}

	.floating-element-1 {
		top: 10%;
		right: 10%;
		animation-delay: 0s;
	}

	.floating-element-2 {
		top: 60%;
		left: 5%;
		animation-delay: 2s;
	}

	.floating-element-3 {
		bottom: 20%;
		right: 20%;
		animation-delay: 4s;
	}

	@keyframes float {
		0%, 100% { transform: translateY(0px); }
		50% { transform: translateY(-20px); }
	}

	/* Button Enhancements */
	.btn {
		font-weight: 500;
		border-radius: 0.5rem;
		padding: 0.75rem 1.5rem;
		transition: var(--transition-base);
		border: none;
		position: relative;
		overflow: hidden;
	}

	.btn-lg {
		padding: 1rem 2rem;
		font-size: 1.125rem;
	}

	.btn-primary {
		background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
		box-shadow: var(--shadow-md);
	}

	.btn-primary:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-lg);
		background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
	}

	.btn-warning {
		background: var(--brand-accent);
		color: var(--dark);
		box-shadow: var(--shadow-md);
	}

	.btn-warning:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-lg);
		background: #f59e0b;
		color: var(--dark);
	}

	.btn-outline-light:hover {
		background-color: rgba(255, 255, 255, 0.1);
		border-color: rgba(255, 255, 255, 0.5);
		color: white;
	}

	.rounded-pill {
		border-radius: 50rem !important;
	}

	/* Card Enhancements */
	.card, .feature-card, .article-card {
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 1rem;
		transition: var(--transition-base);
		overflow: hidden;
	}

	.hover-lift:hover {
		transform: translateY(-8px);
		box-shadow: var(--shadow-xl);
	}

	.feature-icon {
		width: 4rem;
		height: 4rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Process Steps */
	.process-step .step-number {
		width: 4rem;
		height: 4rem;
		font-size: 1.5rem;
	}

	.timeline-number {
		width: 2rem;
		height: 2rem;
		font-size: 0.875rem;
	}

	/* Article Cards */
	.article-card {
		transition: var(--transition-base);
		height: 100%;
	}

	.article-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-lg);
	}

	.article-title a:hover {
		color: var(--primary) !important;
	}

	.article-meta .badge {
		font-size: 0.75rem;
		font-weight: 500;
	}

	/* Background Utilities */
	.bg-primary-gradient {
		background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
	}

	.bg-primary-subtle {
		background-color: rgba(var(--primary-rgb), 0.1) !important;
	}

	.text-white-75 {
		color: rgba(255, 255, 255, 0.75) !important;
	}

	/* Form Enhancements */
	.form-control, .form-select {
		border-radius: 0.5rem;
		border: 1px solid #d1d5db;
		padding: 0.75rem 1rem;
		transition: var(--transition-fast);
	}

	.form-control:focus, .form-select:focus {
		border-color: var(--primary);
		box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
	}

	.form-control-lg, .form-select-lg {
		padding: 1rem 1.25rem;
		font-size: 1.125rem;
	}

	.form-check-input:checked {
		background-color: var(--primary);
		border-color: var(--primary);
	}

	/* Filter Navigation */
	.filter-nav .nav-pills .nav-link {
		border-radius: 2rem;
		padding: 0.75rem 1.5rem;
		border: 1px solid #e5e7eb;
		color: var(--dark);
		background-color: white;
		transition: var(--transition-fast);
	}

	.filter-nav .nav-pills .nav-link:hover {
		background-color: #f3f4f6;
		border-color: #d1d5db;
	}

	.filter-nav .nav-pills .nav-link.active {
		background-color: var(--primary);
		border-color: var(--primary);
		color: white;
	}

	/* Breadcrumb Enhancements */
	.breadcrumb-item + .breadcrumb-item::before {
		content: "→";
		color: var(--secondary);
	}

	.breadcrumb-item a {
		color: var(--primary);
		text-decoration: none;
	}

	.breadcrumb-item a:hover {
		text-decoration: underline;
	}

	/* Footer Enhancements */
	footer {
		background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
	}

	footer .logo-icon {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1rem;
	}

	.social-links a {
		transition: var(--transition-fast);
		padding: 0.5rem;
		border-radius: 0.5rem;
	}

	.social-links a:hover {
		background-color: rgba(255, 255, 255, 0.1);
		transform: translateY(-2px);
	}

	/* Responsive Design Enhancements */
	@media (max-width: 768px) {
		.hero-section {
			padding: 3rem 0;
		}
		
		.display-4 {
			font-size: 2.5rem;
		}
		
		.hero-stats .stat-number {
			font-size: 1.5rem;
		}
		
		.floating-element {
			display: none;
		}
		
		.btn-lg {
			padding: 0.875rem 1.5rem;
			font-size: 1rem;
		}
	}

	@media (max-width: 576px) {
		.display-4 {
			font-size: 2rem;
		}
		
		.lead {
			font-size: 1rem;
		}
		
		.feature-icon {
			width: 3rem;
			height: 3rem;
		}
		
		.process-step .step-number {
			width: 3rem;
			height: 3rem;
			font-size: 1.25rem;
		}
	}

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

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

	/* Loading States */
	.loading {
		opacity: 0.6;
		pointer-events: none;
	}

	.spinner-border-sm {
		width: 1rem;
		height: 1rem;
	}

	/* Accessibility Enhancements */
	.btn:focus, .nav-link:focus, .form-control:focus {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}

	.sr-only {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	/* Print Styles */
	@media print {
		.navbar, footer, .floating-element {
			display: none !important;
		}
		
		.container {
			max-width: none !important;
		}
		
		a {
			color: black !important;
			text-decoration: underline !important;
		}
	}

	/* High Contrast Mode Support */
	@media (prefers-contrast: high) {
		:root {
			--primary: #0056b3;
			--secondary: #495057;
		}
		
		.btn-primary {
			background: var(--primary);
			border: 2px solid var(--primary);
		}
		
		.card, .feature-card, .article-card {
			border: 2px solid var(--dark);
		}
	}

	/* Reduced Motion Support */
	@media (prefers-reduced-motion: reduce) {
		* {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
		
		.floating-element {
			animation: none;
		}
		
		.hover-lift:hover {
			transform: none;
		}
	}

	/*────────────────────────────────────────────────────────
	  DARK-MODE V4  ·  preserves original navbar colors
	  – keeps navbar exactly as original design (dark grey)
	  – only changes text colors for readability elsewhere
	────────────────────────────────────────────────────────*/
	@media (prefers-color-scheme: dark) {

	  /* 1 ▸ Global base colors */
	  body                   { background:#121212 !important; color:#F8F9FA !important; }
	  p, li, .text-body,
	  .lead, small           { color:#F8F9FA !important; }

	  /* 2 ▸ Headings */
	  h1, h2, h3, h4, h5, h6 { color:#FFFFFF !important; }

	  /* 3 ▸ General muted text (but NOT navbar) */
	  .text-muted            { color:#B0B8C1 !important; } Links */
	  a                      { color:#93C5FD !important; }
	  a:hover, a:focus       { color:#BFDBFE !important; }

	  /* 5 ▸ PRESERVE ORIGINAL NAVBAR STYLING - Override any dark mode changes */
	  .navbar {
		background-color: rgba(33, 37, 41, 0.85) !important;  /* Keep original styling */
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
		color: #a6b8c9 !important;
	  }

	  .navbar-nav .nav-link {
		color: light-dark(#6c757d, #a6b8c9) !important;  /* Original styling */
	  }

	  .navbar-nav .nav-link:hover,
	  .navbar-nav .nav-link.active {
		color: var(--primary) !important;  /* Original hover/active colors */
	  }

	  .navbar-nav .dropdown-toggle {
		color: light-dark(#6c757d, #a6b8c9) !important;  /* Original styling */
	  }

	  /* Keep language switcher original yellow styling */
	  .nav-item.dropdown .nav-link:has(.bi-translate) {
		background-color: var(--warning) !important;
		color: var(--light) !important;
	  }
	  
	  .form-label,
	  .form-label.fw-medium,
	  label[for],
	  .form-check-label,
	  .form-text,
	  .form-text.text-muted,
	  small.form-text,
	  small.text-muted,
	  .character-counter,
	  .invalid-feedback {
		color: #212529 !important;
		  }
		  
	  /* 7 ▸ CONTACT INFORMATION SECTION - Fix for bg-light container */
	  .bg-light .fw-medium,
	  .bg-light .fw-bold,
	  .bg-light div.fw-medium,
	  .bg-light div.fw-bold,
	  .bg-light h5.fw-bold {
		color: #212529 !important;  /* Dark text for "Email", "Phone", "Office Hours" etc. */
  }
	  
	  /* 8 ▸ Light-surface exceptions (white cards, subtles, etc.) */
	  .bg-white h1,  .bg-white h2,  .bg-white h3,  .bg-white h4,  .bg-white h5,  .bg-white h6,
	  .bg-white p,
	  .bg-light h1,  .bg-light h2,  .bg-light h3,  .bg-light h4,  .bg-light h5,  .bg-light h6,
	  .bg-light p,
	  .bg-primary-subtle  h1, .bg-primary-subtle  h2, .bg-primary-subtle  h3,
	  .bg-success-subtle  h1, .bg-success-subtle  h2, .bg-success-subtle  h3,
	  .bg-info-subtle     h1, .bg-info-subtle     h2, .bg-info-subtle     h3 {
		color:#212529 !important;      /* dark text on white/light cards */
	  }

	  /* 9 ▸ Feature / value-pillar cards */
	  .feature-card.bg-white h3,
	  .feature-card.bg-white p,
	  .value-pillar.bg-white h3,
	  .value-pillar.bg-white p      { color:#212529 !important; }

	  /* 10 ▸ Keep the brand logo white */
	  .brand-logo .logo-icon,
	  .brand-text                  { color:#FFFFFF !important; fill:#FFFFFF !important; }
	}