/**
 * Elcogen Title-Subtitle Widget Styles
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* ============================================
   Container & Layout
   ============================================ */

.elcogen-title-subtitle {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-baseline-16);
	width: 100%;
}

/* ============================================
   Title - Base Styles
   ============================================ */

.elcogen-title-subtitle__title {
	font-family: var(--font-family-headings), sans-serif;
	color: var(--color-text-primary);
	margin: 0;
}

/* ============================================
   Title Size Classes - From Figma Design System
   Using !important to override theme typography styles
   ============================================ */

/* Title XXXXXL - Hero Title (6.625rem) - Figma H1 for subpage */
.elcogen-title-subtitle__title.title-xxxxxl {
	font-size: 6.625rem !important;
	font-weight: var(--font-weight-semibold) !important;
	line-height: 7.5rem !important;
	letter-spacing: 0 !important;
}

/* Title XXXL - Default (3rem) - Figma H2 */
.elcogen-title-subtitle__title.title-xxxl {
	font-size: var(--font-size-h2) !important;
	font-weight: var(--font-weight-semibold) !important;
	line-height: var(--line-height-h2) !important;
	letter-spacing: 0 !important;
}

/* Title XXXXL (3.5625rem) - Figma H1 */
.elcogen-title-subtitle__title.title-xxxxl {
	font-size: 3.5625rem !important;
	font-weight: var(--font-weight-semibold) !important;
	line-height: 4.5rem !important;
	letter-spacing: 0 !important;
}

/* Title LG (1.5625rem) - Figma H5 */
.elcogen-title-subtitle__title.title-lg, .small-h3 h3 {
	font-size: 1.5625rem !important;
	font-weight: var(--font-weight-bold) !important;
	line-height: 2.4375rem !important;
	letter-spacing: 0 !important;
}

/* Title XL (2.375rem) - Figma H4 */
.elcogen-title-subtitle__title.title-xl {
	font-size: 2.375rem !important;
	font-weight: var(--font-weight-semibold) !important;
	line-height: 2.4375rem !important;
	letter-spacing: 0 !important;
}

/* Title XXL (2.75rem) - Figma H3 */
.elcogen-title-subtitle__title.title-xxl {
	font-size: 2.75rem !important;
	font-weight: var(--font-weight-semibold) !important;
	line-height: 4rem !important;
	letter-spacing: 0 !important;
}

/* Title Base (1.1875rem) - Figma H6 */
.elcogen-title-subtitle__title.title {
	font-size: 1.1875rem !important;
	font-weight: var(--font-weight-bold) !important;
	line-height: 2rem !important;
	letter-spacing: 0 !important;
}

/* ============================================
   Subtitle Wrapper
   ============================================ */

.elcogen-title-subtitle__subtitle-wrapper {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-baseline-16);
}

/* ============================================
   Accent Bar
   ============================================ */

.elcogen-title-subtitle__accent-bar-wrapper {
	/* Styling now controlled by universal .elcogen-accent-bar-wrapper class in global CSS */
}

.elcogen-title-subtitle__accent-bar {
	/* Styling now controlled by universal .elcogen-accent-bar class in global CSS */
}

/* ============================================
   Subtitle
   ============================================ */

.elcogen-title-subtitle__subtitle {
	font-family: var(--font-family-headings), sans-serif;
	font-weight: var(--font-weight-light);
	font-size: 3rem;
	line-height: 3rem;
	color: var(--color-text-primary);
	margin: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ============================================
   Subtitle Size Classes
   ============================================ */

.elcogen-title-subtitle__subtitle.subtitle-3xl {
	font-size: 3rem;
	line-height: 3rem;
}

.elcogen-title-subtitle__subtitle.subtitle-2xl {
	font-size: 2.375rem;
	line-height: 2.875rem;
}

.elcogen-title-subtitle__subtitle.subtitle-xl {
	font-size: 1.75rem;
	line-height: 2.25rem;
}

.elcogen-title-subtitle__subtitle.subtitle-lg {
	font-size: 1.3125rem;
	line-height: 1.875rem;
}

.elcogen-title-subtitle__subtitle.subtitle-md {
	font-size: 1.0625rem;
	line-height: 1.625rem;
}

/* ============================================
   Accent Bar — Sizes tied to subtitle size class
   Scoped to .subtitle-wrapper so bar scales with text.
   Default (subtitle-3xl): matches global: height 3rem / bar 0.75rem (12px)
   Smallest (subtitle-md): height 1.75rem / bar 0.125rem (2px)
   ============================================ */

.elcogen-title-subtitle__subtitle-wrapper.subtitle-3xl .elcogen-accent-bar-wrapper {
	height: 3rem;
}
.elcogen-title-subtitle__subtitle-wrapper.subtitle-3xl .elcogen-accent-bar {
	height: 0.75rem;
}

.elcogen-title-subtitle__subtitle-wrapper.subtitle-2xl .elcogen-accent-bar-wrapper {
	height: 2.875rem;
}
.elcogen-title-subtitle__subtitle-wrapper.subtitle-2xl .elcogen-accent-bar {
	height: 0.5625rem;
}

.elcogen-title-subtitle__subtitle-wrapper.subtitle-xl .elcogen-accent-bar-wrapper {
	height: 2.25rem;
}
.elcogen-title-subtitle__subtitle-wrapper.subtitle-xl .elcogen-accent-bar {
	height: 0.375rem;
}

.elcogen-title-subtitle__subtitle-wrapper.subtitle-lg .elcogen-accent-bar-wrapper {
	height: 1.875rem;
}
.elcogen-title-subtitle__subtitle-wrapper.subtitle-lg .elcogen-accent-bar {
	height: 0.25rem;
}

.elcogen-title-subtitle__subtitle-wrapper.subtitle-md .elcogen-accent-bar-wrapper {
	height: 1.75rem;
}
.elcogen-title-subtitle__subtitle-wrapper.subtitle-md .elcogen-accent-bar {
	height: 0.125rem;
}

/* ============================================
   Responsive Styles - Mobile (max-width: 48rem)
   ============================================ */

@media (max-width: 48rem) {
	.elcogen-title-subtitle {
		gap: var(--spacing-baseline-12);
	}

	/* Responsive title sizes - approximately 60% of desktop size */
	.elcogen-title-subtitle__title.title-xxxxxl {
		font-size: 4rem !important;
		line-height: 4.5rem !important;
	}

	.elcogen-title-subtitle__title.title-xxxl {
		font-size: 1.8125rem !important;
		line-height: 2.6875rem !important;
	}

	.elcogen-title-subtitle__title.title-xxxxl {
		font-size: 2.125rem !important;
		line-height: 2.6875rem !important;
	}

	.elcogen-title-subtitle__title.title-lg, .small-h3 h3 {
		font-size: 0.9375rem !important;
		line-height: 1.4375rem !important;
	}

	.elcogen-title-subtitle__title.title-xl {
		font-size: 1.4375rem !important;
		line-height: 1.4375rem !important;
	}

	.elcogen-title-subtitle__title.title-xxl {
		font-size: 1.625rem !important;
		line-height: 2.375rem !important;
	}

	.elcogen-title-subtitle__title.title {
		font-size: 0.6875rem !important;
		line-height: 1.1875rem !important;
	}

	.elcogen-title-subtitle__subtitle-wrapper {
		flex-direction: column;
		gap: var(--spacing-baseline-08);
	}

	.elcogen-title-subtitle__accent-bar-wrapper {
		width: 3.75rem;
		height: 1.75rem;
	}

	.elcogen-title-subtitle__accent-bar {
		height: var(--spacing-baseline-08);
	}

	.elcogen-title-subtitle__subtitle {
		font-size: 1.4375rem;
		line-height: 2.4375rem;
	}

	.elcogen-title-subtitle__subtitle.subtitle-3xl {
		font-size: 1.4375rem;
		line-height: 2.4375rem;
	}

	.elcogen-title-subtitle__subtitle.subtitle-2xl {
		font-size: 1.25rem;
		line-height: 1.875rem;
	}

	.elcogen-title-subtitle__subtitle.subtitle-xl {
		font-size: 1.0625rem;
		line-height: 1.625rem;
	}

	.elcogen-title-subtitle__subtitle.subtitle-lg {
		font-size: 0.9375rem;
		line-height: 1.4375rem;
	}

	.elcogen-title-subtitle__subtitle.subtitle-md {
		font-size: 0.875rem;
		line-height: 1.375rem;
	}

	/* Accent bar heights scaled to mobile subtitle sizes */
	.elcogen-title-subtitle__subtitle-wrapper.subtitle-3xl .elcogen-accent-bar-wrapper {
		height: 2.4375rem;
	}
	.elcogen-title-subtitle__subtitle-wrapper.subtitle-3xl .elcogen-accent-bar {
		height: 0.5rem;
	}

	.elcogen-title-subtitle__subtitle-wrapper.subtitle-2xl .elcogen-accent-bar-wrapper {
		height: 1.875rem;
	}
	.elcogen-title-subtitle__subtitle-wrapper.subtitle-2xl .elcogen-accent-bar {
		height: 0.375rem;
	}

	.elcogen-title-subtitle__subtitle-wrapper.subtitle-xl .elcogen-accent-bar-wrapper {
		height: 1.625rem;
	}
	.elcogen-title-subtitle__subtitle-wrapper.subtitle-xl .elcogen-accent-bar {
		height: 0.25rem;
	}

	.elcogen-title-subtitle__subtitle-wrapper.subtitle-lg .elcogen-accent-bar-wrapper {
		height: 1.4375rem;
	}
	.elcogen-title-subtitle__subtitle-wrapper.subtitle-lg .elcogen-accent-bar {
		height: 0.1875rem;
	}

	.elcogen-title-subtitle__subtitle-wrapper.subtitle-md .elcogen-accent-bar-wrapper {
		height: 1.375rem;
	}
	.elcogen-title-subtitle__subtitle-wrapper.subtitle-md .elcogen-accent-bar {
		height: 0.125rem;
	}
}

/* ============================================
   Tablet Styles (48.0625rem - 64rem)
   ============================================ */

@media (min-width: 48.0625rem) and (max-width: 64rem) {
	/* Responsive title sizes - approximately 75% of desktop size */
	.elcogen-title-subtitle__title.title-xxxxxl {
		font-size: 5rem !important;
		line-height: 5.625rem !important;
	}

	.elcogen-title-subtitle__title.title-xxxl {
		font-size: 2.25rem !important;
		line-height: 3.375rem !important;
	}

	.elcogen-title-subtitle__title.title-xxxxl {
		font-size: 2.6875rem !important;
		line-height: 3.375rem !important;
	}

	.elcogen-title-subtitle__title.title-lg, .small-h3 h3 {
		font-size: 1.1875rem !important;
		line-height: 1.8125rem !important;
	}

	.elcogen-title-subtitle__title.title-xl {
		font-size: 1.8125rem !important;
		line-height: 1.8125rem !important;
	}

	.elcogen-title-subtitle__title.title-xxl {
		font-size: 2.0625rem !important;
		line-height: 3rem !important;
	}

	.elcogen-title-subtitle__title.title {
		font-size: 0.875rem !important;
		line-height: 1.5rem !important;
	}

	.elcogen-title-subtitle__subtitle {
		font-size: 1.75rem;
		line-height: 2.625rem;
	}

	.elcogen-title-subtitle__subtitle.subtitle-3xl {
		font-size: 1.75rem;
		line-height: 2.625rem;
	}

	.elcogen-title-subtitle__subtitle.subtitle-2xl {
		font-size: 1.5rem;
		line-height: 2.25rem;
	}

	.elcogen-title-subtitle__subtitle.subtitle-xl {
		font-size: 1.25rem;
		line-height: 1.875rem;
	}

	.elcogen-title-subtitle__subtitle.subtitle-lg {
		font-size: 1.0625rem;
		line-height: 1.625rem;
	}

	.elcogen-title-subtitle__subtitle.subtitle-md {
		font-size: 0.9375rem;
		line-height: 1.4375rem;
	}

	/* Accent bar heights scaled to tablet subtitle sizes */
	.elcogen-title-subtitle__subtitle-wrapper.subtitle-3xl .elcogen-accent-bar-wrapper {
		height: 2.625rem;
	}
	.elcogen-title-subtitle__subtitle-wrapper.subtitle-3xl .elcogen-accent-bar {
		height: 0.625rem;
	}

	.elcogen-title-subtitle__subtitle-wrapper.subtitle-2xl .elcogen-accent-bar-wrapper {
		height: 2.25rem;
	}
	.elcogen-title-subtitle__subtitle-wrapper.subtitle-2xl .elcogen-accent-bar {
		height: 0.5rem;
	}

	.elcogen-title-subtitle__subtitle-wrapper.subtitle-xl .elcogen-accent-bar-wrapper {
		height: 1.875rem;
	}
	.elcogen-title-subtitle__subtitle-wrapper.subtitle-xl .elcogen-accent-bar {
		height: 0.3125rem;
	}

	.elcogen-title-subtitle__subtitle-wrapper.subtitle-lg .elcogen-accent-bar-wrapper {
		height: 1.625rem;
	}
	.elcogen-title-subtitle__subtitle-wrapper.subtitle-lg .elcogen-accent-bar {
		height: 0.1875rem;
	}

	.elcogen-title-subtitle__subtitle-wrapper.subtitle-md .elcogen-accent-bar-wrapper {
		height: 1.4375rem;
	}
	.elcogen-title-subtitle__subtitle-wrapper.subtitle-md .elcogen-accent-bar {
		height: 0.125rem;
	}
}