/*
 * Where Bootstrap 5 and this theme's Bootstrap 3 markup disagree in a way
 * bs3-legacy.css (the Bootstrap 3 rules the pages use, extracted) cannot fix
 * by coming later, because Bootstrap 5 says it another way. Then the few
 * things this theme adds to what the Joomla site had.
 */

/* Bootstrap 5's .row is a flex container with its gutter in a variable;
   Helix3 lays the header out with floating Bootstrap 3 columns (logo left,
   menu right). A block with Bootstrap 3's margins, and the columns' 15px. */
.row {
	--bs-gutter-x: 30px;
	--bs-gutter-y: 0;
	display: block;
	margin-left: -15px;
	margin-right: -15px;
}
.row > * {
	padding-left: 15px;
	padding-right: 15px;
}

/* Bootstrap 5 underlines links; Bootstrap 3 did only on hover, and the
   template colours them itself. */
a {
	text-decoration: none;
}

/* Bootstrap 5's reboot indents lists by 2rem; Bootstrap 3 left the browser's
   40px. */
ol,
ul {
	padding-left: 40px;
}
.sp-megamenu-parent,
.offcanvas-menu ul,
.sp-simpleportfolio-filter ul {
	padding-left: 0;
}

/* The slideshow is as tall as the window: the script sets it, this holds it
   before the script has run. */
.sppb-slider-wrapper.sppb-slider-fullwidth-wrapper .sppb-slideshow-fullwidth-item-bg {
	height: 100vh;
}

/* The portfolio's filter hides what is not in the chosen group (Shuffle
   animated it; this does not). */
.sp-simpleportfolio .sp-simpleportfolio-item.so-filtered-out {
	display: none;
}

/* The contact form's trap field: out of sight, out of the tab order. */
.so-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The answer after sending, where SP Page Builder's AJAX form wrote it. */
.onepage-contact-form .so-contact-status {
	display: block;
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 3px;
	background: rgba(40, 167, 69, 0.2);
	color: #ffffff;
}
.onepage-contact-form .so-contact-status.so-contact-error {
	background: rgba(220, 53, 69, 0.25);
}

/* The map waits behind the consent banner (includes/consent.php): its
   placeholder on the section's black. */
.onepage-contact-wrapper .so-map {
	background: #1a1a1a;
}

/* Owl Carousel left an empty .owl-controls under the slideshow, 10px down
   (owl.theme.css), which made the section 10px taller than the window. The
   slideshow here builds no controls; the space is kept. */
#slide-fullwidth.owl-carousel {
	padding-bottom: 10px;
}

/* Helix3 opens its phone menu by putting "offcanvas" on <body>; Bootstrap 5
   has a component of that name, and made the whole body fixed, moved off the
   screen and hidden -- the menu opened on nothing and a tap fell through it.
   On <body> the class means only what the template says. */
body.offcanvas {
	position: relative;
	inset: auto;
	z-index: auto;
	display: block;
	flex-direction: row;
	visibility: visible;
	max-width: none;
	width: 100%;
	height: 100%;
	color: inherit;
	background-clip: border-box;
	outline: 0;
	box-shadow: none;
	transform: none;
	transition: none;
}

/* Bootstrap 5's .nav is a wrapping flex row: the phone menu's items came two
   to a line. Bootstrap 3's was a block list, one item under another. */
.offcanvas-menu .nav {
	display: block;
}