/*
  © 2025 Milos Saric. All rights reserved.
  Dark Mode Override CSS - Apple-inspired Design
  Modern, elegant dark mode styling
*/

/* ====================== */
/* Dark Mode Variables    */
/* ====================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Background Colors */
    --primary-bg: #000000;
    --secondary-bg: #1c1c1e;
    --tertiary-bg: #2c2c2e;
    --card-bg: #1c1c1e;
    --elevated-bg: #2c2c2e;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #98989d;
    --text-tertiary: #636366;
    --text-accent: #0a84ff;
    
    /* Interactive Colors */
    --accent: #0a84ff;
    --accent-hover: #409cff;
    --accent-active: #0070f3;
    
    /* Border & Separator Colors */
    --border-light: #38383a;
    --border-medium: #48484a;
    --border-strong: #636366;
    --separator: rgba(84, 84, 88, 0.6);
    
    /* Shadow & Effects */
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-strong: rgba(0, 0, 0, 0.6);
    --glow-accent: rgba(10, 132, 255, 0.3);
    --backdrop-blur: rgba(28, 28, 30, 0.8);
    
    /* Glass & Translucency */
    --glass-bg: rgba(28, 28, 30, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-hover: rgba(255, 255, 255, 0.05);
  }
}

/* ====================== */
/* Core Elements          */
/* ====================== */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--primary-bg);
    color: var(--text-primary);
  }
  
  /* Enhanced backdrop blur for better depth */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top, rgba(10, 132, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
  }
}

/* ====================== */
/* Header & Navigation    */
/* ====================== */
@media (prefers-color-scheme: dark) {
  .site-header {
    background: var(--backdrop-blur);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 1px 0 0 var(--glass-border) inset;
  }
  
  /* Enhanced glass effect on scroll */
  .site-header.scrolled {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: saturate(180%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
  }
  
  /* Logo styling */
  .logo a {
    color: var(--text-primary);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }
  
  .logo a:hover {
    color: var(--accent);
    text-shadow: 0 0 20px var(--glow-accent);
    opacity: 1;
  }
  
  /* Navigation links */
  .nav-menu li a {
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }
  
  .nav-menu li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--glass-hover), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
  }
  
  .nav-menu li a:hover {
    color: var(--text-primary);
    background: var(--glass-hover);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
  }
  
  .nav-menu li a:hover::before {
    opacity: 1;
  }
  
  .nav-menu li a.active {
    color: var(--accent);
    background: rgba(10, 132, 255, 0.1);
    box-shadow: 0 0 20px rgba(10, 132, 255, 0.2);
  }
  
  /* Special "Remembering Dad" link */
  .nav-menu li:last-child a {
    color: var(--text-primary);
    font-weight: 600;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid var(--glass-border);
  }
  
  .nav-menu li:last-child a:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
  }
  
  .nav-menu li:last-child a:after {
    background: linear-gradient(90deg, var(--accent), #5ac8fa);
    height: 3px;
    border-radius: 2px;
    box-shadow: 0 0 10px var(--glow-accent);
  }
  
  /* Mobile menu toggle */
  .mobile-menu-toggle span {
    background: var(--text-primary);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  }
}

/* ====================== */
/* Mobile Navigation      */
/* ====================== */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  .nav-menu {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: saturate(180%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  }
  
  .nav-menu.active {
    border-bottom: 1px solid var(--border-medium);
  }
  
  .nav-menu li a {
    color: var(--text-primary);
    font-size: 1.1rem;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .nav-menu li:last-child a {
    background: linear-gradient(135deg, var(--accent), #5ac8fa);
    color: white;
    margin: 10px 20px;
    border-radius: 12px;
    border-bottom: none;
  }
}

/* ====================== */
/* Content Areas          */
/* ====================== */
@media (prefers-color-scheme: dark) {
  /* Sections */
  section:nth-child(even) {
    background: var(--secondary-bg);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
  }
  
  /* Cards & Containers */
  .project-card,
  .stack-item,
  .timeline-content,
  .testimonial-slide {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    box-shadow: 0 8px 32px var(--shadow-medium);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .project-card:hover,
  .stack-item:hover {
    background: var(--elevated-bg);
    border-color: var(--border-medium);
    box-shadow: 0 20px 60px var(--shadow-strong);
    transform: translateY(-8px) scale(1.02);
  }
  
  /* Enhanced project card glow effect */
  .project-card:hover {
    box-shadow: 
      0 20px 60px var(--shadow-strong),
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 0 40px rgba(10, 132, 255, 0.1);
  }
  
  /* Project tags */
  .project-tags span {
    background: var(--tertiary-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
  }
  
  .project-tags span:hover,
  .project-tags span.highlighted {
    background: rgba(10, 132, 255, 0.2);
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(10, 132, 255, 0.3);
  }
}

/* ====================== */
/* Buttons & Interactions */
/* ====================== */
@media (prefers-color-scheme: dark) {
  .btn,
  .button-primary,
  .project-link {
    background: linear-gradient(135deg, var(--accent), #0070f3);
    border: 1px solid var(--accent);
    box-shadow: 0 4px 20px rgba(10, 132, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .btn:hover,
  .button-primary:hover,
  .project-link:hover {
    background: linear-gradient(135deg, var(--accent-hover), #409cff);
    box-shadow: 0 8px 40px rgba(10, 132, 255, 0.4);
    transform: translateY(-2px);
  }
  
  .button-secondary,
  .button-outline {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  
  .button-secondary:hover,
  .button-outline:hover {
    background: var(--glass-hover);
    border-color: var(--border-medium);
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
  }
  
  /* Filter buttons */
  .filter-btn {
    background: var(--tertiary-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
  }
  
  .filter-btn:hover {
    background: rgba(10, 132, 255, 0.1);
    color: var(--accent);
    border-color: var(--accent);
  }
  
  .filter-btn.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 0 20px var(--glow-accent);
  }
}

/* ====================== */
/* Forms & Inputs         */
/* ====================== */
@media (prefers-color-scheme: dark) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    background: var(--tertiary-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    background: var(--elevated-bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
    outline: none;
  }
  
  input::placeholder,
  textarea::placeholder {
    color: var(--text-tertiary);
  }
}

/* ====================== */
/* Footer                 */
/* ====================== */
@media (prefers-color-scheme: dark) {
  .site-footer {
    background: var(--secondary-bg);
    border-top: 1px solid var(--border-light);
  }
  
  .social-links a {
    background: var(--tertiary-bg);
    border: 1px solid var(--border-light);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .social-links a:hover {
    background: var(--elevated-bg);
    border-color: var(--accent);
    box-shadow: 0 8px 32px rgba(10, 132, 255, 0.2);
    transform: translateY(-3px);
  }
  
  .social-links a:hover::before {
    filter: brightness(0) saturate(100%) invert(36%) sepia(63%) saturate(4937%) hue-rotate(202deg) brightness(120%) contrast(101%);
  }
}

/* ====================== */
/* Special Effects        */
/* ====================== */
@media (prefers-color-scheme: dark) {
  /* Glowing text effect for headings */
  .section-title,
  .hero h1,
  h1, h2, h3 {
    color: var(--text-primary);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
  }
  
  /* Subtle glow on hover for interactive elements */
  .project-card:hover .project-content h3,
  .stack-item:hover h4 {
    color: var(--accent);
    text-shadow: 0 0 20px var(--glow-accent);
    transition: all 0.3s ease;
  }
  
  /* Enhanced video container */
  .video-container {
    box-shadow: 0 20px 60px var(--shadow-strong);
    border: 1px solid var(--border-light);
  }
  
  /* Ripple effect enhancement */
  .ripple {
    background: radial-gradient(circle, rgba(10, 132, 255, 0.4) 0%, transparent 70%);
  }
  
  /* Progress bars */
  .progress {
    background: linear-gradient(90deg, var(--accent), #5ac8fa);
    box-shadow: 0 0 20px var(--glow-accent);
  }
  
  .progress-bar {
    background: var(--tertiary-bg);
    border: 1px solid var(--border-light);
  }
}

/* ====================== */
/* Animations             */
/* ====================== */
@media (prefers-color-scheme: dark) {
  /* Floating animation for CTA buttons */
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
  }
  
  .cta-buttons .btn:hover {
    animation: float 2s ease-in-out infinite;
  }
  
  /* Pulse effect for accent elements */
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(10, 132, 255, 0.3); }
    50% { box-shadow: 0 0 40px rgba(10, 132, 255, 0.6); }
  }
  
  .nav-menu li a.active,
  .filter-btn.active {
    animation: pulse-glow 3s ease-in-out infinite;
  }
}

/* ====================== */
/* Responsive Enhancements */
/* ====================== */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  .hero {
    background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
  }
  
  .project-card {
    border-radius: 16px;
    margin-bottom: 1.5rem;
  }
  
  .mobile-menu-toggle:hover span {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  }
}

/* ====================== */
/* Performance Optimizations */
/* ====================== */
@media (prefers-color-scheme: dark) {
  /* Hardware acceleration for smooth animations */
  .project-card,
  .nav-menu li a,
  .btn,
  .social-links a {
    will-change: transform;
    transform: translateZ(0);
  }
  
  /* Reduce motion for accessibility */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}