/* 
 * Landing Page Mobile Overrides
 * Mobile-specific styles that enhance the mobile experience
 * Load this AFTER landing.css
 */

@media (max-width: 768px) {
  /* ===== FULLPAGE.JS PAGE INDICATOR ===== */
  /* Hide the page indicator dots on mobile */
  #fp-nav {
    display: none !important;
  }
  
  /* ===== NAVIGATION ===== */
  .nav-container {
    padding: 0.75rem 1rem;
  }
  
  .nav-logo {
    gap: 0.5rem;
  }
  
  .logo-icon-img {
    width: 32px;
    height: 32px;
  }
  
  .nav-links {
    gap: 0.75rem;
  }
  
  .nav-links a {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
  
  /* ===== HERO SECTION ===== */
  .hero {
    padding: calc(var(--navbar-height) + 2rem) 1rem 2rem;
  }
  
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
  }
  
  .frosted-panel {
    padding: 2rem 1.5rem;
    border-radius: 20px;
    border-width: 1px;
    width: 100%;
    max-width: 100%;
  }
  
  .hero-title-italic {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
  
  .hero-buttons {
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  
  .btn-pill {
    padding: 0.875rem 2rem;
    font-size: 0.9375rem;
  }
  
  .hero-small-buttons {
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  
  .btn-small-pill {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
  }
  
  /* ===== FEATURES SECTION ===== */
  .features {
    padding: calc(var(--navbar-height) + 2rem) 1rem 2rem;
  }
  
  .features-content {
    gap: 0.75rem;
    height: 100%;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto;
  }
  
  .features-header {
    min-height: 60px;
    margin-bottom: 0.5rem;
  }
  
  .features-main-title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
  }
  
  .features-main-subtitle {
    font-size: 0.9rem;
  }
  
  .features-main-panel {
    padding: 1.5rem 1rem;
    border-radius: 20px;
    height: auto;
    max-height: 70vh;
  }
  
  .feature-display {
    min-height: 300px;
  }
  
  .feature-slide {
    gap: 1rem;
  }
  
  .feature-display-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
  
  .feature-display-text {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  
  .feature-pagination {
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    gap: 0.75rem;
  }
  
  .page-nav-btn {
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
  }
  
  .page-indicator {
    width: 6px;
    height: 6px;
  }
  
  .page-indicator.active {
    width: 16px;
  }
  
  /* Navigation buttons on mobile */
  .features-nav-panel {
    padding: 0.75rem 1rem;
    border-radius: 20px;
    min-height: 50px;
  }
  
  .feature-nav-btn {
    display: none !important;
  }
  
  .feature-switch-btn {
    display: flex !important;
    font-size: 1.5rem;
    padding: 0.5rem;
  }
  
  .feature-indicators {
    display: flex !important;
    gap: 0.5rem;
  }
  
  .feature-indicator {
    width: 10px;
    height: 10px;
  }
  
  .feature-indicator.active {
    transform: scale(1.2);
  }
  
  /* ===== PRICING SECTION ===== */
  .pricing {
    padding: calc(var(--navbar-height) + 2rem) 1rem 2rem;
  }
  
  .pricing-content {
    gap: 1.5rem;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
  }
  
  .pricing-header {
    min-height: 60px;
  }
  
  .pricing-main-title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
  }
  
  .pricing-main-subtitle {
    font-size: 0.9rem;
  }
  
  .pricing-cards-container {
    gap: 1rem;
    max-width: 100%;
  }
  
  .pricing-card-new {
    padding: 1.5rem;
    border-radius: 20px;
  }
  
  .pricing-card-title {
    font-size: 1.5rem;
  }
  
  .pricing-card-price {
    font-size: 1.25rem;
  }
  
  .pricing-card-description {
    font-size: 0.95rem;
  }
  
  /* ===== COMMANDS SECTION ===== */
  .commands-section {
    padding: calc(var(--navbar-height) + 1rem) 1rem 2rem;
  }
  
  .commands-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
  }
  
  .commands-header {
    min-height: 50px;
    margin-bottom: 0.75rem;
  }
  
  .commands-main-title {
    font-size: 1.75rem;
  }
  
  .commands-main-subtitle {
    font-size: 0.9rem;
  }
  
  .command-tree-container {
    padding: 1.5rem 1rem;
    border-radius: 20px;
  }
  
  .command-name {
    font-size: 1rem;
    padding: 0.625rem;
  }
  
  .command-description {
    font-size: 0.875rem;
    margin-left: 1.5rem;
  }
  
  .command-children {
    margin-left: 1.5rem;
  }
  
  /* ===== FOOTER ===== */
  .footer {
    padding: calc(var(--navbar-height) + 2rem) 1rem 2rem;
  }
  
  .footer-content-new {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
  }
  
  .footer-header {
    min-height: 50px;
  }
  
  .footer-main-title {
    font-size: 1.75rem;
  }
  
  .footer-main-subtitle {
    font-size: 0.9rem;
  }
  
  .footer-top-section {
    flex-direction: column;
    gap: 2rem;
  }
  
  .footer-icon-img {
    height: 120px;
  }
  
  .footer-buttons {
    max-width: 100%;
    gap: 0.75rem;
  }
  
  .footer-btn {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    border-radius: 40px;
  }
  
  .footer-banner-panel {
    padding: 1rem;
    border-radius: 20px;
    max-width: 100%;
  }
  
  .footer-banner-img {
    max-height: 120px;
  }
  
  .footer-copyright {
    font-size: 0.8125rem;
    margin-top: 1.5rem;
  }
}

/* ===== EXTRA SMALL DEVICES ===== */
@media (max-width: 480px) {
  .hero-title-italic {
    font-size: 1.75rem;
  }
  
  .frosted-panel {
    padding: 1.5rem 1rem;
  }
  
  .btn-pill {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
  }
  
  .features-main-title,
  .pricing-main-title,
  .commands-main-title,
  .footer-main-title {
    font-size: 1.5rem;
  }
  
  .features-main-panel {
    padding: 1rem 0.75rem;
  }
  
  .feature-display-title {
    font-size: 1.125rem;
  }
  
  .feature-display-text {
    font-size: 0.875rem;
  }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 768px) and (orientation: landscape) {
  .hero,
  .features,
  .pricing,
  .commands-section,
  .footer {
    min-height: auto;
    height: auto;
    padding: calc(var(--navbar-height) + 1rem) 1rem 1rem;
  }
  
  .frosted-panel {
    padding: 1.5rem;
  }
  
  .hero-title-italic {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .hero-buttons {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .features-main-panel {
    max-height: 60vh;
  }
  
  .features-main-subtitle,
  .pricing-main-subtitle,
  .commands-main-subtitle,
  .footer-main-subtitle {
    display: none;
  }
}

/* ===== TABLET SPECIFIC (768px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .frosted-panel {
    max-width: 700px;
    padding: 3rem 2.5rem;
  }
  
  .features-main-panel {
    max-width: 900px;
  }
  
  .pricing-cards-container {
    max-width: 600px;
  }
  
  .footer-top-section {
    gap: 2.5rem;
  }
  
  .footer-icon-img {
    height: 160px;
  }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn-pill,
  .btn-small-pill,
  .footer-btn,
  .control-btn {
    min-height: 44px;
  }
  
  /* Remove hover states, enhance active states */
  .btn-pill:hover,
  .btn-small-pill:hover,
  .footer-btn:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.15);
  }
  
  .btn-pill:active,
  .btn-small-pill:active,
  .footer-btn:active {
    transform: scale(0.97);
  }
  
  .pricing-card-new:hover {
    transform: none;
  }
  
  .pricing-card-new:active {
    transform: translateY(-2px) scale(0.98);
  }
  
  /* Prevent text selection during interactions */
  .btn-pill,
  .btn-small-pill,
  .footer-btn,
  .pricing-card-new,
  .feature-nav-btn,
  .page-nav-btn {
    -webkit-user-select: none;
    user-select: none;
  }
}