/* Welcome page only: background video sizing and layering */
/* Minimal, additive rules to avoid touching global/site-wide styles */

/* Hide welcome content until i18n applies (avoid brief Greek flash) */
body.has-bg-video:not(.ready) {
	opacity: 0;
	visibility: hidden;
}
body.has-bg-video.ready {
	opacity: 1;
	visibility: visible;
	transition: opacity 240ms ease;
}

.bg-video {
	position: fixed;
	inset: 0;
	z-index: -2; /* under overlay and content */
	overflow: hidden;
	pointer-events: none; /* never steal taps/clicks */
}

.bg-video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Robust cover for 16:9 YouTube iframe across all aspect ratios */
	width: 100vw;
	height: 56.25vw;         /* 16:9 relative to width */
	min-width: 177.78vh;     /* 100 * (16/9) → cover tall viewports */
	min-height: calc(var(--vh, 1vh) * 100);       /* at least full height */
	border: 0;
}

.bg-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.40); /* readability without hiding content */
	z-index: -1; /* above video, below content */
	pointer-events: none;
}

/* Keep hero/content above overlay by default (no z-index changes needed) */

/* -------- Welcome hero layout & typography -------- */
#welcome-section {
	/* Center the welcome stack vertically in the viewport, accounting for the fixed footer */
	margin-top: 0;
	min-height: calc(calc(var(--vh, 1vh) * 100) - 64px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: env(safe-area-inset-top, 0px);
	/* fine-tune: previously ~-41px; raise by ~2 more clicks (~16px) for a total ~-56px */
	transform: translateY(-56px);
}

/* Welcome panel removed: keep selector harmless in case of stray markup */
#welcome-section .welcome-inner { background: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: contents; }
@media (min-width: 600px) { #welcome-section .welcome-inner { padding: 0 !important; } }

.welcome-title {
	font-size: 1.6rem;
	color: #f9d65c;
	margin-top: 1.2rem;
	/* Cinematic entrance like logo */
	opacity: 0;
	transform: scale(0.96);
	animation: logoFadeIn 1.2s ease forwards;
	animation-delay: 0.55s; /* logo at 0.3s, title after */
	will-change: transform, opacity;
	/* Subtle 3D depth to stand off from the video */
	text-shadow:
		0 1px 0 rgba(0,0,0,0.55),
		0 2.5px 3.5px rgba(0,0,0,0.50),
		0 6px 12px rgba(0,0,0,0.40),
		0 12px 28px rgba(0,0,0,0.32),
		0 24px 48px rgba(0,0,0,0.26);
	-webkit-text-stroke: 0.5px rgba(255,255,255,0.38); /* stronger rim */
}

.welcome-subtitle {
	font-size: 1rem;
	color: #ecf0f1;
	margin-bottom: 1.5rem;
	/* Cinematic entrance like logo, a bit later */
	opacity: 0;
	transform: scale(0.96);
	animation: logoFadeIn 1.2s ease forwards;
	animation-delay: 0.8s;
	will-change: transform, opacity;
	/* Gentle depth; lighter than title to remain clean */
	text-shadow:
		0 1px 1px rgba(0,0,0,0.50),
		0 3px 6px rgba(0,0,0,0.38),
		0 10px 22px rgba(0,0,0,0.28);
	/* For very bright frames behind, a slightly stronger dark stroke helps readability */
	-webkit-text-stroke: 0.35px rgba(0,0,0,0.35);
}
/* --- Welcome subtitle: always white, bolder and slightly larger --- */
#welcome-section .welcome-subtitle {
	color: #ffffff !important; /* force white in both dark and light modes */
	font-weight: 700;           /* bold */
	font-size: clamp(1.1rem, 2.4vw, 1.25rem); /* a touch larger, responsive */
	white-space: pre-line;      /* render \n from locale as line break */
	line-height: 1.25;          /* comfortable two-line spacing */
}

/* -------- Logo animation (uses global @keyframes logoFadeIn) -------- */
.welcome-logo {
	width: 60%;
	max-width: 420px;
	height: auto;
	border-radius: 25px;
	/* eliminate shadow to prevent a second darker rectangle */
	box-shadow: none;
	opacity: 0;
	transform: scale(0.85);
	animation: logoFadeIn 1.5s ease forwards;
	animation-delay: 0.3s;
}

/* Tablet sizing parity with prior inline rules */
@media (min-width: 600px) {
	.welcome-logo { width: 55%; max-width: 560px; }
	.welcome-title { font-size: 2rem; }
}

/* Desktop refinement */
@media (min-width: 1024px) {
	.welcome-logo { width: 48%; max-width: 720px; }
}

/* Safety: remove any pseudo overlays/shadows on the logo container when bg video is active */
body.has-bg-video .welcome-inner::before,
body.has-bg-video .welcome-inner::after,
body.has-bg-video .welcome-logo::before,
body.has-bg-video .welcome-logo::after {
	content: none !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
}
/* Ensure no shadow on logo when video background is active */
body.has-bg-video .welcome-logo { box-shadow: none !important; }

/* Lock welcome to dark visual regardless of OS light setting */
@media (prefers-color-scheme: light) {
	html.has-bg-video, body.has-bg-video { color-scheme: dark; }
	#welcome-section .welcome-title { color: #f9d65c !important; }
	#welcome-section .welcome-subtitle { color: #ffffff !important; -webkit-text-stroke: 0.35px rgba(0,0,0,0.35); }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.welcome-logo,
	.welcome-title,
	.welcome-subtitle {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* -------- Language selector (top-right) — 3D depth on welcome -------- */
/* Make the selector stand off the video: subtle glassy dark chip with depth */
body.has-bg-video #langSelect {
	appearance: none;
	-webkit-appearance: none;
	background: rgba(14, 21, 32, 0.68);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 12px;
	padding: 8px 12px;
	font-weight: 600;
	box-shadow:
		0 2px 4px rgba(0,0,0,0.45),
		0 8px 20px rgba(0,0,0,0.35),
		inset 0 0 0.5px rgba(255,255,255,0.5);
	backdrop-filter: blur(4px) saturate(1.05);
	-webkit-backdrop-filter: blur(4px) saturate(1.05);
	text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
body.has-bg-video #langSelect:focus {
	outline: none;
	border-color: rgba(255,255,255,0.6);
	box-shadow:
		0 2px 6px rgba(0,0,0,0.55),
		0 12px 28px rgba(0,0,0,0.40),
		0 0 0 2px rgba(255,255,255,0.18);
}
/* Keep dark styling even if OS is light on welcome */
@media (prefers-color-scheme: light) {
	body.has-bg-video #langSelect {
		background: rgba(14, 21, 32, 0.72) !important;
		color: #fff !important;
		border-color: rgba(255,255,255,0.4) !important;
	}
}

/* ===== Welcome page: remove static gradient when video is active ===== */
/* Ensure only the video + overlay are visible behind content */
html.has-bg-video,
body.has-bg-video {
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
}
/* Also neutralize any attribute-based page backgrounds if present */
html.has-bg-video[data-view],
body.has-bg-video[data-view],
html.has-bg-video[data-category],
body.has-bg-video[data-category] {
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
}

/* Remove any intermediate container backgrounds and pseudo overlays on welcome */
body.has-bg-video #welcome-section,
body.has-bg-video main,
body.has-bg-video .welcome-wrapper,
body.has-bg-video .main-container,
body.has-bg-video .content,
body.has-bg-video .content-wrapper,
body.has-bg-video .page,
body.has-bg-video .hero,
body.has-bg-video .hero-bg {
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
}
/* Kill pseudo-elements that might add tints or gradients */
body.has-bg-video #welcome-section::before,
body.has-bg-video #welcome-section::after,
body.has-bg-video main::before,
body.has-bg-video main::after,
body.has-bg-video .welcome-wrapper::before,
body.has-bg-video .welcome-wrapper::after,
body.has-bg-video .main-container::before,
body.has-bg-video .main-container::after,
body.has-bg-video .content::before,
body.has-bg-video .content::after,
body.has-bg-video .content-wrapper::before,
body.has-bg-video .content-wrapper::after,
body.has-bg-video .page::before,
body.has-bg-video .page::after,
body.has-bg-video .hero::before,
body.has-bg-video .hero::after,
body.has-bg-video .hero-bg::before,
body.has-bg-video .hero-bg::after {
	content: none !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
}

/* -------- Welcome-only: semi-transparent dropdown list for languages -------- */
/* Glassy list that opens under the existing select, same visual γλώσσα με το footer */
body.has-bg-video .ga-lang-list {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 200px;
	background: rgba(14,21,32,0.58);
	border: 1px solid rgba(255,255,255,0.28);
	border-radius: 12px;
	padding: 6px;
	z-index: 2000;
	box-shadow: 0 12px 30px rgba(0,0,0,0.45), inset 0 0 0.5px rgba(255,255,255,0.5);
	backdrop-filter: blur(10px) saturate(1.05);
	-webkit-backdrop-filter: blur(10px) saturate(1.05);
}
body.has-bg-video .ga-lang-list[hidden] { display: none; }
body.has-bg-video .ga-lang-list button {
	width: 100%;
	text-align: left;
	background: rgba(20,33,50,0.66);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.20);
	border-radius: 10px;
	padding: 8px 10px;
	margin: 4px 0;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
body.has-bg-video .ga-lang-list button:hover { background: rgba(27,43,66,0.75); }