/**
 * CONTACT UNIFIED CSS - CLEAN BEM ARCHITECTURE
 * 
 * WordPress-konform, Senior-friendly Contact System
 * Follows CLAUDE.md Architecture Standards v6.0.0
 * 
 * @package RentAssistenz
 * @version 3.0.0 - Clean Refactored Architecture
 * @priority 85 (loads with forms)
 */

/* =============================================================================
   CSS CUSTOM PROPERTIES - DESIGN SYSTEM (CLAUDE.md Compliant)
   ============================================================================= */

:root {
    /* Design System from CLAUDE.md */
    --rent-primary: #007cba;
    --rent-primary-dark: #053068;
    --rent-white: #ffffff;
    --rent-text-dark: #333333;
    --rent-font-size-body: 1.125rem; /* 18px - Senior-friendly */
    --rent-spacing-lg: 2rem;
    --rent-border-radius: 1.25rem;
    
    /* Contact-specific extensions */
    --contact-shadow: 0 8px 32px rgba(0, 124, 186, 0.08);
    --contact-border: #e1e5e9;
    --contact-input-bg: #f8f9fa;
    --contact-text-secondary: #666666;
    --contact-success: #28a745;
    --contact-success-dark: #1e7e34;
    --contact-call-green: #28a745;
    --contact-call-green-dark: #1e7e34;
}

/* =============================================================================
   CONTACT FORM BLOCK - BEM ARCHITECTURE
   ============================================================================= */

/* Contact Form Block */
.contact-form {
    background: var(--rent-white);
    border-radius: var(--rent-border-radius);
    padding: var(--rent-spacing-lg);
    box-shadow: var(--contact-shadow);
    border: 1px solid var(--contact-border);
    max-width: 600px;
    margin: 0 auto;
}

/* Contact Form Elements */
.contact-form__input {
    width: 100%;
    padding: 18px 20px;
    border: 1px solid var(--contact-border);
    border-radius: 8px;
    background: var(--contact-input-bg);
    font-size: var(--rent-font-size-body);
    color: var(--rent-text-dark);
    font-family: inherit;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.contact-form__input:focus {
    border-color: var(--rent-primary);
    background: var(--rent-white);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

.contact-form__button {
    background: var(--rent-primary);
    color: var(--rent-white);
    border: none;
    padding: 16px 32px;
    border-radius: var(--rent-border-radius);
    font-size: var(--rent-font-size-body);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-height: 48px; /* Senior-friendly touch target */
}

.contact-form__button:hover {
    background: var(--rent-primary-dark);
}

/* =============================================================================
   CONTACT TEASER BLOCK - BEM ARCHITECTURE
   ============================================================================= */

/* Contact Teaser Block */
.contact-teaser {
    background: var(--rent-white);
    border-radius: var(--rent-border-radius);
    padding: var(--rent-spacing-lg);
    box-shadow: var(--contact-shadow);
    border: 1px solid var(--contact-border);
    text-align: center;
    margin-bottom: 2rem;
}

/* Contact Teaser Elements */
.contact-teaser__title {
    color: var(--rent-text-dark);
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.contact-teaser__text {
    color: var(--contact-text-secondary);
    font-size: var(--rent-font-size-body);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.contact-teaser__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--rent-primary);
    color: var(--rent-white);
    padding: 16px 24px;
    border-radius: var(--rent-border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    margin: 0.5rem;
    min-height: 48px; /* Senior-friendly */
    border: none;
    cursor: pointer;
}

.contact-teaser__button:hover {
    background: var(--rent-primary-dark);
    transform: translateY(-1px);
}

/* Call Button - Green variant */
.contact-teaser__button--call {
    background: var(--contact-call-green);
}

.contact-teaser__button--call:hover {
    background: var(--contact-call-green-dark);
}

/* Legacy Support for call buttons */
.contact-teaser a[href^="tel"],
.site-button[href^="tel"] {
    background: var(--contact-call-green) !important;
    color: var(--rent-white) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 16px 24px !important;
    border-radius: var(--rent-border-radius) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    margin: 0.5rem !important;
    min-height: 48px !important;
    border: none !important;
}

.contact-teaser a[href^="tel"]:hover,
.site-button[href^="tel"]:hover {
    background: var(--contact-call-green-dark) !important;
    transform: translateY(-1px) !important;
}

.contact-teaser__phone {
    color: var(--rent-primary);
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
}

.contact-teaser__phone:hover {
    color: var(--rent-primary-dark);
    text-decoration: underline;
}

/* =============================================================================
   CONTACT HIGHLIGHTS BLOCK - BEM ARCHITECTURE
   ============================================================================= */

/* Contact Highlights Block */
.contact-highlights {
    margin: var(--rent-spacing-lg) 0;
}

.contact-highlights__item {
    display: flex;
    align-items: center;
    background: var(--rent-white);
    border: 1px solid var(--contact-border);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 124, 186, 0.05);
}

.contact-highlights__icon {
    color: var(--contact-success);
    font-size: 1.2rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.contact-highlights__text {
    color: var(--rent-text-dark);
    font-size: var(--rent-font-size-body);
    line-height: 1.5;
}

/* Legacy Support - Fix white text issue */
.contact-highlights > div {
    background: var(--rent-white) !important;
    color: var(--rent-text-dark) !important;
    border: 1px solid var(--contact-border) !important;
    border-radius: 8px !important;
    padding: 1rem 1.5rem !important;
    margin-bottom: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
}

.contact-highlights .fa-check-circle {
    color: var(--contact-success) !important;
    font-size: 1.2rem !important;
    margin-right: 1rem !important;
}

/* =============================================================================
   CONTACT QUICK INFO BLOCK - BEM ARCHITECTURE
   ============================================================================= */

/* Contact Quick Info Block */
.contact-quick-info {
    background: #f8f9fa;
    border-left: 4px solid var(--rent-primary);
    border-radius: 8px;
    padding: 1.5rem;
    margin: var(--rent-spacing-lg) 0;
    box-shadow: 0 2px 8px rgba(0, 124, 186, 0.08);
}

.contact-quick-info__title {
    color: var(--rent-text-dark);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-quick-info__icon {
    color: var(--rent-primary);
    font-size: 1.3rem;
}

.contact-quick-info__text {
    color: var(--contact-text-secondary);
    font-size: var(--rent-font-size-body);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.contact-quick-info__details {
    font-size: 1rem;
    color: var(--rent-text-dark);
    line-height: 1.5;
}

/* Legacy Support */
.contact-quick-info h4 {
    color: var(--rent-text-dark) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

.contact-quick-info p {
    color: var(--contact-text-secondary) !important;
    font-size: var(--rent-font-size-body) !important;
    line-height: 1.6 !important;
}

/* =============================================================================
   WORDPRESS FORM COMPATIBILITY
   ============================================================================= */

/* Contact Form 7 Integration */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    padding: 18px 20px;
    border: 1px solid var(--contact-border);
    border-radius: 8px;
    background: var(--contact-input-bg);
    font-size: var(--rent-font-size-body);
    color: var(--rent-text-dark);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: var(--rent-primary);
    background: var(--rent-white);
    outline: none;
}

.wpcf7-form input[type="submit"] {
    background: var(--rent-primary);
    color: var(--rent-white);
    border: none;
    padding: 16px 32px;
    border-radius: var(--rent-border-radius);
    font-size: var(--rent-font-size-body);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-height: 48px;
}

.wpcf7-form input[type="submit"]:hover {
    background: var(--rent-primary-dark);
}

/* =============================================================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ============================================================================= */

@media (max-width: 768px) {
    .contact-form,
    .contact-teaser {
        padding: 1.5rem;
        margin: 1rem;
    }
    
    .contact-teaser__title {
        font-size: 1.5rem;
    }
    
    .contact-teaser__button,
    .contact-teaser a[href^="tel"],
    .site-button[href^="tel"] {
        width: 100% !important;
        justify-content: center !important;
        margin: 0.25rem 0 !important;
    }
    
    .contact-highlights__item,
    .contact-highlights > div {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
    
    .contact-quick-info {
        padding: 1rem !important;
        margin: 1rem 0 !important;
    }
}

@media (max-width: 480px) {
    .contact-form,
    .contact-teaser {
        padding: 1rem;
        margin: 0.5rem;
        border-radius: 8px;
    }
    
    .contact-teaser__title {
        font-size: 1.25rem;
    }
}

/* =============================================================================
   ACCESSIBILITY - WCAG 2.1 AA COMPLIANCE
   ============================================================================= */

/* Focus indicators */
.contact-form__input:focus,
.contact-form__button:focus,
.contact-teaser__button:focus,
.contact-teaser__phone:focus {
    outline: 2px solid var(--rent-primary);
    outline-offset: 2px;
}

/* High contrast support */
@media (prefers-contrast: high) {
    .contact-form,
    .contact-teaser,
    .contact-highlights__item {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .contact-form__input,
    .contact-form__button,
    .contact-teaser__button {
        transition: none;
    }
    
    .contact-teaser__button:hover {
        transform: none;
    }
}