/* Hackney house styles.

   From hackneydesignstudio.com/brand-guidelines (read 2026-10-26):

   Colour — the Hackney Green Palette, for whole-Council work. Hackney use
   ONE colour group per document, so nothing outside these four appears here
   bar neutral greys:
     #00664F  A1 Corporate Green, PMS 336   logo, headings, buttons, links
     #00B140  A2, PMS 354
     #84BD00  A3, PMS 376
     #A4D65E  A4, PMS 367                   focus ring

   Type — FS Albert (Fontsmith, commercial). We hold no web licence, and the
   guidelines say "Where FS Albert is not available, Arial should be used". If
   Hackney supply a licensed webfont, add an @font-face here and put it first
   in --hackney-font; serve it from static/, never a CDN, as Insight does.

   The rest of the treatment — the grey band over each table, the borderless
   pager, cell padding — is Insight's, so the client sites read as a family. */

:root {
  --hackney-green: #00664F;
  --hackney-green-light: #A4D65E;
  --hackney-ink: #222;
  --hackney-font: Arial, Helvetica, sans-serif;
}

body,
p {
  font-family: var(--hackney-font);
  color: var(--hackney-ink);
}

/* The .h* classes too: Bootstrap colours those, and a class outranks a bare
   element selector, so `<h1 class="h3">` would otherwise stay black. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--hackney-font);
  font-weight: 700;
  color: var(--hackney-green);
}

/* The logo. Its clear space must be at least the width of the H icon, which
   is about the full height of the artwork, so the padding equals the logo's
   height. White behind it: never an image or a pattern. */
.hackney-masthead {
  background: #fff;
  padding: 40px;
  border-bottom: 4px solid var(--hackney-green);
}

.hackney-logo {
  display: block;
  height: 40px;
  width: auto;
}

@media (max-width: 575.98px) {
  .hackney-masthead { padding: 28px 16px; }
  .hackney-logo { height: 28px; }
}

a {
  color: var(--hackney-green);
  text-decoration: underline;
}

a:hover {
  color: var(--hackney-green);
  text-decoration: none;
}

.table th {
  font-weight: 700;
  color: var(--hackney-ink);
}

.table th,
.table td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 0;
  border-bottom: 1px solid #ddd;
  color: var(--hackney-ink);
}

.table {
  width: 100%;
  border-top: 4px solid #CCC;
  border-bottom: 0;
}

.table > tbody > tr > td.cell-pad {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Detail table column widths. */
.table .col-res  { width: 6rem; }
.table .col-mgmt { width: 12rem; }
.table .col-vote { width: 8rem; }

.form-control,
.form-select {
  font-family: var(--hackney-font);
  border: 1px solid rgba(0, 0, 0, .4);
  border-radius: 0;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--hackney-green);
  box-shadow: 0 0 0 .2rem var(--hackney-green-light);
}

.btn-primary {
  background-color: var(--hackney-green);
  border-color: var(--hackney-green);
  border-radius: .125rem;
  color: #fff;
  font-family: var(--hackney-font);
  font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #004d3c;
  border-color: #004d3c;
  color: #fff;
}

.btn-outline-secondary {
  color: var(--hackney-green);
  border-color: var(--hackney-green);
  border-radius: .125rem;
}

.btn-outline-secondary:hover {
  background-color: var(--hackney-green);
  border-color: var(--hackney-green);
  color: #fff;
}

/* Pagination: DataTables 2 / Bootstrap 5 render `.page-link` in `.page-item`. */
.pagination .page-link {
  border: 0;
  padding: 10px;
  color: var(--hackney-ink);
  background-color: #fff;
}

.pagination .page-item.active .page-link {
  background-color: #fff;
  color: var(--hackney-green);
  font-weight: 700;
  border: 0;
}

.pagination .page-link:hover {
  color: var(--hackney-green);
  border: 0;
}

.pagination .page-item.disabled .page-link {
  color: #d3d3d3;
  cursor: not-allowed;
}