/**
 * Kubota Europe product sticky menu (WPBakery element `vc_kbeu_product_sticky_menu`).
 *
 * Based on the Figma design 4166-3296: a white bar that sticks below the product
 * header while scrolling. Left: in-page anchor links to the page sections.
 * Right: action buttons — Quotation Request / Find a dealer (outlined) and
 * Brochure (filled teal, with a download icon).
 *
 * Font family "Helvetica Neue LT Pro" comes from the plugin's fonts stylesheet
 * (this handle depends on `kbeu-fonts`), referenced via `--kbeu-font-principal`.
 */

.kbeu-sticky-menu {
	--kbeu-teal: #03a8a9;
	--kbeu-ink: #202024;
	--kbeu-sticky-offset: 0px;

	/*
	 * Sticky behaviour is driven by JS (`kbeu-product-sticky-menu.js`): when the
	 * bar reaches the top of the viewport it is switched to `position: fixed` and a
	 * placeholder keeps its space in the flow. CSS `position: sticky` is not enough
	 * here because in the WPBakery/Impreza layout each element sits in its own short
	 * row, so its sticky containing block is only as tall as the bar itself and it
	 * would scroll away immediately.
	 */
	position: relative;
	z-index: 20;
	width: 100%;
	background: #fff;
	border-bottom-left-radius: 29px;
	border-bottom-right-radius: 29px;
	box-shadow: 0 11px 29.2px rgba( 0, 0, 0, 0.11 );
	font-family: var( --kbeu-font-principal );
}

/* Pinned while scrolling, just below the general top header. The script sets
   `top` (and `left`/`width`) inline, reading the header's live height from the
   theme — the `top` below is only a no-JS fallback, since the theme's
   `--header-area-height` is scoped to the header and does not reach this bar. */
.kbeu-sticky-menu.is-stuck {
	position: fixed;
	top: var( --kbeu-sticky-offset, 0px );
	margin: 0;
}

/* Holds the bar's space in the normal flow while it is pinned, so the page
   content below does not jump. Inert and invisible until then. */
.kbeu-sticky-menu__placeholder {
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
}

.kbeu-sticky-menu__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 32px;
	min-height: 84px;
	padding: 12px clamp( 20px, 3vw, 48px );
}

/* --- Anchor links ----------------------------------------------------- */

.kbeu-sticky-menu__links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 35px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kbeu-sticky-menu__links-item {
	margin: 0;
}

.kbeu-sticky-menu__link {
	display: inline-block;
	padding: 4px 0;
	color: var( --kbeu-ink );
	font-size: clamp( 16px, 1.3vw, 20px );
	line-height: 1.3;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.kbeu-sticky-menu__link:hover,
.kbeu-sticky-menu__link:focus-visible {
	color: var( --kbeu-teal );
}

.kbeu-sticky-menu__link.is-active {
	color: var( --kbeu-teal );
	border-bottom-color: var( --kbeu-teal );
}

/* --- Action buttons --------------------------------------------------- */

.kbeu-sticky-menu__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
}

.kbeu-sticky-menu__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: clamp( 8px, 1vw, 12px ) clamp( 38px, 3vw, 52px );
	border: 1px solid var( --kbeu-teal );
	border-radius: 15px;
	font-size: clamp( 16px, 1.3vw, 20px );
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kbeu-sticky-menu__btn--outline {
	background: transparent;
	color: #000;
}

.kbeu-sticky-menu__btn--outline:hover,
.kbeu-sticky-menu__btn--outline:focus-visible {
	background: var( --kbeu-teal );
	color: #fff;
}

.kbeu-sticky-menu__btn--primary {
	background: var( --kbeu-teal );
	color: #fff;
}

.kbeu-sticky-menu__btn--primary:hover,
.kbeu-sticky-menu__btn--primary:focus-visible {
	background: #028687;
}

.kbeu-sticky-menu__icon {
	display: block;
	width: clamp( 22px, 1.7vw, 28px );
	height: clamp( 22px, 1.7vw, 28px );
	flex: 0 0 auto;
}

/* --- Responsive ------------------------------------------------------- */

@media ( max-width: 767px ) {
	.kbeu-sticky-menu__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.kbeu-sticky-menu__links,
	.kbeu-sticky-menu__actions {
		justify-content: center;
	}
}