/**
 * AI Page Builder - Frontend Styles
 * Uses CSS variables from Global Styles for consistency
 */

/* =========================================================================
   CSS VARIABLE DEFAULTS (fallbacks if not set in theme)
   ========================================================================= */

:root {
    /* Colors - defaults */
    --wpai-color-primary: #6366f1;
    --wpai-color-primary-hover: #4f46e5;
    --wpai-color-secondary: #64748b;
    --wpai-color-accent: #06b6d4;
    --wpai-color-text: #1e1e2e;
    --wpai-color-text-light: #64748b;
    --wpai-color-text-inverse: #ffffff;
    --wpai-color-bg: #ffffff;
    --wpai-color-bg-alt: #f8fafc;
    --wpai-color-bg-dark: #1e1e2e;
    
    /* Typography - defaults */
    --wpai-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --wpai-font-heading: inherit;
    --wpai-size-h1: 2.5rem;
    --wpai-size-h2: 2rem;
    --wpai-size-h3: 1.75rem;
    --wpai-size-h4: 1.5rem;
    --wpai-size-h5: 1.25rem;
    --wpai-size-h6: 1rem;
    --wpai-size-body: 1rem;
    
    /* Spacing - defaults */
    --wpai-spacing-xs: 0.5rem;
    --wpai-spacing-sm: 1rem;
    --wpai-spacing-md: 1.5rem;
    --wpai-spacing-lg: 2rem;
    --wpai-spacing-xl: 3rem;
    
    /* Border Radius - defaults */
    --wpai-radius-sm: 4px;
    --wpai-radius-md: 8px;
    --wpai-radius-lg: 12px;
    --wpai-radius-full: 9999px;
    
    /* Container - defaults */
    --wpai-container-max: 1200px;
    --wpai-container-padding: 20px;
    --wpai-section-padding: 60px;
    
    /* Buttons - defaults */
    --wpai-btn-padding: 12px 28px;
    --wpai-btn-radius: 8px;
    --wpai-btn-font-size: 15px;
}

/* =========================================================================
   CONTENT WRAPPER
   ========================================================================= */

.wpai-content {
    width: 100%;
    font-family: var(--wpai-font-primary);
    font-size: var(--wpai-size-body);
    line-height: 1.6;
    color: var(--wpai-color-text);
}

/* =========================================================================
   LAYOUT COMPONENTS
   ========================================================================= */

/* Section */
.wpai-content section,
.wpai-content section[data-gjs-type="section"] {
    position: relative;
    padding: var(--wpai-section-padding) var(--wpai-container-padding);
    /* Auto-center sections with max-width */
    margin-left: auto;
    margin-right: auto;
}

/* Container */
.wpai-content .wpai-container,
.wpai-content [data-gjs-type="container"] {
    max-width: var(--wpai-container-max);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: 0 var(--wpai-container-padding);
}

/* Any element with inline max-width should center */
.wpai-content [style*="max-width"] {
    margin-left: auto;
    margin-right: auto;
}

/* Row */
.wpai-content .wpai-row,
.wpai-content [data-gjs-type="row"] {
    display: flex;
    flex-wrap: wrap;
}

/* Columns */
.wpai-content .wpai-col,
.wpai-content [data-gjs-type="column"] {
    min-height: 1px;
}

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */

.wpai-content h1,
.wpai-content h2,
.wpai-content h3,
.wpai-content h4,
.wpai-content h5,
.wpai-content h6 {
    margin-top: 0;
    font-family: var(--wpai-font-heading);
    color: var(--wpai-color-text);
}

.wpai-content h1 { font-size: var(--wpai-size-h1); font-weight: 700; line-height: 1.2; margin-bottom: 0.5em; }
.wpai-content h2 { font-size: var(--wpai-size-h2); font-weight: 700; line-height: 1.3; margin-bottom: 0.5em; }
.wpai-content h3 { font-size: var(--wpai-size-h3); font-weight: 600; line-height: 1.3; margin-bottom: 0.5em; }
.wpai-content h4 { font-size: var(--wpai-size-h4); font-weight: 600; line-height: 1.4; margin-bottom: 0.5em; }
.wpai-content h5 { font-size: var(--wpai-size-h5); font-weight: 600; line-height: 1.4; margin-bottom: 0.5em; }
.wpai-content h6 { font-size: var(--wpai-size-h6); font-weight: 600; line-height: 1.5; margin-bottom: 0.5em; }

.wpai-content p {
    margin-top: 0;
    margin-bottom: 1em;
}

/* =========================================================================
   BUTTON
   ========================================================================= */

.wpai-content .wpai-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--wpai-btn-padding);
    font-size: var(--wpai-btn-font-size);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    border-radius: var(--wpai-btn-radius);
    background: var(--wpai-color-primary);
    color: var(--wpai-color-text-inverse);
}

.wpai-content .wpai-button:hover {
    background: var(--wpai-color-primary-hover);
    transform: translateY(-1px);
}

/* Button variants */
.wpai-content .wpai-button[data-style="secondary"] {
    background: var(--wpai-color-secondary);
}

.wpai-content .wpai-button[data-style="outline"] {
    background: transparent;
    border-color: var(--wpai-color-primary);
    color: var(--wpai-color-primary);
}

.wpai-content .wpai-button[data-style="outline"]:hover {
    background: var(--wpai-color-primary);
    color: var(--wpai-color-text-inverse);
}

.wpai-content .wpai-button[data-style="ghost"] {
    background: transparent;
    color: var(--wpai-color-primary);
}

.wpai-content .wpai-button[data-style="ghost"]:hover {
    background: rgba(99, 102, 241, 0.1);
}

/* =========================================================================
   IMAGE
   ========================================================================= */

.wpai-content img {
    max-width: 100%;
    height: auto;
}

/* =========================================================================
   VIDEO
   ========================================================================= */

.wpai-content video {
    max-width: 100%;
    height: auto;
}

/* =========================================================================
   MAP
   ========================================================================= */

.wpai-content iframe {
    max-width: 100%;
    border: none;
    border-radius: var(--wpai-radius-md);
}

/* =========================================================================
   DIVIDER
   ========================================================================= */

.wpai-content hr {
    border: none;
    border-top: 1px solid var(--wpai-color-text-light);
    margin: var(--wpai-spacing-md) 0;
    opacity: 0.3;
}

/* =========================================================================
   SPACER
   ========================================================================= */

.wpai-content .wpai-spacer {
    width: 100%;
}

/* =========================================================================
   UTILITY CLASSES
   ========================================================================= */

.wpai-content .text-center { text-align: center; }
.wpai-content .text-left { text-align: left; }
.wpai-content .text-right { text-align: right; }

.wpai-content .mt-xs { margin-top: var(--wpai-spacing-xs); }
.wpai-content .mt-sm { margin-top: var(--wpai-spacing-sm); }
.wpai-content .mt-md { margin-top: var(--wpai-spacing-md); }
.wpai-content .mt-lg { margin-top: var(--wpai-spacing-lg); }
.wpai-content .mt-xl { margin-top: var(--wpai-spacing-xl); }

.wpai-content .mb-xs { margin-bottom: var(--wpai-spacing-xs); }
.wpai-content .mb-sm { margin-bottom: var(--wpai-spacing-sm); }
.wpai-content .mb-md { margin-bottom: var(--wpai-spacing-md); }
.wpai-content .mb-lg { margin-bottom: var(--wpai-spacing-lg); }
.wpai-content .mb-xl { margin-bottom: var(--wpai-spacing-xl); }

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

@media (max-width: 768px) {
    :root {
        --wpai-size-h1: 2rem;
        --wpai-size-h2: 1.75rem;
        --wpai-size-h3: 1.5rem;
        --wpai-section-padding: 40px;
    }
    
    .wpai-content .wpai-col,
    .wpai-content [data-gjs-type="column"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .wpai-content .wpai-row,
    .wpai-content [data-gjs-type="row"] {
        flex-direction: column;
    }
    
    .wpai-nav-menu ul {
        flex-direction: column;
    }
}

/* WordPress Menu */
.wpai-nav-menu {
    padding: 10px 0;
}

.wpai-nav-menu ul,
.wpai-nav-menu .menu {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.wpai-nav-menu li {
    margin: 0;
}

.wpai-nav-menu a {
    color: inherit;
    text-decoration: none;
    padding: 8px 12px;
    display: block;
    transition: color 0.2s ease, background 0.2s ease;
}

.wpai-nav-menu a:hover {
    color: #6366f1;
}

.wpai-nav-menu.wpai-menu-vertical ul,
.wpai-nav-menu.wpai-menu-vertical .menu {
    flex-direction: column;
}