/* ===== RESPONSIVE DESIGN ===== */

/* Extra Large devices (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-title {
        font-size: 4rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
        padding: 0 15px;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-stats {
        gap: 40px;
    }
    
    .process-steps {
        gap: 30px;
    }
    
    .faq-quick {
        gap: 30px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    /* Header adjustments */
    .header-content {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
    }
    
    .nav ul {
        gap: 20px;
    }
    
    /* Hero section */
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .hero-stats {
        gap: 30px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    /* Process section */
    .process-steps {
        flex-direction: column;
        gap: 40px;
    }
    
    .step::after {
        display: none;
    }
    
    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    /* Form adjustments */
    .form-container {
        padding: 30px;
    }
    
    .form-actions {
        flex-direction: column;
        gap: 15px;
    }
    
    /* FAQ quick section */
    .faq-quick {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Guide styles */
    .guide-section {
        padding: 20px;
    }
    
    .step-detailed {
        flex-direction: column;
        text-align: center;
    }
    
    .step-detailed .step-number {
        margin: 0 auto 20px;
    }
    
    /* Spec styles */
    .table-of-contents ol {
        columns: 1;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767px) {
    .container {
        max-width: 540px;
        padding: 0 15px;
    }
    
    /* Typography adjustments */
    .page-header h1 {
        font-size: 2rem;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    /* Header */
    .header-content {
        padding: 15px 0;
    }
    
    .logo h1 {
        font-size: 1.2rem;
    }
    
    .nav ul {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }
    
    /* Hero section */
    .hero-section {
        min-height: 80vh;
        padding: 60px 0;
    }
    
    .hero-title {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 30px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .stat-number {
        font-size: 1.8rem;
    }
    
    /* Buttons */
    .hero-actions .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .btn-large {
        padding: 14px 28px;
        font-size: 1rem;
    }
    
    .btn-xl {
        padding: 16px 32px;
        font-size: 1.1rem;
    }
    
    /* Sections */
    .section {
        padding: 40px 0;
    }
    
    .features-section,
    .process-section,
    .clubs-preview-section,
    .cta-section,
    .faq-section {
        padding: 60px 0;
    }
    
    /* Features grid */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .feature-card {
        padding: 30px 20px;
    }
    
    /* Clubs grid */
    .clubs-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* CTA section */
    .cta-content h2 {
        font-size: 2rem;
    }
    
    .cta-features {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    
    /* Form */
    .form-container {
        padding: 20px;
        margin: 0 10px;
    }
    
    .radio-group,
    .checkbox-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .result-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* Legal documents */
    .legal-document {
        padding: 0 10px;
    }
    
    .article {
        padding: 15px;
    }
    
    /* Contact form */
    .pre-contact-section {
        padding: 20px;
        margin: 0 10px 30px;
    }
    
    .support-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-details {
        grid-template-columns: 1fr;
    }
    
    /* Guide sections */
    .checklist-item {
        flex-direction: column;
        text-align: left;
    }
    
    .checklist-item .check-icon {
        margin-bottom: 10px;
    }
    
    /* Spec document */
    .spec-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .perf-grid {
        grid-template-columns: 1fr;
    }
    
    .tech-categories {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    .container {
        padding: 0 10px;
    }
    
    /* Typography */
    .page-header h1 {
        font-size: 1.8rem;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .cta-content h2 {
        font-size: 1.8rem;
    }
    
    /* Header - mobile menu style */
    .header-content {
        align-items: flex-start;
    }
    
    .nav {
        width: 100%;
    }
    
    .nav ul {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    
    .nav li {
        width: 100%;
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px solid #ECF0F1;
    }
    
    /* Logo */
    .logo {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
    
    .logo img {
        width: 35px;
        height: 35px;
    }
    
    .logo h1 {
        font-size: 1.1rem;
    }
    
    /* Hero adjustments */
    .hero-section {
        min-height: 70vh;
        padding: 40px 0;
    }
    
    .hero-content {
        padding: 0 10px;
    }
    
    /* Form adjustments */
    .form-container {
        padding: 15px;
        margin: 0 5px;
    }
    
    .question input,
    .question select,
    .question textarea {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
    
    /* Button adjustments */
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .btn-large {
        padding: 12px 24px;
        font-size: 0.95rem;
    }
    
    /* Card adjustments */
    .feature-card {
        padding: 25px 15px;
    }
    
    .feature-icon {
        width: 60px;
        height: 60px;
    }
    
    .feature-icon img {
        width: 30px;
        height: 30px;
    }
    
    /* Step adjustments */
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    /* Legal and guide documents */
    .legal-section,
    .guide-section,
    .spec-section {
        padding: 15px;
    }
    
    .article {
        padding: 12px;
    }
    
    /* Table of contents for small screens */
    .table-of-contents {
        padding: 20px;
    }
    
    /* Contact support grid */
    .support-info-section .support-grid {
        gap: 20px;
    }
    
    .support-card {
        padding: 15px;
    }
    
    /* FAQ adjustments */
    .faq-question {
        padding: 15px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .faq-toggle {
        align-self: flex-end;
    }
}

/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: 100vh;
        padding: 20px 0;
    }
    
    .hero-title {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    
    .hero-stats {
        margin-top: 20px;
    }
}

/* High density displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .feature-icon img,
    .logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    .header,
    .footer,
    .hero-section,
    .cta-section,
    .loading-overlay,
    .btn,
    .nav,
    .language-switcher {
        display: none !important;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .section {
        padding: 20px 0;
    }
    
    .page-header {
        background: none;
        color: #000;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    .legal-document,
    .guide-section,
    .spec-section {
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-section,
    .feature-card,
    .club-card,
    .btn {
        transition: none;
        animation: none;
    }
    
    .spinner {
        animation: none;
        border: 5px solid #2ECC71;
    }
    
    .progress {
        transition: none;
    }
}

/* Dark mode support (for future implementation) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles would go here when implemented */
    /* This is prepared for future dark mode feature */
}

/* Container query support for modern browsers */
@supports (container-type: inline-size) {
    .feature-card {
        container-type: inline-size;
    }
    
    @container (max-width: 300px) {
        .feature-card {
            padding: 20px 15px;
        }
        
        .feature-card h3 {
            font-size: 1.2rem;
        }
    }
}

/* Grid support fallback */
@supports not (display: grid) {
    .features-grid,
    .clubs-grid,
    .metrics-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .feature-card,
    .club-card,
    .metric-item {
        flex: 1;
        min-width: 280px;
    }
}

/* Flexbox fallback for older browsers */
@supports not (display: flex) {
    .header-content,
    .hero-actions,
    .hero-stats,
    .process-steps,
    .footer-content {
        display: block;
        text-align: center;
    }
    
    .header-content > * {
        display: inline-block;
        vertical-align: middle;
        margin: 10px;
    }
}