/*
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 {
	display: grid;
	grid-template-columns: auto 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;
	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;
}

@media (max-width: 781px) {
	body.church-resources-layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"sidebar"
			"main"
			"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;
}

/*
 * Elementor’s sticky script sets inset-inline-start / left to the element’s in-flow horizontal offset
 * (often matching margin-left, e.g. 15px), so when it sticks it looks like extra left inset. Force start = 0
 * inside the Theme Builder sidebar only. !important beats those inline styles.
 */
.elementor-location-church-resources-sidebar .elementor-sticky {
	inset-inline-start: 0 !important;
}

/* Elementor often mirrors offset as physical `left` in LTR; clear it without affecting RTL layouts. */
html:not([dir="rtl"]) .elementor-location-church-resources-sidebar .elementor-sticky {
	left: 0 !important;
}

html[dir="rtl"] .elementor-location-church-resources-sidebar .elementor-sticky {
	right: 0 !important;
}