/**
 * Bootstrap-replacement utilities — docs/bootstrap-usage-map.md Stage 2.
 *
 * The trivial-verdict set (index.php + the four visually-hidden-only
 * templates + camp-final.php's one responsive fold) used only these nine
 * Bootstrap classes beyond the dead nav floor. Each rule below is copied
 * verbatim from assetslp/css/lib/bootstrap.min.css's own computed value for
 * the matching class, so swapping the markup over is a no-visual-change
 * rename, not a redesign. `.op-fold-mobile`/`.op-fold-desktop` replace the
 * pair `d-md-none` / `d-none d-md-block` at Bootstrap's own `-md-`
 * breakpoint (min-width: 768px).
 *
 * Stage 3a added four more, for page.php's centred hero column and
 * page-templates/lp-template.php's section wrappers and headings. Three are
 * verbatim single-class copies on the same terms as above: `.op-mt-4` (mt-4),
 * `.op-mb-5` (mb-5) and `.op-py-4` (pt-4 + pb-4).
 *
 * `.op-flex-center` is the one rule here that is NOT a one-to-one copy, so it
 * is spelled out: it collapses the `row justify-content-center` wrapper and the
 * `col-md-12 d-flex justify-content-center align-items-center` column page.php
 * nested to centre its title. The row's `-.75rem` margin and the column's
 * `+.75rem` padding cancel exactly and the column was full-width, so the two
 * levels fold into one flex container with no computed change. `flex-wrap: wrap`
 * therefore comes from `.row`, NOT from `.d-flex` (which sets `display` alone) —
 * do not read this class as a `d-flex` equivalent. It is inert for page.php's
 * single child; a future caller wrapping MULTIPLE children wants plain
 * `display: flex` unless it also wants the row's wrapping behaviour.
 */

.op-container {
	width: 100%;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 576px) {
	.op-container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.op-container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.op-container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.op-container {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.op-container {
		max-width: 1320px;
	}
}

.op-text-center {
	text-align: center;
}

.op-mb-4 {
	margin-bottom: 1.5rem;
}

.op-my-4 {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.op-my-5 {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.op-mt-4 {
	margin-top: 1.5rem;
}

.op-mb-5 {
	margin-bottom: 3rem;
}

.op-py-4 {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.op-flex-center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.op-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.op-fold-mobile {
	display: block;
}

.op-fold-desktop {
	display: none;
}

@media (min-width: 768px) {
	.op-fold-mobile {
		display: none;
	}

	.op-fold-desktop {
		display: block;
	}
}