/**
 * AEO Theme-Aware Styling
 * 
 * Styles for Quick Answer, Key Takeaways, and other AEO elements
 * Designed to blend seamlessly with any WordPress theme
 */

/* ============================================
   THEME-AWARE BASE STYLES
   ============================================ */

/* Base box styling - inherits theme colors */
.aeo-box {
    padding: 1.5em;
    margin: 1.5em 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.aeo-box:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

/* Box title styling - inherits theme heading styles */
.aeo-box-title {
    margin-top: 0 !important;
    margin-bottom: 0.75em;
    font-weight: 600;
    color: inherit;
}

/* List styling within boxes */
.aeo-box ul {
    margin: 0.5em 0 0 0;
    padding-left: 1.5em;
}

.aeo-box ul li {
    margin: 0.5em 0;
    line-height: 1.6;
}

/* ============================================
   QUICK ANSWER BOX
   ============================================ */

.aeo-direct-answer {
    /* Try to use theme's success/info color, fallback to subtle green */
    background: var(--wp--preset--color--light-green-cyan, var(--wp--custom--color--success, #e8f5e9));
    border-left: 4px solid var(--wp--preset--color--vivid-green-cyan, var(--wp--custom--color--success-dark, #4caf50));
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .aeo-direct-answer {
        background: rgba(76, 175, 80, 0.15);
        border-left-color: #81c784;
        color: inherit;
    }
}

/* If theme has a custom callout style, use similar */
.entry-content .aeo-direct-answer,
.post-content .aeo-direct-answer,
article .aeo-direct-answer {
    font-size: 1.05em;
}

/* ============================================
   KEY TAKEAWAYS BOX
   ============================================ */

.aeo-key-takeaways {
    /* Try to use theme's primary/info color, fallback to subtle blue */
    background: var(--wp--preset--color--pale-cyan-blue, var(--wp--custom--color--info, #f0f8ff));
    border-left: 4px solid var(--wp--preset--color--vivid-cyan-blue, var(--wp--custom--color--primary, #2271b1));
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .aeo-key-takeaways {
        background: rgba(34, 113, 177, 0.15);
        border-left-color: #64b5f6;
        color: inherit;
    }
}

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

@media (max-width: 768px) {
    .aeo-box {
        padding: 1.2em;
        margin: 1.2em 0;
        font-size: 0.95em;
    }
    
    .aeo-box-title {
        font-size: 1.1em;
    }
}

/* ============================================
   THEME COMPATIBILITY OVERRIDES
   ============================================ */

/* Ensure proper spacing in common themes */
.entry-content .aeo-box,
.post-content .aeo-box,
.article-content .aeo-box,
.page-content .aeo-box {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/* Inherit theme's link colors */
.aeo-box a {
    color: inherit;
    text-decoration: underline;
}

.aeo-box a:hover {
    opacity: 0.8;
}

/* Ensure list bullets are visible */
.aeo-box ul {
    list-style-type: disc;
}

.aeo-box ul li::marker {
    color: currentColor;
}

/* Typography inheritance */
.aeo-box p,
.aeo-box li {
    font-family: inherit;
    color: inherit;
}

/* ============================================
   GUTENBERG EDITOR COMPATIBILITY
   ============================================ */

/* In block editor, make boxes stand out appropriately */
.block-editor-writing-flow .aeo-box {
    opacity: 0.95;
}

.block-editor-writing-flow .aeo-box:hover {
    opacity: 1;
}

/* ============================================
   POPULAR THEME OVERRIDES
   ============================================ */

/* Twenty Twenty-Four & Block Themes */
.wp-site-blocks .aeo-box {
    max-width: 100%;
}

/* Astra Theme */
.ast-container .aeo-box {
    margin-left: 0;
    margin-right: 0;
}

/* GeneratePress */
.inside-article .aeo-box {
    width: 100%;
}

/* Kadence Theme - use theme colors */
body.kadence-theme .aeo-direct-answer {
    background: var(--global-palette9, #e8f5e9);
    border-left-color: var(--global-palette4, #4caf50);
}

body.kadence-theme .aeo-key-takeaways {
    background: var(--global-palette8, #f0f8ff);
    border-left-color: var(--global-palette1, #2271b1);
}

/* Neve Theme - use theme colors */
body.neve-theme .aeo-direct-answer {
    background: var(--nv-light-bg, #e8f5e9);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .aeo-box {
        border: 1px solid #000;
        background: #fff !important;
        color: #000 !important;
        page-break-inside: avoid;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Ensure sufficient contrast */
.aeo-box {
    color: #333;
}

@media (prefers-contrast: high) {
    .aeo-box {
        border-width: 3px;
        border-color: currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .aeo-box,
    .aeo-box:hover {
        transition: none;
        transform: none;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

[dir="rtl"] .aeo-box {
    border-left: none;
    border-right: 4px solid;
}

[dir="rtl"] .aeo-box ul {
    padding-left: 0;
    padding-right: 1.5em;
}