@import url("pull-quotes.css");

/* HOMEPAGE */

.logo-strip {
  height: 48px;
  margin-bottom: var(--spacing-8);
  position: relative;
  overflow: hidden;
}
.logo-strip-list {
  list-style: none;
  padding: 0;
  position: absolute;
  display: flex;
  align-items: center;
  animation-name: slide-to-the-left;
  animation-duration: 120s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.logo-strip-list > li {
  height: 48px;
  margin-left: var(--spacing-5); /* 40px between logos */
}
.logo-strip img {
  height: 100%;
}

@keyframes slide-to-the-left {
  from {
    translate: 0 0;
  }

  to {
    translate: -50% 0;
  }
}

@media (min-width: 768px) {
  .logo-strip-list {
    animation-duration: 180s;
  }
  .logo-strip-list > li {
    height: 48px;
    margin-left: calc(var(--spacing-base) * 12.5); /* 100px between logos */
  }
}

.highlights {
  /* --bs-gutter-x: var(--spacing-1); */
  list-style: none;
  padding: 0;
}
.highlight {
  padding: 24px 40px;
  border: 1px solid var(--dsdl-gray-30);
  border-radius: 40px;
  margin-bottom: var(--spacing-2);
}
.highlight > h3 {
  color: var(--calitp-brand-blue);
  text-align: center;
}
.highlight > img {
  display: block;
  width: 100%;
  margin: var(--spacing-4) 0;
}

.carousel {
  --bs-carousel-caption-color: var(--dsdl-black);
  max-width: 870px;
  margin: 0 auto;
}
.carousel-caption {
  position: static;
}
.carousel-caption > p {
  /* Ensures consistent element positioning when sliding if some captions have more lines than others. */
  min-height: calc(1em * 3 * 1.5); /* max 3 lines at line-height 1.5 */
}
.carousel-caption > a {
  /* Ensures consistent element positioning when sliding if some captions have more lines than others. */
  display: inline-block;
  min-height: calc(1em * 2 * 1.25); /* max 2 lines at line-height 1.25 */
  margin-bottom: 0;
}
.carousel-indicators {
  position: static;
  margin: 0;
  gap: var(--spacing-2);
}
.carousel-indicators [data-bs-target],
.carousel-controls > button {
  box-sizing: initial;
  width: auto;
  height: auto;
  padding: var(--spacing-1) 12px;
  border: var(--button-border);
  border-radius: 1em; /* not fully rounded like the default buttons */
  margin: 0;
  position: static;
  background-color: white;
  color: var(--button-text-color);
  line-height: var(--line-height-tight);
  text-indent: 0;
  opacity: 1;
}
.carousel-indicators [data-bs-target] {
  border: 1px solid var(--dsdl-gray-20);
}
.carousel-indicators [data-bs-target]:hover {
  border-color: var(--dsdl-blue-10);
  background-color: var(--dsdl-blue-10);
}
.carousel-indicators [data-bs-target]:focus {
  outline: 2px solid var(--calitp-brand-cyan);
}
.carousel-indicators [data-bs-target]:active {
  border-color: var(--dsdl-cyan-30);
  background-color: var(--dsdl-cyan-30);
}
.carousel-indicators .active {
  border-color: var(--dsdl-cyan-10);
  background-color: var(--dsdl-cyan-10);
}
.carousel-controls > button:focus {
  color: var(--button-text-color);
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-outline-offset);
}
.carousel-controls > button:hover {
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-bg-color);
  color: var(--button-text-color);
}
.carousel-controls > button:active {
  border-color: var(--button-active-border-color);
  background-color: var(--button-active-bg-color);
  color: var(--button-active-text-color);
}
.carousel-controls > button {
  gap: var(--spacing-1);
}
.carousel-controls svg {
  height: 1em;
  position: relative;
  top: calc(0.5em / 16);
}

@media (min-width: 576px) {
  .carousel-caption > p {
    /* Ensures consistent element positioning when sliding if some captions have more lines than others. */
    min-height: calc(1em * 2 * 1.5); /* max 2 lines at line-height 1.5 */
  }
  .carousel-caption > a {
    /* We'll never have more than one line at this width and up. */
    min-height: auto;
  }
}

@media (min-width: 992px) {
  .carousel-caption > p {
    /* We'll never have more than one line at this width and up. */
    min-height: auto;
  }
}

.guide-cards {
  padding: var(--spacing-7) 0 var(--spacing-10);
  background-color: var(--dsdl-gray-10);
}
.guide-cards h2 {
  max-width: calc(var(--spacing-base) * 105);
  margin-bottom: var(--spacing-7);
}
.guide-cards ul {
  --bs-gutter-x: var(--spacing-1);
  list-style: none;
  padding: 0;
}
.guide-cards li {
  margin-bottom: var(--spacing-1);
}
.guide-card {
  display: block;
  height: 100%;
  padding: 20px;
  background-color: white;
  text-decoration: none;
}
.guide-card.data-plans:hover {
  background-color: var(--dsdl-purple-20);
}
.guide-card.route-scheduling:hover {
  background-color: var(--dsdl-blue-20);
}
.guide-card.gtfs-rt:hover {
  background-color: var(--dsdl-cyan-10);
}
.guide-card.tap-to-pay:hover {
  background-color: var(--dsdl-yellow-10);
}
.guide-card.rider-benefits:hover {
  background-color: var(--dsdl-green-20);
}
.guide-card:focus {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-outline-offset);
}
.guide-card.data-plans .h4 {
  color: var(--dsdl-purple-80);
}
.guide-card.route-scheduling .h4 {
  color: var(--dsdl-blue-70);
}
.guide-card.gtfs-rt .h4 {
  color: var(--dsdl-cyan-70);
}
.guide-card.tap-to-pay .h4 {
  color: var(--dsdl-yellow-70);
}
.guide-card.rider-benefits .h4 {
  color: var(--dsdl-green-70);
}
.guide-card:active {
  box-shadow: inset 0 0 4px 4px white;
}
.guide-card:active .h4 {
  color: var(--dsdl-black);
}
.guide-cards a.contact-cs {
  border: var(--button-border);
  border-radius: 1em; /* not fully rounded like the default buttons */
  background-color: white;
  color: var(--button-text-color);
  display: inline-block;
  line-height: var(--line-height-tight);
  padding: var(--spacing-1) 12px;
}
.guide-cards a.contact-cs:hover {
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-bg-color);
}
.guide-cards a.contact-cs:focus {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-outline-offset);
}
.guide-cards a.contact-cs:active {
  border-color: var(--button-active-border-color);
  background-color: var(--button-active-bg-color);
  color: var(--button-active-text-color);
}