/**
 * Craftex Hero Banner Widget Styling
 * Package: craftex-hero-banner
 * - Full-width background (Image / Color / Overlay / Parallax)
 * - Container fixed max-width 1440px (customizable via Elementor)
 * - Header Bar Left Item, Center Logo/Brand, Right Item
 * - Hero Body Content (Headline, Sub-headline)
 */

.craftex-hero-banner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: var(--craftex-hero-min-height, 100%);
	background: transparent !important;
	background-color: transparent !important;
	color: var(--craftex-hero-text-color, #FFFFFF);
	padding-top: var(--craftex-hero-padding-top, clamp(32px, 5vw, 64px));
	padding-right: var(--craftex-hero-padding-right, clamp(24px, 4vw, 64px));
	padding-bottom: var(--craftex-hero-padding-bottom, clamp(32px, 5vw, 64px));
	padding-left: var(--craftex-hero-padding-left, clamp(24px, 4vw, 64px));
	margin-top: var(--craftex-hero-margin-top, 0px);
	margin-right: var(--craftex-hero-margin-right, 0px);
	margin-bottom: var(--craftex-hero-margin-bottom, 0px);
	margin-left: var(--craftex-hero-margin-left, 0px);
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: var(--craftex-hero-vertical-align, flex-start);
	align-items: stretch;
}

/* Background Image & Overlay Layer */
.craftex-hero-banner__bg-layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	background: transparent !important;
	background-color: transparent !important;
}

.craftex-hero-banner__bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	min-width: 100% !important;
	min-height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: var(--craftex-hero-bg-position, center center) !important;
	display: block !important;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.craftex-hero-banner__bg-overlay {
	position: absolute;
	inset: 0;
	background: var(--craftex-hero-overlay-color, linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 70%));
	opacity: var(--craftex-hero-overlay-opacity, 1);
	z-index: 2;
	pointer-events: none;
}

/* Fixed Max-Width Container (1440px Default) */
.craftex-hero-banner__container {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--craftex-hero-max-width, 1440px);
	margin-inline: auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
}

/* Navigation / Header Bar */
.craftex-hero-banner__header-bar {
	display: flex;
	flex-direction: row;
	align-items: var(--craftex-hero-header-align, flex-start);
	justify-content: space-between;
	width: 100%;
	gap: clamp(16px, 3vw, 40px);
	box-sizing: border-box;
	align-self: flex-start;
}

/* Left Column / Link */
.craftex-hero-banner__left {
	flex: 1 1 0%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.craftex-hero-banner__left-link,
.craftex-hero-banner__left-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--craftex-hero-left-font-family, "OCRBLetterpressMW01-Regular", "OCR B Std", "Courier New", monospace);
	font-size: var(--craftex-hero-left-font-size, 0.75rem);
	font-weight: var(--craftex-hero-left-font-weight, 400);
	line-height: var(--craftex-hero-left-line-height, 1.2);
	letter-spacing: var(--craftex-hero-left-spacing, 0.15em);
	text-transform: var(--craftex-hero-left-transform, uppercase);
	color: var(--craftex-hero-left-color, #FFFFFF);
	text-decoration: none;
	transition: color 0.25s ease, opacity 0.25s ease;
}

.craftex-hero-banner__left-link:hover,
.craftex-hero-banner__left-link:focus-visible {
	color: var(--craftex-hero-left-hover-color, rgba(255, 255, 255, 0.75));
}

.craftex-hero-banner__left-link:focus-visible {
	outline: 2px solid #1D82EA;
	outline-offset: 4px;
}

/* Center Brand / Logo Column */
.craftex-hero-banner__brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.craftex-hero-banner__brand-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
}

.craftex-hero-banner__brand-title {
	margin: 0;
	font-family: var(--craftex-hero-brand-font-family, "Aeoniktrial", "Aeonik TRIAL", "Helvetica Neue", Arial, sans-serif);
	font-size: var(--craftex-hero-brand-font-size, 1.75rem);
	font-weight: var(--craftex-hero-brand-font-weight, 400);
	line-height: var(--craftex-hero-brand-line-height, 1.1);
	letter-spacing: var(--craftex-hero-brand-spacing, 0.04em);
	text-transform: var(--craftex-hero-brand-transform, lowercase);
	color: var(--craftex-hero-brand-color, #FFFFFF);
	transition: color 0.25s ease, opacity 0.25s ease;
}

.craftex-hero-banner__brand-link:hover .craftex-hero-banner__brand-title {
	color: var(--craftex-hero-brand-hover-color, rgba(255, 255, 255, 0.85));
}

.craftex-hero-banner__brand-img {
	display: block;
	width: var(--craftex-hero-brand-img-width, 140px);
	max-width: 100%;
	height: auto;
	object-fit: contain;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.craftex-hero-banner__brand-link:hover .craftex-hero-banner__brand-img {
	opacity: 0.88;
}

/* Right Column / Link */
.craftex-hero-banner__right {
	flex: 1 1 0%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.craftex-hero-banner__right-link,
.craftex-hero-banner__right-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--craftex-hero-right-font-family, "OCRBLetterpressMW01-Regular", "OCR B Std", "Courier New", monospace);
	font-size: var(--craftex-hero-right-font-size, 0.75rem);
	font-weight: var(--craftex-hero-right-font-weight, 400);
	line-height: var(--craftex-hero-right-line-height, 1.2);
	letter-spacing: var(--craftex-hero-right-spacing, 0.15em);
	text-transform: var(--craftex-hero-right-transform, uppercase);
	color: var(--craftex-hero-right-color, #FFFFFF);
	text-decoration: none;
	transition: color 0.25s ease, opacity 0.25s ease;
}

.craftex-hero-banner__right-link:hover,
.craftex-hero-banner__right-link:focus-visible {
	color: var(--craftex-hero-right-hover-color, rgba(255, 255, 255, 0.75));
}

.craftex-hero-banner__right-link:focus-visible {
	outline: 2px solid #1D82EA;
	outline-offset: 4px;
}

/* Optional Icon styling */
.craftex-hero-banner__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Optional Hero Content Body Section */
.craftex-hero-banner__body-content {
	margin-top: var(--craftex-hero-body-margin-top, clamp(32px, 6vw, 80px));
	width: 100%;
	max-width: var(--craftex-hero-body-max-width, 960px);
	text-align: var(--craftex-hero-body-align, center);
	margin-inline: auto;
}

.craftex-hero-banner__headline {
	font-family: "Aeoniktrial", "Aeonik TRIAL", "Helvetica Neue", Arial, sans-serif;
	font-weight: var(--craftex-hero-headline-weight, 300);
	font-size: var(--craftex-hero-headline-size, clamp(1.75rem, 4vw, 3.5rem));
	line-height: var(--craftex-hero-headline-line-height, 1.15);
	color: var(--craftex-hero-headline-color, #FFFFFF);
	margin: 0 0 16px 0;
}

.craftex-hero-banner__subtitle {
	font-family: "Aeoniktrial", "Aeonik TRIAL", "Helvetica Neue", Arial, sans-serif;
	font-weight: var(--craftex-hero-subtitle-weight, 300);
	font-size: var(--craftex-hero-subtitle-size, clamp(0.9rem, 1.5vw, 1.125rem));
	line-height: var(--craftex-hero-subtitle-line-height, 1.5);
	color: var(--craftex-hero-subtitle-color, rgba(255, 255, 255, 0.85));
	margin: 0;
}

/* Motion Reveal Animation */
.craftex-hero-banner[data-craftex-reveal="yes"] .craftex-reveal-item {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.craftex-hero-banner[data-craftex-reveal="yes"].is-craftex-visible .craftex-reveal-item,
.craftex-hero-banner[data-craftex-reveal="no"] .craftex-reveal-item {
	opacity: 1;
	transform: translateY(0);
}

/* Tablet Responsive Breakpoint (768px - 1024px) */
@media (max-width: 1024px) {
	.craftex-hero-banner {
		width: 100%;
		height: 100%;
		min-height: var(--craftex-hero-min-height, 100%);
		background: transparent !important;
		background-color: transparent !important;
		padding-top: clamp(28px, 4vw, 48px);
		padding-right: clamp(20px, 3.5vw, 40px);
		padding-bottom: clamp(28px, 4vw, 48px);
		padding-left: clamp(20px, 3.5vw, 40px);
	}

	.craftex-hero-banner__brand-title {
		font-size: clamp(1.35rem, 3vw, 1.625rem);
	}
}

/* Mobile Responsive Breakpoint (<=767px) */
@media (max-width: 767px) {
	.craftex-hero-banner {
		width: 100%;
		height: 100%;
		min-height: var(--craftex-hero-min-height, 100%);
		background: transparent !important;
		background-color: transparent !important;
		padding-top: clamp(36px, 9.5vw, 48px);
		padding-right: clamp(20px, 5vw, 28px);
		padding-bottom: clamp(36px, 9.5vw, 48px);
		padding-left: clamp(20px, 5vw, 28px);
		box-sizing: border-box;
	}

	.craftex-hero-banner__container {
		width: 100%;
		height: 100%;
		justify-content: flex-start;
	}

	.craftex-hero-banner__header-bar {
		display: flex;
		flex-direction: row;
		align-items: center !important;
		justify-content: space-between;
		width: 100%;
		gap: 12px;
	}

	.craftex-hero-banner__left-link,
	.craftex-hero-banner__left-text,
	.craftex-hero-banner__right-link,
	.craftex-hero-banner__right-text {
		font-size: clamp(11px, 2.8vw, 13px);
		letter-spacing: 0.12em;
		font-weight: 400;
	}

	.craftex-hero-banner__brand-title {
		font-size: clamp(28px, 8.2vw, 36px);
		font-weight: 400;
		line-height: 1;
		letter-spacing: 0.02em;
	}

	.craftex-hero-banner__bg-layer {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		background: transparent !important;
		background-color: transparent !important;
	}

	.craftex-hero-banner__bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
		min-width: 100% !important;
		min-height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		object-fit: cover !important;
		object-position: var(--craftex-hero-bg-position, center center) !important;
	}

	.craftex-hero-banner__brand-img {
		width: var(--craftex-hero-brand-img-width-mobile, 110px);
	}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.craftex-hero-banner__bg-image,
	.craftex-hero-banner__left-link,
	.craftex-hero-banner__brand-title,
	.craftex-hero-banner__brand-img,
	.craftex-hero-banner__right-link {
		transition: none !important;
		transform: none !important;
	}
}