/**
 * MEC archive / category sidebar cards + heading alignment.
 *
 * Scoped to .mec-archive-sidebar (only rendered by MEC archive templates).
 * Replaces Customizer Additional CSS that was limited to body.tax-mec_category.
 */

/* -------------------------------------------------------------------------
 * Sidebar cards + hide bare widget titles
 * ------------------------------------------------------------------------- */

.mec-archive-sidebar .widget-title {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Hide bare title text nodes (MEC dumps titles as plain text before .textwidget) */
.mec-archive-sidebar {
	font-size: 0 !important;
	line-height: 0 !important;
}

.mec-archive-sidebar .textwidget,
.mec-archive-sidebar .textwidget * {
	font-size: 14px !important;
	line-height: normal !important;
}

.mec-archive-sidebar .textwidget.custom-html-widget {
	background: #fff !important;
	border: 1px solid #e7e9ec !important;
	border-radius: 8px !important;
	padding: 15px !important;
	margin: 0 0 20px !important;
	box-sizing: border-box !important;
}

/* Top spacing on main container (category + events archive) */
body.tax-mec_category #content.site-content > .container,
body.post-type-archive-mec-events #content.site-content > .container {
	padding-top: 20px !important;
}

body.tax-mec_category .mec-container,
body.post-type-archive-mec-events .mec-container {
	padding-top: 20px !important;
}

/* -------------------------------------------------------------------------
 * Heading + sidebar top alignment WITHOUT stretching the content column.
 * Previous display:contents grid made row 2 as tall as the sidebar, which
 * pushed short content (empty-state message / event list) far down.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {
	/* Title only as wide as the content column */
	.mec-container:has(> .mec-archive-wrapper) > h1,
	#main-content.mec-container:has(> .mec-archive-wrapper) > h1 {
		width: 66.6667% !important;
		max-width: 66.6667% !important;
		margin: 0 0 12px !important;
		padding-right: 15px !important;
		box-sizing: border-box !important;
		line-height: 1.25 !important;
	}

	.mec-container:has(> .mec-archive-wrapper) > .mec-archive-wrapper,
	#main-content.mec-container:has(> .mec-archive-wrapper) > .mec-archive-wrapper {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		clear: both !important;
		width: 100% !important;
	}

	.mec-container:has(> .mec-archive-wrapper) .mec-archive-content,
	#main-content.mec-container:has(> .mec-archive-wrapper) .mec-archive-content {
		flex: 1 1 66.6667% !important;
		width: 66.6667% !important;
		max-width: 66.6667% !important;
		float: none !important;
		padding-right: 15px !important;
		margin: 0 !important;
		min-height: 0 !important;
		height: auto !important;
		align-self: flex-start !important;
		box-sizing: border-box !important;
	}

	/* Pull sidebar up beside the H1.
	 * Use rem — sidebar has font-size:0 so em would collapse to 0. */
	.mec-container:has(> .mec-archive-wrapper) .mec-archive-sidebar,
	#main-content.mec-container:has(> .mec-archive-wrapper) .mec-archive-sidebar {
		flex: 0 0 33.3333% !important;
		width: 33.3333% !important;
		max-width: 33.3333% !important;
		float: none !important;
		padding-left: 15px !important;
		margin: 0 !important;
		margin-top: -3.4rem !important;
		align-self: flex-start !important;
		box-sizing: border-box !important;
	}

	/* Empty-state / skin root: never stretch to sidebar height */
	.mec-archive-content .mec-wrap,
	.mec-archive-content > .mec-wrap,
	.mec-archive-content .mec-skin-list-no-events-container,
	.mec-archive-content p {
		margin-top: 0 !important;
		min-height: 0 !important;
	}
}

@media (max-width: 991px) {
	.mec-container:has(> .mec-archive-wrapper) > h1,
	#main-content.mec-container:has(> .mec-archive-wrapper) > h1 {
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 12px !important;
	}

	.mec-container:has(> .mec-archive-wrapper) > .mec-archive-wrapper,
	#main-content.mec-container:has(> .mec-archive-wrapper) > .mec-archive-wrapper {
		display: block !important;
	}

	.mec-container:has(> .mec-archive-wrapper) .mec-archive-content,
	.mec-container:has(> .mec-archive-wrapper) .mec-archive-sidebar,
	#main-content.mec-container:has(> .mec-archive-wrapper) .mec-archive-content,
	#main-content.mec-container:has(> .mec-archive-wrapper) .mec-archive-sidebar {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-top: 0 !important;
	}
}