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

/* HERO IMAGE */

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

@media (max-width: 450px) {
  .hero-img {
    width: 100%;
    margin: var(--spacing-2) 0;
  }
}

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