/* ==========================================================================
   Tab Menu for Elementor — tab-menu.css
   ========================================================================== */

.tab-menu-wrap {
	--tm-tab-bg:          #c8c8c8;
	--tm-tab-active-bg:   #e8e8e8;
	--tm-tab-text:        #333333;
	--tm-tab-active-text: #111111;

	/*
	 * How far each tab slides under the one to its left.
	 * Should be <= the fin width (50 px) so the body never hides the
	 * next tab's text. Tune this to adjust the "stacking depth".
	 */
	--tm-overlap: 4px;

	display: block;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Tab strip — overflow:visible so fins and shadows can protrude
   -------------------------------------------------------------------------- */

.tab-menu-wrap .tm-tab-strip {
	display: flex !important;
	align-items: flex-end !important;
	gap: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	background: transparent !important;
	border: none !important;
	flex-wrap: nowrap;
	overflow: visible !important;
}

/* --------------------------------------------------------------------------
   Tab link — the rectangular body

   • z-index is set inline by PHP (leftmost = highest, so left is always on top)
   • margin-right: negative to overlap the next tab
   • filter: drop-shadow traces the painted shape (body + fin) and casts
     an aggressive rightward shadow onto the tab behind it
   -------------------------------------------------------------------------- */

.tab-menu-wrap .tm-tab-btn,
.elementor .tab-menu-wrap .tm-tab-btn,
.elementor-widget-tab_menu .tm-tab-btn {
	all: unset !important;
	box-sizing: border-box !important;

	display: inline-flex !important;
	align-items: center !important;
	height: 44px !important;
	padding: 0px 10px 0px 50px !important;

	position: relative !important;
	overflow: visible !important;
	cursor: pointer !important;

	/*
	 * --tm-z is set inline by PHP (leftmost tab = highest value).
	 * all:unset does NOT reset custom properties, so this survives.
	 */
	z-index: var(--tm-z, 1) !important;

	/* Negative margin creates the tab overlap; next tab slides underneath */
	margin-right: calc(-1 * var(--tm-overlap)) !important;

	border-radius: 8px 0 0 0 !important;
	border: none !important;

	background-color: var(--tm-tab-bg) !important;
	color: var(--tm-tab-text) !important;

	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	user-select: none !important;

	/*
	 * drop-shadow follows the alpha channel of tab body + fin combined.
	 * The rightward offset (12px) and generous blur (14px) create the
	 * aggressive shadow cast onto the tab sitting behind/below.
	 * No vertical offset keeps it to the right side only.
	 */
	filter: drop-shadow(6px 0px 1px rgba(0, 0, 0, 0.15)) !important;

	transition: background-color 0.15s ease, color 0.15s ease !important;
}

/*
 * Last tab: cancel the negative overlap and add room for the fin (50 px)
 * so the flex container's layout width includes the fin's space and it
 * doesn't overflow the parent container.
 */
.tab-menu-wrap .tm-tab-btn:last-child,
.elementor .tab-menu-wrap .tm-tab-btn:last-child,
.elementor-widget-tab_menu .tm-tab-btn:last-child {
	margin-right: 52px !important;
}

/* Last item special background — desktop tab + its fin, mobile drawer link */
.tab-menu-wrap .tm-tab-btn:last-child,
.elementor .tab-menu-wrap .tm-tab-btn:last-child,
.elementor-widget-tab_menu .tm-tab-btn:last-child {
	background-color: #ebc4c4 !important;
}

.tab-menu-wrap .tm-tab-btn:last-child::after,
.elementor .tab-menu-wrap .tm-tab-btn:last-child::after,
.elementor-widget-tab_menu .tm-tab-btn:last-child::after {
	background-color: #ebc4c4 !important;
}

.tab-menu-wrap .tm-drawer-link:last-child,
.elementor .tab-menu-wrap .tm-drawer-link:last-child,
.elementor-widget-tab_menu .tm-drawer-link:last-child {
	background-color: #ebc4c4 !important;
}

/* First tab needs less left padding — no fin from a previous tab to clear */
.tab-menu-wrap .tm-tab-btn:first-child,
.elementor .tab-menu-wrap .tm-tab-btn:first-child,
.elementor-widget-tab_menu .tm-tab-btn:first-child {
	padding: 0px 10px 0px 30px !important;
}

/* --------------------------------------------------------------------------
   Fin — S-curve tail derived from the supplied SVG, scaled to 50 × 44 px

   Path explanation:
     M 0 44   bottom-left  (connects to tab body bottom-right)
     L 0 0    top-left     (fin is zero-wide here → seamless join at top-right)
     C 0 0  19 -2  25 22   upper sweep: fans outward to the right
     C 30 46  50 44  50 44 lower sweep: fans to full 50 px at the bottom
     Z                      closes along the bottom back to (0,44)
   -------------------------------------------------------------------------- */

.tab-menu-wrap .tm-tab-btn::after,
.elementor .tab-menu-wrap .tm-tab-btn::after,
.elementor-widget-tab_menu .tm-tab-btn::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 100% !important;
	width: 50px !important;
	height: 44px !important;
	background-color: var(--tm-tab-bg) !important;
	clip-path: path("M 0 44 L 0 0 C 0 0 19 -2 25 22 C 30 46 50 44 50 44 Z") !important;
	pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   Active / current-page tab
   -------------------------------------------------------------------------- */

.tab-menu-wrap .tm-tab-btn.is-active,
.elementor .tab-menu-wrap .tm-tab-btn.is-active,
.elementor-widget-tab_menu .tm-tab-btn.is-active {
	background-color: var(--tm-tab-active-bg) !important;
	color: var(--tm-tab-active-text) !important;
}

.tab-menu-wrap .tm-tab-btn.is-active::after,
.elementor .tab-menu-wrap .tm-tab-btn.is-active::after,
.elementor-widget-tab_menu .tm-tab-btn.is-active::after {
	background-color: var(--tm-tab-active-bg) !important;
}

/* Hover on inactive tabs — shadow stays the same, only brightness changes */
.tab-menu-wrap .tm-tab-btn:not(.is-active):hover {
	filter: drop-shadow(6px 0px 1px rgba(0, 0, 0, 0.15)) brightness(1.06) !important;
}

/* Focus ring */
.tab-menu-wrap .tm-tab-btn:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: -2px !important;
}

/* ==========================================================================
   Burger button
   ========================================================================== */

/*
 * Reset — same triple-selector pattern as .tm-tab-btn so Elementor/theme
 * styles can't override us.  all:unset is kept in its own rule so the
 * display:none in the next rule is never ambiguous.
 */
.tab-menu-wrap .tm-burger,
.elementor .tab-menu-wrap .tm-burger,
.elementor-widget-tab_menu .tm-burger {
	all: unset !important;
}

/* Hidden on desktop; revealed by the ≤ 1279 px media query below */
.tab-menu-wrap .tm-burger,
.elementor .tab-menu-wrap .tm-burger,
.elementor-widget-tab_menu .tm-burger {
	display: none !important;
	box-sizing: border-box !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	align-items: center !important;
	width: 32px !important;
	height: 22px !important;
	padding: 0 !important;
	cursor: pointer !important;
	background: transparent !important;
	border: none !important;
	position: relative !important;
	z-index: 10 !important;
}

.tab-menu-wrap .tm-burger-bar,
.elementor .tab-menu-wrap .tm-burger-bar,
.elementor-widget-tab_menu .tm-burger-bar {
	display: block !important;
	width: 100% !important;
	height: 2px !important;
	background-color: var(--tm-tab-text) !important;
	border-radius: 2px !important;
	transition: transform 0.25s ease, opacity 0.25s ease !important;
	transform-origin: center !important;
}

/* Animate the three bars into an × when the drawer is open */
.tab-menu-wrap.is-open .tm-burger .tm-burger-bar:nth-child(1),
.elementor .tab-menu-wrap.is-open .tm-burger .tm-burger-bar:nth-child(1),
.elementor-widget-tab_menu .tab-menu-wrap.is-open .tm-burger .tm-burger-bar:nth-child(1) {
	transform: translateY(10px) rotate(45deg) !important;
}

.tab-menu-wrap.is-open .tm-burger .tm-burger-bar:nth-child(2),
.elementor .tab-menu-wrap.is-open .tm-burger .tm-burger-bar:nth-child(2),
.elementor-widget-tab_menu .tab-menu-wrap.is-open .tm-burger .tm-burger-bar:nth-child(2) {
	opacity: 0 !important;
	transform: scaleX(0) !important;
}

.tab-menu-wrap.is-open .tm-burger .tm-burger-bar:nth-child(3),
.elementor .tab-menu-wrap.is-open .tm-burger .tm-burger-bar:nth-child(3),
.elementor-widget-tab_menu .tab-menu-wrap.is-open .tm-burger .tm-burger-bar:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg) !important;
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.tab-menu-wrap .tm-drawer {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 9999 !important;
	background-color: var(--tm-tab-bg) !important;
	overflow: hidden !important;
	max-height: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: max-height 0.3s ease, opacity 0.2s ease !important;
}

.tab-menu-wrap.is-open .tm-drawer {
	max-height: 600px !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.tab-menu-wrap .tm-drawer-link {
	all: unset !important;
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	padding: 14px 20px !important;
	color: var(--tm-tab-text) !important;
	background-color: var(--tm-tab-bg) !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	text-decoration: none !important;
	cursor: pointer !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.tab-menu-wrap .tm-drawer-link:last-child {
	border-bottom: none !important;
}

.tab-menu-wrap .tm-drawer-link:hover {
	filter: brightness(0.94) !important;
}

.tab-menu-wrap .tm-drawer-link.is-active {
	background-color: var(--tm-tab-active-bg) !important;
	color: var(--tm-tab-active-text) !important;
	font-weight: bold !important;
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

/*
 * Mobile (< 1280 px): hide the tab strip, show the burger.
 * position: relative on the wrap lets the drawer sit flush below it.
 */
@media (max-width: 1279px) {
	.tab-menu-wrap,
	.elementor .tab-menu-wrap,
	.elementor-widget-tab_menu .tab-menu-wrap {
		position: relative !important;
	}

	.tab-menu-wrap .tm-tab-strip,
	.elementor .tab-menu-wrap .tm-tab-strip,
	.elementor-widget-tab_menu .tm-tab-strip {
		display: none !important;
	}

	.tab-menu-wrap .tm-burger,
	.elementor .tab-menu-wrap .tm-burger,
	.elementor-widget-tab_menu .tm-burger {
		display: flex !important;
	}
}

/* Desktop (≥ 1280 px): ensure drawer is never visible */
@media (min-width: 1280px) {
	.tab-menu-wrap .tm-drawer,
	.elementor .tab-menu-wrap .tm-drawer,
	.elementor-widget-tab_menu .tm-drawer {
		display: none !important;
	}
}