/* ==========================================================================
   EQUIDEM DESIGN SYSTEM - BASE (base.css)
   Local font declarations, resets and global typography bindings.
   ========================================================================== */

/* Alfa Slab One is distributed as a single static Regular (usWeightClass 400).
   The `font-weight: 400 700` range tells the browser that this one file is the
   face for the whole 400-700 span, so requests for 600/700 (Bootstrap's
   headings, legacy .a-* article classes, `font-weight: bold`) resolve to the
   real outlines instead of a synthesised faux bold, which smears the slab
   counters at small sizes. Add a real bold file here before widening it. */
@font-face {
  font-family: 'header';
  src: url('/static/fonts/AlfaSlabOne-Regular.woff2') format('woff2'),
       url('/static/fonts/AlfaSlabOne-Regular.ttf') format('truetype');
  font-display: swap;
  font-style: normal;
  font-weight: 400 700;
}

/* Alias so chart/legacy styles referencing the Google Fonts family name keep
   working without an external request. */
@font-face {
  font-family: 'Alfa Slab One';
  src: url('/static/fonts/AlfaSlabOne-Regular.woff2') format('woff2'),
       url('/static/fonts/AlfaSlabOne-Regular.ttf') format('truetype');
  font-display: swap;
  font-style: normal;
  font-weight: 400 700;
}

@font-face {
  font-family: 'subheader';
  src: url('/static/fonts/RobotoFlex-Regular.woff2') format('woff2'),
       url('/static/fonts/RobotoFlex-Regular.ttf') format('truetype');
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'body';
  src: url('/static/fonts/Lato-BoldItalic.woff2') format('woff2'),
       url('/static/fonts/Lato-BoldItalic.ttf') format('truetype');
  font-display: swap;
  font-style: normal;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-subheader);
  color: var(--color-text-main);
  background-color: var(--color-bg-body);
  line-height: var(--line-height-base);
  /* The page shell is full bleed; horizontal gutters live in layout.css. */
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-header);
  /* Single 400 display cut: pin the weight so Bootstrap's reboot (500) does not
     trigger a faux bold. */
  font-weight: var(--font-weight-display);
  color: var(--color-text-heading);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

h1 {
  line-height: 1.15;
}

h1, h2, h3 {
  font-family: var(--font-header);
}

/* Bootstrap also ships heading *utilities* (.h1-.h6) that carry a 500 weight.
   Where they size a real heading the weight would faux-bold the single 400 slab
   cut, so the display weight is pinned here (the utility still owns the size). */
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: var(--font-weight-display);
}

/* Editorial metadata: technical small caps used for labels and provenance. */
.c-meta-label {
  display: block;
  font-family: var(--font-subheader);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.c-hairline {
  height: 1px;
  border: 0;
  margin: var(--space-4) 0;
  background-color: var(--color-border-subtle);
}

p, label, input, select, textarea,
.form-label, .form-control, .form-check-label,
.alert, .text-muted, small {
  font-family: var(--font-subheader);
}

a {
  color: var(--color-accent-blue);
}

a:hover {
  color: var(--color-accent-blue-hover);
}

img {
  max-width: 100%;
}

/* ---- Legacy typography helpers (kept for backwards compatibility) ---- */
.header {
  font-family: var(--font-header);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-display);
  color: var(--color-text-main);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-tight);
  letter-spacing: 0.05rem;
}

.data-card-header {
  font-family: var(--font-header);
  font-size: 0.90rem;
  font-weight: var(--font-weight-display);
  color: var(--color-text-main);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-tight);
  letter-spacing: 0.05rem;
}

.data-card-header-big {
  font-family: var(--font-header);
  font-size: 1.6rem;
  font-weight: var(--font-weight-display);
  color: var(--color-text-main);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-tight);
  letter-spacing: 0.05rem;
}

.subheader {
  font-family: var(--font-subheader);
  font-size: 1.75rem;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-subheading);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-tight);
}

.body {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 200;
  color: var(--color-text-body);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-tight);
}

@media (max-width: 860px) {
  .header {
    font-size: 1.6rem;
  }
}

/* ---- Small shared helpers ---- */
.c-font-header {
  font-family: var(--font-header);
  font-weight: var(--font-weight-display);
  letter-spacing: 0.5px;
}

.c-preline {
  white-space: pre-line;
}

.c-uppercase {
  text-transform: uppercase;
}

.c-text-inverse {
  color: var(--color-text-inverse);
}

.c-lead {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.c-prose {
  line-height: 1.8;
}

.c-hidden {
  display: none;
}

.c-leadership-photo {
  object-fit: cover;
}

.c-leadership-text {
  white-space: pre-line;
}

.c-service-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.c-max-600 {
  max-width: 600px;
}

/* ---- Bootstrap utility colours re-bound to the civic palette -----------
   Keeps stock utilities (.text-danger, .bg-primary, ...) aligned with the
   institutional tokens without touching markup. */
.text-danger {
  color: var(--color-danger) !important;
}

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

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

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-danger {
  background-color: var(--color-danger) !important;
}

.border-primary {
  border-color: var(--color-primary) !important;
}