/**
 * Custom Styles - SAM Engineering
 *
 * All custom CSS modifications for this project
 * Loaded after parent theme styles
 */

/* ==========================================================================
   Hero Background System (Elementor)
   Usage:
   - Set Elementor "CSS ID" to: sam-hero
   - Optional fallback class: sam-hero-bg
   --------------------------------------------------------------------------
   Architecture:
   1) Container background: warm base gradient (fallback)
   2) ::before layer: full engineering background SVG (primary visual)
   3) ::after layer: subtle wash for better text readability
   ========================================================================== */

:root {
	--sam-hero-bg-base: hsl(40 20% 98%);
	--sam-hero-bg-warm-1: hsl(40 20% 98%);
	--sam-hero-bg-warm-2: hsl(45 25% 95%);
	--sam-hero-bg-warm-3: hsl(40 15% 97%);

	--sam-hero-depth-mid: hsl(40 20% 98% / 0.4);
	--sam-hero-depth-end: hsl(40 15% 97% / 0.7);
	--sam-hero-bottom-fade: hsl(40 20% 98%);

	/* Scale control to match original maintenance look */
	--sam-hero-pattern-size-desktop: 1200px auto;
	--sam-hero-pattern-size-tablet: 980px auto;
	--sam-hero-pattern-size-mobile: 760px auto;
	--sam-hero-pattern-opacity: 0.96;
}

#sam-hero,
.sam-hero-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--sam-hero-bg-base);
	background-image: linear-gradient(
		135deg,
		var(--sam-hero-bg-warm-1) 0%,
		var(--sam-hero-bg-warm-2) 50%,
		var(--sam-hero-bg-warm-3) 100%
	);
}

#sam-hero::before,
.sam-hero-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../img/engineering-pattern.svg");
	background-repeat: repeat-y;
	background-position: center top;
	background-size: var(--sam-hero-pattern-size-desktop);
	opacity: var(--sam-hero-pattern-opacity);
}

#sam-hero::after,
.sam-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(
			ellipse at 20% 30%,
			transparent 0%,
			hsl(40 20% 98% / 0.08) 50%,
			hsl(40 15% 97% / 0.14) 100%
		),
		linear-gradient(
			to top,
			hsl(40 20% 98% / 0.14) 0%,
			transparent 28%
		);
}

/* Keep Elementor content above decorative layers */
#sam-hero > .elementor-container,
#sam-hero > .e-con-inner,
.sam-hero-bg > .elementor-container,
.sam-hero-bg > .e-con-inner {
	position: relative;
	z-index: 2;
}

@media (max-width: 1024px) {
	#sam-hero::before,
	.sam-hero-bg::before {
		background-size: var(--sam-hero-pattern-size-tablet);
		opacity: 0.9;
	}
}

@media (max-width: 767px) {
	#sam-hero::before,
	.sam-hero-bg::before {
		background-size: var(--sam-hero-pattern-size-mobile);
		opacity: 0.84;
	}
}

/* Large screens: keep pattern visually finer instead of scaling with viewport */
@media (min-width: 1600px) {
	#sam-hero::before,
	.sam-hero-bg::before {
		background-size: 1120px auto;
		opacity: 0.92;
	}
}

/* ==========================================================================
   Home Header Blend
   - Extends engineering background under header on homepage
   - Keeps top black utility strip intact
   ========================================================================== */

body.home .elementor-location-header .elementor-element.elementor-element-33a9d79c,
body.home #site-header {
	position: relative;
	background-color: var(--sam-hero-bg-base);
	background-image: linear-gradient(
		135deg,
		var(--sam-hero-bg-warm-1) 0%,
		var(--sam-hero-bg-warm-2) 50%,
		var(--sam-hero-bg-warm-3) 100%
	);
}

body.home .elementor-location-header .elementor-element.elementor-element-33a9d79c::before,
body.home #site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../img/engineering-pattern.svg");
	background-repeat: repeat-y;
	background-position: center top;
	background-size: var(--sam-hero-pattern-size-desktop);
	opacity: 0.9;
}

body.home .elementor-location-header .elementor-element.elementor-element-33a9d79c::after,
body.home #site-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		hsl(40 20% 98% / 0.12) 0%,
		transparent 70%
	);
}

body.home .elementor-location-header .elementor-element.elementor-element-33a9d79c > .e-con-inner,
body.home #site-header > * {
	position: relative;
	z-index: 2;
}

@media (max-width: 1024px) {
	body.home .elementor-location-header .elementor-element.elementor-element-33a9d79c::before,
	body.home #site-header::before {
		background-size: var(--sam-hero-pattern-size-tablet);
		opacity: 0.86;
	}
}

@media (max-width: 767px) {
	body.home .elementor-location-header .elementor-element.elementor-element-33a9d79c::before,
	body.home #site-header::before {
		background-size: var(--sam-hero-pattern-size-mobile);
		opacity: 0.8;
	}
}

/* ==========================================================================
   Projects Filter
   Usage in Elementor:
   - Filter controls: Heading widget with class `sam-project-filter`
     and attributes `data-filter|all|done|progress`
   - Cards: `sam-project-card is-done` or `sam-project-card is-progress`
   ========================================================================== */

.sam-project-filter {
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.sam-project-filter:hover .elementor-heading-title,
.sam-project-filter:focus-within .elementor-heading-title,
.sam-project-filter.is-active .elementor-heading-title {
	color: #181818 !important;
}

.sam-project-filter.is-active {
	--e-transform-translateY: -3px;
	background-color: var(--e-global-color-4ade329) !important;
}

.sam-project-filter:focus-visible .elementor-heading-title,
.sam-project-filter .elementor-heading-title:focus-visible {
	outline: 2px solid #e4a400;
	outline-offset: 3px;
}

.sam-project-card.sam-project-card-hidden {
	display: none !important;
}