/* ==========================================================================
   bs3-compat.css
   Bootstrap 3 look/feel shim for AskALibrarian running Bootstrap 5
   - Restores BS3-ish container widths
   - Restores .well / .well-sm / .well-lg styling
   - Provides a simple .jumbotron look
   - Adds a few common legacy helpers used in older markup
   ========================================================================== */

/* --- 1) Container widths: match Bootstrap 3 (approx 750/970/1170) --- */
@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

/* --- 2) Wells: Bootstrap 3 "well" look --- */
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;

  /* BS3 had a subtle inset feel */
  box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

.well-sm {
  padding: 9px;
  border-radius: 3px;
}

.well-lg {
  padding: 24px;
  border-radius: 6px;
}

/* --- 3) Jumbotron: BS3-ish feel (BS5 doesn't have it) --- */
.jumbotron {
  padding: 30px;
  margin-bottom: 30px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
}

@media (min-width: 768px) {
  .jumbotron { padding: 48px; }
}

/* --- 4) Common BS3 image helpers (if any legacy classes remain) --- */
.img-responsive,
.img-fluid { /* keep safe */
  max-width: 100%;
  height: auto;
}

.img-circle,
.rounded-circle {
  border-radius: 50%;
}

/* --- 5) Legacy alignment helpers that often appear in BS3 markup --- */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }

.text-right { text-align: right !important; }
.text-left  { text-align: left !important; }

/* --- 6) Optional: mimic BS3 button default class if it still exists in markup --- */
.btn-default {
  /* map to a neutral button look similar to BS3 default */
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
}

.btn-default:hover,
.btn-default:focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

/* --- 7) Optional: older alert-info feel (BS3 was lighter + bordered) --- */
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
/* Fix BS5 modal header: keep X on the right like Bootstrap 3 */
.modal-header .btn-close { 
  order: 2; 
  margin-left: auto; 
}
.modal-header .modal-title { 
  order: 1; 
  flex: 1 1 auto; 
  text-align: center; 
}