/* ==========================================================================
   CM AGRO INDIA - GLOBAL EXPORT PORTAL STYLESHEET (styles.css)
   Fully Dynamic Responsive Design System with Comprehensive Media Queries
   Screen Resolutions Supported: Mobile (Phones), Tablet (iPads), Desktop & Ultra-Wide
   Version: 11.1.2610.01 | Tag: cmagro_master_11.1.2610.01
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CORE DESIGN TOKENS & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --color-primary: #15803d;
  --color-primary-container: #166534;
  --color-on-primary: #ffffff;
  --color-tertiary: #047857;
  --color-tertiary-container: #064e3b;
  --color-on-tertiary: #ffffff;
  --color-surface: #f8fafc;
  --color-surface-low: #f1f5f9;
  --color-surface-container: #e2e8f0;
  --color-surface-high: #cbd5e1;
  --color-surface-lowest: #ffffff;
  --color-on-surface: #0f172a;
  --color-on-surface-variant: #475569;
  --color-outline-variant: #cbd5e1;

  --font-family-headline: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --header-height-mobile: 64px;
  --header-height-tablet: 72px;
  --header-height-desktop: 80px;

  --topbar-height-mobile: 36px;
  --topbar-height-desktop: 28px;
  
  --container-max-width: 1280px;
}

/* --------------------------------------------------------------------------
   2. BASE RESETS & NORMALIZATION
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-family-body);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide scrollbars cleanly across browsers */
::-webkit-scrollbar {
  display: none;
}
html {
  scrollbar-width: none;
}

main > :first-child {
  margin-top: 0 !important;
}

main > :last-child {
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   3. CUSTOM INTERACTIVE & FORM CONTROLS
   -------------------------------------------------------------------------- */
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%2315803d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
  padding-right: 2.5rem;
}

.slide-item {
  transition: opacity 700ms ease-in-out;
}

/* --------------------------------------------------------------------------
   4. DYNAMIC RESPONSIVE BREAKPOINTS (Mobile, iPad/Tablet, Desktop & Ultra-Wide)
   -------------------------------------------------------------------------- */

/* ==========================================
   A. MOBILE PHONES (Up to 639px)
   ========================================== */
@media (max-width: 639px) {
  body {
    font-size: 14px;
  }

  /* Touch Target & Form Input Standards */
  input, select, textarea, button {
    min-height: 48px !important;
    font-size: 15px !important;
  }

  /* Header & Top Bar Mobile Adjustments */
  header .h-20 {
    height: var(--header-height-mobile) !important;
  }

  header h1, header span.font-headline-sm {
    font-size: 15px !important;
  }

  .top-announcement-bar {
    font-size: 10px !important;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* Mobile Drawer Menu */
  #mobileMenu {
    padding: 1rem !important;
  }

  #mobileMenu a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Hero Section Stack */
  h1 {
    font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
    line-height: 1.25 !important;
  }

  p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Button Stacks */
  .hero-action-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }

  .hero-action-buttons a,
  .hero-action-buttons button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Grid Layout Fallbacks to 1-Column */
  #export-rfq-form .grid,
  .product-catalog-grid,
  .spec-grid-container {
    grid-template-columns: 1fr !important;
  }

  /* Slideshow Mobile Aspect Ratio */
  #supplyChainSlider .aspect-\[16\/9\] {
    aspect-ratio: 4 / 3 !important;
    max-height: 320px !important;
  }

  /* Footer Stacked Layout */
  footer {
    text-align: center;
  }

  footer .flex-col-mobile {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* ==========================================
   B. IPADS & TABLETS (640px to 1023px)
   ========================================== */
@media (min-width: 640px) and (max-width: 1023px) {
  body {
    font-size: 15px;
  }

  /* Header Height for Tablets */
  header .h-20 {
    height: var(--header-height-tablet) !important;
  }

  /* 2-Column Responsive Grids for Products, Features & Forms */
  .grid-cols-2-tablet,
  .product-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }

  /* RFQ Form Grid 2-Per-Line */
  #export-rfq-form .grid-cols-1.sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Tablet Hero Adjustments */
  h1 {
    font-size: clamp(2.25rem, 4vw, 2.85rem) !important;
    line-height: 1.2 !important;
  }

  /* Slideshow Tablet Aspect Ratio */
  #supplyChainSlider .aspect-\[16\/9\] {
    aspect-ratio: 16 / 9 !important;
    max-height: 440px !important;
  }

  /* Footer 2-Column Layout */
  footer .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==========================================
   C. DESKTOPS & LAPTOPS (1024px to 1279px)
   ========================================== */
@media (min-width: 1024px) {
  header .h-20 {
    height: var(--header-height-desktop) !important;
  }

  /* Header Sticky Transition */
  header {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  /* Hero Display Typography */
  h1 {
    font-size: 3.25rem !important;
    line-height: 1.15 !important;
  }

  /* Slideshow Desktop Ultra-Wide Aspect Ratio */
  #supplyChainSlider .aspect-\[16\/9\] {
    aspect-ratio: 21 / 9 !important;
    max-height: 520px !important;
  }

  /* 4-Column Product Catalog Display Grid */
  .product-catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }

  /* RFQ Form Split Layout 5:7 */
  .rfq-container-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
}

/* ==========================================
   D. LARGE MONITORS & ULTRA-WIDE (1280px+)
   ========================================== */
@media (min-width: 1280px) {
  .max-w-container-max {
    max-width: var(--container-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --------------------------------------------------------------------------
   5. ACCESSIBILITY & PRINT STYLES
   -------------------------------------------------------------------------- */
@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;
  }
}

@media print {
  header, footer, #mobileMenuBtn, .top-announcement-bar {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
}