/**
 * 🎯 AGUTEKU Main CSS - Perfect Integration & Mobile First
 * Critical CSS Loading Order & Complete Responsive System
 */

/* ========================================
   📱 IMPORT ORDER - CRITICAL FIRST
   ======================================== */

/* 1. Design Tokens Foundation */
@import url('base/design-tokens.css');

/* 2. Modern CSS Foundation */
@import url('base/modern-foundation.css');

/* 3. Performance Optimizations */
@import url('base/performance-optimization.css');

/* 4. Animation System */
@import url('base/animations.css');

/* 5. Component Systems */
@import url('components/buttons.css');

/* ========================================
   🚨 EMERGENCY RESPONSIVE FIXES
   ======================================== */

@layer responsive-fixes {
  /* 🎯 Critical Mobile Layout Fixes */
  
  /* Fix Container Overflow Issues */
  .agtech-container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--agtech-space-4);
    padding-right: var(--agtech-space-4);
  }

  /* Progressive Container Sizes */
  @media (min-width: 640px) {
    .agtech-container {
      max-width: 640px;
      padding-left: var(--agtech-space-6);
      padding-right: var(--agtech-space-6);
    }
  }

  @media (min-width: 768px) {
    .agtech-container {
      max-width: 768px;
      padding-left: var(--agtech-space-8);
      padding-right: var(--agtech-space-8);
    }
  }

  @media (min-width: 1024px) {
    .agtech-container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .agtech-container {
      max-width: 1280px;
    }
  }

  @media (min-width: 1536px) {
    .agtech-container {
      max-width: 1536px;
    }
  }

  /* Fix Navigation Mobile Issues */
  .agtech-nav-critical {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1020;
    height: 4rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--agtech-border-primary);
  }

  /* Mobile Navigation Improvements */
  @media (max-width: 767px) {
    .agtech-nav-critical {
      height: 3.5rem; /* 56px */
    }
    
    .agtech-nav-critical .agtech-container {
      height: 100%;
      padding-left: var(--agtech-space-4);
      padding-right: var(--agtech-space-4);
    }

    /* Mobile Menu Button */
    #mobile-menu-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border: none;
      background: none;
      cursor: pointer;
    }

    /* Mobile Menu */
    #mobile-menu {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--agtech-bg-primary);
      border-bottom: 1px solid var(--agtech-border-primary);
      box-shadow: var(--agtech-shadow-lg);
      transform: translateY(-100%);
      transition: transform var(--agtech-duration-normal) var(--agtech-ease-out);
      visibility: hidden;
    }

    #mobile-menu.open {
      transform: translateY(0);
      visibility: visible;
    }

    /* Hide Desktop Menu on Mobile */
    .agtech-nav-critical ul[role="menubar"] {
      display: none;
    }

    /* Theme/Language Toggle Mobile */
    .agtech-nav-critical .agtech-lg\\:flex {
      display: none;
    }
  }

  /* Desktop Navigation */
  @media (min-width: 768px) {
    #mobile-menu-button {
      display: none;
    }

    #mobile-menu {
      display: none;
    }

    .agtech-nav-critical ul[role="menubar"] {
      display: flex;
    }

    .agtech-nav-critical .agtech-lg\\:flex {
      display: flex;
    }
  }

  /* Hero Section Mobile Fixes */
  .agtech-hero-critical {
    min-height: 100vh;
    min-height: 100svh; /* Small viewport units */
    padding-top: 4rem; /* Account for fixed header */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  @media (max-width: 767px) {
    .agtech-hero-critical {
      padding-top: 3.5rem;
      min-height: calc(100vh - 3.5rem);
      text-align: center;
    }

    /* Mobile Hero Content */
    .agtech-hero-critical .agtech-container {
      padding-top: var(--agtech-space-8);
      padding-bottom: var(--agtech-space-8);
    }

    /* Mobile Typography Scaling */
    .agtech-hero-critical h1 {
      font-size: var(--agtech-text-3xl) !important;
      line-height: 1.1;
      margin-bottom: var(--agtech-space-4);
    }

    .agtech-hero-critical p {
      font-size: var(--agtech-text-base);
      margin-bottom: var(--agtech-space-6);
      padding-left: var(--agtech-space-2);
      padding-right: var(--agtech-space-2);
    }

    /* Mobile CTA Buttons */
    .agtech-hero-critical .agtech-flex {
      flex-direction: column;
      align-items: center;
      gap: var(--agtech-space-4);
      margin-bottom: var(--agtech-space-8);
    }

    .agtech-hero-critical .agtech-btn {
      width: 100%;
      max-width: 280px;
      justify-content: center;
    }

    /* Mobile Success Metrics */
    .agtech-hero-critical .agtech-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--agtech-space-4);
      margin-top: var(--agtech-space-8);
    }

    .agtech-hero-critical .agtech-grid > div {
      padding: var(--agtech-space-2);
    }

    .agtech-hero-critical .agtech-counter {
      font-size: var(--agtech-text-2xl) !important;
    }
  }

  /* Video Background Mobile Fixes */
  @media (max-width: 768px) {
    .agtech-video-hero {
      display: none;
    }

    .agtech-video-fallback {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(135deg, 
        oklch(0.70 0.15 140 / 0.1) 0%, 
        oklch(0.68 0.15 240 / 0.1) 100%);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  }

  /* Services Section Mobile */
  .agtech-py-24 {
    padding-top: var(--agtech-space-16);
    padding-bottom: var(--agtech-space-16);
  }

  @media (max-width: 767px) {
    .agtech-py-24 {
      padding-top: var(--agtech-space-12);
      padding-bottom: var(--agtech-space-12);
    }

    /* Services Grid Mobile */
    .agtech-grid.agtech-md\\:grid-cols-3 {
      grid-template-columns: 1fr;
      gap: var(--agtech-space-6);
    }

    /* Service Cards Mobile */
    .agtech-rounded-2xl {
      border-radius: var(--agtech-radius-xl);
      padding: var(--agtech-space-6);
    }

    /* Service Titles Mobile */
    .agtech-text-4xl {
      font-size: var(--agtech-text-2xl) !important;
      margin-bottom: var(--agtech-space-3);
    }
  }

  /* Tablet Optimization */
  @media (min-width: 768px) and (max-width: 1023px) {
    .agtech-hero-critical h1 {
      font-size: var(--agtech-text-5xl) !important;
    }

    .agtech-grid.agtech-md\\:grid-cols-3 {
      grid-template-columns: 1fr;
      gap: var(--agtech-space-8);
    }
  }

  /* Desktop Enhancement */
  @media (min-width: 1024px) {
    .agtech-grid.agtech-md\\:grid-cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .agtech-hero-critical h1 {
      font-size: var(--agtech-text-6xl) !important;
    }
  }

  /* Large Desktop */
  @media (min-width: 1280px) {
    .agtech-hero-critical h1 {
      font-size: var(--agtech-text-7xl) !important;
    }

    .agtech-container {
      padding-left: var(--agtech-space-4);
      padding-right: var(--agtech-space-4);
    }
  }

  /* Footer Mobile Fixes */
  footer {
    padding-top: var(--agtech-space-12);
    padding-bottom: var(--agtech-space-12);
  }

  @media (max-width: 767px) {
    footer {
      padding-top: var(--agtech-space-8);
      padding-bottom: var(--agtech-space-8);
    }

    footer p {
      font-size: var(--agtech-text-base);
    }

    footer .agtech-text-sm {
      font-size: var(--agtech-text-xs);
    }
  }
}

/* ========================================
   🎯 UTILITY CLASS FIXES
   ======================================== */

@layer responsive-fixes {
  /* Text Alignment Utilities */
  .agtech-text-center { text-align: center; }
  .agtech-text-left { text-align: left; }
  .agtech-text-right { text-align: right; }

  /* Width Utilities */
  .agtech-w-full { width: 100%; }
  .agtech-w-auto { width: auto; }
  .agtech-max-w-4xl { max-width: 56rem; }
  .agtech-max-w-3xl { max-width: 48rem; }
  .agtech-max-w-2xl { max-width: 42rem; }

  /* Height Utilities */
  .agtech-h-full { height: 100%; }
  .agtech-h-screen { height: 100vh; }
  .agtech-h-16 { height: 4rem; }
  .agtech-h-6 { height: 1.5rem; }
  .agtech-h-5 { height: 1.25rem; }

  /* Display Utilities */
  .agtech-block { display: block; }
  .agtech-inline-block { display: inline-block; }
  .agtech-inline { display: inline; }
  .agtech-hidden { display: none; }

  /* Position Utilities */
  .agtech-relative { position: relative; }
  .agtech-absolute { position: absolute; }
  .agtech-fixed { position: fixed; }
  .agtech-sticky { position: sticky; }

  /* Positioning */
  .agtech-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
  .agtech-top-0 { top: 0; }
  .agtech-left-0 { left: 0; }
  .agtech-right-0 { right: 0; }
  .agtech-bottom-0 { bottom: 0; }
  .agtech-bottom-8 { bottom: 2rem; }
  .agtech-left-1\/2 { left: 50%; }

  /* Transform Utilities */
  .agtech-transform { transform: var(--tw-transform); }
  .agtech--translate-x-1\/2 { transform: translateX(-50%); }
  .agtech-translate-x-1\/2 { transform: translateX(50%); }

  /* Z-Index */
  .agtech-z-0 { z-index: 0; }
  .agtech-z-10 { z-index: 10; }
  .agtech-z-20 { z-index: 20; }

  /* Overflow */
  .agtech-overflow-hidden { overflow: hidden; }
  .agtech-overflow-x-hidden { overflow-x: hidden; }

  /* Pointer Events */
  .agtech-pointer-events-none { pointer-events: none; }

  /* Background Clip */
  .agtech-bg-clip-text {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  /* Text Transparent */
  .agtech-text-transparent { color: transparent; }

  /* Max Width */
  .agtech-mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  /* Mobile Responsive Utilities */
  @media (max-width: 767px) {
    .agtech-sm\\:flex-row { flex-direction: row; }
    .agtech-sm\\:flex-col { flex-direction: column; }
  }

  @media (min-width: 768px) {
    .agtech-md\\:hidden { display: none; }
    .agtech-md\\:block { display: block; }
    .agtech-md\\:flex { display: flex; }
    .agtech-md\\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .agtech-md\\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .agtech-md\\:text-xl { font-size: var(--agtech-text-xl); }
    .agtech-md\\:text-4xl { font-size: var(--agtech-text-4xl); }
    .agtech-md\\:text-6xl { font-size: var(--agtech-text-6xl); }
  }

  @media (min-width: 1024px) {
    .agtech-lg\\:flex { display: flex; }
    .agtech-lg\\:text-7xl { font-size: var(--agtech-text-7xl); }
  }
}

/* ========================================
   🎯 CRITICAL MOBILE NAVIGATION
   ======================================== */

@layer responsive-fixes {
  /* Navigation Link Styling */
  .agtech-nav-link {
    padding: var(--agtech-space-2) var(--agtech-space-1);
    border-radius: var(--agtech-radius-md);
    font-weight: var(--agtech-font-weight-medium);
    color: var(--agtech-text-primary);
    transition: all var(--agtech-duration-fast) var(--agtech-ease-out);
  }

  .agtech-nav-link:hover {
    color: var(--agtech-primary-green-500);
    background-color: oklch(0.70 0.15 140 / 0.1);
  }

  .agtech-nav-link[aria-current="page"] {
    color: var(--agtech-primary-green-500);
    font-weight: var(--agtech-font-weight-semibold);
  }

  /* Mobile Navigation Links */
  .agtech-nav-link-mobile {
    display: block;
    padding: var(--agtech-space-3) var(--agtech-space-4);
    border-radius: var(--agtech-radius-md);
    font-weight: var(--agtech-font-weight-medium);
    color: var(--agtech-text-primary);
    transition: all var(--agtech-duration-fast) var(--agtech-ease-out);
  }

  .agtech-nav-link-mobile:hover {
    background-color: var(--agtech-bg-secondary);
    color: var(--agtech-primary-green-500);
  }

  .agtech-nav-link-mobile[aria-current="page"] {
    background-color: oklch(0.70 0.15 140 / 0.1);
    color: var(--agtech-primary-green-500);
    font-weight: var(--agtech-font-weight-semibold);
  }
}