/*
Theme Name: Alchemy TN
Theme URI: https://example.com/alchemy-tn
Author: Antigravity
Description: A custom, high-end streetwear theme.
Version: 1.0
Text Domain: alchemy-tn
*/

:root {
	--bg-color: #121116;
	--text-color: #ffffff;
	--accent-color: #858585;
	--font-primary: 'Montserrat', sans-serif;
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: var(--font-primary);
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

/* Typography Defaults */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	margin-top: 0;
	color: var(--text-color);
}

a {
	color: var(--text-color);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--accent-color);
}

/* Full Width & Parallax Support */
.alchemy-full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.parallax-bg {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Announcement Bar */
.announcement-bar {
	background-color: var(--bg-color);
	/* Matches body bg or specific dark color */
	color: var(--text-color);
	overflow: hidden;
	white-space: nowrap;
	padding: 10px 0;
	border-bottom: 1px solid #333;
	font-size: 0.8rem;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 2px;
	position: relative;
	z-index: 1001;
}

.announcement-content {
	display: inline-block;
	white-space: nowrap;
	animation: scroll-left 40s linear infinite;
}

.announcement-item {
	display: inline-block;
	padding: 0 4rem;
}

@keyframes scroll-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* --- NEW HEADER ARCHITECTURE --- */
.site-header {
	background-color: #ffffff;
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid #f0f0f0;
	transition: transform 0.3s ease, background-color 0.3s;
}

.header-container {
	max-width: 1600px;
	/* Wide but contained */
	margin: 0 auto;
	padding: 0 30px;
	height: 90px;

	/* THE MAGIC: CSS Grid for perfect centering */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

/* 1. Left Column: Navigation */
.header-left {
	justify-self: start;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 25px;
}

.main-navigation a {
	color: #121116;
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: capitalize;
	/* Clean look */
	text-decoration: none;
	transition: color 0.2s;
}

.main-navigation a:hover {
	color: #858585;
}

/* 2. Center Column: Logo */
.header-center {
	justify-self: center;
	text-align: center;
}

.site-branding img {
	max-height: 45px;
	/* Clean standard height */
	width: auto;
	display: block;
}

.alchemy-script-logo {
	font-family: 'Brush Script MT', cursive;
	font-size: 2.8rem;
	color: #121116;
	text-decoration: none;
	line-height: 1;
}

/* 3. Right Column: Actions */
.header-right {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 30px;
}

.header-socials {
	display: flex;
	gap: 15px;
	padding-right: 20px;
	border-right: 1px solid #eeeeee;
	/* Divider */
}

.header-socials a {
	color: #121116;
	font-size: 1.1rem;
	transition: transform 0.2s, color 0.2s;
}

.header-socials a:hover {
	color: #555;
	transform: translateY(-2px);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 15px;
}

.action-item a {
	display: flex;
	align-items: center;
	color: #121116;
	position: relative;
	padding: 5px;
}

.icon-ui {
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5px;
	transition: all 0.2s;
}

.action-item:hover .icon-ui {
	color: #555;
	transform: scale(1.1);
}

.count-badge {
	position: absolute;
	top: -2px;
	right: -4px;
	background-color: #121116;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Responsive */
@media (max-width: 1024px) {
	.header-container {
		display: flex;
		justify-content: space-between;
		padding: 0 15px;
		height: 70px;
	}

	.header-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}


/* Responsive adjustments */
@media (max-width: 1024px) {
	.site-header.split-header {
		padding: 1rem;
		flex-wrap: wrap;
		height: auto;
	}

	.header-left,
	.header-right {
		flex: 1 0 100%;
		/* Stack them */
		justify-content: center;
		margin-bottom: 10px;
	}

	.header-center {
		order: -1;
		/* Logo first on mobile */
		flex: 1 0 100%;
		margin-bottom: 15px;
	}

}

/* Minimal Layout */
.site-main {
	min-height: 80vh;
}

.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Footer Minimal */
.site-footer {
	padding: 40px 20px;
	text-align: center;
	border-top: 1px solid #333;
	font-size: 0.8rem;
	opacity: 0.7;
}

/* --- Alchemy Slider --- */
.alchemy-slider-container {
	width: 100%;
	overflow: hidden;
	position: relative;
	background-color: #f0f0f0;
	/* Light grey base */
}

.alchemy-slider {
	position: relative;
	height: 700px;
	/* Taller hero */
	width: 100%;
	user-select: none;
	/* Prevent text selection during drag */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.alchemy-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Center horizontally */
	z-index: 1;
	background-size: cover;
	background-position: center;
	text-align: center;
	/* Center text */
}

.alchemy-slide.active {
	opacity: 1;
	z-index: 2;
}

/* Slide Backgrounds (Placeholders matching vibes) */
/* 
   TO ADD IMAGES:
   Uncomment the background-image line and replace the URL.
   Recommended Image Size: 1920x1080px (or larger for high-res screens) 
*/
.tracksuits-slide {
	background-color: #d9d9d9;
	background-image: url('https://nwpd.ad/wp-content/uploads/2024/11/banner-hoodies-5.jpg');
}

.active-wear-slide {
	background-color: #cfd8dc;
	background-image: url('https://eu.gymshark.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F8urtyqugdt2l%2F1oqyi5Ti23XqZEtf7Kjvy7%2Fcb848f823d46ba91598e3db5c0c9a894%2FModest_Wear_Web_Banners_16x9.jpg&w=1920&q=85');
}

.essentials-slide {
	background-color: #e0e0e0;
	background-image: url('https://media.glamourmagazine.co.uk/photos/67c0837ecbb3731d5f27da40/16:9/w_1920,h_1080,c_limit/SPRING%20CAPSULE%20270225%20defaultGettyImages-1423862481.jpg');
}

/* Slide Content */
.slide-content {
	position: relative;
	z-index: 3;
	padding: 0 20px;
	max-width: 900px;
}

.slide-content h2 {
	font-family: 'Montserrat', sans-serif;
	/* Or 'Oswald' if you add it */
	font-size: 5rem;
	/* Very large */
	font-weight: 900;
	/* Extra bold */
	text-transform: uppercase;
	color: #ffffff;
	margin-bottom: 10px;
	line-height: 0.9;
	letter-spacing: -2px;
	/* Condensed look */
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.slide-content p {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2rem;
	color: #ffffff;
	margin-bottom: 40px;
	font-weight: 500;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

/* Button */
.btn-slide.btn-dark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 40px;
	background-color: #222222;
	color: #ffffff;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9rem;
	border: none;
	transition: all 0.3s ease;
}

.btn-slide.btn-dark:hover {
	background-color: #000000;
	transform: translateY(-2px);
}

.btn-slide svg {
	transition: transform 0.3s;
}

.btn-slide:hover svg {
	transform: translate(2px, -2px);
}

/* Navigation Arrows */
.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: #ffffff;
	cursor: pointer;
	z-index: 10;
	padding: 20px;
	opacity: 0.7;
	transition: opacity 0.3s, transform 0.3s;
}

.slider-arrow:hover {
	opacity: 1;
	transform: translateY(-50%) scale(1.1);
}

.prev-arrow {
	left: 20px;
}

.next-arrow {
	right: 20px;
}

/* Slider Dots */
.slider-dots {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
}

.slider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: all 0.3s;
}

.slider-dot.active {
	background-color: #ffffff;
	transform: scale(1.2);
}

@media (max-width: 768px) {
	.slide-content h2 {
		font-size: 3rem;
	}

	.alchemy-slider {
		height: 500px;
	}
}

@media (max-width: 767px) {

	/* Hide arrows on phone only (below tablet size) */
	.slider-arrow {
		display: none !important;
	}
}


/* --- STICKY NAV COLLAPSE --- */
.site-header {
	transition: transform 0.3s ease-in-out, background-color 0.3s ease;
	position: sticky;
	top: 0;
	z-index: 999;
	width: 100%;
	/* Ensure background is opaque when sticky */
	background-color: #ffffff;
}

/* Class added via JS when scrolling down */
.site-header.header-hidden {
	transform: translateY(-100%);
}

/* --- FORCE DARK CONTENT BACKGROUNDS (Core Blocks Only) --- */
.home .entry-content .wp-block-group,
.home .entry-content .wp-block-cover,
.home .entry-content .wp-block-columns {
	background-color: var(--bg-color) !important;
	color: var(--text-color);
}

.home .entry-content {
	background-color: var(--bg-color);
}

/* --- FLOATING CART BUTTON START --- */
/* Customize the Floating Cart Color here */
.ast-sticky-cart .ast-cart-icon-wrap,
.ast-site-header-cart.ast-cart-fixed,
.ast-floating-cart,

/* --- MOBILE MENU STYLES --- */

/* 1. Default State (Desktop) */
.mobile-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	color: #121116;
	padding: 0;
}

.mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #121116;
	z-index: 2000;
	transform: translateX(-100%);
	/* Hidden by default at left */
	transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
	display: flex;
	justify-content: center;
	align-items: center;
}

.mobile-menu-overlay.active {
	transform: translateX(0);
	/* Slide in */
}

.mobile-menu-container {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.mobile-menu-close {
	position: absolute;
	top: 30px;
	right: 30px;
	background: none;
	border: none;
	color: #ffffff;
	cursor: pointer;
	padding: 10px;
}

.mobile-navigation-content ul {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

.mobile-navigation-content li {
	margin: 25px 0;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.3s ease;
}

/* Stagger animation for items */
.mobile-menu-overlay.active .mobile-navigation-content li {
	opacity: 1;
	transform: translateY(0);
}

.mobile-menu-overlay.active li:nth-child(1) {
	transition-delay: 0.1s;
}

.mobile-menu-overlay.active li:nth-child(2) {
	transition-delay: 0.2s;
}

.mobile-menu-overlay.active li:nth-child(3) {
	transition-delay: 0.3s;
}

.mobile-menu-overlay.active li:nth-child(4) {
	transition-delay: 0.4s;
}

.mobile-navigation-content a {
	color: #ffffff;
	font-size: 2rem;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
}

.mobile-navigation-content a:hover {
	color: #858585;
}

/* 2. Responsive Triggers */
@media (max-width: 1024px) {



	/* Hide Desktop Menu */
	.desktop-menu {
		display: none !important;
	}

	/* Show Hamburger */
	.mobile-toggle {
		display: block;
	}

	/* Adjust Header Grid for Mobile */
	.header-container {
		grid-template-columns: auto 1fr auto;
		/* Hamburger | Logo | Actions */
		gap: 10px;
		padding: 0 20px;
		height: 70px;
	}

	/* Align Items */
	.header-left {
		justify-self: start;
	}

	.header-center {
		justify-self: center;
		/* Logo Centered */
	}

	.header-right {
		justify-self: end;
	}

	/* Smaller Logo on Mobile */
	.alchemy-script-logo {
		font-size: 2rem;
	}

	/* Hide specific desktop elements if needed, but keeping icons is usually good */

	/* Hide Instagram on Mobile as requested */
	.header-socials a[aria-label="Instagram"] {
		display: none;
	}
}

/* Hide Announcement Bar when Mobile Menu Open */
body.mobile-menu-active .announcement-bar {
	opacity: 0;
	visibility: hidden;
	z-index: -1;
}

/* --- FLOATING CART BUTTON (Restored) --- */
.ast-sticky-cart .ast-cart-icon-wrap,
.ast-site-header-cart.ast-cart-fixed,
.ast-floating-cart,
.wcf-floating-cart {
	background-color: #121116 !important;
	/* Theme Dark Background */
	color: #ffffff !important;
	/* White Icon */
	border: 2px solid #ffffff;
	/* Optional: White Border for visibility */
}

/* Ensure the icon itself is white */
.ast-sticky-cart .ast-cart-icon-wrap svg,
.ast-site-header-cart.ast-cart-fixed svg {
	fill: #ffffff !important;
}

/* --- FLOATING CART BUTTON END --- */