/* ===== MOBILE-ONLY STYLES v3.0 ===== */
/* This file contains ALL styles for mobile devices (max-width: 768px) */
/* Desktop layout is completely separate and isolated */

/* Mobile Debug Indicator - REMOVED */

/* ===== HIDE DESKTOP ELEMENTS ON MOBILE ===== */
#sideNav {
  display: none !important;
}

.page-outline {
  display: none !important;
}

.progress-indicator {
  display: none !important;
}

/* ===== MOBILE LAYOUT OVERRIDES ===== */
#main-content {
  margin-left: 0 !important;
  width: 100% !important;
  padding: 0 1rem !important;
  padding-top: 80px !important;
}

/* Fix container and content width for mobile */
.container-fluid {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.resume-section-content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure content takes full width */
.row {
  margin: 0 !important;
  width: 100% !important;
}

.col-lg-6 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
}

/* ===== MOBILE BUTTONS - SMALLER SIZE ===== */
/* Mobile Theme Toggle Button */
#themeToggle.theme-toggle {
  position: fixed !important;
  top: 15px !important;
  right: 15px !important;
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
}

#themeToggle.theme-toggle:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
}

[data-theme="dark"] #themeToggle.theme-toggle {
  background: linear-gradient(135deg, #374151, #4b5563) !important;
  box-shadow: 0 4px 15px rgba(55, 65, 81, 0.4) !important;
}

[data-theme="dark"] #themeToggle.theme-toggle:hover {
  box-shadow: 0 6px 20px rgba(55, 65, 81, 0.6) !important;
  background: linear-gradient(135deg, #4b5563, #6b7280) !important;
}

/* Mobile Back to Top Button */
#backToTop.back-to-top {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(20px) !important;
}

#backToTop.back-to-top.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

#backToTop.back-to-top:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
}

[data-theme="dark"] #backToTop.back-to-top {
  background: linear-gradient(135deg, #374151, #4b5563) !important;
  box-shadow: 0 4px 15px rgba(55, 65, 81, 0.4) !important;
}

[data-theme="dark"] #backToTop.back-to-top:hover {
  box-shadow: 0 6px 20px rgba(55, 65, 81, 0.6) !important;
  background: linear-gradient(135deg, #4b5563, #6b7280) !important;
}

/* ===== MOBILE FLOATING HAMBURGER MENU ===== */
#sidebarToggle {
  position: fixed !important;
  top: 15px !important;
  right: 65px !important;
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
}

#sidebarToggle:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
}

[data-theme="dark"] #sidebarToggle {
  background: linear-gradient(135deg, #374151, #4b5563) !important;
  box-shadow: 0 4px 15px rgba(55, 65, 81, 0.4) !important;
}

[data-theme="dark"] #sidebarToggle:hover {
  box-shadow: 0 6px 20px rgba(55, 65, 81, 0.6) !important;
  background: linear-gradient(135deg, #4b5563, #6b7280) !important;
}

/* ===== MOBILE NAVIGATION OVERLAY ===== */
.mobile-nav-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 9998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
}

.mobile-nav-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-nav-menu {
  position: fixed !important;
  top: 0 !important;
  right: -300px !important;
  width: 280px !important;
  height: 100% !important;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
  backdrop-filter: blur(20px) !important;
  z-index: 9999 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 2rem 1rem !important;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .mobile-nav-menu {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
}

.mobile-nav-menu.show {
  right: 0 !important;
}

.mobile-nav-header {
  text-align: center !important;
  margin-bottom: 2rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.mobile-nav-header h3 {
  color: white !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.mobile-nav-close {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  background: none !important;
  border: none !important;
  color: white !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.mobile-nav-close:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: scale(1.1) !important;
}

.mobile-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mobile-nav-list li {
  margin-bottom: 0.5rem !important;
}

.mobile-nav-list a {
  display: block !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  padding: 1rem 1.5rem !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.mobile-nav-list a::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
  transition: left 0.5s ease !important;
}

.mobile-nav-list a:hover::before {
  left: 100% !important;
}

.mobile-nav-list a:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(5px) !important;
}

.mobile-nav-list a.active {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

/* ===== MOBILE PAGE SEPARATION ===== */
.resume-section {
  background: rgba(255, 255, 255, 0.01) !important;
  backdrop-filter: blur(3px) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 2rem 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}

.resume-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8, #6366f1) !important;
  background-size: 200% 100% !important;
  animation: shimmer 3s infinite !important;
}

.resume-section:hover {
  background: rgba(255, 255, 255, 0.02) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-5px) !important;
}

[data-theme="dark"] .resume-section {
  background: rgba(30, 41, 59, 0.01) !important;
  border: 1px solid rgba(71, 85, 113, 0.03) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="dark"] .resume-section:hover {
  background: rgba(30, 41, 59, 0.02) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* ===== MOBILE TYPOGRAPHY ===== */
h1 {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

h2 {
  font-size: 2rem !important;
  font-weight: 600 !important;
  margin-bottom: 1.5rem !important;
}

h3 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-bottom: 1rem !important;
}

/* ===== MOBILE PROGRESS BARS FIX ===== */
.skill-bar {
  height: 6px !important;
  background-color: var(--gray-200) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  margin-top: 0.5rem !important;
}

.skill-progress {
  height: 100% !important;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8) !important;
  border-radius: 3px !important;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.skill-progress::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  animation: shimmer 2s infinite !important;
}

[data-theme="dark"] .skill-bar {
  background-color: rgba(75, 85, 99, 0.5) !important;
}

/* ===== MOBILE CARDS ===== */
.project-card,
.experience-item,
.contact-form,
.contact-info,
.skill-item {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

.project-card:hover,
.experience-item:hover,
.contact-form:hover,
.contact-info:hover,
.skill-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .project-card,
[data-theme="dark"] .experience-item,
[data-theme="dark"] .contact-form,
[data-theme="dark"] .contact-info,
[data-theme="dark"] .skill-item {
  background: rgba(30, 41, 59, 0.3) !important;
  border: 1px solid rgba(71, 85, 113, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .project-card:hover,
[data-theme="dark"] .experience-item:hover,
[data-theme="dark"] .contact-form:hover,
[data-theme="dark"] .contact-info:hover,
[data-theme="dark"] .skill-item:hover {
  background: rgba(30, 41, 59, 0.4) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

/* ===== DARK MODE TEXT VISIBILITY FIXES ===== */
[data-theme="dark"] {
  color: #e5e7eb !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #f9fafb !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .lead,
[data-theme="dark"] .subheading {
  color: #d1d5db !important;
}

[data-theme="dark"] .text-primary {
  color: #60a5fa !important;
}

[data-theme="dark"] .contact-item span {
  color: #e5e7eb !important;
}

[data-theme="dark"] .skill-name {
  color: #f9fafb !important;
}

[data-theme="dark"] .skill-percentage {
  color: #d1d5db !important;
}

[data-theme="dark"] .project-description {
  color: #d1d5db !important;
}

[data-theme="dark"] .fa-ul li {
  color: #e5e7eb !important;
}

[data-theme="dark"] .list-inline-item {
  color: #e5e7eb !important;
}

[data-theme="dark"] .badge {
  color: #ffffff !important;
}

[data-theme="dark"] .form-control {
  background-color: rgba(30, 41, 59, 0.3) !important;
  border-color: rgba(71, 85, 113, 0.3) !important;
  color: #e5e7eb !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: #9ca3af !important;
}

[data-theme="dark"] .form-text-control {
  background-color: rgba(30, 41, 59, 0.3) !important;
  border-color: rgba(71, 85, 113, 0.3) !important;
  color: #e5e7eb !important;
}

[data-theme="dark"] .form-text-control::placeholder {
  color: #9ca3af !important;
}

/* ===== MOBILE BUTTONS ===== */
.btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  border: none !important;
  color: white !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3) !important;
}

/* ===== MOBILE SOCIAL ICONS ===== */
.social-icons {
  display: flex !important;
  justify-content: center !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
}

.social-icon {
  width: 50px !important;
  height: 50px !important;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: white !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
}

.social-icon:hover {
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4) !important;
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: white !important;
}

/* ===== MOBILE ANIMATIONS ===== */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===== MOBILE FONT SIZE FIXES ===== */
/* Fix 1: Reduce email and address font size on mobile */
.subheading {
  font-size: 1rem !important;
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
}

/* Fix 2: Reduce company name font size in experience cards */
.experience-item .subheading {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.75rem !important;
  color: var(--text-secondary) !important;
}

/* Fix 3: Improve paragraph text layout in experience cards */
.experience-item p {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin-bottom: 0.5rem !important;
  text-align: justify !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
}

/* Fix 4: Ensure experience cards take full width */
.experience-item {
  width: 100% !important;
  max-width: 100% !important;
  flex-direction: column !important;
}

.experience-item .flex-grow-1 {
  width: 100% !important;
  margin-bottom: 0.5rem !important;
}

.experience-item .flex-shrink-0 {
  width: 100% !important;
  text-align: left !important;
  margin-top: 0.5rem !important;
}

/* Fix 5: Improve education card layout */
#education .experience-item {
  padding: 1rem !important;
}

#education .experience-item h3 {
  font-size: 1.1rem !important;
  margin-bottom: 0.5rem !important;
}

#education .experience-item .subheading {
  font-size: 0.85rem !important;
  margin-bottom: 0.5rem !important;
}

#education .experience-item p {
  font-size: 0.85rem !important;
  margin-bottom: 0.5rem !important;
}

/* Target only dates in experience/education cards */
.experience-item .text-primary,
.education-item .text-primary {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--primary) !important;
  word-wrap: break-word !important;
}

/* Fix 7: Improve overall mobile typography */
h1 {
  font-size: 1.8rem !important;
  line-height: 1.2 !important;
}

h2 {
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
}

h3 {
  font-size: 1.2rem !important;
  line-height: 1.3 !important;
}

/* Fix 8: Better spacing for mobile cards */
.project-card,
.experience-item,
.skill-item {
  padding: 1rem !important;
  margin-bottom: 1rem !important;
}

/* Fix 12: First page paragraph font size - match other content */
#about .lead {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin-bottom: 1.5rem !important;
  text-align: justify !important;
  word-wrap: break-word !important;
}

/* Fix 13: Ensure consistent paragraph styling across all sections */
.resume-section p {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin-bottom: 1rem !important;
}

/* Fix 17: First page paragraph font size - match other content */
#about .lead {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin-bottom: 1.5rem !important;
  text-align: justify !important;
  word-wrap: break-word !important;
}

/* ===== MOBILE RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 480px) {
  #main-content {
    padding: 0 0.75rem !important;
    padding-top: 70px !important;
  }
  
  .resume-section {
    padding: 1.5rem 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  h1 {
    font-size: 2rem !important;
  }
  
  h2 {
    font-size: 1.75rem !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
  }
  
  #themeToggle.theme-toggle,
  #backToTop.back-to-top,
  #sidebarToggle {
    width: 35px !important;
    height: 35px !important;
    font-size: 0.9rem !important;
  }
  
  #sidebarToggle {
    right: 55px !important;
  }
  
  .mobile-nav-menu {
    width: 260px !important;
  }
}