/* ============================================================
   GrantAffinity — application theme.

   Layers on top of tokens.css. Bootstrap's own CSS variables are remapped to
   the brand palette here, so utilities (.bg-primary, .text-primary, .badge,
   .bg-info …) pick up the identity without touching every template.

   --brand-primary / -dark / -light are injected per-tenant in base.html from
   branding.toml; they default to the GrantAffinity navy.
   ============================================================ */

:root {
  /* Bootstrap remap — theme colors */
  --bs-primary: var(--brand-primary, var(--ga-navy));
  --bs-info: var(--ga-blue-light);
  --bs-info-rgb: 91, 157, 245;
  --bs-success: var(--ga-green);
  --bs-success-rgb: 47, 143, 87;
  --bs-secondary: var(--ga-text);
  --bs-secondary-rgb: 89, 100, 123;

  /* Bootstrap remap — surfaces & type */
  --bs-body-font-family: var(--ga-font-ui);
  --bs-body-font-size: var(--ga-text-base);
  --bs-body-color: var(--ga-ink);
  --bs-body-bg: var(--ga-paper);
  --bs-border-color: var(--ga-border);
  --bs-border-radius: var(--ga-radius-md);
  --bs-border-radius-sm: var(--ga-radius-sm);
  --bs-border-radius-lg: var(--ga-radius-lg);
  --bs-link-color: var(--ga-blue);
  --bs-link-hover-color: var(--ga-navy);
}

body {
  background-color: var(--ga-paper);
  color: var(--ga-ink);
  font-family: var(--ga-font-ui);
}

/* --- Typography: display face for headings, tightened at large sizes --- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--ga-font-brand);
  font-weight: var(--ga-weight-semibold);
  color: var(--ga-ink);
}
h1, h2, .h1, .h2,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  letter-spacing: -0.02em;
}

/* Page titles sit a notch below the navbar wordmark (25px) so the brand lockup
   reads as the largest text on the page, while staying above section
   sub-headings (h5/h6, ≤20px). Page titles use h2/h3 or the .h3/.h4 utility;
   the bare <h4> faculty name and h5/h6 section headers are left untouched. */
h2, h3, .h2, .h3, .h4 {
  font-size: 1.375rem;
}
.lead { color: var(--ga-text); }
.text-muted { color: var(--ga-text-muted) !important; }

/* --- Navbar --- */
.navbar {
  background-color: var(--brand-primary, var(--ga-navy)) !important;
}
.navbar .nav-link { color: var(--ga-on-navy-muted); }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--ga-on-navy); }
.navbar-brand { padding-top: 0.35rem; padding-bottom: 0.35rem; }

/* --- Cards --- */
.card {
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-xl);
  box-shadow: var(--ga-shadow-card);
  background-color: var(--ga-surface);
}
.card-header {
  background-color: var(--ga-tint);
  border-bottom: 1px solid var(--ga-border);
  font-family: var(--ga-font-brand);
  font-weight: var(--ga-weight-semibold);
  border-top-left-radius: calc(var(--ga-radius-xl) - 1px);
  border-top-right-radius: calc(var(--ga-radius-xl) - 1px);
}

/* --- Buttons (Bootstrap compiles literals, so set them explicitly) --- */
.btn { border-radius: var(--ga-radius-sm); font-weight: var(--ga-weight-medium); }
.btn-primary {
  --bs-btn-bg: var(--brand-primary, var(--ga-navy));
  --bs-btn-border-color: var(--brand-primary, var(--ga-navy));
  --bs-btn-hover-bg: var(--brand-primary-dark, var(--ga-navy-deep));
  --bs-btn-hover-border-color: var(--brand-primary-dark, var(--ga-navy-deep));
  --bs-btn-active-bg: var(--ga-navy-deep);
  --bs-btn-active-border-color: var(--ga-navy-deep);
  --bs-btn-disabled-bg: var(--brand-primary, var(--ga-navy));
  --bs-btn-disabled-border-color: var(--brand-primary, var(--ga-navy));
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary, var(--ga-navy));
  --bs-btn-border-color: var(--brand-primary, var(--ga-navy));
  --bs-btn-hover-bg: var(--brand-primary, var(--ga-navy));
  --bs-btn-hover-border-color: var(--brand-primary, var(--ga-navy));
  --bs-btn-active-bg: var(--ga-navy-deep);
  --bs-btn-active-border-color: var(--ga-navy-deep);
}

/* Focus ring uses the interactive blue. */
.btn:focus-visible, .form-control:focus, .form-select:focus {
  border-color: var(--ga-blue);
  box-shadow: 0 0 0 0.2rem rgba(47, 95, 208, 0.25);
}

/* --- Forms --- */
.form-control, .form-select { border-radius: var(--ga-radius-sm); border-color: var(--ga-border); }
.form-label { color: var(--ga-ink); }

/* --- Badges & pills --- */
.badge { border-radius: var(--ga-radius-pill); font-weight: var(--ga-weight-medium); }
.keyword-badge { font-size: var(--ga-text-xs); margin: 1px; }
.badge-dept { font-size: 0.7rem; }
/* Accent badge — the "match" highlight from the brand guide. */
.badge-accent {
  background-color: var(--ga-blue-light);
  color: var(--ga-ink);
}

/* --- Stat tiles --- */
.stat-card { text-align: center; padding: var(--ga-space-5); }
.stat-card .stat-number {
  font-family: var(--ga-font-brand);
  font-size: var(--ga-text-2xl);
  font-weight: var(--ga-weight-bold);
  letter-spacing: -0.02em;
  color: var(--brand-primary, var(--ga-navy));
}
.stat-card .stat-label { color: var(--ga-text-muted); font-size: var(--ga-text-sm); }

/* --- Match score bar: navy -> success green --- */
.score-bar {
  height: 8px;
  background-color: var(--ga-border);
  border-radius: var(--ga-radius-pill);
  overflow: hidden;
}
.score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ga-navy), var(--ga-green));
  border-radius: var(--ga-radius-pill);
}

.match-card { transition: transform 0.1s, box-shadow 0.1s; }
.match-card:hover { transform: translateY(-2px); box-shadow: var(--ga-shadow-pop); }

.progress-text { font-size: var(--ga-text-sm); color: var(--ga-text-muted); }

/* --- Links --- */
a { color: var(--ga-blue); }
a:hover { color: var(--ga-navy); }
.navbar a, .btn, .card-header a { text-decoration-color: transparent; }

/* --- Dropdowns / popovers --- */
.dropdown-menu {
  border-radius: var(--ga-radius-md);
  border-color: var(--ga-border);
  box-shadow: var(--ga-shadow-pop);
}

/* --- Alerts --- */
.alert { border-radius: var(--ga-radius-md); }

/* --- Tables --- */
.table { --bs-table-border-color: var(--ga-border); }
.table > thead { color: var(--ga-text); }

/* Rendered markdown grant descriptions (e.g. InfoReady). */
.grant-description > :first-child { margin-top: 0; }
.grant-description > :last-child { margin-bottom: 0; }
.grant-description h1, .grant-description h2, .grant-description h3,
.grant-description h4, .grant-description h5, .grant-description h6 {
    font-size: 1.05rem;
    font-weight: var(--ga-weight-semibold);
    margin-top: 1rem;
}
.grant-description table {
    width: 100%;
    margin: 0.75rem 0;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.grant-description th, .grant-description td {
    border: 1px solid var(--ga-border);
    padding: 0.4rem 0.6rem;
    text-align: left;
}
.grant-description th { background: var(--ga-paper); }