/*
 * Webbo Post Content
 * v1.0.10
 *
 * Default Gutenberg skin for Elementor Pro's native Post Content widget.
 *
 * IMPORTANT: Do not rely on .elementor-widget-container. Elementor's
 * Optimized Markup can omit that element. We target Elementor's native Post
 * Content wrapper class/data attribute directly, with the Webbo class only as
 * a backwards-compatible fallback.
 */

/* -------------------------------------------------------------------------
 * Scope variables
 * ---------------------------------------------------------------------- */
.elementor-widget-theme-post-content,
.elementor-element[data-widget_type="theme-post-content.default"],
.webbo-post-content {
	--webbo-pc-block-gap: 30px;
	--webbo-pc-border: #eeeeee;
	--webbo-pc-table-radius: 0px;
	--webbo-pc-cell-pad-y: 14px;
	--webbo-pc-cell-pad-x: 14px;
	--webbo-pc-image-height-ratio: 0.60;
	--webbo-pc-caption-gap: 8px;
	--webbo-pc-caption-color: #6b7280;
	--webbo-pc-caption-size: 14px;
	--webbo-pc-caption-line-height: 1.5;
	--webbo-pc-table-min-width: 0px;
}

/* -------------------------------------------------------------------------
 * Gutenberg table block
 * ---------------------------------------------------------------------- */
.elementor-widget-theme-post-content figure.wp-block-table,
.elementor-element[data-widget_type="theme-post-content.default"] figure.wp-block-table,
.webbo-post-content figure.wp-block-table,
.elementor-widget-theme-post-content .wp-block-table,
.elementor-element[data-widget_type="theme-post-content.default"] .wp-block-table,
.webbo-post-content .wp-block-table {
	width: 100%;
	max-width: 100%;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: var(--webbo-pc-block-gap) !important;
	margin-left: 0 !important;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.elementor-widget-theme-post-content .wp-block-table table,
.elementor-element[data-widget_type="theme-post-content.default"] .wp-block-table table,
.webbo-post-content .wp-block-table table {
	width: 100%;
	max-width: 100%;
	min-width: var(--webbo-pc-table-min-width);
	margin: 0 !important;
	border: 1px solid var(--webbo-pc-border) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border-radius: var(--webbo-pc-table-radius);
	background: #fff;
	overflow: hidden;
}

.elementor-widget-theme-post-content .wp-block-table th,
.elementor-widget-theme-post-content .wp-block-table td,
.elementor-element[data-widget_type="theme-post-content.default"] .wp-block-table th,
.elementor-element[data-widget_type="theme-post-content.default"] .wp-block-table td,
.webbo-post-content .wp-block-table th,
.webbo-post-content .wp-block-table td {
	padding: var(--webbo-pc-cell-pad-y) var(--webbo-pc-cell-pad-x) !important;
	text-align: left;
	vertical-align: middle;
	background: transparent;
	border: 0 !important;
	border-bottom: 1px solid var(--webbo-pc-border) !important;
}

/* Keep Webbo's default table hierarchy deliberately low-specificity so an
 * Elementor Typography choice always wins, including font weight. */
.elementor-widget-theme-post-content :where(.wp-block-table th),
.elementor-element[data-widget_type="theme-post-content.default"] :where(.wp-block-table th),
.webbo-post-content :where(.wp-block-table th) {
	font-weight: 600;
}

/* Default table hierarchy: headers and the first body column use the stronger
 * article text colour while remaining fully overridable in Elementor. */
.elementor-widget-theme-post-content :where(.wp-block-table table > thead > tr > th, .wp-block-table table > thead > tr > td, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > th, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > td),
.elementor-element[data-widget_type="theme-post-content.default"] :where(.wp-block-table table > thead > tr > th, .wp-block-table table > thead > tr > td, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > th, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > td),
.webbo-post-content :where(.wp-block-table table > thead > tr > th, .wp-block-table table > thead > tr > td, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > th, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > td) {
	color: #111827;
}

.elementor-widget-theme-post-content :where(.wp-block-table table:has(thead) > tbody > tr > :first-child, .wp-block-table table:not(:has(thead)) > tbody > tr:not(:first-child) > :first-child),
.elementor-element[data-widget_type="theme-post-content.default"] :where(.wp-block-table table:has(thead) > tbody > tr > :first-child, .wp-block-table table:not(:has(thead)) > tbody > tr:not(:first-child) > :first-child),
.webbo-post-content :where(.wp-block-table table:has(thead) > tbody > tr > :first-child, .wp-block-table table:not(:has(thead)) > tbody > tr:not(:first-child) > :first-child) {
	color: #111827;
}

.elementor-widget-theme-post-content .wp-block-table tbody > tr:last-child > th,
.elementor-widget-theme-post-content .wp-block-table tbody > tr:last-child > td,
.elementor-widget-theme-post-content .wp-block-table tfoot > tr:last-child > th,
.elementor-widget-theme-post-content .wp-block-table tfoot > tr:last-child > td,
.elementor-element[data-widget_type="theme-post-content.default"] .wp-block-table tbody > tr:last-child > th,
.elementor-element[data-widget_type="theme-post-content.default"] .wp-block-table tbody > tr:last-child > td,
.elementor-element[data-widget_type="theme-post-content.default"] .wp-block-table tfoot > tr:last-child > th,
.elementor-element[data-widget_type="theme-post-content.default"] .wp-block-table tfoot > tr:last-child > td,
.webbo-post-content .wp-block-table tbody > tr:last-child > th,
.webbo-post-content .wp-block-table tbody > tr:last-child > td,
.webbo-post-content .wp-block-table tfoot > tr:last-child > th,
.webbo-post-content .wp-block-table tfoot > tr:last-child > td {
	border-bottom: 0 !important;
}

/* Table captions exist only when the Gutenberg author adds one. Keep the
 * default selector deliberately low-specificity so Elementor local controls
 * can always override it. */
.elementor-widget-theme-post-content :where(.wp-block-table figcaption, .wp-block-table .wp-element-caption),
.elementor-element[data-widget_type="theme-post-content.default"] :where(.wp-block-table figcaption, .wp-block-table .wp-element-caption),
.webbo-post-content :where(.wp-block-table figcaption, .wp-block-table .wp-element-caption) {
	margin: var(--webbo-pc-caption-gap) 0 0 !important;
	padding: 0;
	font-size: var(--webbo-pc-caption-size);
	line-height: var(--webbo-pc-caption-line-height);
	color: var(--webbo-pc-caption-color);
	text-align: left;
}

/* -------------------------------------------------------------------------
 * Gutenberg list block
 * ---------------------------------------------------------------------- */
.elementor-widget-theme-post-content :where(ul.wp-block-list, ol.wp-block-list),
.elementor-element[data-widget_type="theme-post-content.default"] :where(ul.wp-block-list, ol.wp-block-list),
.webbo-post-content :where(ul.wp-block-list, ol.wp-block-list) {
	padding-left: 30px !important;
	padding-bottom: 32px;
}

.elementor-widget-theme-post-content .wp-block-list > li + li,
.elementor-element[data-widget_type="theme-post-content.default"] .wp-block-list > li + li,
.webbo-post-content .wp-block-list > li + li {
	margin-top: 5px;
}

/* -------------------------------------------------------------------------
 * Gutenberg image block
 * ---------------------------------------------------------------------- */
.elementor-widget-theme-post-content figure.wp-block-image,
.elementor-element[data-widget_type="theme-post-content.default"] figure.wp-block-image,
.webbo-post-content figure.wp-block-image,
.elementor-widget-theme-post-content .wp-block-image,
.elementor-element[data-widget_type="theme-post-content.default"] .wp-block-image,
.webbo-post-content .wp-block-image {
	width: 100%;
	max-width: 100%;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: var(--webbo-pc-block-gap) !important;
	margin-left: 0 !important;
}

/* Shared ratio engine: the Elementor slider writes only the unitless height
 * ratio variable on the widget. The actual crop behaviour lives here so the
 * same ratio semantics can be reused by other Webbo content enhancements.
 *
 * 0.50 = height is 50% of width
 * 1.00 = square
 * 1.50 = height is 150% of width
 */
.elementor-widget-theme-post-content .wp-block-image img,
.elementor-element[data-widget_type="theme-post-content.default"] .wp-block-image img,
.webbo-post-content .wp-block-image img {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
	aspect-ratio: 1 / var(--webbo-pc-image-height-ratio) !important;
	object-fit: cover !important;
	object-position: top;
}

/* Image captions exist only when the Gutenberg author adds one. */
.elementor-widget-theme-post-content :where(.wp-block-image figcaption, .wp-block-image .wp-element-caption),
.elementor-element[data-widget_type="theme-post-content.default"] :where(.wp-block-image figcaption, .wp-block-image .wp-element-caption),
.webbo-post-content :where(.wp-block-image figcaption, .wp-block-image .wp-element-caption) {
	margin: var(--webbo-pc-caption-gap) 0 0 !important;
	padding: 0;
	font-size: var(--webbo-pc-caption-size);
	line-height: var(--webbo-pc-caption-line-height);
	color: var(--webbo-pc-caption-color);
	text-align: left;
}


/* -------------------------------------------------------------------------
 * Responsive table readability
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.elementor-widget-theme-post-content,
	.elementor-element[data-widget_type="theme-post-content.default"],
	.webbo-post-content {
		--webbo-pc-table-min-width: 600px;
	}
}


/* -------------------------------------------------------------------------
 * Table semantic header compatibility
 * ----------------------------------------------------------------------
 * WordPress Table blocks use <thead> when the Gutenberg Header section is
 * enabled. Older/imported tables often keep the visual heading row inside
 * <tbody>. Webbo treats the first row as the visual header only when no
 * <thead> exists, matching the Elementor Header controls in v1.0.10.
 */
.elementor-widget-theme-post-content :where(.wp-block-table table:not(:has(thead)) > tbody > tr:first-child > th, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > td),
.elementor-element[data-widget_type="theme-post-content.default"] :where(.wp-block-table table:not(:has(thead)) > tbody > tr:first-child > th, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > td),
.webbo-post-content :where(.wp-block-table table:not(:has(thead)) > tbody > tr:first-child > th, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > td) {
	font-weight: 600;
}

/* Inline formatting inside header/first-column cells must follow the cell's
 * Webbo typography. Without this, Gutenberg <strong>/<b> keeps its browser
 * bold weight and makes Elementor Weight 400 appear broken. */
.elementor-widget-theme-post-content :where(.wp-block-table table > thead > tr > th, .wp-block-table table > thead > tr > td, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > th, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > td) :where(strong, b),
.elementor-element[data-widget_type="theme-post-content.default"] :where(.wp-block-table table > thead > tr > th, .wp-block-table table > thead > tr > td, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > th, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > td) :where(strong, b),
.webbo-post-content :where(.wp-block-table table > thead > tr > th, .wp-block-table table > thead > tr > td, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > th, .wp-block-table table:not(:has(thead)) > tbody > tr:first-child > td) :where(strong, b),
.elementor-widget-theme-post-content :where(.wp-block-table table:has(thead) > tbody > tr > :first-child, .wp-block-table table:not(:has(thead)) > tbody > tr:not(:first-child) > :first-child) :where(strong, b),
.elementor-element[data-widget_type="theme-post-content.default"] :where(.wp-block-table table:has(thead) > tbody > tr > :first-child, .wp-block-table table:not(:has(thead)) > tbody > tr:not(:first-child) > :first-child) :where(strong, b),
.webbo-post-content :where(.wp-block-table table:has(thead) > tbody > tr > :first-child, .wp-block-table table:not(:has(thead)) > tbody > tr:not(:first-child) > :first-child) :where(strong, b) {
	font: inherit;
	color: inherit !important;
}