/* ---------------------------------------------
	 S1 Path Selector
	 Layout Rules:
		 - Height: viewport minus fixed navbar & footer (uses global vars)
		 - Header consumes EXACT 20% of available height (after bars)
		 - Remaining 80% divided into 3 equal vertical bands (levels)
		 - Mobile-first; enhancements via min-width queries at end
	 Depends on global CSS custom properties:
		 --s0-navbar-height
		 --s0-footer-height
	 --------------------------------------------- */

/* Root design tokens for S1 Path Selector (tweak here) */
/* Minimal variable set for quick tuning */
:root {
	--S1PS-header-height: calc(0.22 * var(--adjusted-100vh));
	/* header slice of available height */
	--S1PS-level-height: calc((var(--adjusted-100vh)- var(--S1PS-header-height)) / 3);
	/* each level gets 1/3 of remaining 80% */
	--S1PS-glass-margin: 0.8rem;
	/* margin for glass card container */
	--S1PS-path-separation-line: 25%;
	/* where the path divides the containers - matches path position */
	--S1PS-container-offset: 2rem;
	/* offset adjustment for container calculations */
	--S1PS-header-color: #0d6efd;
	/* Step brand colors (from preview prototype) */

	--step-1: #5893f2;
	/* Open */
	--step-2: #8b5cf6;
	/* Prep */
	--step-3: #e75b95;
	/* Act */
	/* Fallback deep shades (avoid color-mix for broader support) */
	--step-1-deep: #2b6fcf;
	--step-2-deep: #6937c7;
	--step-3-deep: #c94579;
	/* Backwards compatible existing tokens */
	--S1PS-title-color: #ffffff;
	--S1PS-sub-color: rgba(255, 255, 255, .85);

	/* Multi-layer wipe shades (progressively darker) */
	--step-1-deep: #2b6fcf;
	--step-2-deep: #6937c7;
	--step-3-deep: #c94579;

	/* Even deeper shades for layered wipe effect */
	--step-1-deeper: #1a4fa8;
	--step-2-deeper: #4c2596;
	--step-3-deeper: #a6335c;

	/* Darkest shades for final wipe layer */
	--step-1-darkest: #0f3580;
	--step-2-darkest: #351a65;
	--step-3-darkest: #832040;
}

/* ---------- Color wipe transition on selection - Multi-layer LIFO system */
.S1PS-wipe {
	position: fixed;
	inset: 0;
	pointer-events: none;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s ease-in-out;
}

/* Layer 1: Lightest shade (base layer) */
#S1PS_wipe1 {
	z-index: 9997;
}

#S1PS_wipe1.level-1 {
	background: linear-gradient(90deg, var(--step-1-deep), var(--step-1));
}

#S1PS_wipe1.level-2 {
	background: linear-gradient(90deg, var(--step-2-deep), var(--step-2));
}

#S1PS_wipe1.level-3 {
	background: linear-gradient(90deg, var(--step-3-deep), var(--step-3));
}

/* Layer 2: Medium shade */
#S1PS_wipe2 {
	z-index: 9998;
}

#S1PS_wipe2.level-1 {
	background: linear-gradient(90deg, var(--step-1-deeper), var(--step-1-deep));
}

#S1PS_wipe2.level-2 {
	background: linear-gradient(90deg, var(--step-2-deeper), var(--step-2-deep));
}

#S1PS_wipe2.level-3 {
	background: linear-gradient(90deg, var(--step-3-deeper), var(--step-3-deep));
}

/* Layer 3: Darkest shade (top layer) */
#S1PS_wipe3 {
	z-index: 9999;
}

#S1PS_wipe3.level-1 {
	background: linear-gradient(90deg, var(--step-1-darkest), var(--step-1-deeper));
}

#S1PS_wipe3.level-2 {
	background: linear-gradient(90deg, var(--step-2-darkest), var(--step-2-deeper));
}

#S1PS_wipe3.level-3 {
	background: linear-gradient(90deg, var(--step-3-darkest), var(--step-3-deeper));
}

.S1PS-wipe.show {
	transform: scaleX(1);
}

#S1_PathSelector {
	position: relative;
	width: 100%;
	height: 100vh;
	/* full viewport so bg stretches edge to edge */
	padding-top: var(--s0-navbar-height);
	padding-bottom: var(--s0-footer-height);
}

.S1PS-inner {
	position: relative;
	width: 100%;
	max-height: var(--adjusted-100vh);
	height: var(--adjusted-100vh);
	display: flex;
	flex-direction: column;
}

/* Header section - takes 20% of available height */
.S1PS-header {
	height: var(--S1PS-header-height);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	text-align: left;
	padding: 0.5rem;
	padding-right: 20%;
	background-color: var(--S1PS-header-color);
}

.S1PS-title {
	color: var(--S1PS-title-color);
	font-size: 2.2rem;
	font-weight: 700;
	text-align: left;
	padding: 0;
	margin: 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.S1PS-sub {
	color: var(--S1PS-sub-color);
	font-size: 1rem;
	/* margin: 0.5rem 0 0 0; */
	max-width: 600px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Inline ad inside Path Picker header */
.S1PS-ad {
	margin: 8px 12px 0;
	/* height is driven by a CSS variable so JS can reserve space when an ad loads */
	min-height: var(--S1PS-ad-height, 90px);
	/* enough height for most responsive units */
	display: block;
}

/* Levels container - takes remaining 80% */
.S1PS-levels {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: calc(var(--adjusted-100vh) - var(--S1PS-header-height));
}

/* Individual level - each takes 1/3 of the levels container */
.S1PS-level {
	display: flex;
	justify-content: flex-start;
	position: relative;
	transition: all 0.3s ease;
	flex: 1;
	min-height: var(--S1PS-level-height);
	/* Force visibility even when empty */
	border: 2px solid rgba(255, 255, 255, 0.3);
	padding: 0;
	cursor: pointer;
	flex-wrap: nowrap;
}

.S1PS-level:hover {
	transform: scale(1.02);
	justify-content: flex-start;
}

.S1PS-level:active {
	transform: scale(0.98);
}

/* Actual HTML glass container */
.S1PS-glass-container {
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 2px solid rgba(255, 255, 255, 0.22);
	border-radius: 16px;
	box-shadow:
		0 18px 48px rgba(0, 0, 0, 0.28),
		0 6px 24px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
	z-index: 2;
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.S1PS-glass-container:hover {
	transform: translateY(-2px);
	box-shadow:
		0 25px 80px rgba(0, 0, 0, 0.4),
		0 12px 40px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Image in top left */
.S1PS-level-image {
	height: 85%;
	width: auto;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	object-fit: cover;
	flex-shrink: 1;
	border: 3px solid rgba(255, 255, 255, 0.28);
	box-sizing: border-box;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.S1PS-level-image:hover {
	transform: scale(1.03);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
}

/* Title next to image */
.S1PS-level-title {
	flex: 1;
	margin: 0;
	padding: 0;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.S1PS-level-title {
	/* ensure text block has internal padding to separate from image */
	padding-left: 0.5rem;
}

.S1PS-word {
	font-weight: 700;
	font-size: 2rem;
	display: block;
	margin: 0;
	line-height: 1.2;
}

.S1PS-rest {
	font-weight: 400;
	font-size: 0.8rem;
	display: block;
	opacity: 0.9;
	margin: 0;
	line-height: 1.1;
}

/* Description spans full width */
.S1PS-level-desc {
	width: 100%;
	font-size: 0.7rem;
	margin: 0.15rem 0 0 0;
	padding: 0;
	line-height: 1.3;
	color: white;
	opacity: 0.95;
}

/* Light separator above the level description */
.S1PS-desc-sep {
	border: none;
	height: 1px;
	background: rgba(255, 255, 255, 0.12);
	margin: 0.45rem 0 0.2rem 0;
}

/* CTA button positioned absolute in bottom right */
.S1PS-cta {
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	background: rgba(255, 255, 255, 0.25);
	border: 2px solid rgba(255, 255, 255, 0.6);
	color: white;
	padding: 0.6rem 1.2rem;
	border-radius: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 0.9rem;
	margin: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Level styling based on data-level attribute */
.S1PS-level[data-level="1"] {
	background: linear-gradient(135deg, var(--step-1), var(--step-1-deep));
}

.S1PS-level[data-level="2"] {
	background: linear-gradient(135deg, var(--step-2), var(--step-2-deep));
}

.S1PS-level[data-level="3"] {
	background: linear-gradient(135deg, var(--step-3), var(--step-3-deep));
}

/* Hover effect for CTA button */
.S1PS-cta:hover {
	background: rgba(255, 255, 255, 0.4);
	border-color: white;
	transform: translateY(-3px);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.3),
		0 4px 12px rgba(0, 0, 0, 0.2);
}

.S1PS-cta:active {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Path SVG styling */
.S1PS-path-wrap {
	position: absolute;
	top: 0;
	left: var(--S1PS-path-separation-line);
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}


#S1PS_pathSVG {
	width: 100%;
	height: 100%;
}

.S1PS-path-stroke {
	fill: none;
	stroke: rgba(255, 255, 255, 0.3);
	stroke-width: 20;
	/* stroke-dasharray: 10, 5; */
}

/* Make the new card-level button visually identical to the glass container
	 and ensure keyboard accessibility */
.S1PS-card-button {
	width: 90%;
	appearance: none;
	border: none;
	background: transparent;
	margin: 0;
	text-align: left;
	cursor: pointer;
	display: block;
	z-index: 2;
	max-width: 500px;
	min-width: 300px;
	min-height: 20vh;
	padding: 5px 15px;
	max-height: 25vh;
	height: 90%;
}

.S1PS-card-button:focus {
	outline: 3px solid rgba(255, 255, 255, 0.25);
	outline-offset: 4px;
}

.S1PS-level-image {
	min-width: 100px;
	height: 100px;
	border-radius: 12px;
	pointer-events: none;
}

.S1PS-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	width: 90%;
	height: 100%;
}

.S1PS-left75 {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

/* Responsive adjustments - min-width media queries at end */
@media (min-width: 480px) {
	.S1PS-title {
		font-size: 2.5rem;
	}

	.S1PS-level-title {
		font-size: 2rem;
	}
}

@media (min-width: 768px) {
	.S1PS-title {
		font-size: 3rem;
	}

	.S1PS-sub {
		font-size: 1.2rem;
	}

	.S1PS-level-title {
		font-size: 2.2rem;
	}

	.S1PS-level-desc {
		/* font-size: 1.1rem; */
	}

	/* Replace absolute calc-based centering with a 75% container centered layout */
	.S1PS-left75 {
		width: 75%;
		margin-left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		box-sizing: border-box;
		padding: 0 var(--S1PS-container-offset);
	}

	/* Make the container for the glass/button static and allow the card to size itself */
	.S1PS-glass-container,
	.S1PS-card-button {
		position: static;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		padding: 1.25rem 1.5rem;
		margin: 0 auto;
		height: 90%;
	}
}

@media (min-width: 992px) {
	.S1PS-title {
		font-size: 3.5rem;
	}

	.S1PS-level-title {
		font-size: 2.5rem;
	}
}

@media (min-width: 1200px) {
	.S1PS-title {
		font-size: 4rem;
	}

	.S1PS-level-title {
		font-size: 2.8rem;
	}
}


/* RTL support - move path to the left instead */
.rtl .S1PS-path-wrap {
	left: calc(-1 * var(--S1PS-path-separation-line));
	right: auto;
}