/**
 * GEOCIKLO Core — Contextual Vertical Scrollspy Navigation Styles
 * High visual hierarchy, full-height editorial rail layout, fully responsive, zero framework bloat.
 */

:root {
	/* Fase 2.5 — rail budget. Values MUST stay identical to geociklo-layout.css
	   (the page width contract) so load order between the two files is irrelevant. */
	--gc-scrollspy-width: clamp(160px, 12vw, 200px);
	--gc-scrollspy-gap: clamp(24px, 2vw, 32px);
	--gc-scrollspy-rail-color: rgba(3, 88, 119, 0.12);
	--gc-scrollspy-inactive-opacity: 0.65;
	--gc-header-offset: 84px;
}

/* ==========================================================================
   Desktop Vertical Navigation Rail (>= 1200px) — Full Height Editorial Index
   ========================================================================== */
.gc-scrollspy {
	position: sticky;
	top: calc(var(--gc-header-offset, 84px) + 24px);
	height: calc(100vh - var(--gc-header-offset, 84px) - 48px);
	max-height: calc(100dvh - var(--gc-header-offset, 84px) - 48px);
	width: 100%;
	max-width: var(--gc-scrollspy-width, clamp(160px, 12vw, 200px));
	z-index: 40;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 8px 0;
}

/* Continuous vertical base rail connecting 01 to 06 */
.gc-scrollspy__rail {
	position: absolute;
	left: 14px;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: var(--gc-scrollspy-rail-color);
	border-radius: 2px;
	pointer-events: none;
}

.gc-scrollspy__list {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	flex: 1;
	position: relative;
}

.gc-scrollspy__item {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	position: relative;
	min-block-size: 88px;
}

.gc-scrollspy__link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 6px 12px 6px 28px;
	text-decoration: none !important;
	color: var(--gc-text, #073F4D);
	font-family: var(--gc-font-family, 'Inter Tight', sans-serif);
	font-size: 13.5px;
	font-weight: 600;
	opacity: var(--gc-scrollspy-inactive-opacity);
	border-radius: 8px;
	position: relative;
	box-sizing: border-box;
	transition: opacity 0.2s ease,
	            color 0.2s ease,
	            background 0.2s ease;
}

.gc-scrollspy__number {
	font-size: 11px;
	font-weight: 800;
	color: var(--gc-text-muted, #5A7E85);
	letter-spacing: 0.5px;
	line-height: 1.4;
	margin-top: 1px;
	transition: color 0.2s ease;
	flex-shrink: 0;
}

.gc-scrollspy__content {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.gc-scrollspy__label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.35;
	color: var(--gc-text, #073F4D);
	transition: color 0.2s ease, font-weight 0.2s ease;
}

.gc-scrollspy__summary {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--gc-font-family, 'Inter Tight', sans-serif);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--gc-text-muted, #57737A);
	max-width: 175px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
	            visibility 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover & Focus State */
.gc-scrollspy__link:hover {
	opacity: 1;
	color: var(--gc-primary, #035877);
	background: rgba(3, 88, 119, 0.04);
}

.gc-scrollspy__link:focus-visible {
	outline: 2px solid var(--gc-accent, #3FAE6A);
	outline-offset: 2px;
	opacity: 1;
}

/* Active State (is-active / aria-current="location") */
.gc-scrollspy__link.is-active,
.gc-scrollspy__link[aria-current="location"] {
	opacity: 1;
	color: var(--gc-primary, #035877);
	transform: none !important;
}

.gc-scrollspy__link.is-active .gc-scrollspy__number,
.gc-scrollspy__link[aria-current="location"] .gc-scrollspy__number {
	color: var(--gc-accent, #3FAE6A);
	font-weight: 900;
	font-size: 11.5px;
}

.gc-scrollspy__link.is-active .gc-scrollspy__label,
.gc-scrollspy__link[aria-current="location"] .gc-scrollspy__label {
	font-weight: 900;
	color: var(--gc-primary, #035877);
}

.gc-scrollspy__link.is-active .gc-scrollspy__summary,
.gc-scrollspy__link[aria-current="location"] .gc-scrollspy__summary {
	opacity: 1;
	visibility: visible;
}

.gc-scrollspy__link.is-active::before,
.gc-scrollspy__link[aria-current="location"]::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--gc-accent, #3FAE6A);
	border-radius: 2px;
	box-shadow: 0 0 8px rgba(63, 174, 106, 0.5);
}

/* ==========================================================================
   Mobile & Tablet Horizontal Section Navigation (< 1200px)
   At 1024px (small desktop / tablet) the vertical rail MUST NOT be shown.
   ========================================================================== */
@media (max-width: 1199px) {
	.gc-scrollspy {
		position: sticky;
		top: var(--gc-header-offset, 72px);
		height: auto !important;
		max-height: none !important;
		width: 100vw;
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		z-index: 85;
		background: rgba(247, 250, 248, 0.94);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		padding: 10px 20px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-inline: contain;
		scrollbar-width: none;
	}

	.gc-scrollspy::-webkit-scrollbar {
		display: none;
	}

	.gc-scrollspy__rail {
		display: none;
	}

	.gc-scrollspy__list {
		flex-direction: row;
		gap: 8px;
		flex-wrap: nowrap;
		align-items: center;
		min-width: max-content;
		height: auto !important;
		justify-content: flex-start !important;
	}

	.gc-scrollspy__item {
		scroll-snap-align: start;
		flex-shrink: 0;
		min-block-size: auto !important;
	}

	.gc-scrollspy__link {
		padding: 7px 16px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.8);
		border: 1px solid rgba(0, 0, 0, 0.06);
		font-size: 13px;
		font-weight: 700;
		opacity: 0.85;
		gap: 8px;
		align-items: center;
	}

	.gc-scrollspy__link.is-active,
	.gc-scrollspy__link[aria-current="location"] {
		background: var(--gc-primary, #035877);
		color: #FFFFFF !important;
		border-color: var(--gc-primary, #035877);
		transform: none;
		box-shadow: 0 4px 14px rgba(3, 88, 119, 0.22);
		opacity: 1;
	}

	.gc-scrollspy__link.is-active .gc-scrollspy__number,
	.gc-scrollspy__link[aria-current="location"] .gc-scrollspy__number {
		color: #3FAE6A;
		font-size: 11px;
	}

	.gc-scrollspy__link.is-active .gc-scrollspy__label,
	.gc-scrollspy__link[aria-current="location"] .gc-scrollspy__label {
		color: #FFFFFF;
		font-weight: 800;
	}

	.gc-scrollspy__summary {
		display: none !important;
	}

	.gc-scrollspy__link.is-active::before,
	.gc-scrollspy__link[aria-current="location"]::before {
		display: none;
	}
}

/* ==========================================================================
   Page Layout Integration with Scrollspy Rail (Single Sticky Owner Architecture)
   ========================================================================== */
.gc-solutions-layout {
	display: flex;
	gap: var(--gc-scrollspy-gap, clamp(24px, 2vw, 32px));
	width: 100%;
	margin: 0 auto;
	position: relative;
	align-items: stretch; /* allows sidebar to match 100% of content height */
}

.gc-solutions-layout__sidebar {
	flex: 0 0 var(--gc-scrollspy-width, clamp(160px, 12vw, 200px));
	width: var(--gc-scrollspy-width, clamp(160px, 12vw, 200px));
	align-self: stretch; /* spans full height of content sections */
	position: relative;
	z-index: 40;
	display: flex;
	flex-direction: column;
}

.gc-solutions-layout__content {
	flex: 1;
	min-width: 0;
	width: 100%;
}

@media (max-width: 1199px) {
	.gc-solutions-layout {
		flex-direction: column;
		gap: 0;
		align-items: flex-start;
	}

	.gc-solutions-layout__sidebar {
		flex: none;
		width: 100%;
		position: sticky;
		top: var(--gc-header-offset, 72px);
		z-index: 85;
		height: auto !important;
		max-height: none !important;
	}
}

/* Centralized Anchor Target Scroll Margin Offset */
.gc-scrollspy-target {
	scroll-margin-top: calc(var(--gc-header-offset, 84px) + 28px);
}

@media (max-width: 1199px) {
	.gc-scrollspy-target {
		scroll-margin-top: calc(var(--gc-header-offset, 72px) + 56px);
	}
}

/* ==========================================================================
   Reduced Motion Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.gc-scrollspy,
	.gc-scrollspy__link,
	.gc-scrollspy__number,
	.gc-scrollspy__label,
	.gc-scrollspy__summary {
		transition: none !important;
		transform: none !important;
	}
}