/* ===== Tour Sticky Nav widget (widgets/tour-sticky-nav-widget.php) - the v3
   design's section tabs, sticky under the theme header. Colors read
   Elementor's own global color variables (var(--x, #hex)), same convention
   as every other widget CSS in this plugin. ===== */

/* Confirmed live: <body> carries overflow:hidden (x) / auto (y) from the
   theme, most likely to stop an unrelated horizontal-scroll issue. That
   ancestor rule silently disables position:sticky for every descendant on
   the page, in every browser - not a specificity fight, an actual CSS
   sticky-context rule. overflow-x: clip keeps the same "no horizontal
   scrollbar" behavior the theme wants without creating that broken
   scrolling context, so this fixes it without touching the theme itself.
   Also needed by the itinerary map's own sticky column - see the identical
   rule in itinerary-map.css. */
body {
	overflow-x: clip !important;
}

/* position:sticky as a baseline (harmless when it doesn't activate, e.g. with
   JS disabled) - the actual "stays pinned" behavior on this site comes from
   .is-pinned below, toggled by assets/js/tour-sticky-nav.js. See that file's
   own docblock for why: Elementor wraps this widget in its own per-widget
   section, and on the live page that resolves this element's computed
   position to "relative", not "sticky", at every width tested - confirmed
   directly (getComputedStyle + tracking scroll deltas), not a guess. */
.tour_sticky_nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: rgba(243, 239, 232, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid #e3d9ca;
}

.tour_sticky_nav.is-pinned {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.tour_sticky_nav_inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.tour_sticky_nav_tabs {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.tour_sticky_nav_tabs::-webkit-scrollbar {
	display: none;
}

.tour_sticky_nav_tab {
	flex: 0 0 auto;
	padding: 18px 0;
	font-size: 14px;
	font-weight: 600;
	/* !important - same sitewide line-height shrink fight as
	   .tour_sticky_nav_cta_btn below; keeps the tab row's own height matching
	   the buttons beside it regardless of the site's inherited line-height. */
	line-height: 1 !important;
	color: var(--muted, #6f6458);
	/* !important - same sitewide "underline links" fight as
	   .tour_hero_breadcrumb a (tour-hero-widget.css); an underline here would
	   duplicate/clash with the pink border-bottom this already uses for the
	   active-tab indicator. */
	text-decoration: none !important;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 150ms, border-color 150ms;
}

/* text-decoration !important repeated here, not just on the base rule -
   an "a:hover" sitewide underline rule outranks the base .tour_sticky_nav_tab
   rule on specificity alone (element+pseudo-class beats a bare class) even
   though both are !important, so hovering a tab was still showing an
   underline despite the base fix above. */
.tour_sticky_nav_tab:hover {
	color: var(--ink, #2b2420);
	text-decoration: none !important;
}

.tour_sticky_nav_tab.is-active {
	color: var(--ink, #2b2420);
	border-bottom-color: var(--pink-action, #e8334f);
	text-decoration: none !important;
}

/* The browser's own default focus outline (a dotted box tight around the
   text) otherwise shows here after a click, not just keyboard nav, in some
   browsers - replaced with the same pink outline .caguide_itinerary_day_header
   uses for its own :focus-visible elsewhere in this plugin, and suppressed
   entirely for a plain mouse click. */
.tour_sticky_nav_tab:focus {
	outline: none;
}

.tour_sticky_nav_tab:focus-visible {
	outline: 2px solid var(--pink-action, #e8334f);
	outline-offset: 2px;
	text-decoration: none !important;
}

/* The offset that keeps each section's own heading from landing underneath
   the fixed nav on an anchor jump (click or back/forward) - plain CSS, no
   JS needed. Matches every id the nav's tabs target; #highlights and
   #similar-tours are given manually (see the widget's own admin notice) but
   still get the same offset once they exist. */
#tour-dates,
#itinerary,
#pricing,
#included,
#hotels,
#highlights,
#similar-tours {
	scroll-margin-top: 90px;
}

/* Below 820px, Highlights and Similar tours drop out of the mobile tab strip
   entirely (see caguide_render_tour_sticky_nav_box()'s own comment on why
   those two), and the remaining tabs sit closer together so what's left reads
   as one tidy row instead of needing to scroll past a wall of labels. */
@media only screen and (max-width: 819px) {
	.tour_sticky_nav_tab[data-target="highlights"],
	.tour_sticky_nav_tab[data-target="similar-tours"] {
		display: none;
	}

	.tour_sticky_nav_tabs {
		gap: 20px;
	}
}

@media only screen and (max-width: 480px) {
	.tour_sticky_nav_inner {
		padding: 0 20px;
	}

	.tour_sticky_nav_tabs {
		gap: 14px;
	}
}