/* Hard safety net: an AIHPP-generated post page must never require
   horizontal scrolling, no matter which specific element in the AI-written
   body is responsible (long unbroken strings/URLs, a wide table, an image
   with explicit width/height attributes, markup this stylesheet doesn't
   enumerate below, etc). Per-element rules further down keep that content
   fully reachable (its own internal scrollbar, or wrapped) rather than
   silently clipped — this is the backstop for anything they miss, not a
   replacement for them. .wpcwp-generated-post is the BODY class added only
   on singular AIHPP-generated posts (see Plugin::body_class()), so this
   can never apply to Pages or any other content. */
body.wpcwp-generated-post {
	overflow-x: hidden;
}
.wpcwp-generated-post * {
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
}

/* Baseline responsiveness for generated article content — AI-written bodies
   routinely include comparison/troubleshooting <table>s (see class-generator.php's
   body prompt), <pre><code> command blocks, and images that may carry
   explicit width/height attributes; without this, any of those can overflow
   the viewport width on a narrow screen instead of scaling/scrolling within
   it, which is what breaks "alignment" on mobile. Scoped to the same
   .wpcwp-generated-post body class every other rule in this file uses. */
.wpcwp-generated-post img {
	max-width: 100%;
	height: auto;
}
.wpcwp-generated-post table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}
.wpcwp-generated-post table th,
.wpcwp-generated-post table td {
	word-break: break-word;
}
.wpcwp-generated-post pre {
	max-width: 100%;
	overflow-x: auto;
}
.wpcwp-generated-post pre,
.wpcwp-generated-post pre * {
	/* Code blocks are the one deliberate exception to the universal
	   overflow-wrap above — wrapping mid-command would corrupt the
	   command's meaning. They already scroll internally via overflow-x:auto
	   on the .wpcwp-generated-post pre rule above. */
	overflow-wrap: normal;
}
.wpcwp-generated-post p,
.wpcwp-generated-post li {
	overflow-wrap: break-word;
	word-wrap: break-word;
}
@media ( max-width: 480px ) {
	.wpcwp-generated-post table {
		font-size: 0.92em;
	}
}

/* Centers this plugin's generated/attached featured image on the front end.
   Scoped to plugin-touched singular posts only (see Plugin::enqueue_frontend()),
   and only targets the most common theme markup patterns for a featured
   image, so it stays a best-effort enhancement rather than a global override. */
.wpcwp-generated-post .wp-post-image,
.wpcwp-generated-post .post-thumbnail img,
.wpcwp-generated-post .entry-thumbnail img,
.wpcwp-generated-post .featured-image img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	float: none;
}

/* In-content images (beyond the featured image) wrap with surrounding text
   instead of sitting full-width — belt-and-suspenders alongside WP core's
   own .alignleft/.alignright classes, for themes that don't style them. */
.wpcwp-generated-post .wpcwp-content-image.alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
	max-width: 45%;
	height: auto;
}
.wpcwp-generated-post .wpcwp-content-image.alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
	max-width: 45%;
	height: auto;
}
@media ( max-width: 600px ) {
	.wpcwp-generated-post .wpcwp-content-image.alignleft,
	.wpcwp-generated-post .wpcwp-content-image.alignright {
		float: none;
		max-width: 100%;
		margin: 1em 0;
	}
}

/* FAQ accordion — plain <details>/<summary>, this is cosmetic only; the
   expand/collapse behavior itself is native and works with CSS disabled. */
.wpcwp-faq {
	margin: 1em 0;
}
.wpcwp-faq-item {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	margin-bottom: 0.6em;
	padding: 0.1em 1em;
}
.wpcwp-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	padding: 0.8em 0;
	list-style: revert;
}
.wpcwp-faq-item[open] summary {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.wpcwp-faq-answer {
	padding: 0.8em 0;
}
@media ( prefers-color-scheme: dark ) {
	.wpcwp-faq-item {
		border-color: rgba(255, 255, 255, 0.18);
	}
	.wpcwp-faq-item[open] summary {
		border-bottom-color: rgba(255, 255, 255, 0.18);
	}
}

/* CTA button block (Contact Us / Buy Now / Chat Now / Subscribe / Call Us)
   — see classes/class-cta.php. Deliberately theme-neutral (currentColor-ish
   fallback via a CSS variable a theme can override) rather than a fixed
   brand color. */
.wpcwp-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 1.5em 0;
	clear: both;
}
.wpcwp-cta-button {
	display: inline-block;
	padding: 0.7em 1.4em;
	background: var(--wpcwp-cta-bg, #2271b1);
	color: var(--wpcwp-cta-color, #fff);
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none;
}
.wpcwp-cta-button:hover,
.wpcwp-cta-button:focus {
	opacity: 0.9;
	color: var(--wpcwp-cta-color, #fff);
}