:root {
  --brand-navy: #17233f;
  --brand-blue: #2596ea;
  --brand-blue-dark: #1c7bc4;
  --brand-gray: #6d7b8d;
}

.text-primary {
  color: var(--brand-navy) !important;
}

body {
  color: var(--brand-navy);
}

.text-brand-blue {
  color: var(--brand-blue) !important;
}

.text-brand-gray {
  color: var(--brand-gray) !important;
}

.bg-brand-navy {
  background-color: var(--brand-navy);
}

.btn-brand-blue {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

.btn-brand-blue:hover {
  background-color: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  color: #fff;
}

.navbar-nav .nav-link {
  color: var(--brand-navy) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--brand-blue) !important;
}

.dropdown-menu .dropdown-item:hover {
  color: var(--brand-blue) !important;
}

/* Clears the fixed header (mobile content height ~51px, desktop ~69px)
   with modest breathing room, not the wide gap the earlier values left. */
.page-content {
  padding-top: 80px;
}

@media (min-width: 992px) {
  .page-content {
    padding-top: 96px;
  }
}

/* Listing card's name/trade column — full width when stacked on mobile,
   fixed width once the card goes horizontal at md+ so every card lines up. */
.listing-card-name {
  width: 100%;
}

@media (min-width: 768px) {
  .listing-card-name {
    flex: 0 0 220px;
    width: 220px;
    overflow: hidden;
  }
}

/* Contrasts an accordion against a white section background — Bootstrap's
   accordion pieces read this variable internally, so overriding it here
   cascades to every accordion-item/button/body without touching each one. */
.accordion-bg-light {
  --bs-accordion-bg: var(--bs-light);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}