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

/* HERO IMAGE */

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

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

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

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