/* 
 * Freckled Fairy - Page-specific Styles
 * Additional styles for specific pages and unique elements
 */

/* ===== PAGE-SPECIFIC FIXES ===== */

/* Fix for utility classes that may not have been defined */
.max-w-2xl { max-width: 42rem; }
.max-width-2xl { max-width: 42rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-full { width: 100%; }
.space-y-xs > * + * { margin-top: var(--space-xs); }
.space-y-sm > * + * { margin-top: var(--space-sm); }
.space-y-md > * + * { margin-top: var(--space-md); }
.space-y-lg > * + * { margin-top: var(--space-lg); }
.space-y-xl > * + * { margin-top: var(--space-xl); }

/* ===== CONTACT PAGE ENHANCEMENTS ===== */
.contact-form {
    max-width: 100%;
}

.service-section {
    padding: var(--space-3xl) 0;
    border-bottom: 1px solid var(--color-neutral-300);
}

.service-section:last-child {
    border-bottom: none;
}

/* ===== RESPONSIVE IMPROVEMENTS ===== */
@media (max-width: 639px) {
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .section-title {
        font-size: var(--text-2xl);
    }
    
    .card {
        padding: var(--space-lg);
    }
    
    .hero-cta {
        gap: var(--space-md);
    }
    
    .btn-lg {
        padding: var(--space-md) var(--space-xl);
        font-size: var(--text-base);
        min-height: 48px;
    }
}

/* ===== ANIMATION ENHANCEMENTS ===== */
@media (prefers-reduced-motion: no-preference) {
    .card {
        transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    }
    
    .btn {
        transition: all var(--transition-normal);
    }
    
    .hero-content {
        animation: fadeInUp 1s ease-out;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== FOCUS AND ACCESSIBILITY ===== */
.btn:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ===== PRINT STYLES ===== */
@media print {
    .header,
    .footer,
    .btn,
    .mobile-menu-btn {
        display: none !important;
    }
    
    .hero {
        min-height: auto;
        padding: var(--space-2xl) 0;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .card {
        border: 1px solid #000;
        box-shadow: none;
        break-inside: avoid;
    }
}