/**
 * Firebird horizontal spacing tokens & helpers
 * ------------------------------------------------------------------
 * A self-contained distillation of how firebird-master handles
 * horizontal margins/padding (body → main → entry-content → blocks).
 *
 * Drop this into a plugin (or anywhere) to reproduce the theme's
 * gutters and centered content widths WITHOUT depending on theme.json
 * variables being present. Each token falls back to the theme's own
 * custom property first, then to a hard literal, so it stays in sync
 * when loaded inside the theme but still works standalone in a plugin.
 *
 * Model in one sentence:
 *   Below 1200px content gets a fixed side GUTTER (16px, 24px on wide
 *   full-bleed templates); at/above 1200px the gutter is dropped and
 *   content is CENTERED at a max content-width (895px) or wide-width
 *   (1200px) via margin-inline:auto.
 */

:root {
	/* --- Side gutters (the horizontal padding used below lg) --- */
	/* 16px — the default content gutter on phones/tablets */
	--bmp-gutter: var(--wp--custom--block--globals--spacing--padding--160, 16px);
	/* 24px — wider gutter used by full-bleed hero templates at lg+ */
	--bmp-gutter-lg: var(--wp--custom--block--globals--spacing--padding--240, 24px);

	/* --- Centered content widths (WP layout) --- */
	--bmp-content-size: var(--wp--style--global--content-size, 895px); /* contentSize */
	--bmp-wide-size: var(--wp--style--global--wide-size, 1200px);      /* wideSize   */

	/* --- Chrome shell (site header / footer) --- */
	--bmp-shell-max: 1220px;      /* header & footer inner max-width */
	--bmp-shell-padding: 1rem;    /* header & footer side padding    */

	/* The breakpoint at which gutters give way to centering */
	--bmp-layout-breakpoint: 1200px;
}

/* ------------------------------------------------------------------
 * Helper: standard page gutter.
 * Applies a 16px side padding on small screens; removes it at lg
 * because the centered max-width then provides the breathing room.
 * Mirrors `.bmp-default-column-layout` in the theme.
 * ---------------------------------------------------------------- */
.bmp-gutter {
	padding-left: var(--bmp-gutter);
	padding-right: var(--bmp-gutter);
}

@media (min-width: 1200px) {
	.bmp-gutter {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Full-bleed hero variant: 16px gutter on mobile, 24px from lg up.
 * Mirrors `.page-template-page-section-hero .entry-content`. */
.bmp-gutter--wide {
	padding-left: var(--bmp-gutter);
	padding-right: var(--bmp-gutter);
}

@media (min-width: 1200px) {
	.bmp-gutter--wide {
		padding-left: var(--bmp-gutter-lg);
		padding-right: var(--bmp-gutter-lg);
	}
}

/* ------------------------------------------------------------------
 * Helper: centered content column (WP "constrained" layout).
 * Caps width at the content-size and centers it. Combine with
 * .bmp-gutter so it still has side breathing room before centering.
 * ---------------------------------------------------------------- */
.bmp-constrained {
	max-width: var(--bmp-content-size);
	margin-left: auto;
	margin-right: auto;
}

/* Wide alignment — caps at wide-size (1200px) instead of content-size. */
.bmp-wide {
	max-width: var(--bmp-wide-size);
	margin-left: auto;
	margin-right: auto;
}

/* Full-bleed — break out of a gutter'd parent to the viewport edges.
 * Mirrors the `.alignfull` negative-margin trick used in custom/
 * ticketing templates below lg. */
.bmp-full {
	margin-left: calc(var(--bmp-gutter) * -1);
	margin-right: calc(var(--bmp-gutter) * -1);
}

@media (min-width: 1200px) {
	.bmp-full {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ------------------------------------------------------------------
 * Helper: site chrome shell (header / footer).
 * Centered, capped at 1220px, with a 1rem side padding at all widths.
 * ---------------------------------------------------------------- */
.bmp-shell {
	max-width: var(--bmp-shell-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bmp-shell-padding);
	padding-right: var(--bmp-shell-padding);
}

/* ------------------------------------------------------------------
 * Helper: left-align content's edge to the wide container instead of
 * centering it (used by ticketing-landing & section-hero titles at
 * >=1216px so a left rail lines up). 1204–1216px ≈ wide-size + gutters.
 *
 * `!important` mirrors the theme's own hero-title rule: this helper is a
 * single class, so without it the (higher-specificity / later-loaded)
 * gutter rule it's meant to cancel would win, leaving the title with both
 * its side gutter AND the centering margin — i.e. pushed right of the
 * content column. The whole job of this helper is to override that gutter.
 * ---------------------------------------------------------------- */
@media (min-width: 1216px) {
	.bmp-align-wide-left {
		max-width: var(--bmp-content-size);
		margin-left: calc((100vw - 1204px) / 2) !important;
		padding-left: 0 !important;
	}
}