/**
 * hire-legacy.css -- the Bootstrap 4 base the Hiring Guide templates lost.
 *
 * Loads BEFORE hire-scoped.css and stands in for the two Bootstrap files that
 * header-bootstrap4.php used to load:
 *   bootstrap-4.min.css            (Reboot base typography + the modal system)
 *   bootstrap-header-added-style.css (one .btn rule, 139 bytes)
 *
 * Everything else those pages need -- the heading scale, .padding-top,
 * .h1-hero, .mw-400, the ul.pros/ul.cons icon bullets -- comes from
 * hire-scoped.css, generated from the theme's own css/hire.css. This file
 * covers only the gaps that stylesheet does not fill.
 *
 * ORDER MATTERS: hire-scoped.css declares it as a dependency so it always
 * loads second, which is how css/hire.css's .modal-content{border:none} beat
 * Bootstrap's border on production. Both are enqueued at priority 1 so they
 * print before the flazingo plugin's fla.css, preserving prod's cascade --
 * fla.css still wins h1 at 40px.
 *
 * UNSCOPED, exactly as Bootstrap was on production. A .hire-legacy wrapper was
 * tried first, but single-hire.php renders authored ACF content that carries its
 * own unbalanced tags -- the wrapper closed after only 3 of 10 sections, leaving
 * most of the page unstyled. Nothing in the markup can be trusted to nest, so
 * these rules apply page-wide on hire pages, as they did on prod.
 */

/* ---------------------------------------------------------------------------
   1. Reboot leftovers -- the base rules css/hire.css does NOT set.
      hire.css supplies h1/h2/h3 sizes and h*{margin-bottom:.5em}; it never set
      paragraph or list margins, so those came from Reboot and are restored
      here. Tailwind's preflight zeroes both (h1..h6,p{margin:0}).
   --------------------------------------------------------------------------- */
p {
	margin-top: 0;
	margin-bottom: 1rem;
}

ol,
ul,
dl {
	margin-top: 0;
	margin-bottom: 1rem;
}

/* h1/h2/h3 are deliberately absent -- css/hire.css owns those (42px/28px/28px,
   with its own breakpoints). Only h4-h6, which it never set, come from Reboot. */
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* list-style is deliberately absent too: css/hire.css sets ul{list-style:none}
   and draws its own markers via .li1::before and ul.pros/ul.cons ::before. */

/* The pill button from bootstrap-header-added-style.css. */
.btn {
	border-radius: 9999px;
	text-align: center;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------------------
   2. Modals -- from Bootstrap 4.3.1, unscoped.
      .modal is what supplies display:none. Without it the three CTA modals on
      single-hire.php rendered as ordinary visible blocks, dumping their
      contents inline on all 768 guide pages.

      These modals do not open, and are not meant to: js/vendor/bootstrap.min.js
      is Bootstrap 3.3.1, whose modal plugin toggles .in, while this markup is
      Bootstrap 4 and keys off .show. That mismatch predates the header
      consolidation and is identical on production. The rules below restore the
      hidden resting state only. css/hire.css carries the matching Bootstrap 3
      pieces (.fade.in, .modal.in .modal-dialog) if that JS is ever corrected.

      border-radius is omitted from .modal-content: style.css sets it to 1rem
      and hire-scoped.css sets border:none, both of which should keep winning.
   --------------------------------------------------------------------------- */
.modal-open { overflow: hidden; }
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }

.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1050;
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	outline: 0;
}

.modal-dialog {
	position: relative;
	width: auto;
	margin: 0.5rem;
	pointer-events: none;
}

.modal.fade .modal-dialog {
	transition: transform 0.3s ease-out;
	transform: translate(0, -50px);
}

.modal.show .modal-dialog { transform: none; }

.modal-dialog-centered {
	display: flex;
	align-items: center;
	min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
	display: block;
	height: calc(100vh - 1rem);
	content: "";
}

.modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, 0.2);
	outline: 0;
}

.modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1040;
	width: 100vw;
	height: 100vh;
	background-color: #000;
}

.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 0.5; }

.fade { transition: opacity 0.15s linear; }
.fade:not(.show) { opacity: 0; }

.close {
	float: right;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: 0.5;
}

.close:hover { color: #000; text-decoration: none; }

.close:not(:disabled):not(.disabled):focus,
.close:not(:disabled):not(.disabled):hover { opacity: 0.75; }

@media (min-width: 576px) {
	.modal-dialog {
		max-width: 500px;
		margin: 1.75rem auto;
	}

	.modal-dialog-centered { min-height: calc(100% - 3.5rem); }
	.modal-dialog-centered::before { height: calc(100vh - 3.5rem); }
}