/* Falcon - fixed header cluster (currency switcher, cart, menu) - soft backdrop - issue #9 follow-up (Iggy, 14 Oct)
   Loaded site-wide by ftt-core.php. The header (Elementor template 5727) is only the fixed cluster, element 2c03d8b0.
   Tone comes from the existing cart snippet 6403: it samples what sits behind the cart icon on scroll and sets
   .ftt-cart.is-light (light area, navy icons) or .is-dark (photo or dark area, white icons). No extra JS.
   Shape: a half-pill around the three controls, rounded on the left and running flush off the right edge
   (Iggy preferred this to the earlier irregular blob and full pill).
   Keep it ASCII-only and backslash-free. */

.elementor-location-header .elementor-element-2c03d8b0::before {
	content: "";
	position: absolute;
	z-index: -1;
	/* Runs off the right edge of the viewport (a fixed element's overflow there is clipped, never scrollable), so only the
	   left end is rounded and the menu button keeps its own gap from the edge. */
	inset: -6px -200px -6px -14px;
	border-radius: 999px 0 0 999px;
	width: auto; /* Elementor's .e-con::before sets width/height to 100%, which would pin the shape to the top */
	height: auto;
	pointer-events: none;
	background-color: rgba(17, 37, 71, .16);
	-webkit-backdrop-filter: blur(12px) saturate(1.15);
	backdrop-filter: blur(12px) saturate(1.15);
	transition: background-color .45s ease;
}

/* Light area behind the cluster: a light frosted cream veil so the navy icons sit on calm ground. */
.elementor-location-header .elementor-element-2c03d8b0:has(.ftt-cart.is-light)::before {
	background-color: rgba(255, 252, 244, .5);
}

/* No backdrop blur available: lean on a stronger tint instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.elementor-location-header .elementor-element-2c03d8b0::before { background-color: rgba(17, 37, 71, .55); }
	.elementor-location-header .elementor-element-2c03d8b0:has(.ftt-cart.is-light)::before { background-color: rgba(255, 252, 244, .9); }
}
@media (prefers-reduced-transparency: reduce) {
	.elementor-location-header .elementor-element-2c03d8b0::before { background-color: rgba(17, 37, 71, .7); }
	.elementor-location-header .elementor-element-2c03d8b0:has(.ftt-cart.is-light)::before { background-color: rgba(255, 252, 244, .95); }
}
@media (prefers-reduced-motion: reduce) {
	.elementor-location-header .elementor-element-2c03d8b0::before { transition: none; }
}

/* Fade the whole cluster in once it is styled (Iggy, 16 Oct, issue #35). The cart (6403) and currency switcher (6471)
   styles arrive at the end of the body, so on load the bare cart icon showed large and green for a moment.
   site-header-reveal.js adds html.ftt-header-ready after those styles and the fonts are in. If that script never runs,
   the delayed animation below shows the cluster anyway after 3s. */
html:not(.ftt-header-ready) .elementor-location-header .elementor-element-2c03d8b0 {
	opacity: 0;
	visibility: hidden;
	animation: ftt-header-fallback .5s ease 3s forwards; /* fades in too, on slow connections where the script is late */
}
.elementor-location-header .elementor-element-2c03d8b0 {
	transition: opacity .5s ease, visibility 0s;
}
@keyframes ftt-header-fallback {
	from { opacity: 0; visibility: visible; }
	to { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
	.elementor-location-header .elementor-element-2c03d8b0 { transition: none; }
	html:not(.ftt-header-ready) .elementor-location-header .elementor-element-2c03d8b0 { animation-duration: 0s; }
}

/* Breadcrumbs keep clear of the fixed cluster on phones and tablets (Iggy, 16 Oct, issue #35). On product archives
   (.ftt-ahero__top) and product pages (.pkg-flow) the "Home / Tours & excursions" trail sat under the currency, cart and
   menu buttons. Below 1025px it drops to its own row under the cluster and uses the full width. */
@media (max-width: 1024px) {
	.ftt-ahero__top .ftt-topbar,
	.pkg-flow .ftt-topbar {
		margin-top: 52px;
		padding-inline-end: 0;
	}
}