/* ============================================================
   Bootstrap 4 -> 5 compatibility layer.
   Purpose: keep every page looking EXACTLY as it did on Bootstrap 4 -
   this file only pins the handful of Bootstrap internals that changed
   their default VALUE between v4 and v5 back to the old v4 value. It
   does not add any new design. Load this right after bootstrap.min.css
   (v5) and before style.css / pages.css.
   ============================================================ */

:root {
  /* v4's grid gutter was a flat 15px each side (30px between columns).
     v5 switched this single variable to 1.5rem (24px) by default, and
     reuses it for BOTH .row's gutter AND .container's side padding -
     so pinning it here restores both to the old v4 spacing at once. */
  --bs-gutter-x: 30px;

  /* v4's default corner radius was .25rem on buttons, inputs, dropdowns,
     modals, cards, alerts and badges. v5 rounded this up to .375rem by
     default. Pinning the shared variables keeps every one of those
     components exactly as sharp-cornered as they were on v4. */
  --bs-border-radius: .25rem;
  --bs-border-radius-sm: .2rem;
  --bs-border-radius-lg: .3rem;
}

/* v4's .form-group (margin-bottom:1rem between stacked fields) was
   removed in v5. The site's own forms (contact page, footer forms,
   blog sidebar form) still use this class for field spacing. */
.form-group {
  margin-bottom: 1rem;
}

/* v4's .form-row was a tighter-gutter variant of .row (5px each side /
   10px between columns) meant for side-by-side form fields - distinct
   from the regular 30px .row gutter above. v5 dropped it; restore it
   exactly so paired fields (e.g. Name + Email) keep their original
   closer spacing instead of inheriting the wider 30px row gutter. */
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

/* v4's .container never grew past 1140px, however wide the screen.
   v5 adds a new 1400px breakpoint with a 1320px cap. Capping it back
   at 1140px keeps every container-based layout at its original v4
   width on large monitors. */
@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1140px;
  }
}