/* Mobile-specific styles for homepage */

@media (max-width: 768px) {
  .mobile-homepage {
    /* Ensure full viewport height on mobile */
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
  }

  /* Optimize button sizing for touch */
  .mobile-homepage .btn-touch {
    min-height: 56px;
    padding: 16px 24px;
    font-size: 18px;
    border-radius: 12px;
  }

  /* Better spacing for mobile */
  .mobile-homepage .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Improve loading state for mobile */
  .mobile-homepage .loading-state {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .mobile-homepage button {
    min-height: 44px;
  }

  .mobile-homepage .card {
    cursor: pointer;
  }

  .mobile-homepage .card:hover {
    transform: none;
  }
}

/* Safe area support for notched devices */
@supports (padding: max(0px)) {
  .mobile-homepage {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Dark mode optimizations for mobile */
@media (prefers-color-scheme: dark) {
  .mobile-homepage {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .mobile-homepage * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Prevent theme flash during navigation */
.mobile-homepage {
  /* Ensure smooth theme transitions */
  transition: background-color 0.1s ease-out;
}

/* Preemptive dark theme application to prevent flash */
[data-forced-dark="true"] .mobile-homepage {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
}

/* Ensure buttons maintain consistent styling during navigation */
.mobile-homepage .btn-touch {
  transition: all 0.1s ease-out;
}

/* Prevent any flash during page transitions */
html[data-forced-dark="true"] {
  background-color: #000000 !important;
}

html[data-forced-dark="true"] body {
  background-color: #000000 !important;
  transition: background-color 0.1s ease-out;
}