/* WCPC Core — in-page jump bar (handle 'wcpc-jumpbar', depends on 'wcpc-tokens').

   Ported verbatim from wcpc-jump-nav 1.3.1's jump-nav.css when the bar moved
   into Core 2.5.0, with two additions at the bottom for the server-side prune.
   The class names are deliberately unchanged: saved Elementor style controls,
   per-page post-N.css and per-site custom CSS all target .wcpc-jumpnav__*, and
   renaming them would repaint fifteen documents for no user-visible gain.

   Reads the shared --wcpc-* tokens (accent, on-accent, ink, card, radius…)
   that tokens.css maps onto the Elementor kit. No :root copy here — the
   fallbacks in each var() cover a site without the token sheet loaded yet.
   Theme a site in the kit, not here. */

.wcpc-jumpnav {
	background: var(--wcpc-card, #fff);
}

.wcpc-jumpnav__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
}

.wcpc-jumpnav.is-center .wcpc-jumpnav__inner {
	justify-content: center;
}

.wcpc-jumpnav.is-left .wcpc-jumpnav__inner {
	justify-content: flex-start;
}

.wcpc-jumpnav__link {
	font-size: 14px;
	font-weight: 600;
	color: var(--wcpc-ink, #54595F);
	background: var(--wcpc-card, #fff);
	border: 1px solid rgba(52, 101, 127, 0.12);
	padding: 10px 16px;
	border-radius: var(--wcpc-radius, 4px);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wcpc-jumpnav .wcpc-jumpnav__link:hover {
	color: var(--wcpc-accent, #34657F);
	border-color: var(--wcpc-accent, #34657F);
	box-shadow: inset 0 0 0 1px var(--wcpc-accent, #34657F);
}

.wcpc-jumpnav__link.is-active {
	background: var(--wcpc-accent, #34657F);
	color: var(--wcpc-on-accent, #fff);
	border-color: var(--wcpc-accent, #34657F);
}

.wcpc-jumpnav__cta {
	margin-left: auto;
	background: var(--wcpc-accent, #34657F);
	color: var(--wcpc-on-accent, #fff);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 16px;
	border: 1px solid var(--wcpc-accent, #34657F);
	border-radius: var(--wcpc-radius, 4px);
	text-decoration: none;
	white-space: nowrap;
}

.wcpc-jumpnav .wcpc-jumpnav__cta:hover {
	color: var(--wcpc-on-accent, #fff);
	filter: brightness(0.94);
}

.wcpc-jumpnav.is-center .wcpc-jumpnav__cta {
	margin-left: 8px;
}

/* Editor-only placeholder when no links are configured. */
.wcpc-jumpnav__placeholder {
	border: 1px dashed rgba(52, 101, 127, 0.35);
	border-radius: var(--wcpc-radius, 4px);
	padding: 18px;
	text-align: center;
	color: var(--wcpc-accent, #34657F);
	font-size: 14px;
}

@media (max-width: 767px) {
	.wcpc-jumpnav__inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.wcpc-jumpnav__inner::-webkit-scrollbar {
		display: none;
	}
	.wcpc-jumpnav__cta {
		margin-left: 8px;
	}
	/* 2.8.0 — show that the row scrolls: jumpbar.js marks the side that has
	   more (.is-more-r / .is-more-l) and that edge fades out, so a partial
	   tab reads as "keep swiping". The spacer stops the last tab sitting flush
	   against the screen edge. */
	.wcpc-jumpnav__inner {
		scroll-padding-inline: 24px;
	}
	.wcpc-jumpnav__inner::after {
		content: "";
		flex: 0 0 8px;
	}
	.wcpc-jumpnav__inner.is-more-r {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
	}
	.wcpc-jumpnav__inner.is-more-l {
		-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
	}
	.wcpc-jumpnav__inner.is-more-l.is-more-r {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent);
	}
}

/* ---------------------------------------------------------------------------
   Empty-target pruning (jump-nav 1.1.0)

   Links opted into "Hide when empty" get the `hidden` attribute when their
   target section has no content. `hidden` alone loses to the flex-child display
   above, so it needs restating at higher specificity — this also keeps the link
   out of the tab order and the accessibility tree, not merely out of sight.
--------------------------------------------------------------------------- */
.wcpc-jumpnav__link[hidden] {
	display: none;
}

/* Applied to the bar's chrome owner when every link is pruned and there is no
   CTA. It has to be the chrome owner rather than the <nav>: sticky, background
   and the bottom border sit either on {{WRAPPER}} or on a host container that
   declared itself, so hiding the nav alone would leave a sticky bordered strip
   — exactly what this is meant to prevent. !important because it competes with
   Elementor's own display rules on .elementor-element, and there is no case for
   overriding it. */
.wcpc-jumpnav-hidden {
	display: none !important;
}

/* Set on a target section that was found empty, for whoever owns the page CSS.
   Deliberately unstyled here — the empty section still renders with its own
   padding, and collapsing it is a page-design decision, not this widget's.
   e.g.  .wcpc-jumpnav-target--empty { display: none; }
--------------------------------------------------------------------------- */

/* Core 2.5.0: a bar whose links were all dropped server-side by the
   `wcpc_jumpbar_link_has_content` filter is emitted already hidden, so the
   chrome owner can still be reached and hidden by jumpbar.js. Restated at
   higher specificity for the same reason as the link rule above. */
.wcpc-jumpnav[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Per-link icons (jump-nav 1.3.0) — server-rendered from the shared icon set.

   Scoped to the --icon modifier so links without an icon keep the plain inline
   layout exactly. The SVG sizes itself in em (follows the link's font size) and
   strokes in currentColor, so hover and .is-active recolour it with no extra
   rules here.
--------------------------------------------------------------------------- */
.wcpc-jumpnav__link--icon {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.wcpc-jumpnav__icon {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}