/* BOOTSTRAP OVERRIDES */

/* top-level containers and pull quotes */
main > .container,
.pull-quote > .container,
.dl-hero > .container {
  --bs-gutter-x: var(--spacing-6); /* 24px padding override (w/o sass) */
}

main > .container {
  max-width: calc(800px + var(--bs-gutter-x));
}

/* fix tight heading margins */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: var(--spacing-2);
}

h2 {
  margin-top: var(--spacing-6);
}
h3,
h4,
h3.h4 {
  /* extra selector to deal with Bootstrap's aggressiveness
     and our common practice of styling H3s as H4s */
  margin-top: var(--spacing-3);
}

/* buttons */
.btn.btn-outline-primary {
  padding: var(--spacing-05) var(--spacing-1);
  border: 1px solid var(--dsdl-gray-50);
  color: var(--dsdl-black);
  font-size: var(--text-l);
}

.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:hover {
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-bg-color);
}

.btn.btn-outline-primary:active {
  border-color: var(--button-active-border-color);
  background-color: var(--button-active-bg-color);
  color: var(--button-active-text-color);
}

.navbar {
  gap: var(--spacing-4);
  justify-content: flex-end;
  padding: 12px 0;
}

.navbar-toggler {
  border: none;
}

span.visually-hidden {
  /* Deals with an issue that causes screen readers to read hidden span elements out of order:
     https://github.com/h5bp/main.css/issues/12 */
  margin: auto !important;
}

/* GLOBAL / VARIABLES */

:root {
  --button-bg-color: white;
  --button-border: 1px solid var(--dsdl-gray-50);
  --button-border-radius: 2em; /* enough for the ends to be perfect semicircles */
  --button-font-size: calc(18 / var(--text-base) * 1rem);
  --button-font-weight: 500;
  --button-text-color: var(--dsdl-black);

  --button-hover-bg-color: var(--dsdl-cyan-10);
  --button-hover-border-color: var(--dsdl-cyan-60);
  --button-hover-text-color: inherit;

  --button-focus-outline: 3px solid var(--calitp-brand-blue);
  --button-focus-outline-offset: 3px;

  --button-active-bg-color: var(--dsdl-cyan-80);
  --button-active-border-color: var(--dsdl-cyan-80);
  --button-active-text-color: white;

  --button-large-font-size: var(--text-xl);
  --button-large-font-weight: 700;
  --button-large-text-color: var(--dsdl-cyan-60);
  --button-large-hover-bg-color: var(--dsdl-cyan-60);
  --button-large-hover-border-color: var(--dsdl-cyan-60);
  --button-large-hover-text-color: white;
}

a {
  color: unset;
}

h1,
.h1,
h2,
.h2 {
  text-align: center;
}

/* TYPE SCALE */

/* If these adjustments prove successful, they should be relocated to the DSDL styles in calitp.org. */

h3,
.h3,
h4,
.h4 {
  font-weight: 700;
}
h5,
.h5 {
  font-size: calc(18 / var(--text-base) * 1rem);
  font-weight: 500;
}
.text-body-xl {
  /* Referred to in Figma as "p2" */
  font-size: var(--text-l);
}

@media (min-width: 992px) {
  h1,
  .h1 {
    font-size: calc(48 / var(--text-base) * 1rem);
  }
  h2,
  .h2 {
    font-size: var(--text-xxxl);
  }
  h3,
  .h3 {
    font-size: var(--text-xxl);
  }
  h4,
  .h4 {
    font-size: var(--text-xl);
  }
  small,
  .small,
  .text-caption {
    font-size: var(--text-s);
  }
}

/* PULL QUOTE */

.pull-quote {
  padding: var(--spacing-5) 0;
  margin: var(--spacing-7) 0;
  background-color: var(--dsdl-gray-20);
}
.pull-quote-content {
  font-family: var(--dsdl-heading-font-stack);
  font-size: var(--text-xl);
}
.pull-quote-content_attributed {
  margin-bottom: var(--spacing-3);
}
.pull-quote-content_unattributed {
  margin-bottom: 0;
}
.pull-quote-content_attributed::before {
  content: "“";
  display: block;
  margin-bottom: -0.25em;
  color: white;
  font-family: var(--dsdl-heading-font-stack);
  font-size: calc(150 / 16 * 1rem);
  line-height: 0.75;
  font-weight: 700;
}
.pull-quote_yellow {
  background-color: var(--calitp-brand-yellow);
  color: var(--dsdl-black);
}
.pull-quote_purple {
  background-color: var(--dsdl-purple-30);
  color: var(--dsdl-black);
}
.pull-quote_cyan-light {
  background-color: var(--dsdl-cyan-10);
  color: var(--dsdl-black);
}
.pull-quote_cyan-light .pull-quote-content_attributed::before {
  color: var(--dsdl-cyan-40);
}
.pull-quote_cyan-dark {
  background-color: var(--dsdl-cyan-60);
  color: white;
}
.pull-quote_cyan-dark .pull-quote-content_attributed::before {
  color: var(--dsdl-cyan-10);
}

@media (min-width: 992px) {
  .pull-quote-content_attributed {
    position: relative;
  }
  .pull-quote-content_attributed::before {
    position: absolute;
    top: 0.03125em;
    left: -15%;
  }
}

/* STEP LIST */

.step-list {
  /* This dance of padding/border/margin is needed to
     align the left border with the center of the markers
     and have the text end up 1rem from the marker.
     The amounts total up to 48px / 3rem. */
  padding-left: calc(30rem / 16);
  border-left: calc(3rem / 16) solid var(--dsdl-gray-20);
  margin-left: calc(15rem / 16);
  /* Bottom padding ensures the vertical line extends below the last item. */
  padding-bottom: var(--spacing-3);
  font-size: var(--text-l);
  list-style: none;
  counter-reset: step-list;
}
.numbered {
  position: relative;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  padding-left: 2.5em;
  margin-top: var(--spacing-5);
}
.step-list li {
  margin-bottom: var(--spacing-3);
  position: relative;
  counter-increment: step-list;
}
.step-list li:last-child {
  margin-bottom: 0;
}
.step-list li::before,
.numbered::before {
  display: block;
  border-radius: 100%;
  position: absolute;
  background-color: var(--dsdl-gray-20);
  color: var(--dsdl-black);
  font-family: var(--dsdl-heading-font-stack);
  font-size: var(--text-m);
  font-weight: bold;
  text-align: center;
}
.step-list li::before {
  content: counter(step-list);
  width: var(--spacing-4);
  height: var(--spacing-4);
  left: calc(-1 * var(--spacing-6));
  line-height: calc(2rem + (1rem / 16));
}
.numbered::before {
  content: attr(data-number);
  width: 1.75em;
  height: 1.75em;
  left: 0;
  top: 0;
  font-size: 1em;
  line-height: 1.75em;
}

.step-list_yellow {
  border-left-color: var(--calitp-brand-yellow);
}
.step-list_yellow li::before,
.numbered_yellow::before {
  background-color: var(--calitp-brand-yellow);
  color: var(--dsdl-black);
}
.step-list_purple {
  border-left-color: var(--dsdl-purple-80);
}
.step-list_purple li::before,
.numbered_purple::before {
  background-color: var(--dsdl-purple-80);
  color: white;
}
.step-list_cyan-light {
  border-left-color: var(--dsdl-cyan-10);
}
.step-list_cyan-light li::before,
.numbered_cyan-light::before {
  background-color: var(--dsdl-cyan-10);
}
.step-list_cyan-dark {
  border-left-color: var(--dsdl-cyan-60);
}
.step-list_cyan-dark li::before,
.numbered_cyan-dark::before {
  background-color: var(--dsdl-cyan-60);
  color: white;
}

/* TABLES */

table {
  width: 100%;
  border: 1px solid var(--dsdl-gray-40);
  border-collapse: separate;
  border-radius: 4px;
  border-spacing: 0;
}
/* Apply a border to the right of all but the last column */
th:not(:last-child),
td:not(:last-child) {
  border-right: 1px solid var(--dsdl-gray-40);
}
/* Apply a border to the bottom of all but the last row */
thead th,
tr:not(:last-child) > td,
tbody > tr:not(:last-child) > th {
  border-bottom: 1px solid var(--dsdl-gray-40);
}
td,
th {
  padding: calc(var(--spacing-base) * 1.5); /* 1.25rem (20px) -- add new var --spacing-1-05 var for this? */
}
th {
  background-color: var(--dsdl-gray-20);
}
td ul,
td ol {
  padding-left: 1em;
  margin-bottom: 0;
}
.table_yellow th {
  background-color: var(--dsdl-yellow-10);
}
.table_purple th {
  background-color: var(--dsdl-purple-20);
}
.table_cyan th {
  background-color: var(--dsdl-cyan-10);
}
.table-responsive {
  container-name: responsive-table-wrapper;
  container-type: inline-size;
}

/* Magic numbers decided based on current table content. */
@container responsive-table-wrapper (max-width: calc(720rem / 16)) {
  /* Variables can't be used here yet. */
  .wider {
    min-width: calc(var(--spacing-base) * 120);
  }
}

/* DOWNLOAD CARDS */

.dl-card {
  display: block;
  max-width: calc(var(--spacing-base) * 41.5); /* 20.75rem  (332px) */
  aspect-ratio: 2 / 3;
  padding: 40px;
  border: 1px solid var(--dsdl-gray-50);
  border-radius: 8px;
  margin-bottom: var(--spacing-2);
  position: relative;
  background-color: var(--dsdl-cyan-10);
}
.dl-card-thumbnail {
  display: block;
  width: 100%;
  box-shadow: 0 -2px 16px rgb(38 38 38 / 0.25); /* gray 80 at 20% opacity */
}
.dl-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-height: 52%; /* Ensures three lines of description fit comfortably at default text size. */
  padding: 24px;
  border-top: 1px solid var(--dsdl-gray-50);
  border-radius: 0 0 8px 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: white;
}
.dl-card-text > h3 {
  color: var(--dsdl-cyan-60);
  font-weight: 700;
}
.dl-card-text > p {
  flex-grow: 1;
}
.dl-tag,
.dl-button {
  display: inline-block;
  border: var(--button-border);
  line-height: var(--line-height-tight);
}
.dl-tag {
  padding: var(--spacing-05) var(--spacing-1);
}
.dl-button {
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--button-border-radius);
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  font-family: var(--dsdl-heading-font-stack);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  text-decoration: none;
}
.dl-button:hover {
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-bg-color);
}
.dl-button:focus {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-outline-offset);
}
.dl-button:active {
  border-color: var(--button-active-border-color);
  background-color: var(--button-active-bg-color);
  color: var(--button-active-text-color);
}
.dl-button > svg {
  height: 1em;
  margin-left: 0.25em;
  position: relative;
  top: calc(-1.5em / 18); /* adjustment for optical alignment with the text */
}
.dl-button + .dl-button {
  margin-left: var(--spacing-05);
}

/* DOWNLOAD HERO */

.dl-hero {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-7);
  background-color: var(--dsdl-slate-10);
}
.dl-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.dl-hero h1 {
  color: var(--calitp-brand-blue);
}
.dl-hero .dl-tag {
  padding: var(--spacing-1);
  background-color: var(--dsdl-cyan-10);
}
.dl-hero .dl-button {
  padding: var(--spacing-1) var(--spacing-3);
  color: var(--button-large-text-color);
  font-size: var(--button-large-font-size);
  font-weight: var(--button-large-font-weight);
}
.dl-hero .dl-button:hover {
  border-color: var(--button-large-hover-border-color);
  background-color: var(--button-large-hover-bg-color);
  color: var(--button-large-hover-text-color);
}
.dl-hero-image > img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

@media (min-width: 992px) {
  .dl-hero {
    padding-top: calc(var(--spacing-base) * 13); /* 6.5rem (104px) */
    padding-bottom: calc(var(--spacing-base) * 22); /* 11rem (176px) */
  }
}

/* COMPARISON BLOCK */

.comparison {
  --bs-gutter-x: var(--spacing-1);
}
.comparison > .col-md {
  margin-bottom: var(--spacing-1);
}
.comparison-box {
  height: 100%;
  padding: 16px;
  border-radius: 8px;
}
.comparison-1 {
  border: 1px solid var(--dsdl-cyan-30);
  background-color: var(--dsdl-cyan-10);
}
.comparison-2 {
  background-color: var(--dsdl-cyan-60);
  color: white;
}
.comparison h3 > svg {
  height: 0.875em;
  margin-right: 0.25em;
  position: relative;
  top: calc(-1.5em / 18); /* adjustment for optical alignment with the text */
}
.comparison ul {
  padding-left: 1.375em;
  margin-bottom: 0;
}

/* RELATED NAV */

.related-nav {
  --bs-gutter-x: var(--spacing-1);
}
.related-nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  height: var(--spacing-15);
  padding: 16px;
  border: 1px solid var(--dsdl-gray-30); /* lighter than standard buttons */
  border-radius: 8px; /* smaller than standard buttons */
  margin-bottom: var(--spacing-1);
  color: var(--button-text-color);
  text-decoration: none;
}
.related-nav-link:focus {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-outline-offset);
}
.related-nav-link:hover {
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-bg-color);
}
.related-nav-link:active {
  border-color: var(--button-active-border-color);
  background-color: var(--button-active-bg-color);
  color: var(--button-active-text-color);
}
.related-nav-link > .text {
  flex-grow: 1;
}

/* HEADER */
.header {
  background-color: #fff;
  max-width: calc(var(--spacing-base) * 180); /* don't let the actual content stretch beyond 1440px */
  padding: var(--spacing-3) var(--spacing-2);
}

.global-nav ul {
  gap: var(--spacing-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 992px) {
  .header {
    padding: var(--spacing-3) var(--spacing-8);
  }
}

.global-nav a,
.header a.contact {
  border: var(--button-border);
  border-radius: 1em; /* not fully rounded like the default buttons */
  color: var(--button-text-color);
  display: inline-block;
  line-height: var(--line-height-tight);
  padding: var(--spacing-1) 12px;
  text-decoration: none;
}

.global-nav a:focus,
.header a.contact:focus {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-outline-offset);
}

.global-nav a:hover,
.header a.contact:hover {
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-bg-color);
}

.global-nav a:active,
.header a.contact:active {
  border-color: var(--button-active-border-color);
  background-color: var(--button-active-bg-color);
  color: var(--button-active-text-color);
}

.global-nav a[aria-current="page"],
.header a.contact[aria-current="page"] {
  border-color: var(--dsdl-cyan-60);
  background-color: var(--dsdl-cyan-60);
  color: white;
  cursor: default;
}

.header a.contact {
  border: none;
}

.cta-banner {
  background-color: var(--calitp-brand-yellow);
  height: var(--spacing-10);
}

.out-of-service {
  width: 260px;
}

@media (min-width: 768px) {
  .out-of-service {
    width: 424px;
  }
}

.site-logo {
  width: 140px;
}

@media (min-width: 992px) {
  .site-logo {
    width: 160px;
  }
}

/* FOOTER */
.footer-wrapper {
  background-color: var(--dsdl-gray-100);
  width: 100%;
}

.footer {
  color: #fff;
  max-width: calc(var(--spacing-base) * 180); /* don't let the actual footer content stretch beyond 1440px */
  padding: var(--spacing-4) var(--spacing-2) var(--spacing-2);
}

.footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.privacy-links ul {
  display: flex;
  gap: var(--spacing-1);
  justify-content: space-between;
}

@media (min-width: 992px) {
  .footer {
    padding: var(--spacing-4) var(--spacing-10);
  }

  .privacy-links ul {
    display: unset;
  }
}

.footer a {
  color: inherit;
}

.footer a:focus {
  border-radius: calc(2rem / 16);
  outline: 1px solid #fff;
  outline-offset: 2px;
}

.footer a:hover {
  color: var(--calitp-brand-yellow);
}

.footer nav a,
a:has(> img) {
  text-decoration: none;
}

.footer hr {
  margin: var(--spacing-1) var(--spacing-3);
  opacity: 1;
  width: unset;
}

/* 404 PAGE */
.wrapper-404 {
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}

.heading-404 {
  max-width: calc(var(--spacing-10) * 5);
}

/* 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 */
  }
}

.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;
  }
}

.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;
}

.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);
}

/* DATA-PLANS */
.estimator {
  border: 1px solid var(--dsdl-black);
  border-radius: 16px;
}

.estimator-2 {
  background-color: var(--dsdl-purple-20);
  border-color: var(--dsdl-purple-50);
}

/* CONTACT PAGE */

.hs-form-field {
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}
.hs-form-field > label {
  margin-bottom: var(--spacing-1);
}
.hs-form-booleancheckbox > label {
  display: inline; /* overriding Bootstrap's inline-block to prevent text wrapping */
}
.hs-form-required {
  display: none;
}
.hs-input.invalid,
.hs-input.error {
  border-color: var(--dsdl-red-60);
}
.hs-error-msgs {
  width: 100%;
  margin-top: var(--spacing-1);
  color: var(--dsdl-red-60);
}
.hs-form-field > .input {
  flex-grow: 1;
}
.hs-input {
  width: 100%;
}
.hs_contact_type .inputs-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 8px;
  margin-bottom: 0;
}
.hs-input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.hs-input[type="radio"] + span {
  padding: var(--spacing-05) var(--spacing-1);
  border: 1px solid var(--dsdl-gray-50);
  border-radius: var(--spacing-05);
}
.hs-input[type="radio"]:hover + span {
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-bg-color);
}
.hs-input[type="radio"]:focus + span {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-outline-offset);
}
.hs-input[type="radio"]:active + span {
  border-color: var(--button-active-border-color);
  background-color: var(--button-active-bg-color);
  color: var(--button-active-text-color);
}
.hs-input[type="radio"]:checked + span {
  /* TODO: Turn into named variables and apply to current page in global nav */
  border-color: var(--dsdl-cyan-60);
  background-color: var(--dsdl-cyan-60);
  color: white;
}
.hs-form-radio {
  line-height: 2rem;
}
label[for="TICKET.content-bc98c500-50cf-4793-ad1b-1ea6f58eeb11"]::after {
  content: " - Optional";
  font-style: italic;
}
textarea[name="TICKET.content"] {
  height: var(--spacing-20);
  padding: 8px 12px;
}
textarea[name="TICKET.content"]::placeholder {
  color: var(--dsdl-gray-40);
  font-style: italic;
}
.hs-form-booleancheckbox > label {
  display: flex;
}
.legal-consent-container .hs-form-booleancheckbox-display input {
  flex-shrink: 0;
  float: none;
}
.legal-consent-container .hs-form-booleancheckbox-display > span {
  margin-left: var(--spacing-2);
}

.hbspt-form ul {
  list-style-type: none;
  padding-left: 0;
}
.hs-submit {
  text-align: center;
}
.hs-button.primary {
  background-color: white;
  font-size: var(--text-l);
}
.hs-button.primary:focus {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-outline-offset);
}
.hs-button.primary:hover {
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-bg-color);
}
.hs-button.primary:active {
  border-color: var(--button-active-border-color);
  background-color: var(--button-active-bg-color);
  color: var(--button-active-text-color);
}
.hbspt-form .submitted-message {
  padding: var(--spacing-5);
  margin: var(--spacing-3) auto var(--spacing-6);
  background-color: var(--dsdl-cyan-10);
}

/* GLOBAL FORM STYLING */

input,
textarea {
  padding: var(--spacing-05) var(--spacing-1);
  border: 1px solid var(--dsdl-gray-50);
  border-radius: var(--spacing-05);
}
input:hover,
textarea:hover {
  border-color: var(--dsdl-black);
}
input:focus,
textarea:focus {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-focus-outline-offset);
}

/* TODO: consider further customizing border-radius etc. using appearance: none; */
input[type="checkbox"] {
  accent-color: var(--dsdl-indigo-80);
  height: var(--spacing-3);
  width: var(--spacing-3);
}

/* GENERIC / SHARED */
.hero-img {
  height: 533px; /* explict height declaration to avoid jitter during load */
  width: 100%;
}

.spacer-10 {
  height: var(--spacing-10);
}

.table-caption {
  color: var(--dsdl-gray-60);
}

.bg-info-yellow {
  background-color: var(--dsdl-yellow-10);
}