/*
 * Preserve the Bootstrap 4-era rendering expected by this theme while the
 * bundled framework is kept on Bootstrap 5. Theme styles load after this
 * file and can continue to override these compatibility defaults.
 */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  line-height: 1.1;
}

h1,
.h1 {
  font-size: 2.5rem;
}

h2,
.h2 {
  font-size: 2rem;
}

h3,
.h3 {
  font-size: 1.75rem;
}

h4,
.h4 {
  font-size: 1.5rem;
}

h5,
.h5 {
  font-size: 1.25rem;
}

h6,
.h6 {
  font-size: 1rem;
}

/* Bootstrap 4 used a 30px grid gutter and positioned columns relatively. */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.row {
  --bs-gutter-x: 30px;
}

:is(.col, [class^="col-"], [class*=" col-"]) {
  position: relative;
  max-width: var(--vogelpark-bootstrap-4-column-width, 100%);
  padding-right: 15px;
  padding-left: 15px;
}

.row > :where(.col, [class^="col-"], [class*=" col-"]) {
  max-width: var(--vogelpark-bootstrap-4-column-width, 100%);
  margin-top: 0;
}

/*
 * Bootstrap 5 applies column sizing to every direct child of .row. Several
 * existing theme layouts intentionally put custom flex items directly in a
 * row, so restore the Bootstrap 4 behaviour for non-column children.
 */
.row > :where(:not(.col):not([class^="col-"]):not([class*=" col-"])) {
  flex-shrink: 1;
  width: auto;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
  margin-top: 0;
}

/* Bootstrap 4 constrained responsive columns with max-width as well as flex. */
@media (min-width: 576px) {
  .col-sm-1 { --vogelpark-bootstrap-4-column-width: 8.333333%; }
  .col-sm-2 { --vogelpark-bootstrap-4-column-width: 16.666667%; }
  .col-sm-3 { --vogelpark-bootstrap-4-column-width: 25%; }
  .col-sm-4 { --vogelpark-bootstrap-4-column-width: 33.333333%; }
  .col-sm-5 { --vogelpark-bootstrap-4-column-width: 41.666667%; }
  .col-sm-6 { --vogelpark-bootstrap-4-column-width: 50%; }
  .col-sm-7 { --vogelpark-bootstrap-4-column-width: 58.333333%; }
  .col-sm-8 { --vogelpark-bootstrap-4-column-width: 66.666667%; }
  .col-sm-9 { --vogelpark-bootstrap-4-column-width: 75%; }
  .col-sm-10 { --vogelpark-bootstrap-4-column-width: 83.333333%; }
  .col-sm-11 { --vogelpark-bootstrap-4-column-width: 91.666667%; }
  .col-sm-12 { --vogelpark-bootstrap-4-column-width: 100%; }
}

@media (min-width: 768px) {
  .col-md-1 { --vogelpark-bootstrap-4-column-width: 8.333333%; }
  .col-md-2 { --vogelpark-bootstrap-4-column-width: 16.666667%; }
  .col-md-3 { --vogelpark-bootstrap-4-column-width: 25%; }
  .col-md-4 { --vogelpark-bootstrap-4-column-width: 33.333333%; }
  .col-md-5 { --vogelpark-bootstrap-4-column-width: 41.666667%; }
  .col-md-6 { --vogelpark-bootstrap-4-column-width: 50%; }
  .col-md-7 { --vogelpark-bootstrap-4-column-width: 58.333333%; }
  .col-md-8 { --vogelpark-bootstrap-4-column-width: 66.666667%; }
  .col-md-9 { --vogelpark-bootstrap-4-column-width: 75%; }
  .col-md-10 { --vogelpark-bootstrap-4-column-width: 83.333333%; }
  .col-md-11 { --vogelpark-bootstrap-4-column-width: 91.666667%; }
  .col-md-12 { --vogelpark-bootstrap-4-column-width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-1 { --vogelpark-bootstrap-4-column-width: 8.333333%; }
  .col-lg-2 { --vogelpark-bootstrap-4-column-width: 16.666667%; }
  .col-lg-3 { --vogelpark-bootstrap-4-column-width: 25%; }
  .col-lg-4 { --vogelpark-bootstrap-4-column-width: 33.333333%; }
  .col-lg-5 { --vogelpark-bootstrap-4-column-width: 41.666667%; }
  .col-lg-6 { --vogelpark-bootstrap-4-column-width: 50%; }
  .col-lg-7 { --vogelpark-bootstrap-4-column-width: 58.333333%; }
  .col-lg-8 { --vogelpark-bootstrap-4-column-width: 66.666667%; }
  .col-lg-9 { --vogelpark-bootstrap-4-column-width: 75%; }
  .col-lg-10 { --vogelpark-bootstrap-4-column-width: 83.333333%; }
  .col-lg-11 { --vogelpark-bootstrap-4-column-width: 91.666667%; }
  .col-lg-12 { --vogelpark-bootstrap-4-column-width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl-1 { --vogelpark-bootstrap-4-column-width: 8.333333%; }
  .col-xl-2 { --vogelpark-bootstrap-4-column-width: 16.666667%; }
  .col-xl-3 { --vogelpark-bootstrap-4-column-width: 25%; }
  .col-xl-4 { --vogelpark-bootstrap-4-column-width: 33.333333%; }
  .col-xl-5 { --vogelpark-bootstrap-4-column-width: 41.666667%; }
  .col-xl-6 { --vogelpark-bootstrap-4-column-width: 50%; }
  .col-xl-7 { --vogelpark-bootstrap-4-column-width: 58.333333%; }
  .col-xl-8 { --vogelpark-bootstrap-4-column-width: 66.666667%; }
  .col-xl-9 { --vogelpark-bootstrap-4-column-width: 75%; }
  .col-xl-10 { --vogelpark-bootstrap-4-column-width: 83.333333%; }
  .col-xl-11 { --vogelpark-bootstrap-4-column-width: 91.666667%; }
  .col-xl-12 { --vogelpark-bootstrap-4-column-width: 100%; }
}

/* Restore Bootstrap 4 Reboot defaults changed in Bootstrap 5. */
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 1;
}

label {
  margin-bottom: 0.5rem;
}

ol,
ul {
  padding-left: 0;
}

/* Keep the Bootstrap 4-era 80% small text instead of Bootstrap 5's .875em. */
small,
.small {
  font-size: 80%;
  font-weight: normal;
}

/*
 * Keep the Bootstrap 4.0.0-beta control metrics used by MW WP Form.
 * This prevents the dependency update from changing field heights, textarea
 * wrapping, button alignment, border colour, or the focus treatment.
 */
.form-control {
  height: auto;
  padding: 0.5rem 0.75rem;
  line-height: 1.25;
  color: #495057;
  border-color: rgba(0, 0, 0, 0.15);
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  box-shadow: none;
}

.form-control::placeholder {
  color: #868e96;
  opacity: 1;
}

select.form-control:not([size]):not([multiple]) {
  height: calc(2.25rem + 2px);
}

.btn {
  padding: 0.5rem 0.75rem;
  line-height: 1.25;
  border-radius: 0.25rem;
}

.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-success:focus,
.btn-success.focus {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

.btn-success.disabled,
.btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}