/*
 * Cole Lab site styles, on top of stock Bootstrap 5.
 * Load this after bootstrap/css/bootstrap.min.css.
 */

:root {
  /* The navbar link handler in index.html scrolls with a fixed offset, so jump straight to anchors */
  scroll-behavior: auto;
  /* The softer blue from the site's Bootstrap 3 days, for links and accents */
  --bs-primary: #428bca;
  --bs-primary-rgb: 66, 139, 202;
  --bs-primary-border-subtle: #b3d1ea;
  --bs-link-color: #428bca;
  --bs-link-color-rgb: 66, 139, 202;
  --bs-link-hover-color: #2a6496;
  --bs-link-hover-color-rgb: 42, 100, 150;
  --chevron-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Navbar: translucent bar that blurs the page behind it */
.navbar.fixed-top {
  background-color: rgba(var(--bs-body-bg-rgb), .85);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bs-border-color-translucent);
}
.navbar-brand { font-weight: 600; letter-spacing: -.01em; }
/* Desktop: spread the links across the whole bar; bigger text and click areas on wide screens */
@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-nav { flex-grow: 1; justify-content: space-between; }
  .navbar-expand-xl .navbar-nav .nav-link { font-size: .9375rem; }
}
@media (min-width: 1400px) {
  .navbar-expand-xl .navbar-nav .nav-link { --bs-navbar-nav-link-padding-x: .75rem; font-size: 1rem; }
}
.navbar-nav .nav-link.active {
  color: var(--bs-primary);
  text-decoration: underline 2px;
  text-underline-offset: .5rem;
}

/* Links: a lighter underline that darkens on hover */
a {
  text-underline-offset: .2em;
  text-decoration-color: rgba(var(--bs-link-color-rgb), .35);
}
a:hover { text-decoration-color: currentColor; }

/* Headings */
h1, h2, h3 { letter-spacing: -.02em; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  font-weight: 400;
  color: var(--bs-secondary-color);
}
.home h2 { font-weight: 700; margin-top: 3rem; margin-bottom: 1.25rem; }
.home h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: .25rem;
  margin-top: .5rem;
  border-radius: 1rem;
  background-color: var(--bs-primary);
}

/* Carousels */
.home .carousel {
  overflow: hidden;
  border-radius: var(--bs-border-radius-xl);
  background-color: var(--bs-tertiary-bg);
  box-shadow: var(--bs-box-shadow);
}
/* The lab photos are 715px wide; keep that carousel from being wider than its photos */
.home #carousel-second { max-width: 715px; margin: 0 auto; }

/* Small pill buttons next to publications and presentations */
.btn-sm {
  --bs-btn-padding-y: .125rem;
  --bs-btn-padding-x: .625rem;
  --bs-btn-font-size: .8125rem;
}

/* Outline buttons in the same blue as the links */
.btn-outline-primary {
  --bs-btn-color: #428bca;
  --bs-btn-border-color: #428bca;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #428bca;
  --bs-btn-hover-border-color: #428bca;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3071a9;
  --bs-btn-active-border-color: #3071a9;
  --bs-btn-focus-shadow-rgb: 66, 139, 202;
}

/* Collapse toggle buttons get a chevron that flips while their panel is open */
.btn[data-bs-toggle="collapse"]::after {
  content: "";
  display: inline-block;
  width: .75em;
  height: .75em;
  margin-left: .35em;
  vertical-align: -.05em;
  background-color: currentColor;
  -webkit-mask: var(--chevron-icon) center / contain no-repeat;
  mask: var(--chevron-icon) center / contain no-repeat;
  transition: transform .2s ease-in-out;
}
.btn[data-bs-toggle="collapse"][aria-expanded="true"]::after { transform: rotate(-180deg); }

/* Abstract panels opened by the "Read abstract" buttons */
.abstract { display: flow-root; } /* keeps the panel's margins inside while it animates */
.abstract-body {
  margin: .5rem 0 1rem;
  padding: 1rem 1.25rem;
  font-size: .9375rem;
  line-height: 1.6;
  background-color: var(--bs-tertiary-bg);
  border-left: 3px solid var(--bs-primary-border-subtle);
  border-radius: var(--bs-border-radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  .btn[data-bs-toggle="collapse"]::after { transition: none; }
}