/*
Theme Name: Church Resources
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Child theme of Hello Elementor for Church Resources. Header, sidebar, and main are body siblings; grid layout aligns sidebar with the header row.
Author: Church Resources
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.4.0
Text Domain: church-resources
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
 * App-style layout: sidebar shares the vertical space beside header + main (not nested under a content shell).
 * DOM order: skip links → header → aside → main → footer (see header.php + index.php).
 */
body.church-resources-layout {
	--church-resources-sidebar-width: 300px;
	display: grid;
	grid-template-columns: var(--church-resources-sidebar-width) minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"sidebar header"
		"sidebar main"
		"footer footer";
	min-height: 100vh;
}

body.church-resources-layout .elementor-location-header,
body.church-resources-layout #site-header {
	grid-area: header;
	min-width: 0;
	align-self: start;
}

body.church-resources-layout .elementor-location-church-resources-sidebar,
body.church-resources-layout aside.church-resources-sidebar {
	grid-area: sidebar;
	min-width: 0;
	width: var(--church-resources-sidebar-width);
	align-self: stretch;
}

body.church-resources-layout main#content.church-resources-main {
	grid-area: main;
	min-width: 0;
}

body.church-resources-layout .elementor-location-footer,
body.church-resources-layout #site-footer {
	grid-area: footer;
}

/*
 * Elementor boxed flex/grid containers split padding between layers (frontend.css):
 * - Outer .e-con: margin (all sides) + padding-left/right only
 * - Inner .e-con-inner: padding-top/bottom via .e-con-full, .e-con > .e-con-inner { padding-block-* }
 * So the 20px block padding on .e-con-inner is your container’s top/bottom padding — not extra mystery spacing.
 * Inner also uses margin: 0 auto + max-width for boxed width; any 15px side margin you see is almost always on the outer .e-con (post-*.css), not a second hidden control on .e-con-inner.
 *
 * Below: optional merge so block padding applies on the outer shell only (sidebar Theme Builder location).
 */
.elementor-location-church-resources-sidebar .e-con.e-flex,
.elementor-location-church-resources-sidebar .e-con.e-grid {
	padding-block-start: var(--padding-block-start);
	padding-block-end: var(--padding-block-end);
}

.elementor-location-church-resources-sidebar .e-con.e-flex > .e-con-inner,
.elementor-location-church-resources-sidebar .e-con.e-grid > .e-con-inner {
	padding-block-start: 0;
	padding-block-end: 0;
}

/*
 * Elementor uses margin: 0 auto on .e-con-inner to center a boxed max-width column.
 * Browsers resolve "auto" to pixel margins in computed styles (often ~15px when it matches your layout math),
 * which looks like duplicate side margin next to the outer .e-con margin. Clear inlines so only the outer shell margins apply.
 */
.elementor-location-church-resources-sidebar .e-con > .e-con-inner {
	margin-inline-start: 0;
	margin-inline-end: 0;
}

/*
 * Listing/table column utilities.
 * Title (w-40 / w-4) uses the widest track; other columns stay tighter.
 */
:root {
	--crm-table-columns: minmax(64px, 0.9fr) minmax(100px, 1.5fr) minmax(220px, 4fr) minmax(88px, 1.1fr) minmax(64px, 0.9fr);
}

.e-con.e-flex:has(> .e-con.w-10):has(> .e-con.w-30):has(> .e-con.w-40):has(> .e-con.w-20),
.e-con.e-flex:has(> .e-con.w-1):has(> .e-con.w-3):has(> .e-con.w-4):has(> .e-con.w-2) {
	align-items: stretch;
	column-gap: 0;
	display: grid !important;
	grid-template-columns: var(--crm-table-columns);
	min-width: 0;
	width: 100%;
}

.e-con.e-flex:has(> .e-con.w-10):has(> .e-con.w-30):has(> .e-con.w-40):has(> .e-con.w-20) > .e-con,
.e-con.e-flex:has(> .e-con.w-1):has(> .e-con.w-3):has(> .e-con.w-4):has(> .e-con.w-2) > .e-con {
	--container-widget-flex-grow: 0;
	--container-widget-width: initial;
	max-width: none;
	min-width: 0;
	width: auto;
}

.e-con.w-1.e-con-boxed > .e-con-inner,
.e-con.w-2.e-con-boxed > .e-con-inner,
.e-con.w-3.e-con-boxed > .e-con-inner,
.e-con.w-4.e-con-boxed > .e-con-inner,
.e-con.w-10.e-con-boxed > .e-con-inner,
.e-con.w-20.e-con-boxed > .e-con-inner,
.e-con.w-30.e-con-boxed > .e-con-inner,
.e-con.w-40.e-con-boxed > .e-con-inner {
	margin-inline: 0;
	max-width: 100%;
	width: 100%;
}

.e-con[class*="w-"] .elementor-heading-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.e-con.w-10 .crm-sermon-audio__button,
	.e-con.w-1 .crm-sermon-audio__button {
		padding-inline: 0.65rem;
	}
}

@media (max-width: 1024px) {
	:root {
		--crm-table-columns: minmax(56px, 0.8fr) minmax(88px, 1.3fr) minmax(180px, 3.5fr) minmax(72px, 1fr) minmax(56px, 0.8fr);
	}
}

@media (max-width: 767px) {
	.e-con.e-flex:has(> .e-con.w-10):has(> .e-con.w-30):has(> .e-con.w-40):has(> .e-con.w-20),
	.e-con.e-flex:has(> .e-con.w-1):has(> .e-con.w-3):has(> .e-con.w-4):has(> .e-con.w-2) {
		display: flex !important;
		flex-wrap: wrap;
		gap: 10px 12px;
		grid-template-columns: none;
	}

	.e-con.e-flex:has(> .e-con.w-10):has(> .e-con.w-30):has(> .e-con.w-40):has(> .e-con.w-20) > .e-con,
	.e-con.e-flex:has(> .e-con.w-1):has(> .e-con.w-3):has(> .e-con.w-4):has(> .e-con.w-2) > .e-con {
		flex: 1 1 auto;
		max-width: 100%;
		min-width: 0;
		width: auto;
	}

	.e-con.e-flex > .e-con.w-4,
	.e-con.e-flex > .e-con.w-40 {
		flex: 1 1 100%;
		order: 1;
	}

	.e-con.e-flex > .e-con.w-3,
	.e-con.e-flex > .e-con.w-30 {
		flex: 1 1 calc(50% - 12px);
		order: 2;
	}

	.e-con.e-flex > .e-con.w-2,
	.e-con.e-flex > .e-con.w-20 {
		flex: 1 1 calc(50% - 12px);
		order: 3;
	}

	.e-con.e-flex > .e-con.w-1:first-child,
	.e-con.e-flex > .e-con.w-10:first-child {
		flex: 1 1 auto;
		order: 4;
	}

	.e-con.e-flex > .e-con.w-1:last-child,
	.e-con.e-flex > .e-con.w-10:last-child {
		flex: 0 0 auto;
		margin-left: auto;
		order: 5;
	}

	.e-con[class*="w-"] .elementor-heading-title {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
	}
}