/* =========================================================================
   Tab sidebar: "Inhoud" heading + CTA buttons inside Salient scrolling tabs

   Salient draws the sidebar line (.theiaStickySidebar:before) and the active
   indicator (.line) positioned against .scrolling-tab-nav with top:0;height:100%.
   So anything kept in .scrolling-tab-nav's normal flow besides the menu would
   stretch that line and shift the indicator. We therefore pull the heading and
   the buttons OUT of flow (absolute) — heading above the menu, buttons below —
   leaving only the menu in flow so the line hugs exactly the menu items.
   Scoped + !important so they win over the widget's own / theme Custom CSS.
   ========================================================================= */

/* Hide the per-section title Salient prints inside each tab body */
.scrolling-tab-content .scrolling-tab-mobile-title { display: none !important; }

/* "Inhoud" heading — above the navigation block */
.scrolling-tab-nav .inhoud-title {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 100%;                 /* sit above .scrolling-tab-nav */
	margin: 0 0 18px !important;  /* gap between heading and the menu */
	font-size: 22px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
}

/* CTA buttons — below the navigation block */
.scrolling-tab-nav .nhc-cta {
	position: absolute !important;
	left: 0;
	right: 0;
	top: 100%;                    /* sit below .scrolling-tab-nav */
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	max-width: 340px !important;  /* don't stretch full width */
	margin: 24px 0 0 !important;  /* gap between the menu and the buttons */
}

.scrolling-tab-nav .nhc-cta .nhc-cta__btn {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 16px 24px !important;
	border-radius: 10px !important;
	font-size: 17px !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}

/* Primary — teal gradient */
.scrolling-tab-nav .nhc-cta .nhc-cta__btn--primary {
	background: linear-gradient(120deg, #0e6b70 0%, #1aa1a7 100%) !important;
	color: #fff !important;
	border: none !important;
	font-weight: 600 !important;
}
.scrolling-tab-nav .nhc-cta .nhc-cta__btn--primary:hover,
.scrolling-tab-nav .nhc-cta .nhc-cta__btn--primary:focus { opacity: .92 !important; color: #fff !important; }

/* Outline — white with teal border */
.scrolling-tab-nav .nhc-cta .nhc-cta__btn--outline {
	background: #fff !important;
	color: #333 !important;
	border: 1.5px solid #137e83 !important;
	font-weight: 500 !important;
}
.scrolling-tab-nav .nhc-cta .nhc-cta__btn--outline:hover,
.scrolling-tab-nav .nhc-cta .nhc-cta__btn--outline:focus { background: #137e83 !important; color: #fff !important; }

/* 50px gap between the sidebar and the tab content (desktop only) */
@media only screen and (min-width: 1000px) {
	.nectar-scrolling-tabs .scrolling-tab-content {
		padding-left: 50px !important;
	}
}

/* When the sidebar is stuck (Salient sets position:fixed inline on it),
   drop the whole unit 50px lower from the top. Only matches the fixed state,
   so the normal (static) position is unaffected. */
.nectar-scrolling-tabs .scrolling-tab-nav .theiaStickySidebar[style*="fixed"] {
	margin-top: 50px !important;
}

/* ------------------------------------------------------------------------- *
 * Fix: Salient scrolling-tab panels can size to their content's MAX-CONTENT
 * width while inactive (class wpb_ui-tabs-hide). That blows the panel up to
 * thousands of px wide, which stretches anything inside set to width:100%
 * (e.g. images). Capping each level at its parent width + allowing shrink
 * keeps the panel at the real column width so content wraps normally.
 * ------------------------------------------------------------------------- */
.nectar-scrolling-tabs,
.nectar-scrolling-tabs .scrolling-tab-content,
.nectar-scrolling-tabs .scrolling-tab-content > .wpb_tab {
	min-width: 0;
	max-width: 100%;
}