/**
 * Theme Builder sticky header — center ROW 1 (nav bar) when shrunk (CLPROJ-237).
 * Loads after divi-style-child (see functions.php).
 *
 * Strategy: shrink-wrap .et_pb_row_1_tb_header + margin-inline auto inside the section,
 * and force direct .et_pb_column to width:auto so the row is not full-width.
 *
 * @package TRoo_NonProfit_Divi_Child
 */

@media (min-width: 981px) {
	/*
	 * Shrunk header: vertically center nav in the section. Row 0 collapse is animated in
	 * style.css (grid 0fr + opacity); do not set height/max-height/flex here — that snaps and fights the transition.
	 */
	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk,
	body #page-container #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk > .et_pb_container,
	body #page-container #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk > .et_pb_container {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_0_tb_header,
	body #page-container #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_0_tb_header {
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		border: 0 !important;
	}

	/* Nav row: centered; equal_columns stretches column height — align-content keeps the row’s flex line vertically centered */
	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header.et_pb_row,
	body #page-container #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header.et_pb_row {
		display: flex !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		align-content: center !important;
		align-self: center !important;
		flex: 0 0 auto !important;
		width: fit-content !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
		box-sizing: border-box !important;
		min-height: 0 !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header.et_pb_equal_columns,
	body #page-container #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header.et_pb_equal_columns {
		align-items: center !important;
		align-content: center !important;
	}

	/* Any column in that row: shrink to content (not Divi 4_4 = 100%) */
	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header > .et_pb_column,
	body #page-container #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header > .et_pb_column {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		align-content: center !important;
		justify-content: center !important;
		column-gap: 20px !important;
		row-gap: 12px !important;
		width: auto !important;
		max-width: 100% !important;
		flex: 0 1 auto !important;
		float: none !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		padding-top: 14px !important;
		padding-bottom: 14px !important;
		min-height: 0 !important;
	}

	/* Divi without-logo: top margin on <li> skews vertical rhythm inside the column */
	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li,
	body #page-container #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* Menu + inner flex (without-logo empty slot) */
	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu--without-logo .et_pb_menu__logo-wrap {
		display: none !important;
		width: 0 !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu_inner_container.et_flex_module {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		flex-wrap: nowrap !important;
		width: auto !important;
		max-width: 100% !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu__wrap {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: auto !important;
		flex: 0 1 auto !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu__menu,
	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu__menu > nav {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: auto !important;
		flex: 0 1 auto !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header ul.et-menu.nav {
		justify-content: center !important;
		align-items: center !important;
	}

	/* Beat Divi left_aligned + text_align_right => flex-end */
	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu--style-left_aligned .et_pb_menu__wrap,
	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__wrap,
	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu.et_pb_text_align_right .et_pb_menu__wrap,
	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu--style-left_aligned .et_pb_menu__menu > nav > ul,
	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu > nav > ul,
	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu.et_pb_text_align_right .et_pb_menu__menu > nav > ul {
		justify-content: center !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_menu.charity_header {
		display: flex !important;
		align-items: center !important;
		align-self: center !important;
		flex: 0 1 auto !important;
		min-width: 0 !important;
		text-align: center !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header.is-shrunk .et_pb_row_1_tb_header .et_pb_social_media_follow_0_tb_header {
		align-self: center !important;
		flex: 0 0 auto !important;
		margin-left: 0 !important;
	}

	/*
	 * Logo row (row 0): keep start alignment in BOTH states. If these only apply under :not(.is-shrunk),
	 * the class toggle drops the overrides and Divi’s centered image module wins — logo drifts to the
	 * middle while the row collapses. Row 1 nav rules below still use :not(.is-shrunk) vs .is-shrunk.
	 */
	body #et-boc header.et-l--header .et_pb_section_0_tb_header .et_pb_row_0_tb_header.et_pb_row,
	body #page-container #et-boc header.et-l--header .et_pb_section_0_tb_header .et_pb_row_0_tb_header.et_pb_row {
		justify-content: flex-start !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header .et_pb_row_0_tb_header > .et_pb_column,
	body #page-container #et-boc header.et-l--header .et_pb_section_0_tb_header .et_pb_row_0_tb_header > .et_pb_column {
		justify-content: flex-start !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header .et_pb_image_0_tb_header,
	body #page-container #et-boc header.et-l--header .et_pb_section_0_tb_header .et_pb_image_0_tb_header {
		text-align: left !important;
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header .et_pb_image_0_tb_header .et_pb_image_wrap,
	body #page-container #et-boc header.et-l--header .et_pb_section_0_tb_header .et_pb_image_0_tb_header .et_pb_image_wrap {
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header > .et_pb_column {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		flex-wrap: nowrap !important;
		column-gap: 20px !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header > .et_pb_column > .et_pb_menu.charity_header {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		text-align: left !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header .et_pb_menu_inner_container.et_flex_module {
		justify-content: flex-start !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header > .et_pb_column > .et_pb_menu.charity_header .et_pb_menu__wrap {
		display: flex !important;
		justify-content: flex-start !important;
		width: 100% !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header > .et_pb_column > .et_pb_menu.charity_header .et_pb_menu__menu,
	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header > .et_pb_column > .et_pb_menu.charity_header .et_pb_menu__menu > nav {
		justify-content: flex-start !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header > .et_pb_column > .et_pb_menu.charity_header ul.et-menu.nav {
		justify-content: flex-start !important;
	}

	/* Desktop: override Divi tablet/phone “text align right” leaking into menu flex (flex-end on wrap) */
	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header .et_pb_menu--style-left_aligned .et_pb_menu__wrap,
	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header .et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__wrap,
	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header .et_pb_menu.et_pb_text_align_right .et_pb_menu__wrap,
	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header .et_pb_menu--style-left_aligned .et_pb_menu__menu > nav > ul,
	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header .et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu > nav > ul,
	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header .et_pb_menu.et_pb_text_align_right .et_pb_menu__menu > nav > ul {
		justify-content: flex-start !important;
	}

	body #et-boc header.et-l--header .et_pb_section_0_tb_header:not(.is-shrunk) .et_pb_row_1_tb_header > .et_pb_column .et_pb_social_media_follow_0_tb_header {
		flex: 0 0 auto !important;
		margin-left: auto !important;
	}
}