/* ===================================
   🤖 AI COPILOT STYLE GUIDE
   ===================================
   
   ⚠️  CRITICAL: READ BEFORE ADDING ANY NEW STYLES
   
   This stylesheet follows strict architectural patterns to prevent bloat.
   AI assistants MUST follow these conventions when adding new styles.
   
   📋 MANDATORY RULES FOR AI COPILOTS:
   
   1️⃣  ALWAYS USE CSS VARIABLES (NEVER HARDCODE VALUES):
       ❌ BAD:  color: #ed6d05;
       ✅ GOOD: color: var(--primary-orange);
       ❌ BAD:  margin: 1rem;
       ✅ GOOD: margin: var(--spacing-md);
   
   2️⃣  REUSE EXISTING UTILITY CLASSES FIRST:
       Before creating new styles, check for:
       • .hover-lift (for hover animations)
       • .card-base (for card components) 
       • .btn-base + .btn-primary (for buttons)
       • .transition-* classes (for animations)
       • .hero-bg-base (for hero backgrounds)
   
   3️⃣  COLOR SYSTEM - ONLY USE THESE VARIABLES:
       --primary-orange: #ed6d05    (main brand color)
       --secondary-orange: #d35917  (hover states)
       --text-primary: #333         (main text)
       --text-secondary: #6c757d    (secondary text)
       --text-light: #878787        (muted text)
       --border-light: #e9ecef      (borders/dividers)
       --background-light: #f8f9fa  (light backgrounds)
       --white: #ffffff             (pure white)
   
   4️⃣  SPACING SYSTEM - ONLY USE THESE VARIABLES:
       --spacing-xs: 0.25rem   (4px)
       --spacing-sm: 0.5rem    (8px)
       --spacing-md: 1rem      (16px)
       --spacing-lg: 1.5rem    (24px)
       --spacing-xl: 2rem      (32px)
       --spacing-xxl: 3rem     (48px)
       --spacing-xxxl: 4rem    (64px)
   
   5️⃣  TYPOGRAPHY SYSTEM:
       --font-heading: 'IBM Plex Sans', sans-serif
       --font-body: 'Open Sans', [fallbacks]
       Use h1-h6 semantic hierarchy, avoid custom font sizes
   
   6️⃣  TRANSITION SYSTEM:
       --transition-fast: 0.2s ease
       --transition-normal: 0.3s ease  (most common)
       --transition-slow: 0.5s ease
   
   7️⃣  SHADOW SYSTEM:
       --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1)    (subtle)
       --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1)    (cards)
       --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15)  (hover states)
       --shadow-xl: 0 12px 30px rgba(0, 0, 0, 0.2)  (modals/elevated)
   
   8️⃣  BORDER RADIUS SYSTEM:
       --radius-sm: 4px    (buttons, inputs)
       --radius-md: 8px    (cards, general)
       --radius-lg: 12px   (special cards)
   
   9️⃣  Z-INDEX SCALE (NEVER USE ARBITRARY VALUES):
       --z-dropdown: 999
       --z-navbar: 1000
       --z-modal: 9999
       --z-tooltip: 10000
   
   🔟  RESPONSIVE PATTERNS:
       Mobile-first approach with these breakpoints:
       • Base styles: Mobile (0-768px)
       • @media (min-width: 769px): Tablet
       • @media (min-width: 1025px): Desktop
       • @media (min-width: 1501px): Large Desktop
   
   ⚡ PERFORMANCE REQUIREMENTS:
   
   • Use existing utility classes before creating new ones
   • Avoid !important declarations (indicates poor specificity)
   • Group related styles together logically
   • Use shorthand properties where possible
   • Prefer CSS Grid/Flexbox over floats or positioning
   
   🎨 COMPONENT PATTERNS:
   
   FOR CARDS:
   Use .card-base utility class plus unique properties only
   
   FOR BUTTONS:  
   Use .btn-base and .btn-primary utilities plus unique properties only
   
   FOR HERO SECTIONS:
   Hero headings (.hero-section h1) and subtitles (.hero-subtitle) must use color: var(--white) for visibility
   
   FOR HOVER EFFECTS:
   Use .hover-lift and .hover-shadow-* utilities
   
   🚫 ANTI-PATTERNS TO AVOID:
   
   • Hardcoding colors (use CSS variables)
   • Hardcoding spacing (use spacing variables)
   • Hardcoding transitions (use transition variables)
   • Duplicate button styles
   • Inconsistent hover effects
   • Breaking the mobile-first pattern
   • Using magic numbers without variables
   
   ✅ EXAMPLE PATTERN:
   
   Always use existing variables and utility classes.
   Only add unique properties that don't exist in the system.
   Follow the established naming conventions and patterns.
   
   Remember: This system ensures visual consistency, reduces bundle size,
   and makes maintenance effortless. Every new style should feel like it
   belongs to the existing design system.
   
   🎯 FONT AWESOME ICON SYSTEM (Updated August 2025)
   
   ⚠️  MANDATORY: ALL ICONS MUST USE FA-SHARP-LIGHT
   
   CORRECT SYNTAX (Font Awesome 6+):
   ✅ <i class="fa-sharp-light fa-location-dot"></i>
   ✅ <i class="fa-sharp-light fa-truck"></i>
   ✅ <i class="fa-sharp-light fa-video"></i>
   
   INCORRECT SYNTAX (DO NOT USE):
   ❌ <i class="fa fa-map-marker"></i>
   ❌ <i class="fas fa-truck"></i>
   ❌ <i class="far fa-user"></i>
   
   ICON NAMING CONVENTION:
   - Use semantic, descriptive icon names
   - Choose industry-standard representations
   - Maintain consistency across similar services
   - Always include appropriate ARIA attributes for accessibility
   
   ACCESSIBILITY REQUIREMENTS:
   - Add aria-hidden="true" for decorative icons
   - Add appropriate aria-label for functional icons
   - Use role="img" and aria-label for meaningful icons
   
   EXAMPLE IMPLEMENTATION:
   <span class="feature-icon highlight-color">
       <i class="fa-sharp-light fa-video" aria-hidden="true"></i>
   </span>
   
   CURRENT ICONS AVAILABLE:
   Basic set: fa-location-dot, fa-truck, fa-route, fa-map-location-dot, 
   fa-router, fa-gas-pump, fa-temperature-snow, fa-steering-wheel, 
   fa-people-group, fa-truck-moving, fa-link, fa-arrow-right, fa-video,
   fa-eye, fa-shield-check, fa-cloud, fa-mobile, fa-plug, fa-user-check,
   fa-clock, fa-chart-line
   
   ⭐ RECOMMENDED ICON UPGRADES FOR ONPOINT CONNECT:
   
   IMMEDIATE REPLACEMENTS (Better Service Representation):
   • fa-router → fa-tachograph-digital     (Tachograph services - more intuitive)
   • fa-link → fa-plug                 (API integrations - shows connectivity)
   • fa-temperature-snow → fa-thermometer (Cold chain - cleaner visual)
   
   NEW SPECIALIZED ICONS ADDED:
   
   📊 COMPLIANCE & TACHOGRAPH:
   fa-tachograph-digital, fa-clipboard-check, fa-file-certificate, fa-gauge, fa-circle-check, fa-clock, fa-scale-balanced
   
   🔌 INTEGRATIONS & API:
   fa-plug, fa-code-branch, fa-network-wired, fa-puzzle-piece
   
   🚛 FLEET & ASSETS:
   fa-truck-field, fa-clipboard-list, fa-tags, fa-barcode
   
   👤 DRIVER MONITORING:
   fa-user-check, fa-eye, fa-chart-line, fa-shield-check, fa-clock
   
   ⛽ FUEL MANAGEMENT:
   fa-chart-area, fa-calculator, fa-leaf
   
   🌡️ COLD CHAIN:
   fa-thermometer, fa-snowflake, fa-warehouse
   
   📱 MOBILE & CONNECTIVITY:
   fa-mobile, fa-wifi, fa-satellite, fa-cloud
   
   📹 CAMERAS:
   fa-video, fa-camera-security, fa-record-vinyl, fa-eye, fa-shield-check
   
   ♻️ WASTE & LOGISTICS:
   fa-recycle, fa-dumpster, fa-box
   
   ICON USAGE PATTERNS:
   • Use semantic icons that match service functionality
   • Maintain consistency across similar services
   • Choose industry-standard representations over generic ones
   • Test icon recognition with target audience when possible
   
   ICON IMPLEMENTATION RULE:
   When updating HTML files, ALL icons must use fa-sharp-light prefix structure.
   Never use fa, fas, far, fab, or other legacy Font Awesome classes.
   
   MIGRATION PRIORITY:
   1. Update all existing fa/fas/far icons to fa-sharp-light
   2. Ensure consistent icon choices across similar features
   3. Add proper ARIA attributes for accessibility
   4. Test icon visibility across all themes and devices

   📸 ONPOINT CONNECT - UPDATED IMAGE SYSTEM WITH MAX-HEIGHT CONTROLS
   
   This system ensures consistent, professional image presentation with proper scaling within constrained containers.
   
   🔧 CRITICAL UPDATES FOR MAX-HEIGHT COMPATIBILITY:
   
   The height system now includes both min-height AND max-height properties to prevent layout issues.
   All images must use proper object-fit properties to scale correctly within these constraints.
   
   KEY STRUCTURE FOR IMAGE SECTIONS:
   
   1. Section with proper semantic markup:
      <section class="features-section section" role="region" aria-labelledby="unique-heading-id">
   
   2. Row with center alignment utility:
      <div class="row row-center-content">
   
   3. Image column with content centering:
      <div class="col-6 col-center-content">
          <div class="image-container image-height-lg image-mode-contain">
              <picture>
                  <source srcset="image/path/image.webp" type="image/webp">
                  <img src="image/path/image.jpg" alt="Descriptive alt text" loading="lazy" decoding="async" class="section-image">
              </picture>
          </div>
      </div>
   
   4. Content column with centering:
      <div class="col-6 col-center-content">
          <header>
              <h2 id="unique-heading-id">Section Title</h2>
              <p class="section-subtitle">Subtitle text</p>
          </header>
      </div>
   
   🎯 UPDATED IMAGE DISPLAY MODES (MANDATORY USAGE):
   
   MODE 1: CONTAIN - Show entire image, no cropping (RECOMMENDED FOR MOST CONTENT)
   - Use: .image-mode-contain
   - Best for: Screenshots, diagrams, logos, product images
   - Behavior: Scales image to fit entirely within container bounds
   - Properties: object-fit: contain; max-height: 100%;
   
   MODE 2: COVER - Fill container, crop to fit (USE SPARINGLY)
   - Use: .image-mode-cover  
   - Best for: Hero backgrounds, artistic photos where cropping is acceptable
   - Behavior: Fills entire container, may crop image
   - Properties: object-fit: cover; max-height: 100%;
   
   MODE 3: SCALE - Responsive scaling (DEFAULT - UPDATED FOR MAX-HEIGHT)
   - Use: .image-mode-scale OR no mode class
   - Best for: General content images
   - Behavior: Scales proportionally, respects max-height
   - Properties: object-fit: contain; max-height: 100%; height: auto;
   
   ⚠️  CRITICAL CHANGE: Default scaling mode now uses object-fit: contain instead of object-fit: none
   This ensures images scale properly within max-height constrained containers.
   
   UPDATED IMAGE HEIGHT UTILITIES WITH MAX-HEIGHT CONTROLS:
   
   Desktop (Default):
   - .image-height-xs: min-height: 200px; max-height: 400px;
   - .image-height-sm: min-height: 280px; max-height: 560px;  
   - .image-height-md: min-height: 380px; max-height: 700px;
   - .image-height-lg: min-height: 480px; max-height: 800px; ← STANDARD RECOMMENDATION
   - .image-height-xl: min-height: 580px; max-height: 900px;
   - .image-height-xxl: min-height: 680px; max-height: 1000px;
   
   Mobile (0-768px):
   - Automatically scales down with proportional max-height limits
   - Maintains aspect ratios and readability
   
   🚨 MANDATORY IMPLEMENTATION RULES:
   
   1. ALWAYS specify an image mode class (.image-mode-contain, .image-mode-cover, or .image-mode-scale)
   2. ALWAYS use max-height compatible properties (object-fit: contain or cover, never 'none')
   3. ALWAYS include max-height: 100% for images within constrained containers
   4. ALWAYS use object-position: center center for consistent positioning
   5. ALWAYS test images at different screen sizes to ensure proper scaling
   
   💡 BEST PRACTICE EXAMPLES:
   
   For Mobile App Screenshots (tall images):
   <div class="image-container image-height-lg image-mode-contain">
       <img src="app-screenshot.png" alt="Mobile app interface">
   </div>
   
   For Wide Dashboard Screenshots:
   <div class="image-container image-height-md image-mode-contain">  
       <img src="dashboard.jpg" alt="Dashboard overview">
   </div>
   
   For Hero/Background Images:
   <div class="image-container image-height-xl image-mode-cover">
       <img src="hero-bg.jpg" alt="Company facility">
   </div>
   
   🔍 TROUBLESHOOTING COMMON ISSUES:
   
   Issue: Image appears cropped or partially hidden
   Solution: Ensure you're using .image-mode-contain and the container has appropriate height class
   
   Issue: Image too small in container  
   Solution: Consider using a larger height class or .image-mode-cover if cropping is acceptable
   
   Issue: Inconsistent scaling across devices
   Solution: Verify object-fit and max-height properties are properly applied
   
   ✅ UPDATED IMPLEMENTATION CHECKLIST:
   
   - [ ] Image container has appropriate .image-height-* class
   - [ ] Image mode class is specified (.image-mode-contain recommended)
   - [ ] Images use object-fit: contain or cover (never 'none')  
   - [ ] max-height: 100% is applied to images in constrained containers
   - [ ] Proper semantic markup with alt text and loading attributes
   - [ ] WebP alternatives provided with picture element fallback
   - [ ] Mobile appearance verified across all height classes
   - [ ] Accessibility tested with screen readers
   
   This updated system provides precise control over image dimensions while maintaining responsive behavior and visual consistency across all devices.

/* ===================================
   📦 CONNECT PRODUCT CARDS - NO SHADOW
   ===================================
   
   Special modifier for Connect product cards in telematics.html
   Removes shadows from Connect Advanced, Onpoint Fleet, Connect OBD, and Connect Asset cards
   to create a cleaner, more integrated appearance with the page content.
   ===================================*/

.card-no-shadow {
    box-shadow: none !important;
}

.card-no-shadow:hover {
    box-shadow: none !important;
}