/* ============================================================
   Trackd brand — loaded alongside site.css on every page.
   Light-only marketing-site palette. Overrides Bootstrap blues.
   ============================================================ */

:root {
  --trackd-navy:    #0b3d63;
  --trackd-cream:   #f2ede3;
  --trackd-orange:  #e8562f;
  --trackd-surface: #e6ded0;
  --trackd-navy-hover: #0a3555;
}

/* ---- Page background: warm cream instead of white ---- */
body {
  background-color: var(--trackd-cream);
  color: var(--trackd-navy);
}

/* ---- Header / footer ---- */
.bg-trackd-navy { background-color: var(--trackd-navy) !important; }

.navbar-brand strong,
.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand strong { color: var(--trackd-cream) !important; }

.nav-link-trackd {
  color: var(--trackd-cream);
  text-decoration: none;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.nav-link-trackd:hover { color: var(--trackd-cream); opacity: 1; text-decoration: underline; }

.footer-links a { font-weight: 500; }
.footer-sep    { color: var(--trackd-cream); opacity: 0.5; margin: 0 6px; }
.footer-copy   { color: var(--trackd-cream); opacity: 0.6; font-size: 0.85rem; }

/* ---- Headings in brand navy ---- */
h1, h2, h3, h4, h5 { color: var(--trackd-navy); }

/* ---- Buttons: navy fill, cream text (replaces Bootstrap primary blue) ---- */
.btn-primary {
  background-color: var(--trackd-navy);
  border-color: var(--trackd-navy);
  color: var(--trackd-cream);
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--trackd-navy-hover) !important;
  border-color: var(--trackd-navy-hover) !important;
  color: var(--trackd-cream) !important;
}

/* ---- Hero band: off-cream surface with an orange accent divider ---- */
.container-jumbotron {
  background: var(--trackd-surface);
  border-bottom: 4px solid var(--trackd-orange);
}

/* ---- Cards / panels: cream surface instead of plain white ---- */
.card, .bg-white { background-color: var(--trackd-surface) !important; }
.card { border: none; }

/* Bootstrap's bg-light sections -> cream so they blend with the page */
.bg-light { background-color: var(--trackd-cream) !important; }

/* ---- Step number badges in guides (were Bootstrap blue) ---- */
.step-number, .step-badge {
  background-color: var(--trackd-navy) !important;
  color: var(--trackd-cream) !important;
}

/* ---- Muted text: navy at reduced opacity rather than grey ---- */
.text-muted { color: rgba(11, 61, 99, 0.65) !important; }

/* ---- Info alert (tracks page) tinted to brand rather than Bootstrap cyan ---- */
.alert-info {
  background-color: var(--trackd-surface);
  border-color: rgba(11, 61, 99, 0.2);
  color: var(--trackd-navy);
}

/* ---- Highlight accent using the stopwatch orange ---- */
.text-trackd-accent { color: var(--trackd-orange) !important; }
.bg-trackd-accent   { background-color: var(--trackd-orange) !important; color: #fff !important; }

/* ---- Form inputs: surface fill, subtle navy border, navy text ---- */
.form-control {
  background-color: var(--trackd-surface);
  border: 1px solid rgba(11, 61, 99, 0.25);
  color: var(--trackd-navy);
  border-radius: 8px;
}
.form-control::placeholder { color: rgba(11, 61, 99, 0.5); }
.form-control:focus {
  background-color: var(--trackd-surface);
  border-color: var(--trackd-navy);
  color: var(--trackd-navy);
  box-shadow: 0 0 0 0.2rem rgba(11, 61, 99, 0.15);
}
.form-label { color: var(--trackd-navy); font-weight: 600; }

/* ---- Policy links on contact page (were text-dark) ---- */
.text-dark { color: var(--trackd-navy) !important; }

/* ---- Message/loader box rebrand ---- */
#message h2 { color: var(--trackd-orange); }
#message a  { background: var(--trackd-navy); }