/*
  twr_theme.css  -  "brief" theme for wedding.report

  Reskins the Bootstrap 5.3 site to match the market brief report: a navy ink
  scale with one accent blue, Newsreader for headlines, Inter Tight for
  everything else, hairline borders, soft corners, no shadows.

  Loaded from header.cfm only when the theme flag is on (?theme=brief, then a
  cookie). No template classes change: everything here hangs off the Bootstrap
  and statcard classes the pages already use.

  Some selectors start with :root or html on purpose. header.cfm has an inline
  body rule, and several pages load their own css (statcard.css, page <style>
  blocks) after this file, so the theme has to win on specificity, not order.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Newsreader:opsz,wght@6..72,600&display=swap');


/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */
:root {
  /* the report palette */
  --twr-navy: #10233f;
  --twr-ink: #153052;
  --twr-body: #344a67;
  --twr-muted: #5c6c80;
  --twr-faint: #91a1b4;
  --twr-rule: #d6e3f4;
  --twr-blue: #1769ff;
  --twr-tint: #eef4ff;
  --twr-risk: #a34223;
  --twr-opp: #0a6f54;

  /* additions the web needs that the report did not */
  --twr-blue-dark: #0f55d6;      /* hover */
  --twr-blue-darker: #0c47b5;    /* pressed */
  --twr-amber: #a87400;          /* warning */
  --twr-field: #b9c8dc;          /* input borders: the rule color is too faint to find a field */
  --twr-track: #e4ecf7;          /* progress and range tracks */
  --twr-opp-tint: #f1f8f5;
  --twr-opp-rule: #cfe6dc;
  --twr-risk-tint: #fbf3f0;
  --twr-risk-rule: #efd8cf;
  --twr-amber-tint: #fbf6e9;
  --twr-amber-rule: #ecdfbb;
  --twr-neutral-tint: #f3f6fa;
  --twr-cover: linear-gradient(160deg, #0d2244 0%, #10284d 55%, #1646a0 100%);

  --twr-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --twr-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* bold text inside copy reads navy; dark panels switch this back off */
  --twr-strong: var(--twr-navy);

  /* Bootstrap: brand colors */
  --bs-blue: #1769ff;
  --bs-primary: #1769ff;
  --bs-primary-rgb: 23, 105, 255;
  --bs-secondary: #5c6c80;
  --bs-secondary-rgb: 92, 108, 128;
  --bs-success: #0a6f54;
  --bs-success-rgb: 10, 111, 84;
  --bs-info: #153052;
  --bs-info-rgb: 21, 48, 82;
  --bs-warning: #a87400;
  --bs-warning-rgb: 168, 116, 0;
  --bs-danger: #a34223;
  --bs-danger-rgb: 163, 66, 35;
  --bs-light: #eef4ff;
  --bs-light-rgb: 238, 244, 255;
  --bs-dark: #10233f;
  --bs-dark-rgb: 16, 35, 63;

  --bs-primary-text-emphasis: #0c47b5;
  --bs-primary-bg-subtle: #eef4ff;
  --bs-primary-border-subtle: #c5d9fb;
  --bs-secondary-text-emphasis: #344a67;
  --bs-secondary-bg-subtle: #f3f6fa;
  --bs-secondary-border-subtle: #d6e3f4;
  --bs-success-text-emphasis: #0a6f54;
  --bs-success-bg-subtle: #f1f8f5;
  --bs-success-border-subtle: #cfe6dc;
  --bs-info-text-emphasis: #153052;
  --bs-info-bg-subtle: #eef4ff;
  --bs-info-border-subtle: #d6e3f4;
  --bs-warning-text-emphasis: #7a5500;
  --bs-warning-bg-subtle: #fbf6e9;
  --bs-warning-border-subtle: #ecdfbb;
  --bs-danger-text-emphasis: #a34223;
  --bs-danger-bg-subtle: #fbf3f0;
  --bs-danger-border-subtle: #efd8cf;
  --bs-light-text-emphasis: #5c6c80;
  --bs-light-bg-subtle: #f8fafe;
  --bs-light-border-subtle: #d6e3f4;
  --bs-dark-text-emphasis: #10233f;
  --bs-dark-bg-subtle: #e4ecf7;
  --bs-dark-border-subtle: #91a1b4;

  /* Bootstrap: body, text, surfaces */
  --bs-font-sans-serif: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-color: #344a67;
  --bs-body-color-rgb: 52, 74, 103;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #10233f;
  --bs-emphasis-color-rgb: 16, 35, 63;
  --bs-secondary-color: #5c6c80;
  --bs-secondary-color-rgb: 92, 108, 128;
  --bs-secondary-bg: #e4ecf7;
  --bs-secondary-bg-rgb: 228, 236, 247;
  --bs-tertiary-color: #91a1b4;
  --bs-tertiary-color-rgb: 145, 161, 180;
  --bs-tertiary-bg: #eef4ff;
  --bs-tertiary-bg-rgb: 238, 244, 255;
  --bs-heading-color: #10233f;
  --bs-link-color: #1769ff;
  --bs-link-color-rgb: 23, 105, 255;
  --bs-link-hover-color: #0c47b5;
  --bs-link-hover-color-rgb: 12, 71, 181;
  --bs-code-color: #153052;
  --bs-highlight-bg: #eef4ff;

  /* Bootstrap: hairlines, soft corners, no shadows */
  --bs-border-color: #d6e3f4;
  --bs-border-color-translucent: #d6e3f4;
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .5rem;
  --bs-border-radius-xl: .75rem;
  --bs-border-radius-xxl: 1rem;
  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;
  --bs-box-shadow-inset: none;
  --bs-gradient: none;
  --bs-focus-ring-color: rgba(23, 105, 255, .22);
  --bs-form-valid-color: #0a6f54;
  --bs-form-valid-border-color: #0a6f54;
  --bs-form-invalid-color: #a34223;
  --bs-form-invalid-border-color: #a34223;
}


/* ------------------------------------------------------------------
   2. Type
   ------------------------------------------------------------------ */
html body {
  font-family: var(--twr-sans);
  color: var(--twr-body);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

/* serif on h1 to h3 and the display classes only */
h1, h2, h3,
.h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .display-7 {
  font-family: var(--twr-serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--bs-heading-color);
}

/* smaller headings are interface labels: sans. The class rule comes second so
   an h2 sized down with .h5 is treated as the label it looks like. */
h4, h5, h6 {
  font-family: var(--twr-sans);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}
.h4, .h5, .h6 {
  font-family: var(--twr-sans);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.lead {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.45;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}

p > strong, p > b,
li > strong, li > b {
  color: var(--twr-strong);
}

hr {
  color: var(--twr-rule);
  opacity: 1;
}

.blockquote-footer {
  color: var(--twr-muted);
}

/* panels with their own dark fill: headings and bold follow the panel's text.
   currentColor, not inherit: inherit on a custom property means "use the
   parent's value of this property", which would still be navy. */
.text-white, .text-bg-primary, .text-bg-secondary, .text-bg-success, .text-bg-info,
.text-bg-danger, .text-bg-dark, .bg-dark, .bg-primary, .table-dark {
  --bs-heading-color: currentColor;
  --bs-card-title-color: currentColor;
  --twr-strong: currentColor;
}

/* the report's cover: navy running to blue */
.bg-dark, .card.text-bg-dark {
  background-image: var(--twr-cover);
}


/* ------------------------------------------------------------------
   3. Stat cards
   No fill, a 3px left rule, a large bold number in the rule's color, and
   the description under it as a small muted label. Each variant sets one
   color, --twr-stat, which the rule and the number both use.
   statcard.css loads after this file on some pages, hence :root.
   ------------------------------------------------------------------ */
:root .statcard {
  --twr-stat: var(--twr-blue);
  margin-bottom: .75rem;
  padding: .125rem 0 .125rem .875rem;
  color: var(--twr-body);
  background: none;
  border: 0;
  border-left: 3px solid var(--twr-stat);
  border-radius: 0;
}
:root .statcard.statcard-primary { --twr-stat: var(--twr-blue); }
:root .statcard.statcard-success { --twr-stat: var(--twr-opp); }
:root .statcard.statcard-danger  { --twr-stat: var(--twr-risk); }
:root .statcard.statcard-info    { --twr-stat: var(--twr-navy); }
:root .statcard.statcard-warning { --twr-stat: var(--twr-amber); }

:root .statcard .statcard-number {
  margin: 0;
  font-family: var(--twr-sans);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--twr-stat);
}

:root .statcard .statcard-desc {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--twr-muted);
}
:root .statcard .statcard-number + .statcard-desc,
:root .statcard .statcard-desc + .statcard-number {
  margin-top: .3rem;
}

/* business_compare uses stat cards with nothing in them as its color key.
   With no fill the key is the rule itself, set beside its label. 15px is the
   label's own inline padding. */
:root .statcard:not(:has(*)) {
  width: 0;
  margin: 15px 0;
  padding: 0;
}
@media (min-width: 576px) {
  :root .statcard:not(:has(*)) {
    margin-left: auto;
  }
}

:root .statcard .statcard-hr {
  margin-left: 0;
  margin-right: 0;
  border-top-color: var(--twr-rule);
}

/* delta arrows: statcard.css draws the triangle with a border in the current
   color, so setting the color is all it takes. Up is green, down is rust,
   inside a card or out. */
:root .delta-positive,
:root .statcard .delta-positive {
  font-weight: 700;
  color: var(--twr-opp);
}
:root .delta-negative,
:root .statcard .delta-negative {
  font-weight: 700;
  color: var(--twr-risk);
}


/* ------------------------------------------------------------------
   4. Shadows out, hairline frames in
   ------------------------------------------------------------------ */
.shadow, .shadow-sm, .shadow-lg {
  box-shadow: none !important;
  border: 1px solid var(--twr-rule);
}


/* ------------------------------------------------------------------
   5. Cards: a hairline frame
   ------------------------------------------------------------------ */
:root .card {
  --bs-card-bg: #fff;
  --bs-card-color: var(--twr-body);
  --bs-card-border-color: var(--twr-rule);
  --bs-card-border-width: 1px;
  --bs-card-border-radius: .5rem;
  --bs-card-inner-border-radius: calc(.5rem - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-title-color: var(--bs-heading-color);
  box-shadow: none;
}
.card.text-bg-dark {
  --bs-card-color: #d9e6f8;
}
.card-header, .card-footer {
  border-color: var(--twr-rule);
}


/* ------------------------------------------------------------------
   6. Alerts: the tinted callout with a left rule
   ------------------------------------------------------------------ */
:root .alert {
  --twr-alert-rule: var(--twr-blue);
  --bs-alert-bg: var(--twr-tint);
  --bs-alert-color: var(--twr-body);
  --bs-alert-link-color: var(--twr-blue);
  --bs-alert-padding-x: 1.25rem;
  --bs-alert-padding-y: 1rem;
  border: 0;
  border-left: 3px solid var(--twr-alert-rule);
  border-radius: 0 .5rem .5rem 0;
}
:root .alert-success   { --twr-alert-rule: var(--twr-opp);   --bs-alert-bg: var(--twr-opp-tint); }
:root .alert-danger    { --twr-alert-rule: var(--twr-risk);  --bs-alert-bg: var(--twr-risk-tint); }
:root .alert-warning   { --twr-alert-rule: var(--twr-amber); --bs-alert-bg: var(--twr-amber-tint); }
:root .alert-secondary,
:root .alert-light     { --twr-alert-rule: var(--twr-faint); --bs-alert-bg: var(--twr-neutral-tint); }
:root .alert-dark      { --twr-alert-rule: var(--twr-navy);  --bs-alert-bg: var(--twr-neutral-tint); }
.alert-heading,
.alert strong, .alert b {
  color: var(--twr-navy);
}
.alert-heading {
  font-family: var(--twr-sans);
  font-weight: 700;
  letter-spacing: 0;
}


/* ------------------------------------------------------------------
   7. Tables: airy rows, small caps headers on a navy rule
   ------------------------------------------------------------------ */
:root .table {
  --bs-table-color: var(--twr-navy);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--twr-rule);
  --bs-table-striped-color: var(--twr-navy);
  --bs-table-striped-bg: #f6f9fe;
  --bs-table-hover-color: var(--twr-navy);
  --bs-table-hover-bg: var(--twr-tint);
  --bs-table-active-color: var(--twr-navy);
  --bs-table-active-bg: var(--twr-tint);
}
:root .table > :not(caption) > * > * {
  padding: .8rem .75rem;
}
:root .table > thead > tr > th {
  padding-top: .5rem;
  padding-bottom: .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--twr-muted);
  border-bottom: 1px solid var(--twr-navy);
}
:root .table-sm > :not(caption) > * > * {
  padding: .45rem .5rem;
}
:root .table-dark {
  --bs-table-color: #d9e6f8;
  --bs-table-bg: var(--twr-navy);
  --bs-table-border-color: #34507a;
  --bs-table-striped-color: #d9e6f8;
  --bs-table-striped-bg: #152c4d;
  --bs-table-hover-color: #fff;
  --bs-table-hover-bg: #1a3459;
}
:root .table-dark > tr > th,
:root .table > thead.table-dark > tr > th,
:root .table-dark > thead > tr > th {
  color: #aebfd4;
  border-bottom-color: #34507a;
}


/* ------------------------------------------------------------------
   8. Badges: pills, tinted fill with the color in the text
   The bg-* and text-bg-* utilities are !important, so these are too.
   ------------------------------------------------------------------ */
.badge {
  --bs-badge-padding-x: .65em;
  --bs-badge-padding-y: .38em;
  --bs-badge-font-size: .7rem;
  --bs-badge-font-weight: 700;
  --bs-badge-border-radius: 50rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.badge.bg-primary,   .badge.text-bg-primary   { background-color: #dfeaff !important; color: var(--twr-blue) !important; }
.badge.bg-success,   .badge.text-bg-success   { background-color: #dff0e8 !important; color: var(--twr-opp) !important; }
.badge.bg-danger,    .badge.text-bg-danger    { background-color: #f6e1d9 !important; color: var(--twr-risk) !important; }
.badge.bg-warning,   .badge.text-bg-warning   { background-color: #f6ecd0 !important; color: #7a5500 !important; }
.badge.bg-info,      .badge.text-bg-info      { background-color: #e4ecf7 !important; color: var(--twr-ink) !important; }
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-light,     .badge.text-bg-light     { background-color: #edf0f4 !important; color: var(--twr-muted) !important; }
.badge.bg-dark,      .badge.text-bg-dark      { background-color: var(--twr-navy) !important; color: #d9e6f8 !important; }


/* ------------------------------------------------------------------
   9. Buttons
   Bootstrap compiles the colors into each .btn-* class, so each variant
   gets its own set of --bs-btn-* values. Solid buttons stay solid; outline
   buttons fill with a tint on hover, not with the solid color.
   ------------------------------------------------------------------ */
.btn {
  --bs-btn-font-family: var(--twr-sans);
  --bs-btn-font-weight: 600;
  --bs-btn-box-shadow: none;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1769ff;
  --bs-btn-border-color: #1769ff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0f55d6;
  --bs-btn-hover-border-color: #0f55d6;
  --bs-btn-focus-shadow-rgb: 23, 105, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0c47b5;
  --bs-btn-active-border-color: #0c47b5;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1769ff;
  --bs-btn-disabled-border-color: #1769ff;
}
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #5c6c80;
  --bs-btn-border-color: #5c6c80;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #344a67;
  --bs-btn-hover-border-color: #344a67;
  --bs-btn-focus-shadow-rgb: 92, 108, 128;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #153052;
  --bs-btn-active-border-color: #153052;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #5c6c80;
  --bs-btn-disabled-border-color: #5c6c80;
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0a6f54;
  --bs-btn-border-color: #0a6f54;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #085a44;
  --bs-btn-hover-border-color: #085a44;
  --bs-btn-focus-shadow-rgb: 10, 111, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #064a38;
  --bs-btn-active-border-color: #064a38;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0a6f54;
  --bs-btn-disabled-border-color: #0a6f54;
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #a34223;
  --bs-btn-border-color: #a34223;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #88371d;
  --bs-btn-hover-border-color: #88371d;
  --bs-btn-focus-shadow-rgb: 163, 66, 35;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #722e18;
  --bs-btn-active-border-color: #722e18;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #a34223;
  --bs-btn-disabled-border-color: #a34223;
}
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: #a87400;
  --bs-btn-border-color: #a87400;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #8c6100;
  --bs-btn-hover-border-color: #8c6100;
  --bs-btn-focus-shadow-rgb: 168, 116, 0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7a5500;
  --bs-btn-active-border-color: #7a5500;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #a87400;
  --bs-btn-disabled-border-color: #a87400;
}
.btn-info, .btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #10233f;
  --bs-btn-border-color: #10233f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #153052;
  --bs-btn-hover-border-color: #153052;
  --bs-btn-focus-shadow-rgb: 16, 35, 63;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1c3d68;
  --bs-btn-active-border-color: #1c3d68;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #10233f;
  --bs-btn-disabled-border-color: #10233f;
}
.btn-light {
  --bs-btn-color: #10233f;
  --bs-btn-bg: #eef4ff;
  --bs-btn-border-color: #eef4ff;
  --bs-btn-hover-color: #10233f;
  --bs-btn-hover-bg: #dfeaff;
  --bs-btn-hover-border-color: #dfeaff;
  --bs-btn-focus-shadow-rgb: 23, 105, 255;
  --bs-btn-active-color: #10233f;
  --bs-btn-active-bg: #d6e3f4;
  --bs-btn-active-border-color: #d6e3f4;
  --bs-btn-disabled-color: #5c6c80;
  --bs-btn-disabled-bg: #eef4ff;
  --bs-btn-disabled-border-color: #eef4ff;
}
.btn-outline-primary {
  --bs-btn-color: #1769ff;
  --bs-btn-border-color: #1769ff;
  --bs-btn-hover-color: #0c47b5;
  --bs-btn-hover-bg: #eef4ff;
  --bs-btn-hover-border-color: #1769ff;
  --bs-btn-focus-shadow-rgb: 23, 105, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1769ff;
  --bs-btn-active-border-color: #1769ff;
  --bs-btn-disabled-color: #1769ff;
  --bs-btn-disabled-border-color: #1769ff;
}
.btn-outline-secondary, .btn-outline-dark, .btn-outline-info {
  --bs-btn-color: #344a67;
  --bs-btn-border-color: #b9c8dc;
  --bs-btn-hover-color: #10233f;
  --bs-btn-hover-bg: #eef4ff;
  --bs-btn-hover-border-color: #91a1b4;
  --bs-btn-focus-shadow-rgb: 92, 108, 128;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #153052;
  --bs-btn-active-border-color: #153052;
  --bs-btn-disabled-color: #91a1b4;
  --bs-btn-disabled-border-color: #d6e3f4;
}
.btn-outline-success {
  --bs-btn-color: #0a6f54;
  --bs-btn-border-color: #0a6f54;
  --bs-btn-hover-color: #0a6f54;
  --bs-btn-hover-bg: #f1f8f5;
  --bs-btn-hover-border-color: #0a6f54;
  --bs-btn-focus-shadow-rgb: 10, 111, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a6f54;
  --bs-btn-active-border-color: #0a6f54;
  --bs-btn-disabled-color: #0a6f54;
  --bs-btn-disabled-border-color: #0a6f54;
}
.btn-outline-danger {
  --bs-btn-color: #a34223;
  --bs-btn-border-color: #a34223;
  --bs-btn-hover-color: #a34223;
  --bs-btn-hover-bg: #fbf3f0;
  --bs-btn-hover-border-color: #a34223;
  --bs-btn-focus-shadow-rgb: 163, 66, 35;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a34223;
  --bs-btn-active-border-color: #a34223;
  --bs-btn-disabled-color: #a34223;
  --bs-btn-disabled-border-color: #a34223;
}
.btn-outline-warning {
  --bs-btn-color: #7a5500;
  --bs-btn-border-color: #a87400;
  --bs-btn-hover-color: #7a5500;
  --bs-btn-hover-bg: #fbf6e9;
  --bs-btn-hover-border-color: #a87400;
  --bs-btn-focus-shadow-rgb: 168, 116, 0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a87400;
  --bs-btn-active-border-color: #a87400;
  --bs-btn-disabled-color: #a87400;
  --bs-btn-disabled-border-color: #a87400;
}
.btn-link {
  --bs-btn-font-weight: 500;
}


/* ------------------------------------------------------------------
   10. Forms
   ------------------------------------------------------------------ */
.form-control, .form-select {
  color: var(--twr-navy);
  border-color: var(--twr-field);
}
.form-control::placeholder {
  color: #7a8ba1;
}
.form-control:focus, .form-select:focus {
  color: var(--twr-navy);
  border-color: var(--twr-blue);
  box-shadow: 0 0 0 3px rgba(23, 105, 255, .18);
}
.form-control:disabled, .form-select:disabled {
  background-color: var(--twr-neutral-tint);
}
.form-label {
  font-weight: 600;
  color: var(--twr-navy);
}
.form-text {
  color: var(--twr-muted);
}
.input-group-text {
  color: var(--twr-muted);
  background-color: var(--twr-tint);
  border-color: var(--twr-field);
}

/* signup_form.cfm sets the checked color in its own <style>, so :root */
:root .form-check-input {
  border-color: var(--twr-faint);
}
:root .form-check-input:checked {
  background-color: var(--twr-blue);
  border-color: var(--twr-blue);
}
:root .form-check-input:focus {
  border-color: var(--twr-blue);
  box-shadow: 0 0 0 3px rgba(23, 105, 255, .18);
}
.form-range::-webkit-slider-thumb { background-color: var(--twr-blue); }
.form-range::-moz-range-thumb { background-color: var(--twr-blue); }
.form-range::-webkit-slider-runnable-track { background-color: var(--twr-track); }
.form-range::-moz-range-track { background-color: var(--twr-track); }


/* ------------------------------------------------------------------
   11. Navbar, navs, dropdowns
   ------------------------------------------------------------------ */
.navbar {
  --bs-navbar-color: var(--twr-body);
  --bs-navbar-hover-color: var(--twr-navy);
  --bs-navbar-active-color: var(--twr-navy);
  --bs-navbar-brand-color: var(--twr-navy);
  --bs-navbar-toggler-border-color: var(--twr-rule);
  --bs-navbar-toggler-border-radius: .5rem;
  --bs-navbar-toggler-focus-width: 3px;
}
.nav-link {
  font-weight: 500;
}
.nav-pills {
  --bs-nav-pills-border-radius: .5rem;
  --bs-nav-pills-link-active-color: var(--twr-blue);
  --bs-nav-pills-link-active-bg: var(--twr-tint);
}
.nav-tabs {
  --bs-nav-tabs-border-color: var(--twr-rule);
  --bs-nav-tabs-link-hover-border-color: var(--twr-rule);
  --bs-nav-tabs-link-active-color: var(--twr-navy);
  --bs-nav-tabs-link-active-border-color: var(--twr-rule) var(--twr-rule) #fff;
}
.dropdown-menu {
  --bs-dropdown-color: var(--twr-body);
  --bs-dropdown-border-color: var(--twr-rule);
  --bs-dropdown-border-radius: .5rem;
  --bs-dropdown-inner-border-radius: calc(.5rem - 1px);
  --bs-dropdown-divider-bg: var(--twr-rule);
  --bs-dropdown-link-color: var(--twr-body);
  --bs-dropdown-link-hover-color: var(--twr-navy);
  --bs-dropdown-link-hover-bg: var(--twr-tint);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--twr-blue);
  --bs-dropdown-header-color: var(--twr-muted);
  box-shadow: none;
}
.dropdown-header {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--twr-faint);
  --bs-breadcrumb-item-active-color: var(--twr-muted);
  font-size: .875rem;
}
.pagination {
  --bs-pagination-color: var(--twr-blue);
  --bs-pagination-border-color: var(--twr-rule);
  --bs-pagination-hover-color: var(--twr-blue-darker);
  --bs-pagination-hover-bg: var(--twr-tint);
  --bs-pagination-hover-border-color: var(--twr-rule);
  --bs-pagination-focus-color: var(--twr-blue-darker);
  --bs-pagination-focus-bg: var(--twr-tint);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(23, 105, 255, .18);
  --bs-pagination-active-bg: var(--twr-blue);
  --bs-pagination-active-border-color: var(--twr-blue);
  --bs-pagination-disabled-color: var(--twr-faint);
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: var(--twr-rule);
}
.list-group {
  --bs-list-group-color: var(--twr-body);
  --bs-list-group-border-color: var(--twr-rule);
  --bs-list-group-action-hover-bg: var(--twr-tint);
  --bs-list-group-active-bg: var(--twr-blue);
  --bs-list-group-active-border-color: var(--twr-blue);
}


/* ------------------------------------------------------------------
   12. Accordions
   Two kinds on the site: Bootstrap's own, and <details class="accordion-item">
   on the statistics and cost estimator pages. Those pages color the open
   summary in a page <style>, so the second set needs the extra weight.
   ------------------------------------------------------------------ */
.accordion {
  --bs-accordion-color: var(--twr-body);
  --bs-accordion-bg: #fff;
  --bs-accordion-border-color: var(--twr-rule);
  --bs-accordion-border-radius: .5rem;
  --bs-accordion-inner-border-radius: calc(.5rem - 1px);
  --bs-accordion-btn-color: var(--twr-navy);
  --bs-accordion-btn-bg: #fff;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235c6c80' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231769ff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(23, 105, 255, .18);
  --bs-accordion-active-color: var(--twr-navy);
  --bs-accordion-active-bg: var(--twr-tint);
}
/* the button sits inside an h2, which would hand it the serif */
.accordion-header, .accordion-button {
  font-family: var(--twr-sans);
  letter-spacing: 0;
}
.accordion-button {
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  box-shadow: inset 0 -1px 0 var(--twr-rule);
}

:root details.accordion-item {
  overflow: hidden;
  color: var(--twr-body);
  background-color: #fff;
  border: 1px solid var(--twr-rule);
  border-radius: .5rem;
}
:root details.accordion-item > summary.accordion-header {
  font-family: var(--twr-sans);
  font-weight: 600;
  color: var(--twr-navy);
}
:root details.accordion-item > summary.accordion-header:hover {
  background-color: var(--twr-tint);
}
:root details.accordion-item[open] > summary.accordion-header {
  color: var(--twr-navy);
  background-color: var(--twr-tint);
  border-bottom: 1px solid var(--twr-rule);
}


/* ------------------------------------------------------------------
   13. Modals, progress, the rest
   ------------------------------------------------------------------ */
.modal {
  --bs-modal-color: var(--twr-body);
  --bs-modal-bg: #fff;
  --bs-modal-border-color: var(--twr-rule);
  --bs-modal-border-radius: .625rem;
  --bs-modal-inner-border-radius: calc(.625rem - 1px);
  --bs-modal-box-shadow: none;
  --bs-modal-header-border-color: var(--twr-rule);
  --bs-modal-footer-border-color: var(--twr-rule);
}
.modal-content {
  box-shadow: none;
}
.modal-title {
  font-family: var(--twr-sans);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--twr-navy);
}
.modal-backdrop {
  --bs-backdrop-bg: #10233f;
  --bs-backdrop-opacity: .45;
}
.offcanvas {
  --bs-offcanvas-border-color: var(--twr-rule);
  --bs-offcanvas-box-shadow: none;
}
.progress {
  --bs-progress-bg: var(--twr-track);
  --bs-progress-bar-bg: var(--twr-blue);
  --bs-progress-border-radius: 50rem;
}
.toast {
  --bs-toast-border-color: var(--twr-rule);
  --bs-toast-box-shadow: none;
}
.popover {
  --bs-popover-border-color: var(--twr-rule);
  --bs-popover-box-shadow: none;
}
.tooltip {
  --bs-tooltip-bg: var(--twr-navy);
}