/* Vanguard Geothermal brand, applied to the catalogue.
 *
 * From Brand Toolbox v1.0 (September 2026), which condenses Brand Guidelines
 * v1.0 -- the authority where this file is silent. Three rules from that
 * document shape everything below, and are the ones easiest to break by
 * accident:
 *
 *   One colour dominates. Navy and white carry the layout. Orange is an accent
 *   and never a wash: "one element per slide or page", never an orange heading,
 *   orange body text or an orange background. So `--bs-primary` is navy here,
 *   not orange, and the orange is spent on things that are singular by nature --
 *   the focused control, the active nav item, an explicitly marked accent.
 *
 *   Two typefaces. Rajdhani for headings, labels and numbers; Inter for body,
 *   tables and captions. Never Light, no italics for emphasis, headings in
 *   sentence case.
 *
 *   Slate is secondary text; Rule is hairlines and table rules. Neither is a
 *   body colour.
 *
 * Bootstrap 5.3 reads its own `--bs-*` custom properties, so overriding those
 * re-skins every component at once rather than chasing each one.
 */

:root {
  /* --- Palette (Toolbox p.2) ------------------------------------------- */
  --vg-navy: #0B1220;         /* backgrounds, headings, body text on light */
  --vg-orange: #FF6900;       /* accent only: one element per page          */
  --vg-slate: #64748B;        /* secondary text, captions                   */
  --vg-panel-navy: #0F172A;   /* section dividers, dark panels and cards    */
  --vg-rule: #CAD5E2;         /* hairlines, table rules, muted text         */

  /* Not brand colours: the page needs a surface and a ground so a white card
     reads as a card. The ground is a faint tint of Rule rather than Bootstrap's
     grey, so nothing off-palette creeps in. */
  --vg-surface: #FFFFFF;
  --vg-canvas: #F5F7FA;

  --vg-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --vg-display: 'Rajdhani', 'Inter', system-ui, Arial, sans-serif;

  /* --- Bootstrap, re-pointed ------------------------------------------- */
  --bs-body-font-family: var(--vg-sans);
  --bs-body-color: var(--vg-navy);
  --bs-body-bg: var(--vg-canvas);
  --bs-emphasis-color: var(--vg-navy);
  --bs-secondary-color: var(--vg-slate);
  --bs-tertiary-color: var(--vg-slate);
  --bs-border-color: var(--vg-rule);
  --bs-border-color-translucent: var(--vg-rule);

  --bs-primary: var(--vg-navy);
  --bs-primary-rgb: 11, 18, 32;

  /* A link is not the page's one accent -- there are many -- so links are navy
     and take the orange only on hover, which is momentary and singular. */
  --bs-link-color: var(--vg-navy);
  --bs-link-color-rgb: 11, 18, 32;
  --bs-link-hover-color: var(--vg-orange);
  --bs-link-hover-color-rgb: 255, 105, 0;
}

body {
  font-family: var(--vg-sans);
  color: var(--vg-navy);
  background-color: var(--vg-canvas);
  /* Never Light: 400 is the floor. */
  font-weight: 400;
}

/* --- Type ------------------------------------------------------------- */
/* Rajdhani for headings, labels and numbers. Sentence case is a writing rule,
   not a CSS one, so nothing here uppercases a heading; the one place caps are
   wanted is the tracked label below, which asks for them explicitly. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand, .card-title, .display-1, .display-2, .display-3 {
  font-family: var(--vg-display);
  font-weight: 700;
  color: var(--vg-navy);
  letter-spacing: .01em;
}

/* "No italics for emphasis; use Semibold." Scoped to <em> deliberately: <i> is
   how Bootstrap Icons are marked up all over this app, and restyling that would
   reach the icons rather than the prose. */
em {
  font-style: normal;
  font-weight: 600;
}

/* A tracked capital label: Rajdhani Bold, orange or slate (Toolbox p.3). */
.label-caps {
  font-family: var(--vg-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--vg-slate);
  font-size: .78rem;
}
.label-caps.label-accent { color: var(--vg-orange); }

/* Numbers are display type -- the front page's catalogue counts, run numbers,
   any figure meant to be read at a glance. */
.stat-number, .vg-number {
  font-family: var(--vg-display);
  font-weight: 700;
  color: var(--vg-navy);
  font-variant-numeric: tabular-nums;
}

.text-muted, .form-text, .text-secondary, small.text-muted {
  color: var(--vg-slate) !important;
}

/* --- The one accent ---------------------------------------------------- */
/* Orange is spent here and nowhere else by default. Both of these are singular
   by construction: one control has focus, one nav item is active. */
:focus-visible {
  outline: 2px solid var(--vg-orange);
  outline-offset: 2px;
  box-shadow: none;
}
.navbar .nav-link.active {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--vg-orange);
}

/* Deliberate accent, where a page wants its single orange element. */
.text-accent { color: var(--vg-orange) !important; }
.btn-accent {
  --bs-btn-bg: var(--vg-orange);
  --bs-btn-border-color: var(--vg-orange);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #E65F00;
  --bs-btn-hover-border-color: #E65F00;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #CC5400;
  --bs-btn-active-border-color: #CC5400;
  --bs-btn-active-color: #fff;
}

/* --- Navigation -------------------------------------------------------- */
.navbar.bg-dark {
  background-color: var(--vg-navy) !important;
  border-bottom: 1px solid var(--vg-panel-navy);
}
.navbar-brand {
  font-family: var(--vg-display);
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  /* Clear space: the brand asks for the height of the orange chevron on every
     side of the mark. That chevron is 22 of the icon's 109 units, so at a 28px
     mark it is about 6px -- the gap and the padding here both clear it. */
  gap: .6rem;
  padding-block: .4rem;
}
.navbar-brand:hover, .navbar-brand:focus { color: #fff; }
.navbar-brand .vg-mark { display: block; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, .82); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: #fff; }
.dropdown-menu { border-color: var(--vg-rule); }

/* --- Buttons ----------------------------------------------------------- */
/* Primary is navy, not orange: a page usually has several primary buttons and
   orange is allowed once. */
.btn-primary {
  --bs-btn-bg: var(--vg-navy);
  --bs-btn-border-color: var(--vg-navy);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--vg-panel-navy);
  --bs-btn-hover-border-color: var(--vg-panel-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #060B14;
  --bs-btn-active-border-color: #060B14;
  --bs-btn-disabled-bg: var(--vg-slate);
  --bs-btn-disabled-border-color: var(--vg-slate);
}
.btn-outline-secondary {
  --bs-btn-color: var(--vg-slate);
  --bs-btn-border-color: var(--vg-rule);
  --bs-btn-hover-bg: var(--vg-navy);
  --bs-btn-hover-border-color: var(--vg-navy);
  --bs-btn-hover-color: #fff;
}

/* --- Tables ------------------------------------------------------------ */
/* "Table header: Rajdhani Bold, white on navy" (Toolbox p.3). */
.table th {
  background-color: var(--vg-navy);
  color: #fff;
  font-family: var(--vg-display);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.table { --bs-table-border-color: var(--vg-rule); }
.table-hover tbody tr:hover { background-color: #EEF2F7; cursor: pointer; }

/* --- Surfaces ---------------------------------------------------------- */
.card, .filter-bar, .list-group-item {
  background-color: var(--vg-surface);
  border-color: var(--vg-rule);
}
.home-card .card-title { color: var(--vg-navy); }
.breadcrumb { background: none; padding: 0; margin: 0; }
.breadcrumb, .breadcrumb a { color: var(--vg-slate); }

.badge-run {
  font-family: var(--vg-display);
  font-weight: 600;
  letter-spacing: .03em;
}

/* A dark panel or divider, where one is wanted (Toolbox p.2: Panel Navy). */
.vg-panel {
  background-color: var(--vg-panel-navy);
  color: #fff;
}
.vg-panel a { color: #fff; }
hr { border-top-color: var(--vg-rule); opacity: 1; }

/* Text cut to a number of lines, with an ellipsis, where a long value would
   otherwise stretch a table row — a file's description in the file lists. The
   whole text belongs in the element's `title`, so a pointer can read it. */
.clip-1, .clip-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.clip-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clip-2 { -webkit-line-clamp: 2; line-clamp: 2; }