/**
 * Fischer Bell Theme - Homepage Stylesheet
 * 
 * Contains styles for homepage containers, padding sections,
 * alternating panels, smooth scroll behaviors, and responsive adjustments.
 */

/* -----------------------------------------
   1. Homepage Layout and Containers
   ----------------------------------------- */

/* Override theme container on homepage to allow sections to stretch full width */
.home #content .ast-container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
}

.homepage {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow-x: hidden;
}

/* Base Homepage Section */
.homepage-section {
	padding: var(--space-2xl) 0;
	position: relative;
	width: 100%;
}

/* Homepage Section Containers */
.homepage-section .container {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
}

/* Alternating Panels (.section-alt) */
.section-alt {
	background-color: var(--color-surface-alt) !important;
}

/* Alternating backgrounds specifically for our fallback sections */
.fb-service-cards-wrapper {
	padding: var(--space-2xl) var(--space-lg) !important;
	background-color: var(--color-surface-alt);
}

.fb-featured-products-section {
	padding: var(--space-2xl) var(--space-lg) !important;
	background-color: var(--color-surface);
	max-width: 1200px;
	margin: 0 auto;
}

.fb-brands-carousel-section {
	padding: var(--space-xl) var(--space-lg) !important;
	background-color: var(--color-surface-alt);
	border-top: 1px solid var(--color-border);
}

/* -----------------------------------------
   2. Smooth Scroll & Anchor Transitions
   ----------------------------------------- */
html {
	scroll-behavior: smooth;
}

/* Offset for fixed headers during anchor scrolls */
:target {
	scroll-margin-top: 120px; /* Adjust based on the sticky header height */
}

/* -----------------------------------------
   3. Micro-animations & Visual Enhancements
   ----------------------------------------- */

/* Subtle glow for dark sections */
.fb-trust-bar {
	box-shadow: inset 0 20px 40px rgba(0,0,0,0.15), inset 0 -20px 40px rgba(0,0,0,0.15);
	position: relative;
	z-index: 2;
}

/* Service Card Enhancements */
.fb-service-card-item {
	transition: all var(--transition-normal) !important;
}

.fb-service-card-item:hover {
	transform: translateY(-8px) scale(1.02);
	border-color: var(--color-primary) !important;
	box-shadow: var(--shadow-lg), 0 10px 30px rgba(132, 189, 0, 0.08);
}

.fb-service-card-icon-area {
	transition: transform var(--transition-normal);
}

.fb-service-card-item:hover .fb-service-card-icon-area {
	transform: scale(1.1) rotate(5deg);
	color: var(--color-accent) !important;
}

/* Recommender CTA Enhancements */
.fb-recommender-cta-section {
	transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.fb-recommender-cta-section:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px rgba(132, 189, 0, 0.25);
}

.fb-recommender-cta-section:hover .silhouette-helmet {
	transform: rotate(-25deg) scale(1.1);
	transition: transform var(--transition-slow);
}

.fb-recommender-cta-section:hover .silhouette-goggles {
	transform: rotate(30deg) scale(1.1);
	transition: transform var(--transition-slow);
}

/* Product Card Enhancements */
.fb-product-card-item {
	transition: all var(--transition-normal) !important;
	border: 1px solid var(--color-border);
	background: #ffffff;
}

.fb-product-card-item:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-xl);
	border-color: rgba(132, 189, 0, 0.2);
}

.fb-product-card-image {
	transition: transform var(--transition-slow);
}

.fb-product-card-item:hover .fb-product-card-image {
	transform: scale(1.05);
}

.fb-add-to-cart-btn {
	background-color: var(--color-primary) !important;
	color: #ffffff !important;
	border-radius: var(--radius-md) !important;
	font-weight: 600 !important;
	transition: all var(--transition-fast) !important;
}

.fb-add-to-cart-btn:hover {
	background-color: var(--color-primary-dark) !important;
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

/* Brands Marquee Pause on Hover */
.fb-marquee-container:hover .fb-marquee-track {
	animation-play-state: paused;
}

/* -----------------------------------------
   4. Responsive Adjustments
   ----------------------------------------- */
@media (max-width: 1024px) {
	.homepage-section {
		padding: var(--space-xl) 0;
	}
	.fb-service-cards-wrapper,
	.fb-featured-products-section {
		padding: var(--space-xl) var(--space-md) !important;
	}
}

@media (max-width: 768px) {
	.homepage-section {
		padding: var(--space-lg) 0;
	}
	.fb-service-cards-wrapper,
	.fb-featured-products-section {
		padding: var(--space-lg) var(--space-sm) !important;
	}
	:target {
		scroll-margin-top: 80px; /* Smaller offset for mobile headers */
	}
}