/* Space above a location group when an anchor link (e.g. #feedlots) scrolls to it. */
.location-list .width-holder .col-12[id],
.cert-drop.loc .drop-grid[data-anchor] {
	scroll-margin-top: 40px;
}

/*
 * The fade-up animation starts these 30px lower, so a first anchor jump aimed 30px too far and the heading then slid
 * up out of place. Keep the fade but drop the slide on the anchor targets (desktop headings, mobile dropdown container).
 */
.location-list .width-holder .col-12[data-anchor][data-aos],
.cert-drop.loc .container-fluid[data-aos] {
	transform: none !important;
}

/* Smooth anchor jumps, only on pages with a location list. */
html:has(.cert-drop.loc .drop-grid[data-anchor]) {
	scroll-behavior: smooth;
}

/* Optional "View careers" button under an address. Same look as the theme's red .box buttons with a blue slide-in and white arrow. */
.location-list a.box.location-list__careers-btn,
.cert-drop.loc a.box.location-list__careers-btn {
	display: inline-block;
	margin: 20px 0 0;
	background-color: #dc0030;
	background-image: linear-gradient(to right, #005fa9 0, #005fa9 100%);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 0 100%;
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 48px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-size .7s;
}

.location-list a.box.location-list__careers-btn::after,
.cert-drop.loc a.box.location-list__careers-btn::after {
	content: "";
	display: inline-block;
	width: 36px;
	height: 16px;
	margin: 0 0 3px 18px;
	vertical-align: middle;
	background: url(../../../img/arrow-white-right.png) no-repeat center / contain;
}

.location-list a.box.location-list__careers-btn:hover,
.location-list a.box.location-list__careers-btn:focus-visible,
.cert-drop.loc a.box.location-list__careers-btn:hover,
.cert-drop.loc a.box.location-list__careers-btn:focus-visible {
	background-size: 100% 100%;
}

.location-list a.box.location-list__careers-btn:focus-visible,
.cert-drop.loc a.box.location-list__careers-btn:focus-visible {
	outline: 3px solid #005fa9;
	outline-offset: 3px;
}

/* The address paragraph's 35px margin already sits above the button; the bottom margin spaces the next row.
   vertical-align: top stops the inline button adding hidden line space, so its block is exactly 48px + 58px. */
.location-list a.box.location-list__careers-btn {
	margin: 0 0 58px;
	vertical-align: top;
}

/*
 * The theme positions the 2nd and 3rd address in each row absolutely, so only the 1st address sets the row's height.
 * In any group with a button: contain every (floated) address, and make addresses without a button reserve the
 * button's space (48px button + 58px margin), so the row always fits a button whichever address has one.
 */
.location-list .address-wrapper:has(.location-list__careers-btn) .row > div > div::after {
	content: "";
	display: table;
	clear: both;
}

.location-list .address-wrapper:has(.location-list__careers-btn) .row > div > div:not(:has(.location-list__careers-btn)) .content {
	padding-bottom: 106px;
}

.cert-drop.loc a.box.location-list__careers-btn {
	margin: 12px 0 25px;
}