/* Landing Page - Responsive Optimizations & Brand Colors */


/* ========================================
   BRAND COLORS
   ======================================== */
:root {
    --speedkdo-orange: #f05713;
    --speedkdo-blue: #0c285d;
    --speedkdo-hover-transition: all 0.3s ease;
}

/* ========================================
   BOUTONS SPEEDKDO - Orange -> Bleu
   ======================================== */
.btn-speedkdo {
    background-color: var(--speedkdo-orange);
    color: white;
    transition: var(--speedkdo-hover-transition);
}

.btn-speedkdo:hover {
    background-color: var(--speedkdo-blue);
    color: white;
}

/* ========================================
   HEADER FIXED COMPENSATION
   ======================================== */
body {
    scroll-padding-top: 100px;
}

/* ========================================
   RESPONSIVE OPTIMIZATIONS
   ======================================== */

/* Mobile First - Extra Small Devices */
@media (max-width: 640px) {
    /* Hero Title */
    .hero-title {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }
    
    /* Section Titles — scoped to landing sections only */
    section > div > div > h2,
    section > div > h2 {
        font-size: 1.875rem !important;
    }
    
    /* Spacing Adjustments */
    section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    /* Grid Columns — scoped to content grids only */
    section > div > .grid {
        gap: 1.5rem !important;
    }
    
    /* Images — only fallback, no forced height */
    img:not([class*="h-"]):not([class*="object-"]) {
        max-width: 100%;
        height: auto;
    }
    
    /* Buttons */
    .btn-speedkdo {
        width: 100%;
        justify-content: center;
    }
    
    /* Cards */
    .card {
        padding: 1.5rem !important;
    }
}

/* Tablets - Small */
@media (min-width: 641px) and (max-width: 768px) {
    .hero-title {
        font-size: 3rem !important;
    }
    
    h2 {
        font-size: 2.25rem !important;
    }
    
    section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

/* Tablets - Medium */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-title {
        font-size: 3.5rem !important;
    }
    
    h2 {
        font-size: 2.5rem !important;
    }
    
    /* 2-column grids */
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Desktop - Large */
@media (min-width: 1025px) {
    /* Ensure full width sections */
    section > div {
        width: 100%;
    }
}

/* ========================================
   SPACING CONSISTENCY
   ======================================== */
section {
    scroll-margin-top: 80px;
}

/* Equal spacing between all sections */
section + section {
    margin-top: 0;
}

/* ========================================
   FULLSCREEN SECTIONS — desktop only via lg:min-h-screen
   (Tailwind handles min-h-screen natively; no override needed)
   ======================================== */

/* ========================================
   IMAGES RESPONSIVE
   ======================================== */
img:not([class*="h-"]):not([class*="object-"]) {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Slider Images */
#hero-slider img,
.card img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Partner Logos */
.partner-logo {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.partner-logo:hover {
    filter: grayscale(0%);
}

/* ========================================
   FORM RESPONSIVE
   ======================================== */
@media (max-width: 640px) {
    form .grid {
        grid-template-columns: 1fr !important;
    }
    
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* ========================================
   FOOTER RESPONSIVE
   ======================================== */
@media (max-width: 639px) {
    footer .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* ========================================
   UTILITIES
   ======================================== */
.text-balance {
    text-wrap: balance;
}

.smooth-scroll {
    scroll-behavior: smooth;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}