/* ==========================================================================
   ArtCraft Welding — custom grid/utility stylesheet
   Replaces bootstrap.min.css (v4.4.1, ~144KB) with only the rules this
   site actually uses: the 12-col grid, a handful of flex/display/spacing
   utilities, buttons, and basic form controls. No Bootstrap JS is used
   anywhere on the site, so none of that is needed either.
   Behavior/output matches Bootstrap 4.4.1 exactly for every class below —
   this is a subset, not a redesign. Breakpoints: sm 576px, md 768px,
   lg 992px, xl 1200px (same as Bootstrap 4).
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

/* --- Grid: container -------------------------------------------------- */

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

/* --- Grid: row ---------------------------------------------------------- */

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* --- Grid: columns ------------------------------------------------------ */

.col,
.col-auto,
.col-5, .col-12,
.col-sm-6,
.col-md-3, .col-md-4, .col-md-6, .col-md-8,
.col-lg, .col-lg-auto,
.col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-12 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-5    { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-12   { flex: 0 0 100%;       max-width: 100%; }

@media (min-width: 576px) {
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}

@media (min-width: 768px) {
  .col-md-3 { flex: 0 0 25%;        max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-6 { flex: 0 0 50%;        max-width: 50%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .offset-md-3 { margin-left: 25%; }
}

@media (min-width: 992px) {
  .col-lg      { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  .col-lg-3    { flex: 0 0 25%;        max-width: 25%; }
  .col-lg-4    { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5    { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6    { flex: 0 0 50%;        max-width: 50%; }
  .col-lg-7    { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-12   { flex: 0 0 100%;       max-width: 100%; }
  .offset-lg-0 { margin-left: 0; }
  .offset-lg-2 { margin-left: 16.666667%; }
}

/* --- Display utilities --------------------------------------------------- */

.d-none  { display: none !important; }
.d-block { display: block !important; }
.d-flex  { display: flex !important; }

@media (min-width: 768px) {
  .d-md-flex { display: flex !important; }
}

@media (min-width: 992px) {
  .d-lg-none  { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex  { display: flex !important; }
}

@media (min-width: 1200px) {
  .d-xl-none  { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex  { display: flex !important; }
}

/* --- Flex alignment utilities --------------------------------------------- */

.align-items-center     { align-items: center !important; }
.align-items-end        { align-items: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end    { justify-content: flex-end !important; }

@media (min-width: 992px) {
  .align-items-lg-center     { align-items: center !important; }
  .justify-content-lg-end    { justify-content: flex-end !important; }
}

/* --- Spacing utilities (Bootstrap's default spacer scale) ---------------- */
/* 1 = .25rem, 2 = .5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem                    */

.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.pb-2 { padding-bottom: .5rem !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pt-5 { padding-top: 3rem !important; }

.px-3 { padding-left: 1rem !important;   padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-3 { padding-top: 1rem !important;    padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important;  padding-bottom: 1.5rem !important; }

@media (min-width: 992px) {
  .mb-lg-0    { margin-bottom: 0 !important; }
  .mb-lg-2    { margin-bottom: .5rem !important; }
  .mt-lg-0    { margin-top: 0 !important; }
  .mr-lg-4    { margin-right: 1.5rem !important; }
  .pl-lg-3    { padding-left: 1rem !important; }
  .pl-lg-4    { padding-left: 1.5rem !important; }
  .pr-lg-3    { padding-right: 1rem !important; }
  .pr-lg-4    { padding-right: 1.5rem !important; }
  .py-lg-3    { padding-top: 1rem !important; padding-bottom: 1rem !important; }
}

/* --- Text utilities -------------------------------------------------------- */

.text-center { text-align: center !important; }

@media (min-width: 992px) {
  .text-lg-left { text-align: left !important; }
}

/* --- Misc utilities ---------------------------------------------------- */

.float-right { float: right !important; }
.rounded-0   { border-radius: 0 !important; }
.border-top  { border-top: 1px solid #dee2e6 !important; }

.img-fluid {
  max-width: 100%;
  height: auto;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out,
              border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}

.btn-lg {
  padding: .5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: .3rem;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

/* --- Forms ----------------------------------------------------------------- */

.form-group {
  margin-bottom: 1rem;
}

.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}