/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   Universal Responsive Content Layout & Mobile Protection
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	overflow-x: hidden;
	width: 100%;
	max-width: 100%;
}

/* Ensure main content container expands fully, centers, and maintains standard 1280px max-width across all pages */
#brx-content,
main#brx-content,
article#brx-content,
#brx-content.wordpress,
article#brx-content.wordpress {
	flex: 1 0 auto !important;
	width: 100% !important;
	max-width: 1280px !important;
	margin-inline: auto !important;
	box-sizing: border-box !important;
	height: auto !important;
	min-height: 0 !important;
	padding-bottom: clamp(48px, 8vw, 96px);
}

#brx-footer {
	flex-shrink: 0 !important;
	margin-top: auto !important;
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
}

#brx-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	width: 100%;
	background: var(--gcn-brand-rule, linear-gradient(90deg, #0e8b72 0%, #17ad8f 45%, #e5a93c 100%));
	z-index: 5;
	pointer-events: none;
}

#brx-footer > .brxe-section {
	max-width: 100% !important;
	width: 100% !important;
}

#brx-footer > .brxe-section::before {
	display: none !important;
}

/* Global Section & Container Side Padding across all pages */
#brx-content > .brxe-section:not(#brx-header):not(.brx-header):not(.gcn-no-pad),
#brx-content > section:not(#brx-header):not(.brx-header):not(.gcn-no-pad) {
	padding-inline: clamp(16px, 4.5vw, 36px);
	box-sizing: border-box;
}

#brx-content > .brxe-section:last-child:not(#brx-header),
#brx-content > section:last-child:not(#brx-header),
#brx-content > article:last-child:not(#brx-header) {
	padding-bottom: clamp(48px, 8vw, 96px);
}

/* Responsive typography safeguards */
#brx-content h1,
#brx-content h2,
#brx-content h3,
#brx-content h4,
#brx-content h5,
#brx-content h6,
#brx-content .brxe-heading {
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}

#brx-content p,
#brx-content .brxe-text-basic {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

#brx-content img {
	max-width: 100%;
	height: auto;
}

/* Tablet & Mobile responsive container bounds */
@media (max-width: 991px) {
	#brx-content .brxe-container,
	#brx-footer .brxe-container {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	#brx-content > .brxe-section:not(#brx-header):not(.gcn-no-pad),
	#brx-content > section:not(#brx-header):not(.gcn-no-pad),
	#brx-content > article:not(#brx-header):not(.gcn-no-pad) {
		padding-inline: clamp(16px, 4vw, 24px) !important;
		box-sizing: border-box !important;
	}

	#brx-footer > .brxe-section {
		padding-inline: clamp(18px, 4.5vw, 32px) !important;
		box-sizing: border-box !important;
	}
}

@media (max-width: 575px) {
	#brx-content > .brxe-section:not(#brx-header):not(.gcn-no-pad),
	#brx-content > section:not(#brx-header):not(.gcn-no-pad),
	#brx-content > article:not(#brx-header):not(.gcn-no-pad) {
		padding-inline: clamp(14px, 4vw, 20px) !important;
	}

	#brx-footer > .brxe-section {
		padding-inline: clamp(18px, 5vw, 24px) !important;
	}
}