/* ============================================================
   Floating menu — clone of components/floating-menu.tsx
   Every rule below is annotated with the Tailwind class it mirrors.
   ============================================================ */

/* --- Shared entrance animation --------------------------- */
.floating-menu {
	opacity: 0;
	transform: translate3d(0, -100px, 0);
	transition:
		opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s,
		transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.floating-menu.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* ============================================================
   DESKTOP (>= 768px)  —  `fixed top-6 left-1/2 -translate-x-1/2 z-50
   hidden md:flex items-center w-max`
   ============================================================ */

.floating-menu--desktop {
	position: fixed;
	top: 1.5rem;                                       /* top-6 */
	left: 50%;
	transform: translate3d(-50%, -100px, 0);           /* base for entrance */
	z-index: 50;                                       /* z-50 */
	display: none;
	align-items: center;
	width: max-content;                                /* w-max */
}

.floating-menu--desktop.is-visible {
	transform: translate3d(-50%, 0, 0);
}

@media (min-width: 768px) {
	.floating-menu--desktop {
		display: flex;                                 /* md:flex */
	}
}

/* --- Nav pill ------------------------------------------- */
/* `flex items-center gap-6 lg:gap-10 px-8 py-3 rounded-full backdrop-blur-md h-[54px]` */
.floating-menu__nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;                                       /* gap-6 */
	padding: 0.75rem 2rem;                             /* py-3 px-8 */
	height: 54px;                                      /* h-[54px] */
	border-radius: 9999px;                             /* rounded-full */
	background-color: var(--ciclic-dark-60);           /* bg-[rgba(25,13,54,0.6)] */
	backdrop-filter: blur(12px);                       /* backdrop-blur-md */
	-webkit-backdrop-filter: blur(12px);
}

@media (min-width: 1024px) {
	.floating-menu__nav {
		gap: 2.5rem;                                   /* lg:gap-10 */
	}
}

/* --- Logo (inside nav) --- `flex-shrink-0 relative -top-[4px]` --- */
.floating-menu__logo {
	flex-shrink: 0;
	position: relative;
	top: -4px;                                         /* -top-[4px] */
}

.floating-menu__logo img {
	height: 28px;                                      /* style height 28px */
	width: auto;
}

/* --- Links container --- `flex items-center gap-4 lg:gap-8` ------ */
.floating-menu__links {
	display: flex;
	align-items: center;
	gap: 1rem;                                         /* gap-4 */
}

@media (min-width: 1024px) {
	.floating-menu__links {
		gap: 2rem;                                     /* lg:gap-8 */
	}
}

/* --- Individual link --- `text-sm lg:text-base transition-opacity
   hover:opacity-70 whitespace-nowrap` + inline font-family --- */
.floating-menu__link {
	font-family: var(--font-sans);
	font-weight: 400;                                  /* inherits from body (400 default) */
	color: var(--ciclic-cream);                        /* text-[#fcfbed] */
	font-size: 0.875rem;                               /* text-sm */
	white-space: nowrap;                               /* whitespace-nowrap */
	transition: opacity 0.2s ease-out;                 /* transition-opacity */
}

.floating-menu__link:hover {
	opacity: 0.7;                                      /* hover:opacity-70 */
}

@media (min-width: 1024px) {
	.floating-menu__link {
		font-size: 1rem;                               /* lg:text-base */
	}
}

/* --- Language switcher ---
   `flex items-center ml-4 lg:ml-6 bg-white/10 p-1 rounded-full relative` */
.floating-menu__lang {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0.25rem;                                  /* p-1 */
	margin-left: 1rem;                                 /* ml-4 */
	border-radius: 9999px;                             /* rounded-full */
	background-color: rgba(255, 255, 255, 0.1);        /* bg-white/10 */
}

@media (min-width: 1024px) {
	.floating-menu__lang {
		margin-left: 1.5rem;                           /* lg:ml-6 */
	}
}

/* Sliding pill —
   `absolute top-1 bottom-1 w-[48px] bg-[#fcfbed] rounded-full z-0` */
.floating-menu__lang-pill {
	position: absolute;
	top: 0.25rem;                                      /* top-1 */
	bottom: 0.25rem;                                   /* bottom-1 */
	left: 0.25rem;                                     /* aligned with p-1 */
	width: 48px;                                       /* w-[48px] */
	border-radius: 9999px;                             /* rounded-full */
	background-color: var(--ciclic-cream);             /* bg-[#fcfbed] */
	z-index: 0;                                        /* z-0 */
	transform: translateX(0);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-menu__lang[data-lang="ca"] .floating-menu__lang-pill {
	transform: translateX(48px);                       /* animate x: 48 */
}

/* Language button —
   `relative px-3 py-1 w-[48px] text-center text-xs lg:text-sm font-medium
   transition-colors z-10` */
.floating-menu__lang-btn {
	position: relative;                                /* relative */
	z-index: 1;                                        /* z-10 (we use 1 locally) */
	padding: 0.25rem 0.75rem;                          /* py-1 px-3 */
	width: 48px;                                       /* w-[48px] */
	text-align: center;                                /* text-center */
	font-weight: 500;                                  /* font-medium */
	font-size: 0.75rem;                                /* text-xs */
	color: var(--ciclic-cream);                        /* text-[#fcfbed] */
	transition: color 0.2s ease-out;                   /* transition-colors */
}

@media (min-width: 1024px) {
	.floating-menu__lang-btn {
		font-size: 0.875rem;                           /* lg:text-sm */
	}
}

.floating-menu__lang-btn.is-active {
	color: var(--ciclic-dark);                         /* text-[#190d36] when active */
}

.floating-menu__lang-btn:not(.is-active):hover {
	opacity: 0.8;                                      /* hover:opacity-80 */
}

/* --- CTA button --- `ml-3 px-8 rounded-full text-base font-medium
   transition-all duration-500 hover:scale-105 flex items-center
   justify-center h-[54px] whitespace-nowrap` ---
   Lives OUTSIDE the nav. Height matches the pill. */
.floating-menu__cta {
	margin-left: 0.75rem;                              /* ml-3 */
	padding: 0 2rem;                                   /* px-8 */
	height: 54px;                                      /* h-[54px] */
	border-radius: 9999px;                             /* rounded-full */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;                                   /* text-base */
	font-weight: 500;                                  /* font-medium */
	white-space: nowrap;                               /* whitespace-nowrap */
	color: var(--ciclic-dark);
	background-color: var(--ciclic-blue);
	transition:
		background-color 0.5s ease-out,                /* duration-500 */
		transform 0.2s ease-out;
}

.floating-menu__cta:hover {
	transform: scale(1.05);                            /* hover:scale-105 */
}

.floating-menu__cta[data-cta-color="white"] {
	background-color: var(--ciclic-cream);
}

/* ============================================================
   MOBILE BAR (< 768px)
   `fixed top-4 left-4 right-4 z-50 md:hidden flex items-center
   justify-between`
   ============================================================ */

.floating-menu--mobile {
	position: fixed;
	top: 1rem;                                         /* top-4 */
	left: 1rem;                                        /* left-4 */
	right: 1rem;                                       /* right-4 */
	z-index: 50;                                       /* z-50 */
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media (min-width: 768px) {
	.floating-menu--mobile {
		display: none;                                 /* md:hidden */
	}
}

/* Inner bar --- `flex items-center justify-between w-full px-4 py-3
   rounded-full backdrop-blur-md bg-[rgba(25,13,54,0.6)]` --- */
.floating-menu__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;                    /* justify-between */
	width: 100%;                                       /* w-full */
	padding: 0.75rem 1rem;                             /* py-3 px-4 */
	border-radius: 9999px;                             /* rounded-full */
	background-color: var(--ciclic-dark-60);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.floating-menu__logo--mobile {
	top: -4px;                                         /* -top-[4px] */
}

.floating-menu__logo--mobile img {
	height: 24px;                                      /* style height 24px */
	width: auto;
}

/* Hamburger --- `p-2` --- */
.floating-menu__toggle {
	padding: 0.5rem;                                   /* p-2 */
	color: var(--ciclic-cream);                        /* stroke #fcfbed */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.floating-menu__icon-line {
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* ============================================================
   MOBILE OVERLAY (side panel, visible when the hamburger is tapped)
   ============================================================ */

.mobile-overlay {
	position: fixed;
	inset: 0;
	z-index: 50;                                       /* same level as the floating bar; later in DOM wins */
	display: none;
}

.mobile-overlay.is-open {
	display: block;
}

@media (min-width: 768px) {
	.mobile-overlay {
		display: none !important;
	}
}

.mobile-overlay__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.8);              /* bg-black/80 */
	backdrop-filter: blur(4px);                         /* backdrop-blur-sm */
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.3s ease-out;
}

.mobile-overlay.is-open .mobile-overlay__backdrop {
	opacity: 1;
}

.mobile-overlay__panel {
	position: absolute;
	inset: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 3rem;                                     /* p-12 */
	background-color: rgba(25, 13, 54, 0.98);          /* bg-[rgba(25,13,54,0.98)] */
	transform: translateX(100%);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-overlay.is-open .mobile-overlay__panel {
	transform: translateX(0);
}

.mobile-overlay__logo {
	margin-bottom: 3rem;                               /* mb-12 */
}

.mobile-overlay__logo img {
	height: auto;
	max-width: 150px;
}

.mobile-overlay__close {
	position: absolute;
	top: 2rem;                                         /* top-8 */
	right: 2rem;                                       /* right-8 */
	padding: 0.5rem;                                   /* p-2 */
	color: var(--ciclic-cream);
	border: 0;
	background: transparent;
	cursor: pointer;
}

.mobile-overlay__links {
	display: flex;
	flex-direction: column;
	gap: 1rem;                                         /* gap-4 */
	margin-top: 4rem;                                  /* mt-16 */
	margin-bottom: 2rem;                               /* mb-8 */
}

.mobile-overlay__link {
	font-family: var(--font-sans);
	font-weight: 300;                                  /* font-light */
	color: var(--ciclic-cream);
	font-size: 2.25rem;                                /* text-4xl */
	line-height: 1;                                    /* leading-none */
	white-space: nowrap;
	transition: opacity 0.2s ease-out;
}

.mobile-overlay__link:hover {
	opacity: 0.8;                                      /* hover:opacity-80 */
}

.mobile-overlay__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2rem;                                /* py-4 px-8 */
	border-radius: 9999px;
	font-size: 1.125rem;                               /* text-lg */
	font-weight: 500;                                  /* font-medium */
	color: var(--ciclic-dark);
	background-color: var(--ciclic-blue);
	transition: transform 0.2s ease-out;
}

.mobile-overlay__cta:hover {
	transform: scale(1.05);                            /* hover:scale-105 */
}

/* Mobile language switcher — 80px buttons, pushed to bottom of panel */
.mobile-overlay__lang {
	position: relative;
	display: flex;
	padding: 0.25rem;                                  /* p-1 */
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.1);
	margin-top: auto;                                  /* mt-auto */
	margin-bottom: 3rem;                               /* pb-12 (from parent) */
	width: max-content;
}

.mobile-overlay__lang-pill {
	position: absolute;
	top: 0.25rem;
	bottom: 0.25rem;
	left: 0.25rem;
	width: 80px;                                       /* w-[80px] */
	border-radius: 9999px;
	background-color: var(--ciclic-cream);
	z-index: 0;
	transform: translateX(0);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-overlay__lang[data-lang="ca"] .mobile-overlay__lang-pill {
	transform: translateX(80px);
}

.mobile-overlay__lang-btn {
	position: relative;
	z-index: 1;
	padding: 0.375rem 1rem;                            /* py-1.5 px-4 */
	width: 80px;                                       /* w-[80px] */
	text-align: center;
	font-weight: 500;                                  /* font-medium */
	font-size: 0.875rem;                               /* text-sm */
	color: var(--ciclic-cream);
	transition: color 0.2s ease-out;
}

.mobile-overlay__lang-btn.is-active {
	color: var(--ciclic-dark);
}