/* Application-specific styles that extend the core theme */

/* ============================================================================
 * HOME PAGE / LANDING PAGE STYLES
 * Full-bleed gradient background that extends to edges
 * ============================================================================ */

/* When home-hero is present, extend gradient to fill gaps */
body:has(.home-hero) {
	background: linear-gradient(0deg, rgba(var(--primary-brand-rgb), 0.20) 0%, rgba(var(--primary-brand-rgb), 0.08) 25%, transparent 50%, rgba(var(--secondary-brand-rgb), 0.08) 75%, rgba(var(--secondary-brand-rgb), 0.20) 100%), linear-gradient(180deg, #3a3d41 0%, #2d3035 50%, #252829 100%) !important;
}

.layout-wrapper:has(.home-hero) {
	background: transparent !important;
	min-height: 100vh;
}

	/* Make child containers transparent so layout gradient shows through */
	.layout-wrapper:has(.home-hero) .layout-container,
	.layout-wrapper:has(.home-hero) .layout-page,
	.layout-wrapper:has(.home-hero) .content-wrapper,
	.layout-wrapper:has(.home-hero) .container-p-y,
	.layout-wrapper:has(.home-hero) .flex-grow-1 {
		background: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Footer styling for home page - remove bottom margin */
	.layout-wrapper:has(.home-hero) .footer {
		margin-bottom: 0 !important;
	}

/* Prevent horizontal scrollbar from 100vw technique */
.layout-wrapper:has(.home-hero) {
	overflow-x: hidden;
}

/* Layout Configuration Classes */
.layout-horizontal {
	--menu-type: horizontal;
}

.layout-vertical {
	--menu-type: vertical;
}

/* Menu Type Specific Styles */
.menu-horizontal {
	display: flex;
	flex-direction: row;
	height: auto;
}

.menu-vertical {
	display: flex;
	flex-direction: column;
	width: var(--menu-width);
	height: 100vh;
	position: fixed;
	left: 0;
	top: var(--navbar-height);
}

/* Application specific overrides */
body {
	padding-top: var(--content-padding-top);
}
/* Hero Section Styles */
.hero-section {
	background-color: var(--theme-bg-secondary);
	min-height: calc(100vh - var(--navbar-height));
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	padding-top: calc(var(--navbar-height) + 40px);
}

.hero-content {
	position: relative;
	z-index: 2;
}

/* Custom Button Styles */
.btn-primary-custom {
	background-color: var(--btn-primary-bg);
	border-color: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	padding: 15px 30px;
	font-size: 1.1rem;
	font-weight: 600;
	border-radius: 8px;
	transition: all 0.3s ease;
	text-transform: none;
}

	.btn-primary-custom:hover {
		background-color: var(--btn-primary-hover);
		border-color: var(--btn-primary-hover);
		transform: translateY(-2px);
		box-shadow: 0 8px 25px color-mix(in srgb, var(--primary-brand) 30%, transparent);
	}

.btn-outline-custom {
	border: 2px solid var(--btn-outline-primary);
	color: var(--btn-outline-primary);
	padding: 15px 30px;
	font-size: 1.1rem;
	font-weight: 600;
	border-radius: 8px;
	background: transparent;
	transition: all 0.3s ease;
	text-transform: none;
}

	.btn-outline-custom:hover {
		background-color: var(--btn-outline-hover-bg);
		color: white;
		transform: translateY(-2px);
		box-shadow: 0 8px 25px color-mix(in srgb, var(--secondary-brand) 30%, transparent);
	}

/* Section Backgrounds */
.section-dark {
	background-color: var(--theme-bg-tertiary);
	padding: 80px 0;
}

.section-light {
	background-color: var(--theme-bg-secondary);
	padding: 80px 0;
}

.product-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 16px;
	padding: 40px;
	height: 100%;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--card-shadow);
}

	.product-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background-color: var(--primary-brand);
	}

	.product-card:hover {
		transform: translateY(-10px);
		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
		color: inherit;
		text-decoration: none;
	}

	.product-card.featured {
		border: 2px solid var(--primary-brand);
	}

	.product-card.addon {
		opacity: 0.7;
		border: 1px solid #555;
	}

.product-icon {
	font-size: 3rem !important;
	color: var(--primary-brand);
	margin-bottom: 20px;
}

/* Higher specificity to override MDI defaults */
.mdi.product-icon:before {
	font-size: 3rem !important;
}

/* Also target any inline styles that might be applied */
i.mdi.product-icon {
	font-size: 3rem !important;
}

	i.mdi.product-icon:before {
		font-size: 3rem !important;
		line-height: 1.5em;
	}

/* Override MDI defaults for any icon with inline font-size */
.mdi[style*="font-size: 3rem"]:before {
	font-size: 3rem !important;
}

/* Catch-all for any MDI icon that should be 4rem */
.text-center .mdi:before,
.v1-homepage .mdi:before {
	font-size: inherit !important;
}

/* Logo product icons - smaller than main product icons */
.logo-product-icon {
	font-size: 3rem !important;
}

.mdi.logo-product-icon:before {
	font-size: 3rem !important;
}

i.mdi.logo-product-icon {
	font-size: 3rem !important;
}

	i.mdi.logo-product-icon:before {
		font-size: 3rem !important;
	}

.product-price {
	font-size: 2rem;
	font-weight: 700;
	color: var(--secondary-brand);
}

/* Navbar inherits theme colors from core-theme.css */
.navbar {
	z-index: 1030; /* Ensure navbar stays on top */
	transition: all 0.3s ease;
}

	.navbar.fixed-top {
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

/* Responsive navbar adjustments */
@media (max-width: 991.98px) {
	html {
		scroll-padding-top: 100px; /* Smaller offset for mobile */
	}

	.smooth-scroll {
		scroll-padding-top: 100px; /* Smaller offset for mobile */
	}

	body {
		padding-top: 80px; /* Smaller padding for mobile */
	}

	.hero-section {
		min-height: calc(100vh - 80px);
		margin-top: -80px;
		padding-top: 80px;
	}
}

.navbar-brand {
	font-weight: 700;
	font-size: 1.8rem;
	color: var(--primary-brand);
}

.text-primary-brand {
	color: var(--primary-brand);
}

.text-secondary-brand {
	color: var(--secondary-brand);
}

.hero-title {
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 30px;
}

.hero-subtitle {
	font-size: 1.5rem;
	color: var(--theme-text-muted);
	margin-bottom: 40px;
	line-height: 1.5;
}

.section-title {
	font-size: 2.8rem;
	font-weight: 700;
	margin-bottom: 20px;
}

.section-subtitle {
	font-size: 1.2rem;
	color: var(--theme-text-muted);
	margin-bottom: 50px;
}

.bundle-card {
	background: var(--card-bg);
	border: 2px solid var(--primary-brand);
	border-radius: 16px;
	padding: 40px;
	text-align: center;
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
	color: var(--theme-text-primary);
}

	.bundle-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background-color: var(--primary-brand);
	}

.savings-badge {
	background-color: var(--secondary-brand);
	color: white;
	padding: 8px 16px;
	border-radius: 25px;
	font-size: 0.9rem;
	font-weight: 600;
	display: inline-block;
	margin-bottom: 15px;
}

.bundle-price {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--secondary-brand);
}

.original-price {
	font-size: 1.5rem;
	color: var(--theme-text-muted);
	text-decoration: line-through;
}

.feature-highlight {
	background: color-mix(in srgb, var(--primary-brand) 10%, transparent);
	border: 1px solid var(--primary-brand);
	border-radius: 8px;
	padding: 30px;
	margin: 30px 0;
}

.addon-notice {
	background: color-mix(in srgb, var(--secondary-brand) 10%, transparent);
	border: 1px solid var(--secondary-brand);
	border-radius: 8px;
	padding: 20px;
	margin-top: 40px;
	text-align: center;
}

.hidden-products {
	display: none;
}

@media (max-width: 768px) {
	.hero-title {
		font-size: 2.8rem;
	}

	.hero-subtitle {
		font-size: 1.3rem;
	}

	.section-title {
		font-size: 2.2rem;
	}
}

html {
	scroll-padding-top: 140px; /* Offset for fixed navbar + extra space */
}

.smooth-scroll {
	scroll-behavior: smooth;
	scroll-padding-top: 140px; /* Offset for fixed navbar + extra space */
}

h1:focus {
	outline: none;
}

/* Ensure h4 elements match Bootstrap default font-size */
h4 {
	font-size: 1.5rem !important;
}

/* Problem section spacing improvements */
.problem-section .row {
	margin-top: 1rem;
}

/* Fix MDI icon spacing in problem/stats sections */
.problem-section .mdi,
.stats-section .mdi {
	line-height: 1 !important;
	margin-bottom: 1.5rem !important;
	display: block;
}

.reglink {
	text-decoration: underline;
	color: var(--theme-text-primary);
}

/* Note: .btn-primary and .btn-outline-primary styles are in core-theme.css */

.modal-backdrop {
	--bs-backdrop-opacity: 0.7;
}

/* Menu active state - uses brand color */
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
	background-color: var(--primary-brand);
	border-top-right-radius: 0px;
	border-bottom-right-radius: 100px;
	color: #fff;
	font-weight: 300;
}

.bg-menu-theme .menu-inner-shadow {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 100px;
	background-color: var(--theme-bg-secondary);
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid #e50000;
}

.validation-message {
	color: #e50000;
}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred."
	}

/* Brand color utility classes */
.primary-brand {
	color: var(--primary-brand) !important;
}

.secondary-brand {
	color: var(--secondary-brand) !important;
}

.bg-primary-brand {
	background-color: var(--primary-brand) !important;
}

.bg-secondary-brand {
	background-color: var(--secondary-brand) !important;
}

/* Button styling with brand colors */
.btn-primary-brand {
	background-color: var(--primary-brand) !important;
	color: white !important;
	text-transform: none !important;
}

.btn-secondary-brand {
	background-color: var(--secondary-brand) !important;
	color: white !important;
	text-transform: none !important;
}

/* Services section styling */
.services-section .card {
	transition: transform 0.3s ease;
}

	.services-section .card:hover {
		transform: translateY(-10px);
	}

.service-icon {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

/* Override the bg-light class to use your desired gray color */
.bg-light {
	--bs-light-rgb: 115, 114, 113 !important; /* This is #3E4651 in RGB */
	background-color: #4A4A4A !important;
}

/* Also override the CSS custom property at root level */
:root {
	--bs-light-rgb: 115, 114, 113 !important;
}

/* Alternative approach - target the specific element if the above is too broad */
.audience-section.bg-light,
.intake-questions-section.bg-light,
.bg-light.py-5 {
	background-color: #4A4A4A !important;
}

/* Ensure text contrast is good on the new background */
.bg-light {
	color: #ffffff !important;
}

	.bg-light .lead,
	.bg-light h3,
	.bg-light h4,
	.bg-light p {
		color: #ffffff !important;
	}

	.bg-light .question-item {
		color: #e0e0e0 !important;
	}

/* Product-specific page styles */
.stats-number {
	font-size: 3rem;
	font-weight: 700;
}

.feature-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 30px;
	height: 100%;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	color: var(--theme-text-primary);
}

	.feature-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background-color: var(--primary-brand);
	}

	.feature-card:hover {
		transform: translateY(-10px);
		box-shadow: 0 15px 40px var(--card-shadow);
	}

.feature-icon {
	font-size: 2.5rem !important;
	color: var(--primary-brand);
	margin-bottom: 20px;
}

/* Higher specificity to override MDI defaults for feature icons */
.mdi.feature-icon:before {
	font-size: 2.5rem !important;
}

/* Also target any inline styles that might be applied */
i.mdi.feature-icon {
	font-size: 2.5rem !important;
}

	i.mdi.feature-icon:before {
		font-size: 2.5rem !important;
	}

.pricing-card {
	background: var(--card-bg);
	border: 2px solid var(--primary-brand);
	border-radius: 16px;
	padding: 40px;
	text-align: center;
	position: relative;
	overflow: hidden;
	color: var(--theme-text-primary);
}

	.pricing-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background-color: var(--primary-brand);
	}

	.pricing-card > * {
		position: relative;
		z-index: 2;
	}

.price {
	font-size: 3rem;
	font-weight: 700;
	color: var(--secondary-brand);
}

.value-badge {
	background-color: var(--secondary-brand);
	color: white;
	padding: 8px 16px;
	border-radius: 25px;
	font-size: 0.9rem;
	font-weight: 600;
	display: inline-block;
	margin-bottom: 15px;
}

/* Responsive Logo Styles */
.logo-container {
	display: flex;
	align-items: center;
	height: 80px; /* Fixed height for navbar */
}

.responsive-logo {
	height: 100%;
	width: auto;
	max-width: none; /* Remove width restrictions */
}

/* Logo product icons - smaller than main product icons */
.logo-container .logo-product-icon {
	font-size: 1.5rem !important;
}

.logo-container .mdi.logo-product-icon:before {
	font-size: 1.5rem !important;
}

.logo-container i.mdi.logo-product-icon {
	font-size: 1.5rem !important;
}

	.logo-container i.mdi.logo-product-icon:before {
		font-size: 1.5rem !important;
	}

/* Navbar responsive adjustments */
.navbar {
	min-height: 90px;
	padding: 0.5rem 0;
}

.navbar-brand {
	margin-right: 0;
	padding: 0;
	height: 60px;
	display: flex;
	align-items: center;
}

/* Extra small screens */
@media (max-width: 575.98px) {
	body {
		padding-top: 70px; /* Even smaller padding */
	}

	.hero-section {
		min-height: calc(100vh - 70px);
		margin-top: -70px;
		padding-top: 70px;
	}

	.navbar {
		min-height: 50px;
		padding: 0.25rem 0;
	}

	.logo-container {
		height: 80px;
		width: calc(100vw - 60px);
		overflow: visible; /* Add this to prevent clipping */
	}

		.logo-container .responsive-logo {
			transform: scale(0.7); /* Reduce from 1.5 to prevent cutoff */
		}

	.navbar .container {
		padding-left: 0.5rem; /* Reduce from default Bootstrap padding */
	}

	.navbar-brand {
		margin-left: -1.5rem; /* Pull the logo further left */
		padding-left: 0; /* Remove any left padding */
	}

	.responsive-logo {
		max-width: none; /* Remove width restrictions */
		min-width: unset; /* Remove width restrictions */
	}

	.logo-product-icon {
		font-size: 1.5rem !important;
	}

	html {
		scroll-padding-top: 80px;
	}

	.smooth-scroll {
		scroll-padding-top: 80px;
	}

	.navbar-nav .nav-item {
		margin-top: 0.5rem;
	}

	.navbar-nav .btn {
		margin: 0.5rem 0;
		width: 100%;
		text-align: center;
	}
}

/* Ensure navbar collapse button is properly sized */
.navbar-toggler {
	padding: 0.25rem 0.5rem;
	font-size: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Adjust navbar nav items for mobile */
@media (max-width: 991.98px) {
	.navbar-nav .nav-item {
		margin-top: 0.5rem;
	}

	.navbar-nav .btn {
		margin: 0.5rem 0;
		width: 100%;
		text-align: center;
	}
}