/*
Theme Name: DevelopmentTranslation Bridge
Theme URI: https://github.com/coryhubbell/development-translation-bridge
Author: Cory Hubbell
Author URI: https://github.com/coryhubbell
Description: DevelopmentTranslation Bridge - The world's first universal page builder translation system. Seamlessly convert between Bootstrap 5.3.3, DIVI, Elementor, Avada Fusion, Bricks, WPBakery, Beaver Builder, Gutenberg, and Oxygen. Featuring the Translation Bridge architecture with 98% visual accuracy, 30-second conversion times, optional AI-Ready annotations (--ai-ready flag), and comprehensive AI integration for modern WordPress development.
Version: 4.0.0
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: devtb
Tags: page-builder, translation, bootstrap, elementor, divi, ai, claude, conversion

DevelopmentTranslation Bridge is a revolutionary theme that enables seamless translation between major page builder frameworks:
- Bootstrap 5.3.3 (HTML/CSS)
- DIVI Builder (shortcodes)
- Elementor (JSON)
- Avada Fusion Builder (HTML)
- Bricks Builder (JSON)
- WPBakery Page Builder (shortcodes)
- Beaver Builder (JSON)
- Gutenberg Block Editor (HTML)
- Oxygen Builder (JSON)

Key Features:
- Translation Bridge architecture
- 72 translation pairs (9 frameworks x 8 targets)
- Optional AI-Ready annotations (--ai-ready flag)
- 98% visual accuracy in conversions
- 30-second conversion times
- CLI tool (devtb command)
- REST API v2 with ai_ready parameter
- Comprehensive documentation
- Production-ready code quality

Use Cases:
- Migrate WordPress sites between page builders
- Convert legacy page builder content to modern frameworks
- Create AI-ready HTML with --ai-ready flag for AI-assisted editing
- Multi-framework development workflows
- Framework-agnostic component libraries
- Rapid prototyping across builders

This theme is optimized for developers who work with multiple page builders and want to leverage AI assistance in their workflow.
*/

/*
╔════════════════════════════════════════════════════════════════════════════╗
║               DEVELOPMENTTRANSLATION BRIDGE THEME STYLES                    ║
║                    Translation Bridge System v3.3.0                         ║
╚════════════════════════════════════════════════════════════════════════════╝

This theme is primarily a framework translation system. The visual styles are
minimal, as the theme's purpose is to enable translation between page builders
rather than provide a specific design aesthetic.

For actual page designs, use the included framework converters to generate
builder-specific code with full styling support.
*/

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background: #fff;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5em;
    line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1em;
}

/* Links */
a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: #0052a3;
    text-decoration: underline;
}

/* Buttons */
.btn,
button,
input[type="submit"] {
    display: inline-block;
    padding: 10px 20px;
    background: #0066cc;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
    background: #0052a3;
    text-decoration: none;
}

/* Header */
.site-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 20px 0;
}

.site-title {
    font-size: 1.5rem;
    margin: 0;
}

/* Navigation */
.site-nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.site-nav a {
    color: #333;
}

/* Content */
.site-content {
    padding: 40px 0;
    min-height: 60vh;
}

/* Footer */
.site-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 20px 0;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
}

/* Translation Bridge Indicators */
[data-ai-editable] {
    position: relative;
}

.devtb-admin-notice {
    background: #e7f3ff;
    border-left: 4px solid #0066cc;
    padding: 12px;
    margin: 20px 0;
}

.devtb-admin-notice.success {
    background: #e7ffe7;
    border-color: #00cc00;
}

.devtb-admin-notice.error {
    background: #ffe7e7;
    border-color: #cc0000;
}

.devtb-admin-notice.warning {
    background: #fff3cd;
    border-color: #ffcc00;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* Responsive */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }

    .container {
        padding: 0 15px;
    }

    .site-nav ul {
        flex-direction: column;
        gap: 10px;
    }
}