/**
 * Elcogen Content Container - Global Utility Classes
 *
 * IMPORTANT: This is NOT a widget. These are utility CSS classes to be applied
 * to Elementor's native Container element.
 *
 * HOW TO USE:
 * 1. Add an Elementor Container (Flexbox Container) to your page
 * 2. In the Advanced tab > CSS Classes, add: elcogen-content-container
 * 3. (Optional) Add modifier classes:
 *    - elcogen-content-container--bordered (adds left border)
 *    - elcogen-content-container--full (max-width 88.5rem instead of 73.5rem)
 *    - elcogen-content-container--no-padding (removes all padding)
 *
 * EXAMPLE:
 * CSS Classes: elcogen-content-container elcogen-content-container--bordered
 *
 * Design Specifications (Figma nodes: 38896:44116 desktop, 40221:26836 mobile):
 * - Desktop: Max-width 73.5rem, 6rem left/right padding, 0.25rem left border (optional)
 * - Mobile: Full width, 0.75rem left/right padding, 0.25rem left border (optional)
 * - Border color: #0c28c4 (cobalt blue)
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

 .header-container-narrow {
  width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
 }

/* =============================
   BASE CONTAINER CLASS
   ============================= */
.elcogen-content-container, .e-con-boxed {
	padding-block: var(--spacing-baseline-32);
}

.e-con-inner {
    width: 100% !important;
	max-width: var(--container-narrow) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--spacing-baseline-96) !important;
	padding-right: var(--spacing-baseline-96) !important;
	box-sizing: border-box !important;
	border-left: 1px solid var(--color-cobalt-blue-400) !important;
	margin-bottom: var(--spacing-baseline-64);
	padding-top: var(--spacing-baseline-32) !important;
}
@media (max-width: 48rem) {
	.e-con-inner {
		padding-inline: var(--spacing-baseline-12) !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
}

/* =============================
   MODIFIER CLASSES
   ============================= */



/* Full width variant (88.5rem instead of 73.5rem) */
.elcogen-content-container--full {
	max-width: var(--container-default) !important;
}

/* Remove all padding */
.elcogen-content-container--no-padding {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Remove border (accessibility/customization) */
.elcogen-content-container--no-border {
	border-left: none !important;
}

/* =============================
   RESPONSIVE BREAKPOINTS
   ============================= */

/* Tablet (48rem - 63.9375rem) */
@media (max-width: 63.9375rem) and (min-width: 48rem) {
	.elcogen-content-container {
		padding-left: var(--spacing-baseline-48) !important;
		padding-right: var(--spacing-baseline-48) !important;
	}
}

/* Mobile (<48rem) */
@media (max-width: 47.9375rem) {
	.elcogen-content-container {
		padding-left: var(--spacing-baseline-12) !important;
		padding-right: var(--spacing-baseline-12) !important;
	}
}

/* =============================
   ACCESSIBILITY UTILITIES
   ============================= */

/**
 * Hide .entry-title visually (WCAG & SEO safe)
 *
 * Hides WordPress entry title from view while keeping it accessible
 * to screen readers and search engines.
 */
/* .entry-title {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}