/*
 * Bootstrap 4 -> 5 compatibility shim (Action Sports theme)
 * Loaded AFTER bootstrap.min.css and BEFORE css/action.css, so theme styles still win.
 * Keeps the site looking the way it did on Bootstrap 4.1.3. Remove rules one at a
 * time once you've confirmed the new Bootstrap 5 defaults look fine.
 */

/* BS5 adds smooth scrolling to :root, which fights the jQuery scrollTop animations in footer.php / common.js */
:root { scroll-behavior: auto; }

/* BS5 underlines links by default; BS4 only underlined on hover */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* BS4 gutters were 30px; BS5 defaults to 1.5rem (24px) */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl,
.row { --bs-gutter-x: 30px; }

/* BS5 adds a 1320px container at >=1400px; BS4 topped out at 1140px */
@media (min-width: 1400px) {
	.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1140px; }
}

/*
 * BS5 applies width:100% + gutter padding to EVERY direct child of .row
 * (BS4 only styled .col-* children). This theme puts plain elements inside rows
 * (e.g. .header-row > .logo-container / .nav-container, nav.row > #side-nav),
 * so restore BS4 behaviour for non-column children. :where() keeps specificity
 * equal to Bootstrap's own ".row > *" so action.css still overrides it.
 */
.row > :where(:not([class^="col"]):not([class*=" col-"])) {
	flex-shrink: 1;
	width: auto;
	max-width: none;
	padding-right: 0;
	padding-left: 0;
	margin-top: 0;
}

/* BS4 navbar had 1rem horizontal padding; BS5 sets it to 0 */
.navbar { --bs-navbar-padding-x: 1rem; }

/* BS4 labels had a bottom margin; BS5 removed it */
label { margin-bottom: .5rem; }

/*
 * BS4 gave every column position:relative and min-height:1px; BS5 dropped both.
 * The header mega-menu (.static-menu) is absolutely positioned inside .col-lg-11.menu,
 * so without this it anchors to the navbar instead and renders wider and 28px higher.
 */
.col, .col-auto, [class^="col-"], [class*=" col-"] {
	position: relative;
	min-height: 1px;
}