/*
 * Slab Homepage Design — global header/footer presentation.
 * Loads site-wide (every page), unlike homepage.css which is page-scoped.
 * Black, minimal, premium. No product/pricing/cart logic lives here --
 * the WooCommerce cart widget's own markup/behavior is untouched.
 */

:root {
	--slh-black: #0a0a0a;
	--slh-white: #ffffff;
	--slh-gray-300: #3a3a3a;
	--slh-gray-500: #9a9a9a;
	--slh-accent: #2954ff;
}

/* ---------- Header ---------- */

.slh-header {
	background: var(--slh-black) !important;
	position: sticky;
	top: 0;
	z-index: 999;
}

.slh-header .elementor-widget-nav-menu .elementor-item {
	color: var(--slh-white) !important;
	font-size: 0.78rem !important;
	font-weight: 600;
	letter-spacing: 0.02em !important;
	text-transform: uppercase;
	padding: 13px 9px !important;
	transition: color 0.15s ease;
}

.slh-header .elementor-widget-nav-menu .elementor-item:hover,
.slh-header .elementor-widget-nav-menu .elementor-item:focus {
	color: var(--slh-accent) !important;
}

/*
 * Mobile menu (hamburger) dropdown panel. The nav-menu widget used for the
 * mobile row has "layout: dropdown" set in Elementor but no custom colors,
 * so the panel itself fell back to Elementor's kit default -- a plain
 * white background. Combined with the white link color set above (correct
 * for the black header, invisible here), the opened menu read as blank:
 * white text on a white panel. This gives the panel its own dark
 * background so the existing white text/blue-hover rules above become
 * visible, plus dividers and roomier padding since each item now needs to
 * stand on its own line rather than sit in a horizontal bar.
 */
.slh-header .elementor-nav-menu--dropdown {
	background: var(--slh-black) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.slh-header .elementor-nav-menu--dropdown .elementor-nav-menu {
	padding: 0.25rem 1.5rem !important;
}

.slh-header .elementor-nav-menu--dropdown .elementor-item {
	padding: 1rem 0 !important;
	font-size: 0.85rem !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.slh-header .elementor-nav-menu--dropdown li:last-child > .elementor-item {
	border-bottom: none;
}

.slh-header-utility-container.slh-header-utility-container {
	display: flex !important;
	align-items: center !important;
	width: auto !important;
	flex: 0 0 auto !important;
}

/*
 * The cart widget's own container defaulted to a fixed 252px (sized to
 * visually balance the original 3-column [logo][nav][cart] layout before
 * the utility icons existed) -- with nav at 756px and logo at 252px that
 * left zero spare room in a 1260px row, so anything added would wrap.
 * Shrinking it to its actual content width frees the space needed.
 */
.slh-header .elementor-element-5f905b65 {
	width: auto !important;
	flex: 0 0 auto !important;
}

.slh-header-utility {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.slh-search-form {
	display: flex;
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	padding: 0.3rem 0.3rem 0.3rem 0.9rem;
	transition: border-color 0.15s ease;
}

.slh-search-form:focus-within {
	border-color: var(--slh-accent);
}

.slh-search-input {
	background: transparent;
	border: none;
	outline: none;
	color: var(--slh-white);
	font-size: 0.82rem;
	width: 100px;
	transition: width 0.2s ease;
}

.slh-search-form:focus-within .slh-search-input {
	width: 150px;
}

.slh-search-input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.slh-search-submit {
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	padding: 0.3rem 0.4rem;
	display: flex;
	align-items: center;
	transition: color 0.15s ease;
}

.slh-search-submit:hover {
	color: var(--slh-accent);
}

.slh-header-icon {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.05rem;
	display: inline-flex;
	align-items: center;
	transition: color 0.15s ease;
	text-decoration: none;
}

.slh-header-icon:hover {
	color: var(--slh-accent);
}

@media (max-width: 1024px) {
	.slh-header-utility-container {
		display: none !important;
	}
}

/* ---------- Footer ---------- */

.slh-footer {
	background: var(--slh-black) !important;
	color: rgba(255, 255, 255, 0.75);
	padding: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(1.25rem, 1rem + 2vw, 3rem) 1.75rem;
}

.slh-footer-top.slh-footer-top {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1.5rem !important;
	width: 100%;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.slh-footer-top .elementor-widget-image {
	flex: 0 0 auto !important;
}

.slh-footer-top .elementor-widget-image img {
	max-width: 140px;
	height: auto;
	display: block;
}

.slh-footer-nav-wrap {
	flex: 1 1 auto;
}

.slh-footer-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.75rem;
}

.slh-footer-nav a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color 0.15s ease;
}

.slh-footer-nav a:hover {
	color: var(--slh-accent);
}

.slh-footer-bottom {
	margin-top: 1.75rem;
	text-align: center;
}

/*
 * Same recurring Elementor atomic-container collapse documented in
 * homepage.css (kit-level max-width resolving to min(100%, 80px) on a
 * nested .e-con-inner) -- hitting the footer's own inner wrapper at
 * tablet width, squeezing the copyright/brand line into a one-word-per-
 * line column.
 */
.slh-footer-bottom > .e-con-inner {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

.slh-footer-copyright {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 0.35rem;
}

.slh-footer-brandline {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.35);
	margin: 0;
}

@media (max-width: 767px) {
	.slh-footer-top.slh-footer-top {
		flex-direction: column;
		align-items: center !important;
		text-align: center;
	}

	.slh-footer-nav {
		justify-content: center;
	}
}