/*
 * Theoheat Mobile Header Search
 * ----------------------------------------------------------
 * Collapsible Divi/Torque AJAX search row triggered from the
 * Max Mega Menu mobile toggle-bar search icon.
 *
 * Trigger URL:
 * #theo-mobile-search
 *
 * Divi row CSS class:
 * theo-mobile-search-row
 * ----------------------------------------------------------
 */

@media (max-width: 980px) {

	/*
	 * Search row starts fully collapsed.
	 * JS controls max-height during the opening/closing animation.
	 */
	.theo-mobile-search-row {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		visibility: hidden;
		transform: translateY(-8px);
		pointer-events: none;

		transition:
			max-height 0.25s ease,
			opacity 0.20s ease,
			transform 0.25s ease,
			visibility 0s linear 0.25s;

		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/*
	 * Open state.
	 */
	.theo-mobile-search-row.theo-mobile-search-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;

		transition:
			max-height 0.25s ease,
			opacity 0.20s ease,
			transform 0.25s ease,
			visibility 0s linear 0s;
	}

	/*
	 * Keep the search row above the page content while allowing
	 * Torque's AJAX results to appear outside the row once open.
	 */
	.theo-mobile-search-row.theo-mobile-search-ready {
		overflow: visible;
	}

	/*
	 * Remove unnecessary Divi spacing from the collapsible row.
	 */
	.theo-mobile-search-row.et_pb_row {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	/*
	 * Make the search module use the available width.
	 */
	.theo-mobile-search-row .et_pb_module {
		width: 100%;
		margin-bottom: 0 !important;
	}

	/*
	 * Ensure the trigger behaves like a control rather than
	 * navigating to an anchor.
	 */
	a[href="#theo-mobile-search"],
	a[href$="#theo-mobile-search"] {
		cursor: pointer;
	}
}


/*
 * Desktop/tablet above Divi mobile breakpoint:
 * do not interfere with whatever visibility/settings have been
 * configured directly in Divi.
 */
@media (min-width: 981px) {

	.theo-mobile-search-row {
		max-height: none;
		opacity: 1;
		overflow: visible;
		visibility: visible;
		transform: none;
		pointer-events: auto;
	}
}