/* NEST's house style, ported from the CF site's stylesheets/custom.css.
 *
 * Two families of selector needed updating, the same two as on Publica and
 * Insight (see app/sites/README.md):
 *
 *   - Bootstrap 3 descendant chains (`.table > thead > tr > th`). Bootstrap 5
 *     drops the intermediate elements, so `.table th` is written as well.
 *   - DataTables 1.x wrappers (`.pagination > li > a`). DataTables 2 with the
 *     Bootstrap 5 integration renders `.page-link` inside `.page-item`, so both
 *     spellings are here — miss it and the pager keeps Bootstrap's default
 *     blue, which reads as a bug to the client.
 *
 * Also dropped: `.navbar-default` and `.panel-*` (Bootstrap 3 components with
 * no Bootstrap 5 equivalent — the navbar rules are re-expressed against
 * `.nest-navbar`, and no page here uses a panel), and the `input[type=...]`
 * blanket rule, which fought `.form-control` for the border it then re-added.
 */

:root {
  --nest-ink: #34454e;
  --nest-navy: #28465F;
  --nest-orange: #FF8200;
  --nest-red: #c62521;
  --nest-pale: #E9F1FD;
  --nest-blue: #C8DCFA;
}

body, p {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  color: var(--nest-ink);
}

a { color: var(--nest-ink); text-decoration: underline; }
a:hover { color: var(--nest-orange); }

h2 {
  font-size: 28px;
  line-height: 34px;
  color: var(--nest-navy);
  padding-bottom: 18px;
  font-weight: bold;
}

h3 { font-size: 22px; color: var(--nest-navy); font-weight: bold; }

/* Tables. The `.table > thead > tr > th` chain in CF's stylesheet only matches
 * under Bootstrap 3; `.table th` covers both. */
.table th,
.table > thead > tr > th {
  background-color: var(--nest-blue);
  color: var(--nest-navy);
  font-weight: bold;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode",
               "Lucida Sans", Tahoma, sans-serif;
}

.table td,
.table > tbody > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 0;
  border-bottom: 1px solid #ddd;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode",
               "Lucida Sans", Tahoma, sans-serif;
}

/* Bootstrap 5 sets its own striping variables on .table-striped; CF's two row
 * classes are explicit, so they need !important to survive them. */
tr.darkrow, tr.darkrow > td { background-color: var(--nest-pale) !important; }
tr.lightrow, tr.lightrow > td { background-color: #fff !important; }

td.featuredCol {
  color: #3C3C3C;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode",
               "Lucida Sans", Tahoma, sans-serif;
}

/* CF's `style="background-color:#EEE"` on the grouping rows, as a class. */
td.group-row { background-color: #EEE !important; }

.table-bordered td { border-bottom: 1px solid var(--nest-orange); }

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

.nest-grid { border-top: 4px solid #CCC; border-bottom: 0; }

/* Buttons. CF's `.btn-bg` / `.btn-border` pair, and `.btn-default`, which
 * Bootstrap 5 no longer ships. */
.btn-bg {
  background-color: var(--nest-navy) !important;
  text-shadow: none;
  border-radius: 25px !important;
  color: #fff;
  font-weight: 700;
}
.btn-bg:hover { background-color: #CCC; color: #fff; }

.btn-border {
  background-color: #fff !important;
  border: 2px solid var(--nest-navy);
  border-radius: 25px !important;
  color: var(--nest-navy);
  font-weight: 700;
}

.btn-default {
  background-color: #fff;
  border: 1px solid rgba(52, 69, 78, .5);
  color: var(--nest-ink);
}
.btn-default:hover { background-color: var(--nest-blue); color: var(--nest-navy); }

/* The checkbox strips. CF used Bootstrap 3's `data-toggle="buttons"`, whose
 * "on" state was `.active`; Bootstrap 5's `.btn-check` marks it with
 * `:checked + .btn`. Same look, no JS. */
.btn-check:checked + .btn-default {
  background-color: var(--nest-blue) !important;
  color: var(--nest-navy);
  border-color: var(--nest-navy);
}

.form-control:focus, .form-select:focus {
  border-color: #FFA500;
  box-shadow: 0 0 0 0.2rem rgba(255, 165, 0, 1);
}
.validate { border-color: var(--nest-red); box-shadow: 0 0 0 0.2rem rgba(198, 37, 33, 1); }

.lightblue {
  background-color: var(--nest-pale) !important;
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Nav. CF styled Bootstrap 3's `.navbar-default`; this is the same treatment
 * applied to the Bootstrap 5 navbar the template renders. */
.nest-navbar { background-color: #fff; border: 0; box-shadow: none; font-size: 16px; margin-bottom: 0; }
.nest-navbar .nav-link { color: var(--nest-navy) !important; font-weight: bold; text-decoration: none; }
.nest-navbar .nav-link:hover, .nest-navbar .nav-link:focus { color: var(--nest-orange) !important; }
.nest-navbar .nav-link.active { color: var(--nest-orange) !important; background: none; }

/* Pagination. Both the DataTables 1.x chain CF wrote against and the
 * Bootstrap 5 markup DataTables 2 actually renders. */
.pagination > li > a, .pagination > li > span,
.pagination .page-link {
  border: none !important;
  padding: 10px;
  color: var(--nest-ink);
  background-color: #fff !important;
}
.pagination > .active > a, .pagination > .active > span,
.pagination .active > .page-link, .pagination .page-item.active .page-link {
  background-color: #fff !important;
  color: var(--nest-orange) !important;
  border: 0 !important;
}
.pagination > li > a:hover, .pagination .page-link:hover {
  color: var(--nest-red) !important;
  border: 0 !important;
}
.pagination .disabled, .pagination .page-item.disabled .page-link {
  color: #d3d3d3;
  cursor: not-allowed;
}

/* Progressively loaded panels (Vote Summary by Region). Each panel is fetched
 * after the page, so it needs something to say while it waits and something to
 * say if it fails — a silently empty section reads as missing data. */
.panel-loading, .panel-error, .print-note {
  color: #6a7b85;
  font-style: italic;
}
.panel-error { color: var(--nest-red); font-style: normal; }
/* Hold the space a panel will occupy, so the page does not jump as each one
 * lands and the scroll position stays where the reader put it. */
.fundpanel { min-height: 160px; }

@media print {
  @page { size: landscape; }
  .pagebreak { clear: both; page-break-after: always; }
  .hide-print, .hide-print * { display: none !important; }
}

/* CF's Bootstrap 3 print helper, which Bootstrap 5 dropped: the grid's last
 * column prints the company name in place of the "View details" link. */
.visible-print-block { display: none !important; }
@media print {
  .visible-print-block { display: block !important; }
}