/*
 * WalkTheLot Inventory Branding
 *
 * Bootstrap remains the presentation foundation.
 * Keep this file limited to brand colors and branded
 * header/footer treatment.
 */

:root,
[data-bs-theme="light"] {
  --wtl-blue: #379bc9;
  --wtl-blue-hover: #2f8ab3;
  --wtl-dark: #323232;
  --wtl-dark-deep: #272727;
  --wtl-muted: #909090;
  --wtl-light: #f6f6f6;

  /*
     * Bootstrap brand overrides
     */
  --bs-primary: #379bc9;
  --bs-primary-rgb: 55, 155, 201;

  --bs-link-color: #379bc9;
  --bs-link-color-rgb: 55, 155, 201;

  --bs-link-hover-color: #2f8ab3;
  --bs-link-hover-color-rgb: 47, 138, 179;

  --bs-focus-ring-color: rgba(55, 155, 201, 0.25);
}

/*
 * Links
 */

a {
  color: var(--wtl-blue);
}

a:hover {
  color: var(--wtl-blue-hover);
}

/*
 * Primary buttons
 */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #379bc9;
  --bs-btn-border-color: #379bc9;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2f8ab3;
  --bs-btn-hover-border-color: #2f8ab3;

  --bs-btn-focus-shadow-rgb: 55, 155, 201;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2a7da3;
  --bs-btn-active-border-color: #2a7da3;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #379bc9;
  --bs-btn-disabled-border-color: #379bc9;
}

.btn-outline-primary {
  --bs-btn-color: #379bc9;
  --bs-btn-border-color: #379bc9;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #379bc9;
  --bs-btn-hover-border-color: #379bc9;

  --bs-btn-focus-shadow-rgb: 55, 155, 201;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #379bc9;
  --bs-btn-active-border-color: #379bc9;

  --bs-btn-disabled-color: #379bc9;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #379bc9;
}

/*
 * Forms
 */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: rgba(55, 155, 201, 0.75);
  box-shadow: 0 0 0 0.25rem rgba(55, 155, 201, 0.18);
}

.form-check-input:checked {
  background-color: var(--wtl-blue);
  border-color: var(--wtl-blue);
}

/*
 * Pagination
 */

.pagination {
  --bs-pagination-active-bg: #379bc9;
  --bs-pagination-active-border-color: #379bc9;

  --bs-pagination-hover-color: #2f8ab3;
  --bs-pagination-focus-color: #2f8ab3;

  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(55, 155, 201, 0.18);
}

/*
 * Header
 */

.site-header {
  background-color: var(--wtl-dark);
  border-bottom: 2px solid var(--wtl-blue);
}

.site-header .container {
  min-height: 72px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  color: #fff;
}

.site-brand:hover {
  color: #fff;
}

.site-logo {
  display: block;
  width: 225px;
  max-width: 100%;
  height: auto;
}

.site-header .text-body-secondary {
  color: rgba(255, 255, 255, 0.72) !important;
}

.site-header .btn-outline-secondary {
  --bs-btn-color: rgba(255, 255, 255, 0.88);
  --bs-btn-border-color: rgba(255, 255, 255, 0.38);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--wtl-blue);
  --bs-btn-hover-border-color: var(--wtl-blue);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--wtl-blue);
  --bs-btn-active-border-color: var(--wtl-blue);

  --bs-btn-focus-shadow-rgb: 55, 155, 201;
}

/*
 * Mobile inventory filter toggle
 */

.btn-outline-primary[data-bs-toggle="collapse"][aria-expanded="true"] {
  color: #fff;
  background-color: var(--wtl-blue);
  border-color: var(--wtl-blue);
}

/*
 * Footer
 */

.site-footer {
  background-color: var(--wtl-dark-deep);
  color: var(--wtl-muted);
}

.site-footer-logo {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
}

.site-footer a {
  color: #b8b8b8;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--wtl-blue);
}

.site-footer-divider {
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #a6a6a6;
}

.site-footer-description {
  color: #b5b5b5;
}

/*
 * Mobile
 */

@media (max-width: 575.98px) {
  .site-header .container {
    min-height: 64px;
  }

  .site-logo {
    width: 185px;
  }

  .site-footer-logo {
    width: 175px;
  }
}