/* 
Global Responsive Styles for domain.com 
This file ensures consistency across all device sizes
*/

/* Base responsive typography */
html {
    font-size: 16px;
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
}

/* Universal container padding */
.container {
    box-sizing: border-box;
}

/* Fluid typography with clamp */
h1 {
    font-size: clamp(1.8rem, 5vw, 4rem);
}

h2 {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

h3 {
    font-size: clamp(1.2rem, 3vw, 2rem);
}

p {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
}

/* Ensure consistent padding on all sections */
section {
    padding: clamp(40px, 8vh, 100px) 0;
}

/* Buttons responsive size */
.btn {
    padding: clamp(10px, 2vw, 14px) clamp(20px, 4vw, 28px);
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
}

/* Fix for all form elements to be touch-friendly */
input,
select,
textarea,
button {
    font-size: 16px; /* Prevents iOS zoom */
    max-width: 100%;
}

/* Grid gap consistency */
.services-grid,
.benefits-grid,
.pricing-grid,
.testimonials-container {
    gap: clamp(15px, 3vw, 30px);
}

/* Images and media */
img {
    max-width: 100%;
    height: auto;
}

/* Better touch targets on mobile */
@media (max-width: 768px) {
    .btn,
    nav ul li a,
    .faq-question,
    .form-control {
        min-height: 44px; /* Apple's recommended minimum touch target size */
    }
    
    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Prevent page overflow */
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Fix position sticky on iOS */
header {
    position: fixed;
    -webkit-backface-visibility: hidden;
}

/* Fix for iOS momentum scrolling */
body,
.testimonials-container,
nav {
    -webkit-overflow-scrolling: touch;
}

/* Safari input fix */
input {
    -webkit-appearance: none;
    border-radius: var(--border-radius);
}