/**
 * Hero Widget Styles — Hero-specific overrides
 *
 * Structural/shared CSS lives in assets/css/shared/hero-shared.css.
 * This file contains only what is unique to the main hero widget:
 * - min-height and background settings
 * - Homepage variant (taller, larger heading, lighter overlay)
 * - Right-aligned layout modifier
 * - Video background
 * - Description + CTA buttons
 * - Elementor Kit overrides specific to hero link/CTA colors
 *
 * Figma Specs:
 * - Overlay: rgba(19,56,68,0.65) standard / rgba(19,56,68,0.50) homepage
 * - Heading: Plus Jakarta Sans Bold, 48px standard / 66px homepage
 * - Body: IBM Plex Sans Medium, 18px
 * - Eyebrow: IBM Plex Sans Bold, uppercase
 * - Divider: ~180px wide, 8px tall, orange (#ff5000) or sunrise (#F5BC47)
 * - Bottom border: #ff5000, 2px tall (matches navigation orange bar)
 * - Primary CTA: #6edad5 bg, #133844 text
 * - Secondary CTA: #ffffff bg, #133844 border + text
 *
 * @package Zededa
 */

/* ==========================================================================
   1. Elementor Container Override (outer — removes container padding)
   ========================================================================== */

.e-con:has(.elementor-widget-zededa_hero) {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* ==========================================================================
   2. Elementor Kit Specificity Overrides — Hero-specific
   ========================================================================== */

[class*="elementor-kit-"] .zededa-hero a,
[class*="elementor-kit-"] .zededa-hero-cta {
	color: var(--color-navigation-background);
	text-decoration: none;
	border-radius: 0;
}

[class*="elementor-kit-"] .zededa-hero-cta--primary {
	background-color: var(--color-navigation-cta-background);
	color: var(--color-navigation-background);
}

[class*="elementor-kit-"] .zededa-hero-cta--secondary {
	background-color: var(--color-neutral-white);
	color: var(--color-navigation-background);
}

/* Homepage heading size — overrides shared base */
[class*="elementor-kit-"] .zededa-hero--homepage h1,
[class*="elementor-kit-"] .zededa-hero--homepage .zededa-hero-heading {
	font-size: clamp(1.875rem, calc(3.38vw + 1.08rem), 4.125rem);
}

[class*="elementor-kit-"] .zededa-hero--align-right .zededa-hero-content {
	margin-left: auto;
}

/* ==========================================================================
   3. Root Container — Hero-specific properties
   ========================================================================== */

.zededa-hero {
	min-height: 600px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Homepage: taller hero */
.zededa-hero--homepage {
	min-height: 720px;
}

/* ==========================================================================
   4. Default Background (Solid Teal + Geometric Grid SVG)
   Figma: node 2034:1311
   ========================================================================== */

.zededa-hero--default-bg {
	/* Figma: #245868 — distinct from nav background #133844 */
	background-color: #245868;
	background-image: none;
}

/* ==========================================================================
   5. Video Background
   ========================================================================== */

/* Video element: fills section, sits below overlay (z:1) and content (z:2) */
.zededa-hero-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
}

/* Fade in once JS confirms playback is ready */
.zededa-hero--has-video.is-video-ready .zededa-hero-video {
	opacity: 1;
}

/* Poster image shown immediately via inline background-image as CSS fallback */
.zededa-hero--has-video {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Accessibility: hide video entirely when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	.zededa-hero-video {
		display: none;
	}
}

/* Mobile poster-only: hide video on small viewports when configured */
@media (max-width: 768px) {
	.zededa-hero--mobile-poster .zededa-hero-video {
		display: none;
	}
}

/* ==========================================================================
   6. Overlay — Homepage + Right-align variants
   ========================================================================== */

/* Homepage: lighter overlay, more blur */
.zededa-hero--homepage .zededa-hero-overlay {
	/* Figma: rgba(19,56,68,0.50) */
	background-color: rgba(19, 56, 68, 0.50);
	backdrop-filter: blur(11px);
	-webkit-backdrop-filter: blur(11px);
}

.zededa-hero--align-right .zededa-hero-overlay {
	left: auto;
	right: 0;
}

/* ==========================================================================
   7. Content — Homepage + Right-align variants
   ========================================================================== */

/* Homepage: slightly less left padding per Figma (~79px) */
.zededa-hero--homepage .zededa-hero-content {
	max-width: 45%;
	padding-left: var(--spacing-xl);
	padding-right: var(--spacing-xl);
}

.zededa-hero--align-right .zededa-hero-content {
	margin-left: auto;
}

/* ==========================================================================
   8. Typography — Homepage heading variant
   ========================================================================== */

/* Homepage: larger heading — fluid 30px → 66px */
.zededa-hero--homepage .zededa-hero-heading {
	font-size: clamp(1.875rem, calc(3.38vw + 1.08rem), 4.125rem);
}

/* ==========================================================================
   9. Description
   ========================================================================== */

.zededa-hero-description {
	/* Figma: IBM Plex Sans Medium — fluid 16px → 18px */
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(1rem, calc(0.19vw + 0.955rem), 1.125rem);
	font-weight: var(--typography-font-weight-medium);
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: var(--color-neutral-white);
	margin: 0;
	max-width: 560px;
}

/* Homepage: slightly larger body text — fluid 16px → 20px */
.zededa-hero--homepage .zededa-hero-description {
	font-size: clamp(1rem, calc(0.38vw + 0.91rem), 1.25rem);
}

/* ==========================================================================
   10. CTA Buttons
   ========================================================================== */

.zededa-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	align-items: center;
	margin-top: var(--spacing-sm);
}

.zededa-hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Figma: px ~16px, py ~12px */
	padding: 12px var(--spacing-lg);
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-base);
	font-size: clamp(0.875rem, calc(0.19vw + 0.83rem), 1rem);
	font-weight: var(--typography-font-weight-bold);
	letter-spacing: -0.005em;
	line-height: 1.45;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
	white-space: nowrap;
}

/* Primary CTA: aqua background, dark text */
.zededa-hero-cta--primary {
	background-color: var(--color-navigation-cta-background);
	color: var(--color-navigation-background);
	border: var(--border-width-thin) solid var(--color-navigation-background);
}

.zededa-hero-cta--primary:hover {
	opacity: 0.9;
	box-shadow: var(--shadow-md);
}

/* Secondary CTA: white background, dark border + text */
.zededa-hero-cta--secondary {
	background-color: var(--color-neutral-white);
	color: var(--color-navigation-background);
	border: var(--border-width-thin) solid var(--color-navigation-background);
}

.zededa-hero-cta--secondary:hover {
	opacity: 0.9;
	box-shadow: var(--shadow-md);
}

/* ==========================================================================
   11. Responsive: Tablet (max-width: 1024px) — Hero-specific
   ========================================================================== */

@media (max-width: 1024px) {

	.zededa-hero {
		min-height: 500px;
	}

	.zededa-hero--homepage {
		min-height: 600px;
	}

	.zededa-hero--homepage .zededa-hero-content {
		max-width: 55%;
	}

	/* Right-aligned: maintain right positioning on tablet */
	.zededa-hero--align-right .zededa-hero-overlay {
		left: auto;
		right: 0;
	}

	.zededa-hero--align-right .zededa-hero-content {
		margin-left: auto;
	}

}

/* ==========================================================================
   12. Responsive: Mobile (max-width: 768px) — Hero-specific
   ========================================================================== */

@media (max-width: 768px) {

	.zededa-hero {
		min-height: 500px;
	}

	.zededa-hero--homepage {
		min-height: 560px;
	}

	.zededa-hero--homepage .zededa-hero-content {
		max-width: 100%;
		padding-left: 0;
	}

	.zededa-hero-description {
		max-width: 100%;
	}

	.zededa-hero-ctas {
		flex-direction: column;
		width: 100%;
	}

	.zededa-hero-cta {
		width: 100%;
		text-align: center;
	}

}