/* QWAMOS Responsive Design */
/* ======================== */

/* Mobile Menu Styles */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1002;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  transition: all 0.3s ease;
  transform-origin: center;
}

.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu Container */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: var(--cyber-panel);
  backdrop-filter: blur(20px);
  box-shadow: -2px 0 20px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease;
  z-index: 1001;
  overflow-y: auto;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu-content {
  padding: 80px 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mobile-menu .nav-link-refined {
  display: block;
  padding: 1rem 0;
  font-size: 1.125rem;
  border-bottom: 1px solid rgba(139, 148, 158, 0.1);
}

.mobile-menu .btn-cyber-outline {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}

/* Body overlay when menu is open */
body.menu-open::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

/* Prevent scroll when menu is open */
body.menu-open {
  overflow: hidden;
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .container {
    padding: 0 1.5rem;
  }
  
  .hero-title-refined {
    font-size: 3.5rem;
  }
  
  .section-title-refined {
    font-size: 2.5rem;
  }
  
  /* Adjust grid layouts */
  .footer-content-refined {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Feature grid */
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
  /* Show mobile menu toggle */
  .nav-toggle {
    display: flex;
  }
  
  /* Hide desktop menu */
  .nav-menu,
  .nav-actions {
    display: none;
  }
  
  /* Navigation adjustments */
  .navbar-refined {
    padding: 1rem 0;
  }
  
  .nav-container {
    padding: 0 1rem;
  }
  
  /* Hero section */
  .hero-refined {
    min-height: 100vh;
    padding: 6rem 0 3rem;
  }
  
  .hero-title-refined {
    font-size: 2.5rem;
    letter-spacing: -1px;
  }
  
  .hero-subtitle-refined {
    font-size: 1.125rem;
  }
  
  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    margin: 2rem auto !important;
  }
  
  .hero-actions a {
    width: 100%;
  }
  
  /* Stats grid */
  .stat-card {
    padding: 1rem;
  }
  
  .stat-value-refined {
    font-size: 2rem;
  }
  
  /* Sections */
  section {
    padding: 3rem 0;
  }
  
  .section-header-refined {
    margin-bottom: 2rem;
  }
  
  .section-title-refined {
    font-size: 2rem;
  }
  
  .section-description {
    font-size: 1rem;
  }
  
  /* Cards and grids */
  .card-refined {
    padding: 1.5rem;
  }
  
  /* Feature grid */
  .feature-grid {
    grid-template-columns: 1fr;
  }
  
  .timeline-item h4 {
    font-size: 1.125rem;
  }
  
  /* Code blocks */
  .code-block-refined {
    padding: 1rem;
    font-size: 0.75rem;
  }
  
  /* Architecture */
  .arch-preview {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .arch-layer::before {
    display: none;
  }
  
  /* Footer */
  .footer-content-refined {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  
  .footer-links {
    align-items: center;
  }
  
  /* Buttons */
  .btn-cyber,
  .btn-cyber-outline {
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
  }
  
  /* Tables */
  table {
    font-size: 0.875rem;
  }
  
  table th,
  table td {
    padding: 0.75rem;
  }
  
  /* Hide decorative elements on mobile */
  #particles {
    display: none;
  }
  
  /* Hero section specific */
  .glitch {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }
  
  .hero-stats {
    gap: 1.5rem;
  }
  
  .stat-value {
    font-size: 1.5rem;
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }
  
  .hero-title-refined {
    font-size: 2rem;
  }
  
  .hero-subtitle-refined {
    font-size: 1rem;
  }
  
  /* Stats should stack vertically */
  .hero-content > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .stat-card {
    max-width: 250px;
    margin: 0 auto;
  }
  
  /* Section headers */
  .section-title-refined {
    font-size: 1.75rem;
  }
  
  .section-overline {
    font-size: 0.75rem;
  }
  
  /* Cards */
  .card-refined {
    padding: 1rem;
  }
  
  /* Architecture diagrams */
  svg text {
    font-size: 10px !important;
  }
  
  /* Download cards */
  .download-grid,
  .device-grid,
  .install-steps {
    grid-template-columns: 1fr !important;
  }
  
  /* Timeline items */
  .timeline-item {
    padding-left: 1.5rem;
  }
  
  .timeline-item::before {
    left: -0.25rem;
  }
  
  /* Code blocks - horizontal scroll */
  .code-block-refined {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .code-block-refined pre {
    min-width: 300px;
  }
  
  /* Feature icons */
  .feature-icon-refined {
    width: 36px;
    height: 36px;
  }
  
  /* CTA Actions */
  .cta-actions {
    flex-direction: column;
  }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  .hero-refined {
    min-height: auto;
    padding: 4rem 0 2rem;
  }
  
  .hero-title-refined {
    font-size: 2rem;
  }
  
  .hero-content > div:last-child {
    margin-top: 2rem !important;
  }
  
  section {
    padding: 2rem 0;
  }
  
  /* Reduce navbar height */
  .navbar {
    height: 60px;
  }
  
  :root {
    --navbar-height: 60px;
  }
}

/* High resolution displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper borders and shadows */
  .card-refined,
  .btn-cyber,
  .btn-cyber-outline {
    border-width: 0.5px;
  }
  
  /* Crisper text */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Ultra-wide displays (1920px and above) */
@media (min-width: 1920px) {
  /* Increase container max-width */
  :root {
    --container-max: 1600px;
  }
  
  /* Scale up typography */
  html {
    font-size: 18px;
  }
  
  /* Adjust grid layouts */
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .nav-link-refined,
  .btn-cyber,
  .btn-cyber-outline {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Remove hover effects on touch devices */
  .card-refined:hover,
  .feature-card:hover {
    transform: none;
  }
}

/* Print styles */
@media print {
  /* Hide navigation and decorative elements */
  .navbar-refined,
  .cyber-grid-subtle,
  #particles,
  .btn-cyber,
  .btn-cyber-outline,
  .footer-refined {
    display: none !important;
  }
  
  /* Adjust colors for print */
  body {
    background: white;
    color: black;
  }
  
  .card-refined {
    border: 1px solid #ccc;
    box-shadow: none;
  }
  
  /* Ensure content fits on page */
  section {
    page-break-inside: avoid;
  }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .nav-toggle span,
  .mobile-menu,
  .card-refined,
  .btn-cyber,
  .btn-cyber-outline {
    transition: none !important;
  }
}