@import url("download-cards.css");
@import url("related-nav.css");
@import url("pull-quotes.css");

/* unordered lists */

ul > li {
  margin-bottom: var(--spacing-1);
}
ul > li:last-child {
  margin-bottom: 0;
}

/* HERO IMAGE */

.hero-img {
  max-height: 400px;
  display: block;
  margin: auto;
  width: initial;
}

@media (max-width: 450px) {
  .hero-img {
    width: 100%;
  }
}

/* STEP LIST and NUMBERED LIST (better naming would be welcomed :) ) */

.numbered-list,
.step-list {
  counter-reset: li;
  list-style: none;
  padding-left: 0;
}
/* override bootstrap defaults for nested lists */
.numbered-list > li > ol,
.numbered-list > li > ul {
  margin-bottom: var(--spacing-2);
}
.numbered-list > li > ul {
  list-style-type: disc;
}
.numbered-list h3 {
  padding-bottom: 0.25em;
  padding-left: 2.5em;
  padding-top: 0.25em;
}
.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);
}
/* we target only the direct child in numbered-list because the component allows for additional nested content */
.numbered-list > li,
.step-list li {
  position: relative;
}
.numbered-list > li {
  margin-top: var(--spacing-5);
}
.step-list li {
  margin-bottom: var(--spacing-3);
}
.step-list li:last-child {
  margin-bottom: 0;
}
.step-list li::before {
  display: block;
}
.numbered-list > li::before,
.step-list li::before {
  border-radius: 100%;
  content: counter(li);
  counter-increment: li;
  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 {
  width: var(--spacing-4);
  height: var(--spacing-4);
  left: calc(-1 * var(--spacing-6));
  line-height: calc(2rem + (1rem / 16));
}
.numbered-list > li::before {
  font-size: var(--text-xl);
  height: 1.75em;
  left: 0;
  line-height: 1.75em;
  top: 0;
  width: 1.75em;
}
@media (min-width: 992px) {
  .numbered-list > li::before {
    font-size: var(--text-xxl);
  }
}
.step-list_yellow {
  border-left-color: var(--calitp-brand-yellow);
}
.numbered-list_yellow > li::before,
.step-list_yellow li::before {
  background-color: var(--calitp-brand-yellow);
  color: var(--dsdl-black);
}
.step-list_purple {
  border-left-color: var(--dsdl-purple-80);
}
.numbered-list_purple > li::before,
.step-list_purple li::before {
  background-color: var(--dsdl-purple-80);
  color: white;
}
.step-list_green {
  border-left-color: var(--dsdl-green-70);
}
.numbered-list_green > li::before,
.step-list_green li::before {
  background-color: var(--dsdl-green-70);
  color: white;
}
.step-list_cyan-light {
  border-left-color: var(--dsdl-cyan-10);
}
.numbered-list_cyan-light > li::before,
.step-list_cyan-light li::before {
  background-color: var(--dsdl-cyan-10);
}
.step-list_cyan-dark {
  border-left-color: var(--dsdl-cyan-60);
}
.numbered-list_cyan-dark > li::before,
.step-list_cyan-dark li::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;
}
.table-responsive table {
  border-color: var(--dsdl-gray-40);
  border-style: solid;
  /* left border is applied below to cells in first column so it stays in place when scrolling horizontally */
  border-width: 1px 1px 1px 0;
  border-radius: 0;
}
.table-responsive thead th:first-child,
.table-responsive tbody th:first-child,
.table-responsive tbody td:first-child {
  position: sticky;
  left: 0;
  border-left: 1px solid var(--dsdl-gray-40);
}
/* 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);
}

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

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