/**
 * AutoSEO Frontend Styles for Infographics
 * 
 * These styles provide fallback and enhancement for infographics
 * in case Tailwind CSS doesn't load properly
 */

.autoseo-infographic-wrapper {
    margin: 40px 0;
    clear: both;
    overflow: hidden;
}

.autoseo-infographic-container {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Ensure infographics are responsive */
.autoseo-infographic-container img {
    max-width: 100%;
    height: auto;
}

/* Ensure SVG icons render properly */
.autoseo-infographic-container svg {
    display: inline-block;
    vertical-align: middle;
}

/* Basic table styling for comparison tables in infographics */
.autoseo-infographic-container table {
    width: 100%;
    border-collapse: collapse;
}

.autoseo-infographic-container table th,
.autoseo-infographic-container table td {
    padding: 12px;
    text-align: left;
}

/* Ensure proper spacing for infographic sections */
.autoseo-infographic-container > div {
    margin-bottom: 1rem;
}

/* Responsive YouTube embed wrapper (inline styles get stripped by KSES) */
.youtube-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 1.5em 0;
}

.youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Key Takeaways and Table of Contents — synced article structure */
.key-takeaways,
.table-of-contents {
    writing-mode: horizontal-tb;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    clear: both;
}

.key-takeaways {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-left: 4px solid #0ea5e9;
}

.table-of-contents {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 1px solid #e9d5ff;
    border-left: 4px solid #a855f7;
}

.key-takeaways h2,
.key-takeaways h3,
.table-of-contents h2,
.table-of-contents h3 {
    writing-mode: horizontal-tb;
    display: block;
    width: 100%;
    margin-top: 0;
    margin-bottom: 1rem;
}

.key-takeaways ul,
.table-of-contents ul {
    writing-mode: horizontal-tb;
    display: block;
    margin-bottom: 0;
    padding-left: 1.5rem;
}

.key-takeaways li,
.table-of-contents li {
    writing-mode: horizontal-tb;
    display: list-item;
}

.autoseo-heading-anchor {
    color: inherit;
    text-decoration: none;
    font: inherit;
    writing-mode: horizontal-tb;
    display: inline;
}

/* Print styles - ensure infographics print nicely */
@media print {
    .autoseo-infographic-wrapper {
        page-break-inside: avoid;
    }
}