/*!
 * Struct theme — Bootstrap 3 -> 5 compatibility shim
 * ----------------------------------------------------------------------
 * This theme's own css/style.css and css/custom.css fully re-implement the
 * visual appearance of .navbar, .navbar-nav, etc. themselves (colors,
 * spacing, float-based layout) rather than relying on Bootstrap's built-in
 * component styles. That's good news for an upgrade: we only need to
 * neutralize the handful of NEW default behaviours Bootstrap 5 introduces
 * that would otherwise fight with this theme's existing rules.
 *
 * Loaded AFTER bootstrap.css and BEFORE style.css/custom.css, so it wins
 * over Bootstrap's new defaults while still letting the theme's own rules
 * (which are more specific / load last anyway) take final precedence.
 * ---------------------------------------------------------------------- */

/* 1) Bootstrap 5 grid gutters default to 1.5rem (12px/side).
      Bootstrap 3 used 30px total (15px/side). This theme's pixel values
      throughout style.css/custom.css assume the BS3 gutter, so restore it
      via the CSS variable BS5's grid reads from. */
:root {
	--bs-gutter-x: 30px;
}

/* 2) Bootstrap 5 shrank .container max-widths vs Bootstrap 3:
      BS3: sm(768px)=750  md(992px)=970  lg(1200px)=1170
      BS5: sm(576px)=540  md(768px)=720  lg(992px)=960  xl(1200px)=1140
      Restore the exact BS3 widths at the breakpoints this theme's custom
      CSS was tuned against (768 / 992 / 1200 are shared by both versions). */
@media (min-width: 768px) {
	.container, .container-sm { max-width: 750px; }
}
@media (min-width: 992px) {
	.container, .container-sm, .container-md { max-width: 970px; }
}
@media (min-width: 1200px) {
	.container, .container-sm, .container-md, .container-lg { max-width: 1170px; }
}

/* 3) Bootstrap 5's core .navbar / .navbar-nav / .navbar-collapse are now
      flexbox-based (display:flex, flex-direction:column, etc). This
      theme's own style.css lays the nav out with floats instead
      (.navbar-nav > li { float: left }), and floats are ignored on
      flex children per spec — this is what caused the nav to disappear
      previously. Force these back to block-level so the theme's own
      float-based rules (loaded after this file) take full control again,
      exactly as they did under Bootstrap 3. */
.navbar,
.navbar > .container,
.navbar-header,
.navbar-collapse,
.navbar-nav,
.navbar-nav > li {
	display: block;
}
.navbar-collapse.collapse:not(.show) {
	display: none;
}

/* 3b) THE ACTUAL BUG: Bootstrap 3's core CSS included a rule that force-shows
      the nav on desktop widths regardless of JS/class state:
        @media (min-width:768px){ .navbar-collapse.collapse{display:block!important} }
      This is how BS3 sites show a horizontal menu with zero JavaScript
      involvement above the toggle breakpoint - only mobile needs the JS
      show/hide toggle at all. Bootstrap 5 has no equivalent baked into its
      core CSS (it leans on the .navbar-expand-* utility instead, which we
      deliberately aren't using here since it re-introduces the flexbox
      layout problem from #3 above). Restore the BS3 behaviour directly,
      matching this theme's existing 768px toggle breakpoint exactly. */
@media (min-width: 768px) {
	.navbar-header {
		float: left;
	}
	.navbar-collapse.collapse {
		display: block !important;
		height: auto !important;
		padding-bottom: 0;
		overflow: visible !important;
	}
}
/* Also from BS3 core: the nav's own left/right insets cancel out the
   .container's padding at desktop widths so the nav sits flush with the
   container edges (mobile keeps a small inset for the dropdown panel). */
.container > .navbar-header,
.container > .navbar-collapse {
	margin-right: -15px;
	margin-left: -15px;
}
@media (min-width: 768px) {
	.container > .navbar-header,
	.container > .navbar-collapse {
		margin-right: 0;
		margin-left: 0;
	}
}

/* 3c) Also from BS3 core: "clearfix" rules on elements that lay out floated
      children (this theme floats .navbar-header left and .navbar-nav right
      by hand, rather than using Bootstrap's own - now flex-based - grid).
      Without these, a container whose only children are floated collapses
      to zero height, since floated boxes don't push their parent taller.
      That's what was making the header row collapse to its bare 50px
      min-height floor regardless of how tall the logo or nav links
      actually were - restoring this fixes the row height itself, and once
      it's the correct height (nav row ~94px), the logo's own vertical-
      centering CSS (further down in custom.css) works correctly again
      without needing any changes there. */
.clearfix:before, .clearfix:after,
.container:before, .container:after,
.row:before, .row:after,
.nav:before, .nav:after,
.navbar:before, .navbar:after,
.navbar-header:before, .navbar-header:after,
.navbar-collapse:before, .navbar-collapse:after {
	display: table;
	content: " ";
}
.clearfix:after,
.container:after,
.row:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after {
	clear: both;
}

/* 4) Bootstrap 5 removed the .sr-only class (renamed to .visually-hidden).
      header.php now uses .visually-hidden directly, but keep a fallback
      here in case .sr-only is still referenced anywhere else in the theme
      (widgets, plugin output, etc). */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}