/**
 * Homepage — Component CSS
 *
 * Loaded on is_front_page() only.
 * Hero slider, category navigation, brand story, VIP sections.
 *
 * @package Blocksy_Child
 * @date 2026-03-26
 */

/* ==========================================================================
   Hero Slider — CSS-only auto-advancing carousel.
   WHY: No slider plugin needed. Uses CSS animations for auto-advance
   with smooth crossfade. Gutenberg Custom HTML block provides the markup.
   ========================================================================== */
/* Remove content area top spacing so hero slider is flush with header.
   WHY: Scoped to .site-main to avoid killing footer row padding.
   Also zero site-main bottom margin (set to 100px in base.css) so VIP
   section sits flush against footer. @date 2026-04-07 */
.home .site-main > .ct-container-full,
.home .site-main > .ct-container {
	padding-top: 0 !important;
}

.home .ct-container-full[data-vertical-spacing] {
	--content-spacing: 0px;
}

.home .site-main {
	margin-bottom: 0;
}


.home .entry-content.is-layout-constrained > .bc-hero-slider {
	max-width: none !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	width: 100vw !important;
}

.bc-hero-slider {
	position: relative;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	height: 600px;
	overflow: hidden;
}

@media (max-width: 689px) {
	.bc-hero-slider {
		height: 400px;
	}
}

.bc-hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	display: block;
	overflow: hidden;
}

.bc-hero-slide.active {
	opacity: 1;
}

.bc-hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.bc-hero-slide-content {
	text-align: center;
	color: #fff;
	max-width: 700px;
	padding: 0 24px;
}

.bc-hero-slide-content h2 {
	font-family: var(--theme-headings-font-family, Quicksand, sans-serif);
	font-size: 56px;
	font-weight: 500;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 8px;
	text-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

.bc-hero-slide-content p {
	font-size: 20px;
	font-weight: 400;
	color: rgba(255,255,255,0.9);
	margin: 0 0 24px;
	text-shadow: 0 1px 10px rgba(0,0,0,0.15);
}

.bc-hero-slide-content .bc-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: var(--theme-button-background-initial-color, #D9EAF0);
	color: var(--theme-button-text-initial-color, #111);
	border-radius: var(--theme-button-border-radius, 8px);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: background 0.2s;
}

.bc-hero-slide-content .bc-hero-cta:hover {
	background: var(--theme-button-background-hover-color, #DFEDF2);
}

/* Hero dots */
.bc-hero-dots {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 11px;
	z-index: 5;
}

.bc-hero-dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #888888;
	cursor: pointer;
	border: none;
	padding: 0;
	transition: background 0.3s;
}

.bc-hero-dot.active {
	background: #ffffff;
}

/* Hero arrow navigation */
.bc-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.25);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s;
	padding: 0;
}

.bc-hero-arrow:hover {
	background: rgba(0, 0, 0, 0.45);
}

.bc-hero-arrow svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: #fff;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bc-hero-arrow--prev {
	left: 16px;
}

.bc-hero-arrow--next {
	right: 16px;
}

@media (max-width: 689px) {
	.bc-hero-arrow {
		width: 36px;
		height: 36px;
	}
	.bc-hero-arrow svg {
		width: 16px;
		height: 16px;
	}
}

@media (max-width: 689px) {
	.bc-hero-slide-content h2 {
		font-size: 32px;
	}
	.bc-hero-slide-content p {
		font-size: 16px;
	}
}

/* ==========================================================================
   Section Heading — h2 with ::before/::after horizontal lines
   WHY: Single h2 element, lines via pseudo-elements. Matches live site pattern.
   ========================================================================== */
/* WHY CSS: Gutenberg has no pseudo-element UI. Flex + flex-grow lines
   auto-fill available space regardless of text length or container width.
   Padding is managed via the parent Group block's Dimensions panel.
   Lines stay visible on all breakpoints (matches live site). @date 2026-04-08 */
.bc-section-heading {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: center;
}

.bc-section-heading::before,
.bc-section-heading::after {
	content: '';
	flex: 1 1 0%;
	min-width: 20px;
	height: 1px;
	background: var(--theme-border-color, #e4e5e7);
	border-radius: 2px;
}

@media (max-width: 689px) {
	.bc-section-heading {
		gap: 12px;
	}

	.bc-section-heading::before,
	.bc-section-heading::after {
		min-width: 10px;
	}
}

/* Section subtitle — responsive font sizing (matches live site text-sm / text-2xl).
   WHY: Gutenberg paragraph block doesn't support responsive font sizes.
   Desktop 24px, mobile 14px — matches live site Tailwind classes. @date 2026-04-08 */
.bc-subtitle {
	font-size: 24px;
}

@media (max-width: 689px) {
	.bc-subtitle {
		font-size: 14px;
	}
}

/* Long section headings — lines only on wide screens where text fits one line */
.bc-section-heading--long::before,
.bc-section-heading--long::after {
	display: none !important;
}

@media (min-width: 1600px) {
	.bc-section-heading--long::before,
	.bc-section-heading--long::after {
		display: block !important;
	}
}

/* ==========================================================================
   Hero Video — Full-width autoplay background video (matches live site)
   Silent .mov file, loops, no controls. Below "Creating a Moment For You".
   ========================================================================== */
figure.bc-hero-video {
	margin: 0 !important;
	max-width: none !important;
	height: 577px;
	overflow: hidden;
}

figure.bc-hero-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

@media (max-width: 689px) {
	figure.bc-hero-video {
		height: 300px;
	}
}

/* ==========================================================================
   Best Sellers / See All — Link styling
   ========================================================================== */
.bc-see-all-link a:hover {
	color: var(--theme-palette-color-3, #655B51) !important;
}

/* Category grid styling moved to woo-category-grid.css */

/* ==========================================================================
   Brand Story Section
   ========================================================================== */
.bc-brand-story {
	background: var(--theme-palette-color-6, #FAF6F2);
	border-radius: 12px;
	overflow: hidden;
}

/* ==========================================================================
   VIP Signup Section
   ========================================================================== */
.bc-vip-section {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 80px 24px;
	text-align: center;
}

.bc-vip-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(244, 240, 236, 0.88);
	border-radius: 12px;
}

.bc-vip-content {
	position: relative;
	z-index: 1;
	max-width: 500px;
	margin: 0 auto;
}

/* ==========================================================================
   Fix: Hide PHP warnings on frontend (Kinsta ImageMagick warning)
   ========================================================================== */
.php-error, body > br:first-child + b,
body > b:first-child,
body > br:first-child {
	display: none !important;
}

/* ==========================================================================
   Hero Cover Block — full-width alignment fix
   ========================================================================== */
.home .wp-block-cover.alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	width: 100vw;
	max-width: 100vw;
}

/* ==========================================================================
   Product Grids on Homepage — consistent card styling
   ========================================================================== */
.home .woocommerce ul.products {
	margin: 0 auto;
	max-width: var(--theme-normal-container-max-width, 1510px);
	padding: 0 24px;
}

.home .woocommerce ul.products li.product .button {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

/* ==========================================================================
   VIP Section — responsive improvements
   ========================================================================== */
.bc-vip-section {
	border-radius: 12px;
	margin: 0 24px;
}

@media (max-width: 689px) {
	.bc-vip-section {
		margin: 0;
		border-radius: 0;
		padding: 48px 24px;
	}

	.bc-vip-content h2 {
		font-size: 28px !important;
	}

	.bc-category-nav {
		gap: 12px 16px;
	}

	.bc-category-nav img {
		width: 48px;
		height: 48px;
	}

	.bc-category-nav a {
		font-size: 11px;
	}
}

/* ==========================================================================
   Brand Story Section — ensure image fills column
   WHY: Image inside the 2-column brand story section needs to fill the
   column height. Scoped to alignfull groups to avoid affecting badges/logos.
   @date 2026-03-26
   ========================================================================== */
.home .wp-block-group.alignfull.has-background .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}