/**
 * DDA Theme Builder — lateral section sidebar (DSM vertical menu) stays visible on scroll.
 *
 * Mirrors meetings wire: CSS Grid row + position:sticky on the 1/4 sidebar column.
 * Do NOT set width/max-width:100% on .et_pb_row — that breaks Divi’s ~1080px content band.
 *
 * @package DDA_Divi_Child
 */

/* ----- Sticky offset (fixed header + WP admin bar) — start ----- */
:root {
	--dda-tb-sidebar-sticky-top: clamp(72px, 11vh, 130px);
}

body.admin-bar {
	--dda-tb-sidebar-sticky-top: calc(clamp(72px, 11vh, 130px) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--dda-tb-sidebar-sticky-top: calc(clamp(72px, 11vh, 130px) + 46px);
	}
}
/* ----- Sticky offset — end ----- */

/* ----- Desktop / tablet landscape (Divi stacks sidebar above content at 980px) — start ----- */
@media only screen and (min-width: 981px) {
	/*
	 * Only TB body row_1 (1/4 sidebar + 3/4 post content). Preserve Divi row width band.
	 */
	body.dda-has-tb-sidebar-nav #page-container .et-l--body .et_pb_row.et_pb_row_1_tb_body {
		display: grid !important;
		grid-template-columns: minmax(0, 250px) minmax(0, 1fr) !important;
		column-gap: 3% !important;
		row-gap: 0 !important;
		align-items: start !important;
		width: 80% !important;
		max-width: 1080px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		overflow: visible !important;
	}

	body.dda-has-tb-sidebar-nav #page-container .et-l--body .et_pb_row.et_pb_row_1_tb_body > .et_pb_column_1_4,
	body.dda-has-tb-sidebar-nav #page-container .et-l--body .et_pb_column.et_pb_column_1_4.et_pb_column_1_tb_body {
		grid-column: 1;
		grid-row: 1;
		width: auto !important;
		max-width: 250px !important;
		margin-right: 0 !important;
		position: sticky !important;
		top: var(--dda-tb-sidebar-sticky-top) !important;
		align-self: start !important;
		z-index: 5;
		min-width: 0;
		max-height: calc(100vh - var(--dda-tb-sidebar-sticky-top) - 1.5rem);
		max-height: calc(100dvh - var(--dda-tb-sidebar-sticky-top) - 1.5rem);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	body.dda-has-tb-sidebar-nav #page-container .et-l--body .et_pb_row.et_pb_row_1_tb_body > .et_pb_column_3_4 {
		grid-column: 2;
		grid-row: 1;
		width: auto !important;
		max-width: none !important;
		min-width: 0;
		margin-right: 0 !important;
	}

	body.dda-has-tb-sidebar-nav #page-container .et-l--body .et_pb_section.et_pb_section_1_tb_body {
		overflow: visible !important;
	}

	#page-container .et-l--body .dda-tb-sidebar-sticky-stack {
		position: static !important;
		top: auto !important;
		max-height: none !important;
		overflow: visible !important;
		z-index: auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
}
/* ----- Desktop / tablet landscape — end ----- */

/* ----- Mobile: sidebar scrolls with page — start ----- */
@media only screen and (max-width: 980px) {
	body.dda-has-tb-sidebar-nav #page-container .et-l--body .et_pb_column_1_4.et_pb_column_1_tb_body,
	#page-container .et-l--body .et_pb_column_1_4:has(.dsm-menu.dsm-menu-layout-vertical) {
		position: static !important;
		top: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	body.dda-has-tb-sidebar-nav #page-container .et-l--body .et_pb_row.et_pb_row_1_tb_body {
		display: flex !important;
		flex-wrap: wrap !important;
		width: 80% !important;
		max-width: 1080px !important;
	}

	body.dda-has-tb-sidebar-nav #page-container .et-l--body .et_pb_row.et_pb_row_1_tb_body > .et_pb_column_1_4,
	body.dda-has-tb-sidebar-nav #page-container .et-l--body .et_pb_column.et_pb_column_1_4.et_pb_column_1_tb_body {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}
/* ----- Mobile — end ----- */