/**
 * EEZY Gutenberg Block Styles
 * These classes work with or without Breakdance
 * Breakdance Global CSS can override these for premium styling
 */

/* ========================================
   CSS VARIABLES (EEZY Brand)
   ======================================== */
:root {
    --eezy-dark-navy: #1a1a2e;
    --eezy-blue: #4da6ff;
    --eezy-blue-dark: #2d8be6;
    --eezy-white: #f8f9fa;
    --eezy-gray: #6c757d;
    --eezy-border: #e9ecef;
    --eezy-success: #28a745;
    --eezy-warning: #ffc107;
    --eezy-error: #dc3545;
    
    --eezy-font-headline: 'Eagle', 'Poppins', -apple-system, sans-serif;
    --eezy-font-body: 'Inter', -apple-system, sans-serif;
    
    --eezy-container-max: 1200px;
    --eezy-section-pad: 80px;
    --eezy-card-gap: 30px;
    
    --eezy-shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
    --eezy-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --eezy-shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
    
    --eezy-radius-sm: 4px;
    --eezy-radius-md: 8px;
    --eezy-radius-lg: 12px;
}

/* ========================================
   SECTION BASE
   ======================================== */
.eezy-section {
    padding: var(--eezy-section-pad) 20px;
    max-width: var(--eezy-container-max);
    margin: 0 auto;
}

.eezy-section-headline {
    font-family: var(--eezy-font-headline);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--eezy-dark-navy);
    text-align: center;
    margin-bottom: 40px;
}

/* ========================================
   HERO SECTION
   ======================================== */
.eezy-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    text-align: center;
    padding: 120px 20px;
    max-width: none;
}

.eezy-hero-headline {
    font-family: var(--eezy-font-headline);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: white;
    line-height: 1.1;
    margin-bottom: 20px;
}

.eezy-hero-subheadline {
    font-family: var(--eezy-font-body);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin: 0 auto 30px;
}

.eezy-hero-buttons {
    justify-content: center;
}

/* ========================================
   BUTTONS
   ======================================== */
.eezy-btn-primary .wp-block-button__link {
    background: var(--eezy-blue);
    color: white;
    padding: 15px 40px;
    border-radius: var(--eezy-radius-sm);
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
}

.eezy-btn-primary .wp-block-button__link:hover {
    background: var(--eezy-blue-dark);
    transform: translateY(-2px);
    box-shadow: var(--eezy-shadow-md);
}

/* ========================================
   SERVICES SECTION
   ======================================== */
.eezy-services {
    background: var(--eezy-white);
}

.eezy-services-grid {
    gap: var(--eezy-card-gap);
}

.eezy-service-card {
    background: white;
    padding: 30px;
    border-radius: var(--eezy-radius-md);
    box-shadow: var(--eezy-shadow-sm);
    text-align: center;
    transition: all 0.3s ease;
}

.eezy-service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--eezy-shadow-lg);
}

.eezy-service-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.eezy-service-title {
    font-family: var(--eezy-font-headline);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--eezy-dark-navy);
    margin-bottom: 10px;
}

.eezy-service-desc {
    font-family: var(--eezy-font-body);
    color: var(--eezy-gray);
    line-height: 1.6;
}

/* ========================================
   FAQ SECTION
   ======================================== */
.eezy-faq {
    background: white;
}

.eezy-faq-item {
    border: 1px solid var(--eezy-border);
    border-radius: var(--eezy-radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
}

.eezy-faq-item summary {
    padding: 20px;
    font-family: var(--eezy-font-headline);
    font-weight: 600;
    color: var(--eezy-dark-navy);
    cursor: pointer;
    background: var(--eezy-white);
    transition: background 0.2s ease;
}

.eezy-faq-item summary:hover {
    background: var(--eezy-border);
}

.eezy-faq-item[open] summary {
    border-bottom: 1px solid var(--eezy-border);
}

.eezy-faq-item p {
    padding: 20px;
    margin: 0;
    font-family: var(--eezy-font-body);
    color: var(--eezy-gray);
    line-height: 1.6;
}

/* ========================================
   CTA BANNER
   ======================================== */
.eezy-cta-banner {
    background: var(--eezy-dark-navy);
    text-align: center;
    max-width: none;
}

.eezy-cta-headline {
    font-family: var(--eezy-font-headline);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: white;
    margin-bottom: 15px;
}

.eezy-cta-subheadline {
    font-family: var(--eezy-font-body);
    color: rgba(255,255,255,0.8);
    font-size: 1.125rem;
    margin-bottom: 30px;
}

.eezy-cta-buttons {
    justify-content: center;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .eezy-section {
        padding: 60px 20px;
    }
    
    .eezy-hero {
        padding: 80px 20px;
    }
    
    .eezy-services-grid {
        flex-direction: column;
    }
}