/* =========================================
   Mobile-First & Enrollment Optimization
   Super Mobile-Friendly + Crystal Clear CTAs
   ========================================= */

/* ========================================
   ENROLLMENT CTA ENHANCEMENTS
   ======================================== */

/* Sticky Enrollment Button (Mobile Only) */
.sticky-enroll-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--primary-green);
    padding: 1rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    animation: slideUpFade 0.3s ease;
}

@keyframes slideUpFade {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .sticky-enroll-mobile {
        display: block;
    }
}

.sticky-enroll-mobile .btn {
    width: 100%;
    padding: 1.25rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    background: var(--black);
    color: var(--primary-green);
    border: none;
    border-radius: 8px;
    text-align: center;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sticky-enroll-mobile .btn:active {
    transform: scale(0.98);
}

/* Large Enrollment CTAs */
.enroll-cta-large {
    background: var(--primary-green);
    color: var(--black);
    padding: 1.5rem 3rem;
    font-size: 1.25rem;
    font-weight: 600;
    border-radius: 12px;
    text-align: center;
    display: inline-block;
    box-shadow: 0 4px 16px rgba(0, 255, 0, 0.3);
    transition: all 0.2s ease;
    min-width: 280px;
    min-height: 56px;
    line-height: 1.4;
}

.enroll-cta-large:hover {
    background: var(--dark-green);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 255, 0, 0.4);
}

.enroll-cta-large:active {
    transform: translateY(0);
}

/* Mobile: Even BIGGER CTAs */
@media (max-width: 768px) {
    .enroll-cta-large {
        width: 100%;
        padding: 1.75rem 2rem;
        font-size: 1.375rem;
        min-height: 64px;
    }
    
    .btn-primary,
    .btn-secondary {
        min-height: 56px;
        padding: 1.25rem 2rem;
        font-size: 1.125rem;
    }
    
    .btn-large {
        min-height: 64px;
        padding: 1.5rem 2.5rem;
        font-size: 1.25rem;
    }
}

/* Enrollment Sections - Make them POP */
.cta-section {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    padding: 4rem 0;
}

.cta-section h2 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    margin-bottom: 1.5rem;
}

.cta-boxes {
    margin-top: 3rem;
}

.cta-box {
    background: rgba(0, 255, 0, 0.05);
    border: 2px solid rgba(0, 255, 0, 0.2);
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
}

.cta-box .btn {
    width: 100%;
    margin-top: 1rem;
}

/* ========================================
   MOBILE OPTIMIZATION
   ======================================== */

/* Larger Touch Targets (Minimum 44x44px) */
@media (max-width: 768px) {
    /* All clickable elements */
    a, button, .btn, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Navigation links */
    .nav-menu a {
        padding: 1rem 1.5rem;
        font-size: 1.125rem;
    }
    
    /* Phone link in top bar */
    .phone-link {
        padding: 0.5rem 1rem;
        font-size: 1.125rem;
    }
    
    /* Feature cards - make them easier to tap */
    .feature-card {
        padding: 2rem 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .feature-link {
        display: block;
        padding: 1rem;
        margin-top: 1rem;
        text-align: center;
        background: rgba(0, 255, 0, 0.1);
        border-radius: 8px;
    }
    
    /* Program cards */
    .program-card {
        margin-bottom: 2rem;
    }
    
    .program-card .btn {
        width: 100%;
        margin-top: 1.5rem;
    }
}

/* Bigger, Easier-to-Read Text on Mobile */
@media (max-width: 768px) {
    body {
        font-size: 1.0625rem; /* 17px - easier to read */
        line-height: 1.8;
    }
    
    h1 {
        font-size: clamp(2rem, 8vw, 2.75rem);
        line-height: 1.2;
    }
    
    h2 {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
        line-height: 1.3;
    }
    
    h3 {
        font-size: clamp(1.375rem, 5vw, 1.75rem);
        line-height: 1.3;
    }
    
    p, li {
        font-size: 1.0625rem; /* 17px */
        line-height: 1.75;
        margin-bottom: 1.25rem;
    }
    
    .lead {
        font-size: 1.1875rem; /* 19px */
        line-height: 1.7;
    }
}

/* Easy Scrolling - More Padding */
@media (max-width: 768px) {
    section {
        padding: 3rem 0;
    }
    
    .container {
        padding: 0 1.25rem;
    }
    
    /* Breathing room between sections */
    .why-cal-strong,
    .programs-overview,
    .testimonials,
    .why-gymnastics,
    .stats,
    .cta-section {
        padding: 3rem 0;
    }
    
    /* Cards get more space */
    .features-grid,
    .programs-grid,
    .testimonials-grid {
        gap: 2rem;
    }
}

/* Thumb-Friendly Spacing */
@media (max-width: 768px) {
    /* Hero CTAs stacked vertically with space */
    .hero-ctas {
        flex-direction: column;
        gap: 1.25rem;
        width: 100%;
    }
    
    .hero-ctas .btn {
        width: 100%;
        padding: 1.5rem 2rem;
        font-size: 1.25rem;
    }
    
    /* Trust signals stacked */
    .hero-trust {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        margin-top: 2rem;
    }
    
    /* Programs CTA */
    .programs-cta {
        text-align: center;
        margin-top: 2rem;
    }
    
    .programs-cta .btn {
        width: 100%;
        max-width: 400px;
    }
}

/* Navigation - Mobile Optimized */
@media (max-width: 968px) {
    .nav-menu {
        padding: 1.5rem;
    }
    
    .nav-menu li {
        margin-bottom: 0.5rem;
    }
    
    .nav-menu a {
        display: block;
        padding: 1rem 1.5rem;
        background: var(--light-grey);
        border-radius: 8px;
        text-align: center;
    }
    
    .nav-menu a:hover,
    .nav-menu a.active {
        background: var(--black);
        color: var(--white);
    }
    
    .cta-nav {
        background: var(--primary-green);
        color: var(--black);
        font-weight: 600;
        margin-top: 0.5rem;
    }
    
    .dropdown-menu {
        background: transparent;
        padding-left: 1rem;
        margin-top: 0.5rem;
    }
    
    .dropdown-menu a {
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
    }
}

/* Mobile Menu Toggle - Bigger, Easier to Tap */
@media (max-width: 968px) {
    .mobile-menu-toggle {
        padding: 1rem;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-menu-toggle span {
        width: 28px;
        height: 3px;
    }
}

/* Forms - Mobile Optimized */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        font-size: 1.0625rem; /* Prevents iOS zoom */
        padding: 1rem;
        min-height: 48px;
    }
    
    select {
        min-height: 52px;
    }
    
    textarea {
        min-height: 120px;
    }
}

/* Class Finder - Mobile Optimized */
@media (max-width: 768px) {
    .class-finder-form {
        padding: 2rem 1.5rem;
    }
    
    .form-field label {
        font-size: 1.0625rem;
        margin-bottom: 0.75rem;
    }
    
    .gender-selector {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .gender-option {
        flex: 1;
    }
    
    .gender-option label {
        padding: 1.25rem;
        font-size: 1.125rem;
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .finder-submit-btn {
        width: 100%;
        padding: 1.5rem 2rem;
        font-size: 1.25rem;
        min-height: 64px;
        margin-top: 2rem;
    }
}

/* Stats - Mobile Optimized */
@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .stat-label {
        font-size: 0.875rem;
    }
}

/* Testimonials - Mobile Optimized */
@media (max-width: 768px) {
    .testimonial-card {
        padding: 2rem 1.5rem;
    }
    
    .testimonial-card blockquote {
        font-size: 1.0625rem;
        line-height: 1.75;
    }
}

/* Footer - Mobile Optimized */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .social-links {
        flex-direction: row;
        gap: 1rem;
    }
    
    .social-icon {
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
    }
}

/* ========================================
   ENROLLMENT PATH CLARITY
   ======================================== */

/* Add visual hierarchy to enrollment CTAs */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.btn-primary:active::before {
    width: 300px;
    height: 300px;
}

/* Make "Free Trial" stand out everywhere */
a[href*="trial.html"] {
    font-weight: 600;
}

/* Programs - Clearer enrollment path */
.program-card .btn {
    background: var(--primary-green);
    color: var(--black);
    font-weight: 600;
}

/* Feature cards - Clear next step */
.feature-link::after {
    content: ' →';
    display: inline;
    transition: transform 0.2s;
}

.feature-link:hover::after {
    transform: translateX(4px);
}

/* ========================================
   ACCESSIBILITY & USABILITY
   ======================================== */

/* Focus states - more visible on mobile */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--primary-green);
    outline-offset: 2px;
}

/* Active states for touch */
.btn:active {
    transform: scale(0.98);
}

a:active {
    opacity: 0.8;
}

/* Prevent text size adjustment on orientation change */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce animations on low-end devices */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Hardware acceleration for smooth scrolling */
.hero,
.feature-card,
.program-card,
.testimonial-card {
    transform: translateZ(0);
    will-change: transform;
}