/* ALTİD brand theme: applies the tokens in tokens.css to Bootstrap and to
   the site's own header/footer chrome. Load after Bootstrap and after
   common.css so these rules win on tie specificity. */

:root {
  --bs-body-font-family: var(--altid-font-body);
  --bs-body-color: var(--altid-charcoal);
  --bs-body-bg: var(--altid-sand);
  --bs-primary: var(--altid-navy);
  --bs-primary-rgb: 27, 46, 94;
  --bs-secondary: var(--altid-terracotta);
  --bs-secondary-rgb: 196, 66, 26;
  --bs-link-color: var(--altid-navy);
  --bs-link-color-rgb: 27, 46, 94;
  --bs-link-hover-color: var(--altid-turquoise-dark);
  --bs-link-hover-color-rgb: 20, 123, 160;
}

/* Bootstrap bakes each .btn-* variant's colors as literal hex values
   rather than referencing the root --bs-primary/--bs-secondary scale, so
   the button variants need their own overrides via Bootstrap's per-
   component CSS custom properties. */
.btn-primary {
  --bs-btn-color: var(--altid-sand);
  --bs-btn-bg: var(--altid-navy);
  --bs-btn-border-color: var(--altid-navy);
  --bs-btn-hover-color: var(--altid-sand);
  --bs-btn-hover-bg: var(--altid-navy-dark);
  --bs-btn-hover-border-color: var(--altid-navy-dark);
  --bs-btn-active-bg: var(--altid-navy-dark);
  --bs-btn-active-border-color: var(--altid-navy-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--altid-navy);
  --bs-btn-border-color: var(--altid-navy);
  --bs-btn-hover-color: var(--altid-sand);
  --bs-btn-hover-bg: var(--altid-navy);
  --bs-btn-hover-border-color: var(--altid-navy);
  --bs-btn-active-bg: var(--altid-navy);
  --bs-btn-active-border-color: var(--altid-navy);
}
.btn-secondary {
  --bs-btn-color: var(--altid-sand);
  --bs-btn-bg: var(--altid-terracotta);
  --bs-btn-border-color: var(--altid-terracotta);
  --bs-btn-hover-color: var(--altid-sand);
  --bs-btn-hover-bg: var(--altid-terracotta-dark);
  --bs-btn-hover-border-color: var(--altid-terracotta-dark);
  --bs-btn-active-bg: var(--altid-terracotta-dark);
  --bs-btn-active-border-color: var(--altid-terracotta-dark);
}
.btn-outline-secondary {
  --bs-btn-color: var(--altid-terracotta);
  --bs-btn-border-color: var(--altid-terracotta);
  --bs-btn-hover-color: var(--altid-sand);
  --bs-btn-hover-bg: var(--altid-terracotta);
  --bs-btn-hover-border-color: var(--altid-terracotta);
  --bs-btn-active-bg: var(--altid-terracotta);
  --bs-btn-active-border-color: var(--altid-terracotta);
}

/* Table headers: navy field in place of Bootstrap's near-black
   .table-dark, used site-wide as the <thead>/header row of data tables. */
.table-dark {
  --bs-table-color: var(--altid-sand);
  --bs-table-bg: var(--altid-navy);
  --bs-table-border-color: var(--altid-navy-light);
  --bs-table-striped-bg: var(--altid-navy-dark);
  --bs-table-striped-color: var(--altid-sand);
  --bs-table-active-bg: var(--altid-navy-dark);
  --bs-table-active-color: var(--altid-sand);
  --bs-table-hover-bg: var(--altid-navy-dark);
  --bs-table-hover-color: var(--altid-sand);
}

/* Form input borders: navy instead of Bootstrap's muted default grey, on
   both the resting and focus state (Bootstrap bakes its focus border and
   glow as literal blue hex values, so they need overriding directly). */
.form-control,
.form-select,
.form-check-input,
.input-group-text {
  border-color: var(--altid-navy);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--altid-navy);
  box-shadow: 0 0 0 0.25rem rgba(27, 46, 94, 0.25);
}
.form-check-input:checked {
  background-color: var(--altid-navy);
  border-color: var(--altid-navy);
}

/* Tab borders: navy instead of Bootstrap's muted default grey, on the
   strip's bottom rule and on each tab's inactive/active/hover edges. */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--altid-navy);
  --bs-nav-tabs-link-hover-border-color: var(--altid-navy-light) var(--altid-navy-light) var(--altid-navy);
  --bs-nav-tabs-link-active-border-color: var(--altid-navy) var(--altid-navy) var(--bs-body-bg);
}

h1, h2, h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--altid-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--altid-navy);
}

/* Header navbar: Aegean Sand field (so the full-color woodcut logo reads
   cleanly) with navy wordmark and links, in place of the generic
   Bootstrap navbar-light/bg-light pairing. */
.navbar-altid {
  background-color: var(--altid-sand);
}
.navbar-altid .navbar-brand {
  padding: 0;
  margin-right: .25rem;
  align-self: flex-end;
}
.navbar-altid .navbar-brand-title {
  height: 56px;
  align-self: flex-end;
  font-family: var(--altid-font-display);
  color: var(--altid-navy);
}
.navbar-altid .navbar-brand-title-main {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}
.navbar-altid .navbar-brand-title-sub {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  /* Compensates the font's below-baseline leading so the visible glyph
     bottom lands on the logo's bottom edge, not just the line box. */
  transform: translateY(4px);
}
.navbar-altid .nav-link {
  color: var(--altid-navy);
}
.navbar-altid .nav-link:hover,
.navbar-altid .nav-link:focus {
  color: var(--altid-turquoise-dark);
}
.navbar-altid .dropdown-menu {
  --bs-dropdown-link-active-bg: var(--altid-turquoise);
}
.navbar-altid .btn,
.navbar-altid .dropdown-toggle {
  color: var(--altid-navy);
}
.navbar-altid .btn:hover,
.navbar-altid .dropdown-toggle:hover {
  color: var(--altid-turquoise-dark);
}

/* Breadcrumb: quiet navy-tinted trail instead of plain grey. */
.breadcrumb-item a {
  color: var(--altid-navy-light);
}
.breadcrumb-item.active {
  color: var(--altid-charcoal);
}

/* Footer: charcoal field to bookend the navy header. */
.footer-altid {
  background-color: var(--altid-charcoal);
  color: var(--altid-sand);
}
.footer-altid a {
  color: var(--altid-sand);
}
.footer-altid a:hover,
.footer-altid a:focus {
  color: var(--altid-turquoise-light);
}