/**
 * Shared site layout utilities.
 *
 * The Site Container provides one reusable horizontal alignment convention
 * for new and refactored sections without changing legacy pages globally.
 *
 * It mirrors the current floating header:
 * - below 1440px: 10px outer breathing room + 20px internal padding;
 * - 1440px and above: 20px outer breathing room + 20px internal padding;
 * - maximum width follows the theme's WordPress wide-size setting.
 *
 * Full-width section backgrounds belong to the outer block. Put this style
 * on the inner Group that contains the actual readable/layout content.
 */
 

.wp-block-group.is-style-site-container {
	box-sizing: border-box;
	width: calc(100% - (2 * var(--wp--preset--spacing--10)));
	max-width: calc(
		var(--wp--style--global--wide-size) -
		(2 * var(--wp--preset--spacing--10))
	);
	margin-inline: auto;
}

/*
 * The floating header increases its outer breathing room at 1440px to avoid
 * the browser scrollbar. Match that established alignment convention.
 */
@media (min-width: 1440px) {
	.wp-block-group.is-style-site-container {
		width: calc(100% - (2 * var(--wp--preset--spacing--20)));
		max-width: calc(
			var(--wp--style--global--wide-size) -
			(2 * var(--wp--preset--spacing--20))
		);
	}
}

/* -------------------------------------------------------------------------- */
/* Main → Footer Spacing                                                      */
/* -------------------------------------------------------------------------- */

/**
 * Main and Footer manage their own section spacing.
 *
 * Remove WordPress's root blockGap before the Footer without changing the
 * spacing relationship between the floating Header and Main.
 */
.wp-site-blocks > main {
	margin-block-end: 0;
}

.wp-site-blocks > main + footer.wp-block-template-part {
	margin-block-start: 0 !important;
}

/* --------------------------------------------------------------------------
 * Split Content
 * -------------------------------------------------------------------------- */

/**
 * Gives the text side of a 50/50 text/media layout breathing room from the
 * centre line while allowing media to reach the true 50% split.
 */
.thula-split-content--left {
	padding-inline-end: clamp(1.25rem, 4vw, 3.75rem);
}

.thula-split-content--right {
	padding-inline-start: clamp(1.25rem, 4vw, 3.75rem);
}

/*
 * Tablet.
 *
 * When the Grid stacks, retain approximately the same text measure by keeping
 * the content Group at half of the available Site Container width.
 *
 * Centre-side padding is no longer needed because the columns are stacked.
 */
@media (min-width: 481px) and (max-width: 870px) {
	.thula-split-content--left,
	.thula-split-content--right {
		box-sizing: border-box;
		width: 50%;
		padding-inline-start: 0;
		padding-inline-end: 0;
	}

	/*
	 * Keep right-hand text visually anchored to the right side when using the
	 * mirrored text-right pattern.
	 */
	.thula-split-content--right {
		margin-inline-start: auto;
	}
}

@media (max-width: 740px) {

	#general-enquiries.wp-block-group.is-style-site-container {
		padding-inline: 0;
	}

	#general-enquiries .thula-contact-section.thula-two-columns {
		gap: var(--wp--preset--spacing--50) !important;
	}

	#general-enquiries .thula-two-columns__left .thula-section-heading {
		padding-inline: 0;
	}
}

/*
 * Mobile.
 *
 * Use the full available width once the screen is small enough that retaining
 * a half-width text column would make the content unnecessarily narrow.
 */
@media (max-width: 480px) {
	.thula-split-content--left,
	.thula-split-content--right {
		width: 100%;
		padding-inline-start: 0;
		padding-inline-end: 0;
		margin-inline-start: 0;
	}
}