@import 'dsdl/dsdl.css';
@import 'variables.css';
@import 'clipped-containers.css';
@import 'footnotes.css';
@import 'nav-pills.css';
@import 'navbar.css';
@import 'print.css';


.background-calitp-blue {
  background-color: var(--calitp-brand-blue);
}

.background-purple-70 {
  background-color: var(--dsdl-purple-70);
}

.background-yellow-30 {
  background-color: var(--dsdl-yellow-30);
}

.border-purple-70 {
  border-color: var(--dsdl-purple-70);
}

.border-yellow-30 {
  border-color: var(--dsdl-yellow-30);
}

.min-w-0 {
  min-width: 0;
}

.btn {
  --bs-btn-border-width: 2px;
}

h1,
.h1 {
  margin-bottom: 19px;
}

hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.text-small-caps {
  /* TODO: Consider adding to DSDL definition. */
  letter-spacing: 0.025em;
}

a {
  /* TODO: Probably stop setting this font-weight, given that we override it half the time? */
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 1px;
  text-decoration-thickness: 2px;
}

a:hover {
  text-decoration-style: dotted;
}

figure.quote {
  border-left-width: 3px;
  border-left-style: solid;
  padding-left: 2rem;
}

figure.quote figcaption {
  font-size: var(--text-m);
  /* TODO: Revisit use of faux italics with Space Grotesk */
  font-style: italic;
}

footer a:hover {
  color: var(--dsdl-gray-30) !important;
}

.mb-28 {
  margin-bottom: 28px;
}

@media (min-width: 992px) {

  .h1-md {
    font-size: var(--text-xxxl);
  }

  figure.quote blockquote {
    font-size: var(--text-xl);
  }
}

@media (max-width: 992px) {
  .text-display {
    font-size: var(--text-xxxl);
  }

  figure.quote blockquote {
    font-size: var(--text-l);
  }

  small,
  .small,
  .text-caption {
    font-size: var(--text-xxs) !important;
  }
}

@media (min-width: 768px) {
  .mb-md-40 {
    margin-bottom: 40px;
  }
}