/**
 * Mobile Responsiveness Fixes
 * OOTI Marketing Website
 * Created: February 2026
 * 
 * This file contains CSS fixes for mobile responsiveness issues
 * identified during the mobile audit. It's loaded after the main
 * Webflow CSS to override specific styles.
 */

/* ==========================================================================
   1. CHAT WIDGET CONTENT OVERLAP FIX
   Prevents the floating chat widget from overlapping page content
   ========================================================================== */

@media screen and (max-width: 767px) {
  /* Add bottom padding to main content areas to prevent chat widget overlap */
  .main-wrapper,
  .page-wrapper,
  body > div:first-child {
    padding-bottom: 80px;
  }
  
  /* Ensure footer has enough bottom margin */
  .footer-section,
  .footer,
  footer,
  .footer-wrap {
    padding-bottom: 80px;
  }
  
  /* Content sections that might get overlapped */
  .section,
  .hero-section,
  .cta-section {
    position: relative;
    z-index: 1;
  }
}

/* ==========================================================================
   2. CAROUSEL/SLIDER IMPROVEMENTS
   Better horizontal scrolling for feature cards on mobile
   ========================================================================== */

@media screen and (max-width: 767px) {
  /* Improve horizontal scroll containers */
  .slider-wrapper,
  .carousel-container,
  .w-slider-mask {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0 16px;
  }
  
  /* Ensure cards don't get truncated */
  .slider-card,
  .feature-card,
  .w-slide {
    min-width: 280px;
    scroll-snap-align: start;
    flex-shrink: 0;
    margin-right: 16px;
  }
  
  /* Fix for Webflow slider dots */
  .w-slider-nav {
    padding-top: 16px;
  }
}

/* ==========================================================================
   3. CHECKOUT FORM - ADDRESS FIELDS STACKING
   Stack address fields vertically on small screens
   ========================================================================== */

@media screen and (max-width: 479px) {
  /* Stack city/state/zip fields vertically */
  .w-commerce-commercecheckoutrow,
  .checkout-row,
  .address-row {
    flex-direction: column !important;
    gap: 16px;
  }
  
  /* Make each address field full width */
  .w-commerce-commercecheckoutcity,
  .w-commerce-commercecheckoutstateprovince,
  .w-commerce-commercecheckoutzippostalcode,
  .checkout-city,
  .checkout-state,
  .checkout-zip {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  
  /* Improve form field sizing on mobile */
  .w-commerce-commercecheckoutemailinput,
  .w-commerce-commercecheckoutshippingfullname,
  .w-commerce-commercecheckoutshippingstreetaddress,
  .w-commerce-commercecheckoutshippingstreetaddressoptional,
  .w-input,
  .w-select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 12px 16px;
    min-height: 48px;
  }
}

/* ==========================================================================
   4. FOOTER LAYOUT OPTIMIZATION
   Improved footer layout for mobile screens
   ========================================================================== */

@media screen and (max-width: 479px) {
  /* Stack footer columns vertically on very small screens */
  .footer-wrapper,
  .footer-grid,
  .footer-columns-wrap {
    flex-direction: column;
    gap: 32px;
  }
  
  /* Center footer content on mobile */
  .footer-column,
  .footer-link-wrapper {
    width: 100%;
    text-align: center;
  }
  
  /* Footer links spacing */
  .footer-link {
    padding: 8px 0;
    display: block;
  }
  
  /* Footer logo centering */
  .footer-logo-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
  }
  
  /* Social icons centering */
  .social-icons-wrapper,
  .footer-social {
    justify-content: center;
    display: flex;
    gap: 16px;
  }
}

/* ==========================================================================
   5. MOBILE NAVIGATION FIXES
   Ensure all menu items are visible and properly styled
   ========================================================================== */

@media screen and (max-width: 991px) {
  /* Mobile menu container - full width overlay style */
  .w-nav-menu {
    background-color: #ffffff;
    padding: 24px 20px;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 8px 32px rgba(40, 40, 118, 0.12);
    border-top: 1px solid #f0f0f5;
  }
  
  /* Dropdown items in mobile menu */
  .dropdown,
  .w-dropdown {
    width: 100%;
    border-bottom: 1px solid #f0f0f5;
  }
  
  .dropdown:last-of-type,
  .w-dropdown:last-of-type {
    border-bottom: none;
  }
  
  .dropdown-toggle,
  .w-dropdown-toggle {
    padding: 16px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    font-weight: 500;
    color: #282876;
    transition: color 0.2s ease;
  }
  
  .dropdown-toggle:hover,
  .w-dropdown-toggle:hover {
    color: #4040ff;
  }
  
  /* Dropdown arrow icon styling */
  .w-icon-dropdown-toggle {
    color: #282876;
    font-size: 12px;
    margin-left: auto;
    transition: transform 0.2s ease;
  }
  
  .w-dropdown.w--open .w-icon-dropdown-toggle {
    transform: rotate(180deg);
  }
  
  /* Mobile nav links */
  .nav-link,
  .w-nav-link {
    padding: 16px 0;
    font-size: 17px;
    font-weight: 500;
    color: #282876;
    border-bottom: 1px solid #f0f0f5;
  }
  
  /* Sign in / Login link - secondary style */
  .sign-in-button,
  a[href*="login"] {
    color: #4040ff !important;
    font-weight: 500;
    text-align: center;
    padding: 16px 0;
    margin-top: 8px;
  }
  
  /* Mobile nav CTA buttons - prominent style */
  .nav-button,
  .button.nav,
  .book-a-demo-button,
  .button-37 {
    width: 100%;
    text-align: center;
    margin-top: 16px;
    padding: 16px 24px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
  }
  
  /* Primary CTA button (Book a demo) */
  .book-a-demo-button,
  .button-37 {
    background-color: #282876;
    color: #ffffff !important;
    border: none;
  }
  
  /* Secondary button (S'inscrire/Sign up) */
  .button.nav-mobile {
    background-color: transparent;
    color: #282876 !important;
    border: 2px solid #282876;
    margin-top: 12px;
  }
  
  /* Dropdown submenu styling */
  .dropdown-list,
  .w-dropdown-list {
    background-color: #f8f8fc;
    border-radius: 12px;
    margin: 8px 0;
    padding: 12px;
  }
  
  .navigation-link-block {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    background-color: #ffffff;
    transition: background-color 0.2s ease;
  }
  
  .navigation-link-block:hover {
    background-color: #f0f0ff;
  }
  
  .navigation-link-block:last-child {
    margin-bottom: 0;
  }
  
  /* Hide desktop-only elements in mobile menu */
  .more-templates-link {
    display: none;
  }
}

/* ==========================================================================
   6. TYPOGRAPHY IMPROVEMENTS FOR MOBILE
   Ensure text is readable on small screens
   ========================================================================== */

@media screen and (max-width: 479px) {
  /* Minimum font size to prevent readability issues */
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  
  /* Heading sizes for mobile */
  h1, .heading-1 {
    font-size: 28px;
    line-height: 1.2;
  }
  
  h2, .heading-2 {
    font-size: 24px;
    line-height: 1.25;
  }
  
  h3, .heading-3 {
    font-size: 20px;
    line-height: 1.3;
  }
  
  /* Paragraph spacing */
  p {
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   7. TOUCH TARGET SIZE IMPROVEMENTS
   Ensure buttons and links meet minimum 44x44px touch targets
   ========================================================================== */

@media screen and (max-width: 767px) {
  /* Buttons */
  .button,
  .w-button,
  button,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
  }
  
  /* Links in navigation and lists */
  .nav-link,
  .footer-link,
  .dropdown-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  /* Icon buttons and social links */
  .social-link,
  .icon-button {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   8. IMAGE AND MEDIA RESPONSIVENESS
   Ensure images scale properly on mobile
   ========================================================================== */

@media screen and (max-width: 767px) {
  /* Ensure images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Video embeds */
  .w-embed-youtubevideo,
  .video-wrapper,
  iframe {
    max-width: 100%;
  }
  
  /* Hero images */
  .hero-image,
  .hero-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ==========================================================================
   9. DATA VISUALIZATION / CHARTS ON MOBILE
   Improve readability of charts and graphs
   ========================================================================== */

@media screen and (max-width: 479px) {
  /* Allow horizontal scroll for wide charts */
  .chart-wrapper,
  .graph-container,
  .timeline-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  
  /* Minimum width for chart content */
  .chart-content,
  .gantt-chart,
  .timeline-content {
    min-width: 600px;
  }
}

/* ==========================================================================
   10. PRICING TABLE MOBILE OPTIMIZATION
   Ensure pricing comparison works on mobile
   ========================================================================== */

@media screen and (max-width: 479px) {
  /* Pricing cards stacking */
  .pricing-cards-wrapper,
  .pricing-comparison {
    flex-direction: column;
    gap: 24px;
  }
  
  /* Full width pricing cards */
  .pricing-card,
  .plan-card {
    width: 100%;
    max-width: 100%;
  }
  
  /* Pricing table horizontal scroll if needed */
  .pricing-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   11. SPACING AND PADDING ADJUSTMENTS
   Reduce excessive whitespace on mobile
   ========================================================================== */

@media screen and (max-width: 767px) {
  /* Section padding */
  .section,
  section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  
  /* Container padding */
  .container,
  .wrapper,
  .w-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media screen and (max-width: 479px) {
  /* Further reduce section padding on very small screens */
  .section,
  section {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  
  /* Hero sections can have slightly more padding */
  .hero-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* ==========================================================================
   12. COOKIE CONSENT BANNER FIXES
   Ensure cookie banner doesn't conflict with chat widget
   ========================================================================== */

@media screen and (max-width: 767px) {
  /* Cookie consent styling */
  .cookie-consent,
  .cookie-banner,
  [class*="cookie"] {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 50vh;
    overflow-y: auto;
    z-index: 9999;
  }
  
  /* Ensure cookie buttons are touch-friendly */
  .cookie-consent button,
  .cookie-banner button {
    min-height: 44px;
    padding: 12px 24px;
  }
}

/* ==========================================================================
   IMAGE ASPECT RATIO PRESERVATION
   Prevents image distortion by maintaining natural aspect ratios
   ========================================================================== */

/* Preserve aspect ratio for all images with width/height attributes */
img[width][height] {
  height: auto;
  max-width: 100%;
}

/* Use object-fit for images in containers that might distort them */
.logo-image,
.logo-carousel-item img,
.client-logo img,
.partner-logo img {
  object-fit: contain;
  aspect-ratio: auto;
}

/* Product screenshots and feature images */
.feature-image,
.product-screenshot,
.screenshot-image,
.more-templates-link-image {
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

/* Team member and testimonial photos */
.team-photo,
.testimonial-photo,
.avatar-image {
  object-fit: cover;
  aspect-ratio: 1;
}

/* Ensure responsive images don't stretch */
img {
  max-width: 100%;
}

/* Fix for images inside flex containers */
.w-layout-grid img,
.grid img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Slider/carousel images */
.w-slider img,
.slider img {
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

/* Background images in containers */
.bg-image-container,
.hero-bg {
  background-size: cover;
  background-position: center;
}

@media screen and (max-width: 767px) {
  /* Mobile-specific aspect ratio fixes */
  .logo-image,
  .client-logo img {
    max-height: 60px;
    width: auto;
  }
  
  .feature-image,
  .product-screenshot {
    max-height: 300px;
    width: auto;
    margin: 0 auto;
  }
}