/* ===================================================
   PW Navigation Widget – Standalone
   Kora-faithful design system
   =================================================== */

/* ── Design tokens ── */
:root {
	--pwnav-bg-page: #f5f5e9;
	--pwnav-pill-bg: #ffffff;
	--pwnav-dark: #242424;
	--pwnav-near-white: #fcfcfa;
	--pwnav-accent: #ff4f18;
	--pwnav-text-soft: #616161;
	--pwnav-font: "Manrope", "Inter", sans-serif;
	--pwnav-transition: 0.22s ease;
	/* Rejilla del contenido (contenedores boxed de 1280px + 24px de padding
	   lateral). La nav usa estos valores para alinear la píldora con el
	   margen izquierdo del contenido. */
	--pwnav-content-width: 1280px;
	--pwnav-gutter: 24px;
}

/* ── Widget wrapper: remove default Elementor margin ── */
.elementor-widget-pw_navigation {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* ─────────────────────────────────────────────── */
/* HEADER TEMPLATE — float over content            */
/* Take the Elementor header template out of flow so */
/* it reserves no vertical space; the page content   */
/* slides up underneath the floating nav.            */
/* ─────────────────────────────────────────────── */
.elementor-location-header:has(.pwnav) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}

/* ─────────────────────────────────────────────── */
/* NAV WRAPPER                                     */
/* ─────────────────────────────────────────────── */
.pwnav {
	position: fixed;
	top: 20px;
	left: 0;
	right: 0;
	/* Sin width:100%: con left/right la caja se dimensiona sola y no se
	   sale por la derecha. El inset lateral lo pone .pwnav__inner. */
	z-index: 1000;
}

/* Offset below the WP admin bar (logged-in), which is fixed on top of the
   viewport and would otherwise clip the floating nav. */
body.admin-bar .pwnav {
	top: 52px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .pwnav {
		top: 46px;
	}
}

/* Dark blur overlay — covers page on link hover (desktop) / menu open (mobile) */
.pwnav__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	pointer-events: none;
	z-index: 999;
	transition: opacity 0.35s ease;
}
.pwnav--overlaid .pwnav__overlay,
.pwnav__overlay.is-open {
	opacity: 1;
}
.pwnav__overlay.is-open {
	pointer-events: auto;
}

/* ─────────────────────────────────────────────── */
/* INNER ROW: pill (left) + CTA (right)            */
/* ─────────────────────────────────────────────── */
.pwnav__inner {
	position: relative;
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* Lateral = margen del contenido: 24px hasta que el viewport supera
	   1280 + 48px, y a partir de ahí el hueco que deja la caja centrada. */
	padding: 20px max(var(--pwnav-gutter), calc((100% - var(--pwnav-content-width)) / 2)) 0;
}

/* ─────────────────────────────────────────────── */
/* WHITE PILL: logo + links + hamburger            */
/* ─────────────────────────────────────────────── */
.pwnav__pill {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--pwnav-pill-bg);
	border-radius: 30px;
	padding: 0 8px 0 17px;
	height: 60px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: box-shadow var(--pwnav-transition);
}
.pwnav--scrolled .pwnav__pill {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
	border-color: rgba(0, 0, 0, 0.08);
}

/* ─────────────────────────────────────────────── */
/* LOGO                                            */
/* ─────────────────────────────────────────────── */
.pwnav__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}
.pwnav__logo-img {
	height: 25px;
	width: 88px;
	object-fit: contain;
	display: block;
}
.pwnav__logo svg {
	width: 88px;
	height: 25px;
	display: block;
}

/* ─────────────────────────────────────────────── */
/* LINKS WRAP: selector + menu                     */
/* ─────────────────────────────────────────────── */
.pwnav__links-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

/* Green selector pill — scales in on first hover, slides on subsequent */
.pwnav__selector {
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 34px;
	border-radius: 30px;
	background: var(--pwnav-accent);
	opacity: 0;
	transform: translateY(-50%) scale(0.4);
	transform-origin: center center;
	pointer-events: none;
	z-index: 0;
	transition:
		left var(--pwnav-transition),
		width var(--pwnav-transition),
		opacity 0.18s ease,
		transform var(--pwnav-transition);
}

/* Menu list */
.pwnav__menu {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}
.pwnav__item {
	list-style: none;
}
.pwnav__link {
	display: block;
	font-family: var(--pwnav-font);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--pwnav-text-soft);
	text-decoration: none;
	padding: 7px 14px;
	border-radius: 30px;
	transition: color 0.2s ease;
	white-space: nowrap;
	line-height: 1;
}
.pwnav__link:hover {
	color: #fff;
}

/* ─────────────────────────────────────────────── */
/* HAMBURGER — mobile only                         */
/* ─────────────────────────────────────────────── */
.pwnav__hamburger,
.pwnav__hamburger:hover,
.pwnav__hamburger:focus,
.pwnav__hamburger:active {
	/* Hard-reset against theme button styles (hello-elementor sets a magenta
     background/border on <button> focus states). */
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}
.pwnav__hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 8px;
	flex-shrink: 0;
	/* Color/tamaño: controles "Icono menú (móvil)" del widget. */
	color: var(--pwnav-dark);
}

/* Default icon: 3 lines that morph into an X when open. */
.pwnav__hamburger-lines {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}
.pwnav__hamburger-lines span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transition:
		transform var(--pwnav-transition),
		opacity var(--pwnav-transition);
}
/* X state */
.pwnav__hamburger[aria-expanded="true"] .pwnav__hamburger-lines span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.pwnav__hamburger[aria-expanded="true"] .pwnav__hamburger-lines span:nth-child(2) {
	opacity: 0;
}
.pwnav__hamburger[aria-expanded="true"] .pwnav__hamburger-lines span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* Custom icon chosen in the widget (library icon or uploaded SVG). */
.pwnav__hamburger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--pwnav-burger-size, 22px);
	line-height: 1;
}
.pwnav__hamburger-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}
/* Closed: only the menu icon. Open: close icon (or the default X lines). */
.pwnav__hamburger--custom .pwnav__hamburger-icon--close,
.pwnav__hamburger--custom .pwnav__hamburger-lines,
.pwnav__hamburger--custom[aria-expanded="true"] .pwnav__hamburger-icon--open {
	display: none;
}
.pwnav__hamburger--custom[aria-expanded="true"] .pwnav__hamburger-icon--close,
.pwnav__hamburger--custom[aria-expanded="true"] .pwnav__hamburger-lines {
	display: inline-flex;
}

/* ─────────────────────────────────────────────── */
/* CTA BUTTON — outside the pill                   */
/* ─────────────────────────────────────────────── */
.pwnav__cta {
	position: relative;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 15px 22px;
	height: 60px;
	font-family: var(--pwnav-font);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	background: var(--pwnav-dark);
	color: var(--pwnav-near-white);
	border-radius: 40px;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	transition: opacity 0.18s ease;
}
.pwnav__cta-text {
	display: inline-block;
	transition: transform 0.22s ease;
}
.pwnav__cta:hover .pwnav__cta-text {
	transform: scale(0.9) rotate(-30deg);
}
.pwnav__cta:hover {
	color: var(--pwnav-near-white);
}

/* ─────────────────────────────────────────────── */
/* MOBILE (≤ 767px)                                */
/* ─────────────────────────────────────────────── */
@media (max-width: 767px) {
	.pwnav {
		/* Móvil: la caja va a ras (left/right 0, width:auto para no salirse)
		   y el margen lateral lo pone solo --pwnav-gutter (control
		   nav_padding_x_mobile = 16px), así la píldora queda alineada con el
		   gutter de 16px de las secciones. */
		left: 0;
		right: 0;
		width: auto;
		top: 0;
		/* Sin extra: en todas las páginas salvo la Home la píldora va
		   directamente a 16px. */
		--pwnav-top-extra-x: 0px;
		--pwnav-top-extra-y: 0px;
	}

	/* Solo Home: arriba del todo la píldora va 12px DENTRO de la tarjeta del
	   hero (que empieza a 16px del borde y la píldora a 16 lateral / 20 top):
	   +12px a los lados y +8px arriba. Al hacer scroll, --pwnav-p (0 → 1, lo
	   pone el JS en los primeros 120px) reduce ese extra a 0 → estado normal
	   a 16px. Sin JS, --pwnav-p vale 1 (estado normal). */
	.home .pwnav {
		--pwnav-top-extra-x: 12px;
		--pwnav-top-extra-y: 8px;
	}

	.pwnav__inner {
		padding: 12px var(--pwnav-gutter) 0;
		gap: 8px;
		justify-content: flex-start;
		box-sizing: border-box;
		width: 100%;
	}

	.pwnav__pill {
		/* Extra de "arriba del todo" (ver .pwnav). Va como margen de la
		   píldora y no como padding de .pwnav__inner porque el control
		   nav_padding_top del widget pisa ese padding. */
		margin: calc(var(--pwnav-top-extra-y) * (1 - var(--pwnav-p, 1))) calc(var(--pwnav-top-extra-x) * (1 - var(--pwnav-p, 1))) 0;
		position: relative; /* containing block for the dropdown */
		flex: 1;
		gap: 0;
		justify-content: space-between;
		border-radius: 20px;
		padding: 0 4px 0 14px;
		height: 52px;
		/* Animate radius change when dropdown opens */
		transition:
			border-radius 0.18s ease,
			box-shadow 0.3s ease;
	}

	/* When menu is open: pill bottom flattens and connects with dropdown */
	.pwnav__pill--open {
		border-radius: 20px 20px 0 0 !important;
		border-bottom-color: transparent !important;
		box-shadow: none !important;
	}

	.pwnav__logo-img,
	.pwnav__logo svg {
		width: 78px;
		height: 22px;
	}

	/* Hide desktop links-wrap.
     position:static so the absolute menu resolves its containing block to
     .pwnav__pill (position:relative), not the 0-width links-wrap. */
	.pwnav__links-wrap {
		width: 0;
		overflow: visible;
		flex: 0 0 0;
		position: static;
	}
	.pwnav__selector {
		display: none;
	}

	/* Dropdown: anchored to the pill so it always matches the pill's width and
     sits flush at its bottom — regardless of the pill dimensions coming from
     the widget's Layout/Pill controls. top:100% = exactly the pill's bottom. */
	.pwnav__menu {
		display: none;
		position: absolute;
		top: 100%;
		/* The pill's 1px border sits OUTSIDE its padding box, and this absolute
		   menu resolves left/right against that padding box — so left:0/right:0
		   would inset the dropdown 1px per side vs. the pill. Pull it out by the
		   pill's border width so both border-boxes line up edge to edge. */
		left: -1px;
		right: -1px;
		background: #fff;
		flex-direction: column;
		align-items: flex-start;
		padding: 4px 6px 12px;
		z-index: 1002;
		gap: 0;
		border-radius: 0 0 20px 20px;
		border: 1px solid rgba(0, 0, 0, 0.05);
		border-top: none;
		/* Downward-only shadow (negative spread) so the blur doesn't bleed up
       over the pill and reappear as a seam at the junction. */
		box-shadow: 0 16px 24px -8px rgba(0, 0, 0, 0.12);
	}
	.pwnav__menu.pwnav__menu--open {
		display: flex;
	}
	.pwnav__menu .pwnav__link {
		color: var(--pwnav-dark) !important;
		font-size: 1rem;
		padding: 12px 14px;
		width: 100%;
		border-radius: 12px;
	}
	.pwnav__menu .pwnav__link:hover {
		background-color: var(--pwnav-accent);
		color: #fff !important;
	}

	.pwnav__hamburger {
		display: flex;
	}

	/* Hide CTA on mobile */
	.pwnav__cta {
		display: none;
	}
}