/**
 * 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 — structural fixes only.
 * Visual styling belongs to the active theme so dark and custom designs are
 * never replaced by AutoSEO backgrounds, borders, padding, or spacing.
 */
.autoseo .key-takeaways, .autoseo .table-of-contents {
	writing-mode: horizontal-tb;
	display: block;
	width: 100%;
	max-width: 100%;
	clear: both;
}

.autoseo .key-takeaways h2, .autoseo .key-takeaways h3, .autoseo .table-of-contents h2, .autoseo .table-of-contents h3 {
	writing-mode: horizontal-tb;
	display: block;
	width: 100%;
}

.autoseo .key-takeaways ul, .autoseo .table-of-contents ul {
	writing-mode: horizontal-tb;
	display: block;
}

.autoseo .key-takeaways li, .autoseo .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;
}

/*
 * Fallback body for themes that render ACF/bricks instead of the_content().
 * Spacing only — colors and fonts stay with the theme.
 */
.autoseo-theme-content-fallback {
	display: block;
	width: 100%;
	max-width: 100%;
	clear: both;
}

.autoseo-theme-content-fallback > * + * {
	margin-top: 1em;
}

.autoseo-theme-content-fallback img {
	max-width: 100%;
	height: auto;
}

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