/**
 * Public styles for LTar Site Changes.
 */

/* Sticky Theme Builder header: keep in-page section jumps visible */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
}

@media only screen and (max-width: 980px) {
	html {
		scroll-padding-top: 80px;
	}
}

/**
 * Desktop: vertically center the donate button in the header row.
 * Only align-items — do not change text-align, justify-content, or widths
 * (those shift the button horizontally).
 *
 * Note: do NOT use transform on the donate column — it caused the button
 * background/label to fail to paint (looked like a thin orange bar).
 */
@media only screen and (min-width: 981px) {
	body #page-container .et-l--header .et_pb_row_0_tb_header {
		display: flex !important;
		align-items: center !important;
	}

	body #page-container .et-l--header .et_pb_row_0_tb_header > .et_pb_column {
		float: none !important;
	}

	/* Drop Divi's top margin so flex centering isn't biased downward */
	body #page-container .et-l--header .et_pb_button_0_tb_header_wrapper {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

/**
 * Theme Builder header: keep "JE FAIS UN DON" on the same row as
 * logo + hamburger on tablet and phone.
 * Target layout: [ Logo ] …… [ JE FAIS UN DON ] [ ☰ ]
 */
@media only screen and (max-width: 980px) {
	body #page-container .et-l--header .et_pb_row_0_tb_header {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 60px;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	body #page-container .et-l--header .et_pb_column_0_tb_header {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 0 !important;
		padding: 0 !important;
	}

	/* Sit the donate column in the header bar, left of the hamburger */
	body #page-container .et-l--header .et_pb_column_1_tb_header {
		position: absolute !important;
		top: 9px !important;
		right: 64px !important; /* clear hamburger with visible gap */
		left: auto !important;
		bottom: auto !important;
		transform: none !important;
		float: none !important;
		width: auto !important;
		max-width: max-content !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 5;
	}

	body #page-container .et-l--header .et_pb_button_0_tb_header_wrapper {
		margin: 0 !important;
		width: auto !important;
		max-width: max-content !important;
		text-align: right !important;
	}

	body #page-container .et-l--header .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header,
	body #page-container .et-l--header .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header:hover,
	body #page-container .et-l--header .et_pb_section .et_pb_button_0_tb_header {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important;
		width: auto !important;
		height: auto !important;
		max-height: none !important;
		min-width: 0 !important;
		min-height: 0 !important;
		padding: 12px 10px !important;
		font-size: 12px !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
		box-sizing: border-box !important;
		overflow: visible !important;
		transform: none !important;
		filter: none !important;
		mix-blend-mode: normal !important;
		clip-path: none !important;
		z-index: 5 !important;
	}

	/* Hide Divi arrow icon so label stays readable on small screens */
	body #page-container .et-l--header .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header::after,
	body #page-container .et-l--header .et_pb_section .et_pb_button_0_tb_header::after,
	body #page-container .et-l--header .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header::before,
	body #page-container .et-l--header .et_pb_section .et_pb_button_0_tb_header::before {
		display: none !important;
		content: none !important;
		opacity: 0 !important;
	}

	/* Let the dropdown position against the header row (not the shorter menu module) */
	body #page-container .et-l--header .et_pb_column_0_tb_header,
	body #page-container .et-l--header .et_pb_menu_0_tb_header,
	body #page-container .et-l--header .et_pb_menu_0_tb_header .et_pb_menu_inner_container {
		position: static !important;
	}

	/* Flush under the header bar — no gap, no overlap into the button row */
	body #page-container .et-l--header .et_pb_menu_0_tb_header .et_mobile_menu {
		z-index: 100 !important;
		top: 100% !important;
		width: calc(100vw - 24px) !important;
		max-width: 320px !important;
		right: 12px !important;
		left: auto !important;
	}

	/* Keep logo from colliding with the donate button */
	body #page-container .et-l--header .et_pb_menu_0_tb_header .et_pb_menu__logo-wrap {
		max-width: calc(100% - 220px);
	}

	body #page-container .et-l--header .et_pb_menu_0_tb_header .et_pb_menu__logo img {
		max-height: 32px;
		width: auto;
		height: auto;
	}
}

/* Narrow phones: smaller button, keep Divi colors */
@media only screen and (max-width: 480px) {
	body #page-container .et-l--header .et_pb_column_1_tb_header {
		top: 14px !important;
		right: 58px !important;
	}

	body #page-container .et-l--header .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header,
	body #page-container .et-l--header .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header:hover,
	body #page-container .et-l--header .et_pb_section .et_pb_button_0_tb_header {
		top: -5px;
	}

	body #page-container .et-l--header .et_pb_menu_0_tb_header .et_pb_menu__logo-wrap {
		max-width: calc(100% - 180px);
	}
}