/*!
 * bootstrap-compat.css
 * Bootstrap 3 -> 5.3 compatibility shim for the nortech theme.
 *
 * The theme's own stylesheets (style.css, responsive.css) and markup were
 * authored against Bootstrap 3 and still use a handful of utility/component
 * classes that Bootstrap 5 removed or renamed. Rather than rewrite the whole
 * theme, this file re-implements just those classes on top of BS5 so the
 * existing markup keeps rendering correctly. Loaded right after bootstrap.css.
 *
 * Each block notes the BS5-native replacement, so this shim can be trimmed
 * later as templates are migrated to native BS5 classes.
 */

/* ------------------------------------------------------------------ *
 * Grid
 * ------------------------------------------------------------------ */

/* Preserve Bootstrap 3's 30px grid gutters (BS5 default is 1.5rem / 24px),
   so horizontal spacing matches the original design. */
.row { --bs-gutter-x: 30px; }

/* col-xs-* : BS5 dropped the "-xs-" infix (xs is the default tier => .col-*).
   This theme only ever uses col-xs-12, i.e. full width on the smallest tier. */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  position: relative;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x, 30px) * .5);
  padding-left: calc(var(--bs-gutter-x, 30px) * .5);
}
.col-xs-12 { flex: 0 0 100%; max-width: 100%; }
.col-xs-6  { flex: 0 0 50%;  max-width: 50%;  }

/* ------------------------------------------------------------------ *
 * Float / alignment utilities  (BS5: float-start / float-end)
 * ------------------------------------------------------------------ */
.pull-left  { float: left  !important; }
.pull-right { float: right !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }

/* Visibility utilities removed in BS5 (BS5: .d-none / .visually-hidden).
   The theme uses `.hidden` to keep the breadcrumb bar, post-nav and
   pagination blocks hidden — without this they reappear under BS5. */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Right-aligned dropdown menu (BS5: .dropdown-menu-end). The theme uses
   .dropdown-menu.pull-right for the header search panel. */
.dropdown-menu.pull-right { right: 0; left: auto; }

/* ------------------------------------------------------------------ *
 * Reboot differences (BS5 changed link + heading defaults vs BS3)
 * ------------------------------------------------------------------ */

/* BS5 Reboot underlines every <a> by default; BS3 did not (it underlined on
   hover only). The theme — including the main menu — was designed against the
   BS3 behaviour, so restore it. */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* BS5 Reboot zeroes heading top margins; BS3 gave them margins. Headings with
   no explicit margin (e.g. .page-title h1) otherwise shift up, reducing the
   gap below the page-title divider. */
h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; }
h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; }

/* ------------------------------------------------------------------ *
 * Images  (BS5: .img-fluid)
 * ------------------------------------------------------------------ */
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-circle  { border-radius: 50%; }
.img-rounded { border-radius: 6px; }

/* ------------------------------------------------------------------ *
 * Navbar / menu
 * ------------------------------------------------------------------ */

/* In BS3 the collapsible menu was forced visible on >=768px (desktop) and
   only collapsed on phones. BS5's `.collapse:not(.show){display:none}` would
   otherwise hide the desktop menu, so restore the BS3 behaviour. */
@media (min-width: 768px) {
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* BS5 auto-adds a caret (::after) to .dropdown-toggle. The theme provides its
   own menu indicators, so suppress it on the main navigation. */
.main-menu .dropdown-toggle::after { display: none; }

/* Mobile hamburger button. BS5 renamed .navbar-toggle -> .navbar-toggler and
   dropped .icon-bar, so the BS3 base styling is gone. The theme only sets the
   button's colour and the bars' colour and relied on BS3 for the button
   padding and the bar dimensions — without these the button collapses to a
   dot and the bars are invisible. Restore the BS3 base. */
.navbar-toggle {
  position: relative;
  padding: 9px 10px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }

/* BS3 hid the hamburger on desktop (shown only on phones). The theme relies on
   this, so the toggler must not appear next to the full desktop menu. */
@media (min-width: 768px) {
  .navbar-toggle { display: none; }
}

/* ------------------------------------------------------------------ *
 * Misc components removed in BS4/5
 * ------------------------------------------------------------------ */

/* .caret (removed in BS4) */
.caret {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/* .btn-default (BS5: .btn-secondary / .btn-light) */
.btn-default {
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
}
.btn-default:hover,
.btn-default:focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

/* .panel (removed in BS4; used by the WooCommerce product tabs template) */
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * Input groups  (used by jquery.bootstrap-touchspin, a BS3-era plugin,
 * for the WooCommerce quantity spinner). BS5 removed .input-group-btn and
 * .input-group-addon (now .input-group-text), and input-groups are flex.
 * ------------------------------------------------------------------ */
.input-group-btn { display: flex; }
.input-group-btn > .btn { height: 100%; }
.input-group-addon {
  display: flex;
  align-items: center;
  padding: .375rem .75rem;
  background-color: #eee;
  border: 1px solid #ccc;
}