/**
 * CXI Content Area Styling
 * Main content area improvements — sidebars excluded.
 */

/* ------------------------------------------------------------------
 * Page-level overflow guard.
 * Prevents any overflowing child (hardcoded-width tables, fixed-pixel
 * Gutenberg figures) from producing a horizontal scrollbar.
 * ------------------------------------------------------------------ */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

/* ------------------------------------------------------------------
 * Content area: padding, overflow clipping
 * ------------------------------------------------------------------ */
.entry-content {
	padding: 24px 32px 32px !important;
	overflow-x: hidden;
	max-width: 100%;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * Images: always centered, fully responsive.
 * !important overrides HTML width/align attributes and inline styles
 * left over from the imported Volusion content.
 * float: none cancels any old alignleft / alignright on bare <img>.
 * ------------------------------------------------------------------ */
.entry-content img {
	display: block !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 3px;
}

/* ------------------------------------------------------------------
 * Figures / Gutenberg block images.
 * Gutenberg sets float:right/left and display:table on figures for
 * alignleft/alignright variants. We strip the float so every figure
 * stays in normal flow and can be centered with margin:auto.
 * ------------------------------------------------------------------ */
.entry-content figure,
.entry-content .wp-block-image,
.entry-content .wp-block-image.aligncenter,
.entry-content .wp-block-image.alignleft,
.entry-content .wp-block-image.alignright {
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100% !important;
	box-sizing: border-box;
	overflow: hidden;
}

.entry-content figure img,
.entry-content .wp-block-image img {
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
}

/* ------------------------------------------------------------------
 * Anchor-wrapped images: make the <a> a block so margin:auto on the
 * <img> inside works correctly.
 * ------------------------------------------------------------------ */
.entry-content a img {
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ------------------------------------------------------------------
 * Old WordPress / Volusion alignment classes on bare <img> tags.
 * ------------------------------------------------------------------ */
.entry-content img.alignleft,
.entry-content img.alignright,
.entry-content img.alignnone {
	float: none !important;
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ------------------------------------------------------------------
 * Paragraphs: comfortable line-height, controlled spacing
 * ------------------------------------------------------------------ */
.entry-content p {
	line-height: 1.75;
	margin-bottom: 1em;
	font-size: 15px;
	color: #333;
}

/* ------------------------------------------------------------------
 * Headings: clear hierarchy, restrained top margin
 * ------------------------------------------------------------------ */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	line-height: 1.3;
	margin-top: 1.6em;
	margin-bottom: 0.5em;
	color: #1a1a1a;
}

/* ------------------------------------------------------------------
 * Links inside content
 * ------------------------------------------------------------------ */
.entry-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Tables — override hardcoded inline width="Npx" / style="width:Npx"
 * from the old Volusion import so they never exceed the viewport.
 * ------------------------------------------------------------------ */
.entry-content table {
	width: 100% !important;
	max-width: 100% !important;
	border-collapse: collapse;
	table-layout: auto;
	box-sizing: border-box;
}

.entry-content table td,
.entry-content table th {
	width: auto !important;
	max-width: 100%;
	padding: 10px 12px;
	vertical-align: top;
	word-wrap: break-word;
	overflow-wrap: break-word;
	box-sizing: border-box;
}

.entry-content table td img {
	margin-top: 0;
	margin-bottom: 8px;
}

/* ------------------------------------------------------------------
 * Shortcode page-list grids
 * ------------------------------------------------------------------ */
.cxi-pagepagelist,
.cxi-pagesubpages {
	margin: 16px 0;
	overflow-x: auto;
}

.cxi-pagepagelist-table {
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------
 * Responsive: tighter padding + stack table cells on mobile
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.entry-content {
		padding: 16px 16px 24px !important;
	}

	/* Force Gutenberg figures to fit the mobile viewport */
	.entry-content figure,
	.entry-content .wp-block-image,
	.entry-content .wp-block-image.alignleft,
	.entry-content .wp-block-image.alignright {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.entry-content figure img,
	.entry-content .wp-block-image img {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	/* Stack multi-column shortcode tables into a single column */
	.cxi-pagepagelist-table tbody,
	.cxi-pagepagelist-table tr,
	.cxi-pagepagelist-table td {
		display: block !important;
		width: 100% !important;
	}

	.cxi-pagepagelist-table td {
		padding: 12px 0 !important;
		border-bottom: 1px solid #eee;
	}
}