/* Default theme. Simple, yet elegant. */

/* Use Open Sans as the default sans serif font. */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700|Source+Code+Pro:300,400,500,700");

/* See https://getbootstrap.com/docs/5.2/customize/css-variables/#root-variables for variables to override. */
:root {
  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-link-color: var(--bs-blue);
  --tf-pill-bg: var(--bs-gray);
  --tf-icon-fill: var(--bs-gray);
  --tf-icon-hover: var(--bs-gray-500);
  --tf-page-bg-color: var(--bs-white);
  --tf-footer-bg-color: var(--bs-gray-200);
  --tf-articles-border-color: rgba(0, 0, 0, 0.08);
  --tf-articles-row-even-bg-color: rgba(0, 0, 0, 0.02);
  --tf-articles-row-hover-bg-color: rgba(0, 0, 0, 0.06);
  --tf-articles-pulse-bg-color: rgba(13, 110, 253, 0.12);
  --tf-articles-toast-bg-color: #0d6efd;
  --tf-articles-toast-fg-color: #ffffff;
}

/* Format social media icons */
.tf-social {
  display: inline-block;
  fill: var(--tf-icon-fill);
  height: 1.5em;
  vertical-align: -.1em;
  width: 1.5em;
  transition: 0.2s;
}

.tf-social:hover {
  fill: var(--tf-icon-hover);
}

a {
  text-decoration: none;
}

@media (max-width: 500px) {
  .navbar-brand {
    display: none;
  }

  .navbar-brand-mobile {
    display: inline;
  }
}

/* Simplify the styling of the bottom of Essay cards. */
.card-footer {
  background-color: var(--bs-white);
  border-top: none;
}

.long-summary-entry:not(:last-child) {
  margin-bottom: 1em !important;
}

/* Auto-alternate homepage sections so adding/removing sections needs no color tweaks. */
.home-sections > .bg-gradient:nth-of-type(odd) {
  background-color: var(--bs-white) !important;
}

.home-sections > .bg-gradient:nth-of-type(even) {
  background-color: var(--bs-gray-100) !important;
}

.articles-scroll {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--tf-articles-border-color);
  border-radius: 0.375rem;
}

.articles-scroll-full {
  max-height: none;
  overflow-y: visible;
}

.article-item + .article-item {
  border-top: 1px solid var(--tf-articles-border-color);
}

.article-item:nth-child(even) {
  background-color: var(--tf-articles-row-even-bg-color);
}

.article-item:hover {
  background-color: var(--tf-articles-row-hover-bg-color);
}

.article-date {
  color: var(--bs-gray-600);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.article-share {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  padding: 1px 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  border-radius: 3px;
  position: relative;
}

.article-item:hover .article-share,
.article-share:focus {
  opacity: 0.7;
}

.article-share:hover {
  opacity: 1;
}

@media (hover: none) {
  .article-share {
    opacity: 0.7;
  }
  .article-share:active {
    opacity: 1;
  }
}

.copy-link-toast {
  position: absolute;
  left: 100%;
  top: 0;
  white-space: nowrap;
  background: #0d6efd;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 500;
  pointer-events: none;
  animation: copy-link-toast-fade 1.5s ease forwards;
}

@keyframes copy-link-toast-fade {
  0%   { opacity: 0; transform: translateX(4px); }
  8%   { opacity: 1; transform: translateX(0); }
  80%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-2px); }
}

@keyframes anchor-pulse {
  0%, 100% { background: transparent; }
  50%      { background: var(--tf-articles-pulse-bg-color); }
}

.article-item.anchor-pulse {
  animation: anchor-pulse 2s ease-in-out 3;
}

/* ---- heading anchors (changelog and other sections) ---- */

.changelog h2[id],
.changelog h3[id],
.changelog li[id],
.section-title {
  position: relative;
}

.heading-anchor {
  position: absolute;
  left: -1.15em;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
  font-size: 0.75em;
  line-height: 1;
  padding: 2px 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  color: var(--bs-gray-500);
}

li[id] > .heading-anchor {
  left: -2.8em;
  top: 0.5em;
  transform: none;
}

.section-title:hover .heading-anchor,
h2[id]:hover .heading-anchor,
h3[id]:hover .heading-anchor,
li[id]:hover .heading-anchor,
.heading-anchor:focus {
  opacity: 0.7;
}

.heading-anchor:hover {
  opacity: 1;
  color: var(--bs-link-color);
}

@media (hover: none) {
  .heading-anchor {
    opacity: 0.7;
  }
  .heading-anchor:active {
    opacity: 1;
  }
}

.section-title.anchor-pulse,
h2[id].anchor-pulse,
h3[id].anchor-pulse,
li[id].anchor-pulse {
  animation: anchor-pulse 2s ease-in-out 3;
}

.article-link {
  color: var(--bs-body-color);
}

.article-link:hover {
  color: var(--bs-link-color);
}

@media (max-width: 767.98px) {
  .articles-scroll {
    max-height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-item.anchor-pulse {
    animation: none;
    background: var(--tf-articles-pulse-bg-color);
  }
  .copy-link-toast {
    animation: none;
  }
  .section-title.anchor-pulse,
  h2[id].anchor-pulse,
  h3[id].anchor-pulse,
  li[id].anchor-pulse {
    animation: none;
    background: var(--tf-articles-pulse-bg-color);
  }
}