/* Responsive CSS for Getallfivestars.com */

/* Mobile-first responsive breakpoints */

/* Extra small devices (phones, 320px and up) */
@media (max-width: 479px) {
    /* Hero section mobile adjustments */
    .hero-title {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
        padding: 0 0.5rem;
    }
    
    .hero-cta {
        font-size: 1rem !important;
        padding: 0.875rem 1.5rem !important;
    }
    
    /* Navigation mobile */
    .mobile-nav-button {
        padding: 0.5rem;
    }
    
    /* Stats grid mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* Feature cards mobile */
    .feature-card {
        padding: 1.25rem !important;
    }
    
    .feature-icon {
        width: 3rem !important;
        height: 3rem !important;
    }
    
    /* Before/after demo mobile */
    .demo-container {
        padding: 1rem !important;
    }
    
    .demo-url {
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
    }
    
    /* Modal mobile */
    .modal-content {
        margin: 1rem !important;
        padding: 1.25rem !important;
    }
    
    /* Form inputs mobile */
    .form-input {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
    
    /* Button mobile */
    .btn-mobile {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
    }
}

/* Small devices (landscape phones, 480px and up) */
@media (min-width: 480px) and (max-width: 767px) {
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .feature-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
    }
    
    .testimonial-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-title {
        font-size: 3.75rem;
    }
    
    .hero-subtitle {
        font-size: 1.375rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
    
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .problem-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .solution-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .hero-title {
        font-size: 4.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.5rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
    
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    .testimonial-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    .problem-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* Navigation responsive behavior */
@media (max-width: 767px) {
    .desktop-nav {
        display: none !important;
    }
    
    .mobile-nav {
        display: block !important;
    }
    
    .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 50;
    }
    
    .mobile-menu.hidden {
        display: none;
    }
    
    .mobile-menu-item {
        display: block;
        padding: 0.75rem 1rem;
        text-decoration: none;
        color: #4b5563;
        border-bottom: 1px solid #f3f4f6;
        transition: background-color 0.2s;
    }
    
    .mobile-menu-item:hover {
        background-color: #f9fafb;
        color: #f59e0b;
    }
    
    .mobile-cta-button {
        margin: 1rem;
        width: calc(100% - 2rem);
    }
}

@media (min-width: 768px) {
    .desktop-nav {
        display: flex !important;
    }
    
    .mobile-nav {
        display: none !important;
    }
}

/* Section padding responsive */
@media (max-width: 479px) {
    .section-py {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .section-px {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .section-py {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    .section-px {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .section-py {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    
    .section-px {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Typography responsive scaling */
@media (max-width: 479px) {
    .text-4xl {
        font-size: 2rem !important;
    }
    
    .text-3xl {
        font-size: 1.75rem !important;
    }
    
    .text-2xl {
        font-size: 1.5rem !important;
    }
    
    .text-xl {
        font-size: 1.125rem !important;
    }
    
    .text-lg {
        font-size: 1rem !important;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .text-6xl {
        font-size: 3.5rem;
    }
    
    .text-4xl {
        font-size: 2.25rem;
    }
    
    .text-3xl {
        font-size: 1.875rem;
    }
}

/* Card and component responsive behavior */
@media (max-width: 767px) {
    .card-responsive {
        margin-bottom: 1.5rem;
    }
    
    .card-padding {
        padding: 1.5rem !important;
    }
    
    .icon-size {
        width: 3rem !important;
        height: 3rem !important;
    }
    
    .icon-text {
        font-size: 1.25rem !important;
    }
}

@media (min-width: 768px) {
    .card-padding {
        padding: 2rem;
    }
    
    .icon-size {
        width: 4rem;
        height: 4rem;
    }
    
    .icon-text {
        font-size: 1.5rem;
    }
}

/* Modal responsive behavior */
@media (max-width: 479px) {
    .modal-responsive {
        margin: 0.5rem !important;
        padding: 1.25rem !important;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-title {
        font-size: 1.5rem !important;
    }
    
    .modal-form {
        gap: 1rem !important;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .modal-responsive {
        margin: 1rem;
        padding: 1.5rem;
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* Button responsive sizing */
@media (max-width: 479px) {
    .btn-hero {
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
    }
    
    .btn-large {
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .btn-medium {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
}

@media (min-width: 480px) {
    .btn-hero {
        padding: 1rem 3rem;
        font-size: 1.125rem;
    }
    
    .btn-large {
        padding: 1rem 2rem;
        font-size: 1.125rem;
    }
    
    .btn-medium {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

/* Spacing responsive utilities */
@media (max-width: 479px) {
    .space-y-mobile > * + * {
        margin-top: 1rem !important;
    }
    
    .gap-mobile {
        gap: 1rem !important;
    }
    
    .mb-mobile {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-mobile {
        margin-top: 1.5rem !important;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .space-y-tablet > * + * {
        margin-top: 1.5rem;
    }
    
    .gap-tablet {
        gap: 1.5rem;
    }
}

/* Image and media responsive */
@media (max-width: 767px) {
    .img-responsive {
        width: 100%;
        height: auto;
    }
    
    .qr-code-demo {
        width: 3rem !important;
        height: 3rem !important;
    }
}

@media (min-width: 768px) {
    .qr-code-demo {
        width: 4rem;
        height: 4rem;
    }
}

/* Container responsive max-widths */
@media (min-width: 640px) {
    .container-sm {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container-md {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container-lg {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container-xl {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container-2xl {
        max-width: 1536px;
    }
}

/* Print responsive */
@media print {
    .print-hidden {
        display: none !important;
    }
    
    .print-visible {
        display: block !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1 {
        font-size: 24pt;
    }
    
    h2 {
        font-size: 20pt;
    }
    
    h3 {
        font-size: 16pt;
    }
}