:root {
  --bs-font-sans-serif: "Poppins", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans",
    "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --calitp-headline-sans-serif: "Raleway", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans",
    "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-border-radius: 20px;
  --bs-border-style: dashed;
  --bs-body-line-height: 1.4;
  --header-nav-height: 110px;
  --footer-nav-height: 39px;
}

body {
  --bs-primary: #045b86;
  --bs-primary-rgb: 4, 91, 134;
  --bs-body-color: rgb(33, 33, 33); /* #212121 */
  --bs-dark-rgb: 33, 33, 33; /* #212121 */
  --bs-emphasis-color-rgb: rgb(33, 33, 33); /* #212121 */
  --bs-link-color: rgb(4, 91, 134); /* #045B86, calitp-primary-blue */
  --bs-link-color-rgb: 4, 91, 134; /* #045B86, calitp-primary-blue */
  --bs-link-hover-color: rgb(4, 72, 105); /* #044869, calitp-primary-dark-blue */
  --bs-link-hover-color-rgb: 4, 72, 105; /* #044869, calitp-primary-dark-blue */
  --bs-secondary-rgb: 143, 147, 153; /* calitp-gray-3 */
  --bs-tertiary-color: rgb(96, 101, 107); /* calitp-scales-gray-4 */
  --calitp-primary-blue: rgb(4, 91, 134); /* #045B86 */
  --calitp-primary-dark-blue: rgb(4, 72, 105); /* #044869, , calitp-primary-dark-blue */
  --calitp-background-blue: rgb(245, 249, 251); /* #F5F9FB */
  --calitp-background-light-blue: rgb(223, 242, 242); /* #DFF2F2 */
  --calitp-cyan-1: rgb(213, 238, 245); /* #d5eef5 */
  --calitp-gray-2: rgb(200, 200, 201); /* #C8C8C9 */
  --calitp-green-4: rgb(0, 117, 91); /* #00755b */
  --calitp-green-5: rgb(0, 73, 57); /* #004939 */
  --calitp-orange-5: rgb(178, 86, 0); /* #b25600 */
  --calitp-purple-4: rgb(82, 76, 143); /* #524c8f */
  --calitp-purple-5: rgb(41, 34, 120); /* #292278 */
  --calitp-red-4: rgb(192, 63, 77); /* #c03f4d */
  --calitp-red-5: rgb(160, 46, 59); /* #a02e3b */
  --calitp-yellow-4: rgb(253, 183, 20); /* #FDB714 */
  --calitp-font-weight-bold: 700;
}

@media print {
  main.container {
    padding-top: 1rem !important;
  }

  .col-lg-8 {
    width: 100% !important;
  }

  .press-release p,
  .press-release a {
    font-size: 0.875rem !important;
  }
}

.background-calitp-blue {
  background-color: var(--calitp-primary-blue);
}

.background-purple-4 {
  background-color: var(--calitp-purple-4);
}

.background-yellow-4 {
  background-color: var(--calitp-yellow-4);
}

.border-purple-4 {
  border-color: var(--calitp-purple-4);
}

.border-yellow-4 {
  border-color: var(--calitp-yellow-4);
}

.min-w-0 {
  min-width: 0;
}

.btn {
  --bs-btn-border-width: 2px;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-family: var(--calitp-headline-sans-serif);
}

h1,
.h1 {
  font-size: calc(40rem / 16);
  font-weight: var(--calitp-font-weight-bold);
  margin-bottom: 19px;
}

h2,
.h2 {
  font-size: 2rem;
}

h3,
.h3 {
  font-size: calc(24rem / 16);
}

h4,
.h4 {
  font-weight: var(--calitp-font-weight-bold);
  line-height: var(--bs-body-line-height);
}

.display-heading {
  font-family: var(--calitp-headline-sans-serif);
}

p,
a,
li {
  font-size: 1rem;
}

hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.small-caps {
  text-transform: uppercase;
  line-height: var(--bs-body-line-height);
  letter-spacing: 0.025em;
  display: inline-block;
  padding: 0.35rem 1rem;
  font-size: 0.75rem;
  font-family: var(--bs-font-sans-serif);
  border: 1.5px solid var(--bs-white);
  background-color: rgba(33, 33, 33, 0.2);
}

.fs-7 {
  font-size: calc(14rem / 16);
}

.fs-stats {
  font-size: calc(64rem / 16);
  font-family: var(--calitp-headline-sans-serif);
}

.font-poppins {
  font-family: var(--bs-font-sans-serif);
}

a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 1px;
  text-decoration-thickness: 2px;
}

a:hover {
  text-decoration-style: dotted;
}

.link-tertiary {
  color: var(--bs-tertiary-color);
  text-decoration: underline;
  font-weight: normal;
}

.link-tertiary:hover,
.link-tertiary.active {
  color: var(--bs-primary);
  text-decoration: none;
  font-weight: 700;
}

figure.quote {
  border-left-width: 3px;
  border-left-style: solid;
  padding-left: 2rem;
}

figure.quote figcaption {
  font-size: calc(16rem / 16);
  font-style: italic;
}

.navbar {
  --bs-navbar-padding-y: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);
}

.navbar-nav {
  --bs-nav-link-color: var(--bs-body-color);
  --bs-navbar-active-color: var(--calitp-primary-blue);
  --bs-nav-link-hover-color: var(--calitp-primary-blue);
}

header .nav-link {
  padding: 2rem 0;
}

header .nav-link[aria-current="page"] {
  color: var(--calitp-primary-blue);
  background-color: var(--calitp-background-light-blue);
}

header .nav-link:hover {
  background-color: var(--calitp-background-light-blue);
}

main.container {
  padding-top: var(--header-nav-height);
}

[id] {
  scroll-margin-top: var(--header-nav-height);
}

footer a:hover {
  color: var(--calitp-gray-2) !important;
}

/* Press Release */

.press-release h2,
.press-release h3 {
  font-size: var(--bs-body-font-size);
  padding-top: 20px;
  font-weight: var(--calitp-font-weight-bold);
  font-family: var(--bs-font-sans-serif);
}

.press-release h2:last-of-type {
  text-decoration: underline;
}

.press-release img {
  display: block;
  max-width: 100%;
}

.press-release figcaption p {
  font-size: 0.875em;
  font-style: italic;
  text-align: center;
}

.press-release sup a {
  font-size: 1em;
  margin: 0 0.15em;
}

.footnotes ol {
  padding-left: 1rem;
}

.footnotes ol::before {
  content: "Footnotes";
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
  margin-left: -1rem;
}

.footnotes.no-title ol::before {
  content: "";
}

.footnotes a,
.footnotes li,
.footnotes p {
  font-size: 0.85rem;
}

.footnotes li:target {
  animation: footnoteFade 5s 1;
}

*[role="doc-noteref"],
*[role="doc-endnote"] {
  /* Magic calculation that is the header's height and some extra padding */
  scroll-margin-top: calc(110px + 20px);
}

@keyframes footnoteFade {
  0% {
    background-color: rgb(255 255 185 / 1);
  }

  100% {
    background-color: rgb(255 255 185 / 0);
  }
}

/* Home Page */

.hero-header {
  max-width: 441px;
}

.tab-list .press-item:nth-child(n + 4),
.tab-list .resource:nth-child(n + 4) {
  display: none;
}

.rainbow-list ol {
  list-style: none;
  counter-reset: numList;
}

.rainbow-list ol li:before {
  counter-increment: numList;
  content: counter(numList);
  text-align: center;
  color: var(--bs-white);
  line-height: 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rainbow-list ol li:nth-child(1):before {
  background: var(--calitp-primary-blue);
}

.rainbow-list ol li:nth-child(2):before {
  background: var(--calitp-orange-5);
}

.rainbow-list ol li:nth-child(3):before {
  background: var(--calitp-red-5);
}

.rainbow-list ol li:nth-child(4):before {
  background: var(--calitp-purple-4);
}

.nav-pills {
  --bs-nav-pills-border-radius: 19px;
}

.nav-pills .nav-link {
  padding: 4px 8px;
  border-width: 2px;
  border-style: solid;
}

.scroll-link {
  scroll-margin-top: 240px;
}

.black-on-white .nav-pills {
  --bs-nav-pills-link-active-color: var(--bs-white);
  --bs-nav-pills-link-active-bg: var(--bs-body-color);
}

.black-on-white .nav-pills .nav-link {
  border-color: var(--bs-body-color);
}

.black-on-white .nav-pills .nav-link:not(.active) {
  color: var(--bs-body-color);
}

.black-on-white .nav-pills .nav-link:hover {
  border-color: rgba(33, 33, 33, 0.8);
}

.white-on-color .nav-pills {
  --bs-nav-pills-link-active-color: var(--bs-body-color);
  --bs-nav-pills-link-active-bg: var(--bs-white);
}

.white-on-color .nav-pills .nav-link {
  border-color: var(--bs-white);
}

.white-on-color .nav-pills .nav-link:not(.active) {
  color: var(--bs-white);
}

.white-on-color .nav-pills .nav-link:hover {
  border-color: rgba(var(--bs-white-rgb), 0.8);
}

.clipped-initiative,
.clipped-header,
.clipped-contact-start,
.clipped-contact-end,
.clipped-stat-start,
.clipped-stat-end,
.clipped-stories-contact,
.clipped-stories-impact,
.clipped-home-stat-1,
.clipped-home-stat-2,
.clipped-home-stat-3 {
  -webkit-clip-path: none;
  clip-path: none;
  border-radius: 1.25rem;
}

.clipped-contact-start,
.clipped-contact-end,
.clipped-stat-start,
.clipped-stat-end,
.clipped-home-stat-1,
.clipped-home-stat-2,
.clipped-home-stat-3 {
  min-height: 100%;
}

.mb-28 {
  margin-bottom: 28px;
}

@media (min-width: 992px) {
  .fs-0 {
    font-size: calc(64rem / 16);
    font-family: var(--calitp-headline-sans-serif);
  }

  .h1-md {
    font-size: calc(40rem / 16);
  }

  .navbar {
    --bs-navbar-nav-link-padding-x: 40px;
    --bs-navbar-nav-link-padding-y: 0;
  }

  .navbar-brand {
    --bs-navbar-brand-padding-x: 2rem;
    --bs-navbar-brand-padding-y: 2rem;
  }

  .navbar-nav {
    --bs-nav-link-color: var(--bs-body-color);
    --bs-navbar-nav-link-padding-y: 0;
    --bs-nav-link-padding-y: 0;
    gap: 2rem;
  }

  main.container {
    min-height: calc(100vh - var(--footer-nav-height));
  }

  footer a {
    line-height: var(--footer-nav-height);
  }

  .clipped-initiative,
  .clipped-header,
  .clipped-contact-start,
  .clipped-contact-end,
  .clipped-stat-start,
  .clipped-stat-end,
  .clipped-stories-contact,
  .clipped-stories-impact,
  .clipped-home-stat-1,
  .clipped-home-stat-2,
  .clipped-home-stat-3 {
    border-radius: 0;
  }

  .clipped-initiative {
    -webkit-clip-path: url(#path-initiative);
    clip-path: url(#path-initiative);
  }

  .clipped-header {
    -webkit-clip-path: url(#path-header);
    clip-path: url(#path-header);
  }

  .clipped-contact-start {
    -webkit-clip-path: url(#path-contact-start);
    clip-path: url(#path-contact-start);
  }

  .clipped-contact-end {
    -webkit-clip-path: url(#path-contact-end);
    clip-path: url(#path-contact-end);
  }

  .clipped-stat-start {
    -webkit-clip-path: url(#path-stat-start);
    clip-path: url(#path-stat-start);
  }

  .clipped-stat-end {
    -webkit-clip-path: url(#path-stat-end);
    clip-path: url(#path-stat-end);
  }

  .clipped-stories-contact {
    -webkit-clip-path: url(#path-stories-contact);
    clip-path: url(#path-stories-contact);
  }

  .clipped-stories-impact {
    -webkit-clip-path: url(#path-stories-impact);
    clip-path: url(#path-stories-impact);
  }

  .clipped-home-stat-1 {
    -webkit-clip-path: url(#path-home-stat-1);
    clip-path: url(#path-home-stat-1);
  }

  .clipped-home-stat-2 {
    -webkit-clip-path: url(#path-home-stat-2);
    clip-path: url(#path-home-stat-2);
  }

  .clipped-home-stat-3 {
    -webkit-clip-path: url(#path-home-stat-3);
    clip-path: url(#path-home-stat-3);
  }

  figure.quote blockquote {
    font-size: calc(24rem / 16);
  }

  small,
  .small {
    font-size: calc(12rem / 16) !important;
  }

  .stories-map {
    height: 150px;
  }

  .impact {
    z-index: 1025;
    position: absolute;
    left: 0;
  }

  .monterey-and-contact,
  .absolute-footer {
    position: relative;
    top: 620px; /* Height of the absolutely-positioned Impact section */
  }

  .impact-stats-parent {
    margin-left: -190px;
    background: transparent url(/images/stories-bg-gradient.png) repeat-y right / contain;
    padding: 60px 0;
  }

  .stories-toc {
    top: calc(var(--header-nav-height) + 1.5rem);
  }
}

@media (max-width: 992px) {
  .fs-0 {
    font-size: calc(40rem / 16);
    font-family: var(--calitp-headline-sans-serif);
  }

  .navbar-brand {
    --bs-navbar-brand-padding-x: 2rem;
    --bs-navbar-brand-padding-y: 2rem;
  }

  #mainNav {
    position: absolute;
    width: 100%;
    left: 0;
    top: var(--header-nav-height);
    background: var(--bs-white);
  }

  .navbar-nav .nav-link {
    padding: 23.8px 0 23.8px 12px;
    border-bottom: 1px solid var(--calitp-cyan-1);
  }

  .navbar-nav {
    margin: 0 auto;
  }

  figure.quote blockquote {
    font-size: calc(20rem / 16);
  }

  small,
  .small {
    font-size: calc(10rem / 16) !important;
  }

  .stories-map {
    width: 100%;
    height: auto;
  }

  .impact-stats {
    margin: -80px auto 0 auto;
  }
}

@media (min-width: 768px) {
  .mb-md-40 {
    margin-bottom: 40px;
  }

  .navbar-nav {
    max-width: 720px;
  }
}

@media (min-width: 576px) and (max-width: 765px) {
  .navbar-nav {
    max-width: 540px;
  }
}