/**
 * Frontend Styles
 *
 * Styles for fullPage.js implementation with navigation dots.
 */

/* Body modifications when fullPage is active */
body.gbfp-active {
	overflow: hidden;
}

/* Wrapper container */
.gbfp-wrapper {
	position: relative;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
}

/* Section styles */
.gbfp-section {
	position: relative;
	width: 100vw;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
}

/* Ensure content doesn't overflow */
.gbfp-section > * {
	width: 100%;
	max-width: 100%;
}

/* Footer section styling */
footer.gbfp-section {
	position: relative;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	width: 100vw;
	min-height: 100vh;
	padding: 0;
	margin: 0;
	background-color: inherit;
}

footer.gbfp-section > * {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* GeneratePress footer section styling (created by JavaScript) */
section.site-footer-fullpage {
	position: relative;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	width: 100vw;
	min-height: 100vh;
	padding: 0;
	margin: 0;
	background-color: inherit;
}

section.site-footer-fullpage > * {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* CFIT Footer section styling when added to fullpage */
.cfit-footer-section.gbfp-section {
	position: relative;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	width: 100vw;
	min-height: 100vh;
	padding: 0;
	margin: 0;
	background-color: inherit;
}

.cfit-footer-section.gbfp-section > * {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Ensure all nested elements in footer section work properly */
section.site-footer-fullpage .site-footer,
section.site-footer-fullpage > div {
	width: 100%;
	margin: 0;
	padding: 0;
}

section.site-footer-fullpage > div > div {
	width: 100%;
}

/* ============================================
   NAVIGATION DOTS STYLING - fullPage.js
   ============================================ */

/* Main navigation wrapper - FLOTANTE, NO OCUPA ESPACIO */
#fp-nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1000;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
}

/* Right position (default) */
#fp-nav.fp-right {
	right: 20px;
	left: auto;
}

/* Left position */
#fp-nav.fp-left {
	left: 20px;
	right: auto;
}

/* Navigation list */
#fp-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: auto;
	height: auto;
}

/* List items */
#fp-nav ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 12px;
	width: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

/* Links */
#fp-nav ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	width: 12px;
	height: 12px;
	cursor: pointer;
	text-decoration: none;
	outline: none;
	border: none;
	padding: 0;
	pointer-events: auto;
}

/* Dots - not active */
#fp-nav ul li a span {
	border-radius: 50%;
	position: absolute;
	z-index: 1;
	height: 12px;
	width: 12px;
	border: 2px solid currentColor;
	left: 0;
	top: 0;
	background-color: currentColor;
	transition: all 0.3s ease-in-out;
	display: block;
	pointer-events: auto;
	color: inherit;
}

/* Dots - hover state */
#fp-nav ul li:hover a span {
	width: 12px;
	height: 12px;
	margin: 0;
	transform: scale(1.1);
}

/* Dots - active state */
#fp-nav ul li a.active span {
	width: 12px;
	height: 12px;
	margin: 0;
	background-color: currentColor;
	border-color: currentColor;
}

/* Tooltip text (if any) */
.fp-tooltip {
	display: none !important;
}

/* Hide fullPage watermark */
.fp-watermark {
	display: none !important;
}

/* Fix for potential conflicts */
.gbfp-wrapper * {
	box-sizing: border-box;
}

/* Hide fullPage's default scroll bar */
html.fp-enabled {
	overflow: hidden;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS - MÓVIL
   ============================================ */

@media (max-width: 768px) {
	/* Secciones en móvil ocupa 100% */
	.gbfp-section {
		width: 100vw;
		margin: 0;
		padding: 0;
	}

	/* Smaller dots on mobile */
	#fp-nav ul li a span {
		height: 10px;
		width: 10px;
		border-width: 1.5px;
	}

	/* Hover effect móvil */
	#fp-nav ul li:hover a span {
		width: 10px;
		height: 10px;
		margin: 0;
		transform: scale(1.15);
	}

	/* Active state móvil */
	#fp-nav ul li a.active span {
		width: 10px;
		height: 10px;
	}

	#fp-nav {
		right: 15px;
	}

	#fp-nav.fp-left {
		left: 15px;
	}
}