@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Warm tone overrides inspired by hero image.
   Selector also targets [data-bs-theme="light"] because Quarto's bundled
   Bootstrap theme sets its own --bs-* variables on that same attribute
   selector, which has higher specificity than a plain :root — without this,
   Bootstrap's default blue/orange silently wins over these overrides. */
:root,
[data-bs-theme="light"] {
  --bs-primary: #f79226;
  --bs-primary-rgb: 247, 146, 38;
  --bs-primary-light: #fbecda;
  --bs-primary-light-rgb: 251, 236, 218;
  --bs-link-color: #4d9de0;
  --bs-link-hover-color: #33658a;
  --bs-font-sans-serif: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

  --color-text: #222;
  --color-muted: #555;
  --color-border: #e4e4e4;
  --color-bg-subtle: #f5f5f5;
  --color-bg-warm: #f7f5f2;
  --color-white: #fff;
  --color-blue-dark: #33658a;
  --color-blue-light: #4d9de0;
  --color-blue-pale: #e5f2fa;
  --color-blue-pastel-bg: #eaf4fb;
  --color-blue-pastel-border: rgba(77, 157, 224, 0.35);
  --color-grey-box-bg: #f5f5f5;
  --color-grey-box-border: #d3d3d3;

  --navbar-logo-height: 24px;
}

/* Quarto's bundled theme caps .navbar-logo at max-height: 24px, but doesn't
   scale it down further for mobile, so the wide (521x269) bear logo can
   overflow the collapsed mobile navbar row. !important guarantees this wins
   over the bundled rule regardless of stylesheet load order. */
.navbar-logo {
  max-height: var(--navbar-logo-height) !important;
  width: auto;
}


body {
  color: var(--color-text);
}

.alert-primary {
  --bs-alert-color: var(--color-text);
  --bs-alert-bg: var(--bs-primary-light);
  --bs-alert-border-color: rgba(var(--bs-primary-rgb), 0.35);
}

/* Shared box styling: collapsible orange/blue/grey boxes (guiding-principles
   cross-cutting boxes and Important Considerations sections) and static
   orange box (How to Cite examples). Not built on .alert, so the base
   properties are spelled out here rather than inherited from Bootstrap. */
.orange-collapsable-box,
.blue-collapsable-box,
.grey-collapsable-box,
.orange-box {
  border-radius: var(--bs-border-radius, 0.375rem);
  color: var(--color-text);
  margin-bottom: 1rem;
}

.orange-collapsable-box,
.blue-collapsable-box,
.grey-collapsable-box {
  position: relative;
  padding: 1rem 1rem;
}

.orange-collapsable-box {
  background-color: var(--bs-primary-light);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
}

.blue-collapsable-box {
  background-color: var(--color-blue-pastel-bg);
  border: 1px solid var(--color-blue-pastel-border);
}

.grey-collapsable-box {
  background-color: var(--color-grey-box-bg);
  border: 1px solid var(--color-grey-box-border);
}

.orange-collapsable-box > summary,
.blue-collapsable-box > summary,
.grey-collapsable-box > summary {
  cursor: pointer;
}

.orange-collapsable-box[open] > summary,
.blue-collapsable-box[open] > summary,
.grey-collapsable-box[open] > summary {
  margin-bottom: 0.25rem;
}

.orange-box {
  padding: 0.5rem 0.75rem;
  background-color: var(--bs-primary-light);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
}

.box-title {
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-text);
}

.orange-collapsable-box ul:last-child,
.blue-collapsable-box ul:last-child,
.grey-collapsable-box ul:last-child,
.orange-box ul:last-child {
  margin-bottom: 0;
}

/* Lift on hover for listing cards */
.quarto-grid-item {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--bs-primary-light);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.quarto-grid-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--bs-primary);
}

.quarto-grid-item .card-body {
  padding: 1.25rem 1.5rem;
}

.quarto-grid-item .listing-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #000;
}

.quarto-grid-item .listing-description {
  font-size: 0.9rem;
  color: #000;
}

.quarto-grid-item .listing-categories {
  margin-top: 0.5rem;
}

.quarto-grid-item .listing-categories .listing-category {
  color: var(--color-text);
  border-color: rgba(var(--bs-primary-rgb), 0.35);
  background: var(--color-white);
}

/* TOC: hide nested items by default, expand when parent section is active */
nav#TOC ul ul {
  display: none;
}

nav#TOC li:has(> a.active) > ul,
nav#TOC li:has(ul a.active) > ul {
  display: block;
}



div[id^="fig-"] {
  max-width: 100%;
  overflow-x: hidden;
}

.tooltip {
  --bs-tooltip-opacity: 1;
}

.tooltip .tooltip-inner {
  max-width: 320px;
  background-color: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.tooltip .tooltip-arrow::before {
  border-top-color: var(--color-border);
}

/* Use scroll bar for overflown figures */
.figure-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* ===== Homepage hero ===== */
/* ===== Homepage hero ===== */

.quarto-title-banner {
  min-height: 600px !important;
  background-position: center 85% !important;
  display: flex !important;
  align-items: flex-start;
  padding: 5rem 4rem 3rem !important;
  position: relative;
}

.quarto-title-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.quarto-title-banner .quarto-title {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.quarto-title-banner h1.title {
  font-size: 2.6rem;
  font-weight: 700;
}

.quarto-title-banner .subtitle {
  color: var(--color-text);
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.7);
}


.quarto-title-banner .quarto-title-meta {
  display: none;
}

.back-to-blog {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--bs-link-color);
  text-decoration: none;
}

.back-to-blog:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}

.media-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-white);
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--bs-primary);
  color: inherit;
}

.media-card .media-thumb {
  position: relative;
  width: 100%;
  padding-bottom: 62%;
  background: var(--color-border);
  overflow: hidden;
}

.media-card .media-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card .media-type-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
}

.media-card .media-type-icon.poster,
.media-card .media-type-icon.other {
  background: #dc3545;
}

.media-card .media-type-icon.slide_deck {
  background: #0f62fe;
}

.media-card .media-type-icon.youtube {
  background: #ff0000;
}

.media-card .media-body {
  padding: 0.85rem 1rem;
}

.media-card .media-body h4 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  line-height: 1.35;
}

.media-card .media-body p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* ===== Homepage ===== */
.info-card {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-white);
}

.info-card .bi {
  font-size: 1.8rem;
  color: var(--bs-primary);
  margin-bottom: 0.5rem;
  display: block;
}

.info-card strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.35rem;
  color: #000;
}

.info-card p {
  font-size: 0.9rem;
  color: #000;
  margin-bottom: 0;
}

.info-card-photo {
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--color-blue-pale);
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.info-card-photo:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--color-blue-light);
  color: inherit;
}

.info-card-photo img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.info-card-photo-body {
  padding: 1.25rem 1.5rem;
}

.info-card-photo-body strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.35rem;
  color: #000;
}

.info-card-photo-body p {
  font-size: 0.9rem;
  color: #000;
  margin-bottom: 0;
}

/* Bouncy blue card variant for link-cards with list content instead of a photo */
.info-card-list {
  display: block;
  background: var(--color-blue-pale);
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.info-card-list:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--color-blue-light);
  color: inherit;
}

.info-card-list h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
}

.info-card-list ul {
  margin-bottom: 0;
  padding-left: 1.1rem;
  color: #000;
  font-size: 0.9rem;
}

.info-card-list ul li {
  margin-bottom: 0.25rem;
}

.topic-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-white);
  text-decoration: none !important;
  color: inherit;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--bs-primary);
  color: inherit;
}

.topic-card .bi {
  font-size: 2rem;
  color: var(--bs-primary);
  margin-bottom: 0.75rem;
}

.topic-card h4 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.topic-card p {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 0;
}

.dataset-thumb {
  float: right;
  width: 320px;
  max-width: 45%;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  margin: 0 0 0.75rem 1.5rem;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.team-card img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.75rem;
}

.team-card .team-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.team-card .team-name a {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

.team-card .team-name a:hover {
  text-decoration: underline;
}

.team-card .team-title {
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
}

.team-card .team-association {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.resource-explorer {
  display: flex;
  gap: 2.5rem;
  margin-top: 1.5rem;
  align-items: flex-start;
}

.resource-carousel-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.resource-carousel {
  flex: 1 1 auto;
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.resource-carousel::-webkit-scrollbar {
  display: none;
}

.resource-arrow {
  all: unset;
  cursor: pointer;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  font-size: 1.1rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.resource-arrow:hover {
  background: var(--bs-primary-light);
  border-color: var(--bs-primary);
}

.resource-arrow:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.resource-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Hidden on desktop, where the arrow buttons already signal scrollability;
   shown on mobile (see mobile media query at the end of this file) since
   the arrows are hidden there and swipe-scrollability isn't otherwise
   obvious at rest. */
.resource-scroll-track {
  display: none;
}

.resource-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--color-white);
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--bs-primary);
  color: inherit;
}

.resource-card-thumb {
  width: 100%;
  height: 240px;
  background: var(--color-bg-subtle);
  overflow: hidden;
}

.resource-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.resource-card-body {
  padding: 1.1rem 1.35rem 1.35rem;
}

.resource-card-body h4 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #000;
}

.resource-card-body p {
  margin: 0;
  color: #000;
  font-size: 0.9rem;
}


.partner-explorer {
  display: flex;
  gap: 2.5rem;
  margin-top: 1.5rem;
  align-items: center;
}

.partner-carousel-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.partner-carousel {
  flex: 1 1 auto;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.partner-carousel::-webkit-scrollbar {
  display: none;
}

.partner-logo-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 140px;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: var(--color-white);
}

.partner-logo-item img {
  height: 5.5rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.partner-logo-item img[src*="logo-cec"] {
  height: 6.75rem;
}

.footer {
  background: var(--color-bg-warm);
  color: var(--color-muted);
}

.footer a {
  color: var(--color-muted);
}

.footer a:hover {
  color: var(--bs-primary);
}

#title-block-header {
  padding-bottom: 1rem;
}

#quarto-citation > div {
  display: flex;
  flex-direction: column;
}

#quarto-citation > div > :nth-child(1) { order: 3; }
#quarto-citation > div > :nth-child(2) { order: 4; }
#quarto-citation > div > :nth-child(3) { order: 1; }
#quarto-citation > div > :nth-child(4) { order: 2; }

/* Unified table styling (dark blue header, bordered cells) for all tables site-wide */
table.table {
  border-collapse: collapse;
}

table.table > thead > tr > th {
  background-color: var(--color-blue-dark);
  color: var(--color-white);
  font-weight: bold;
  text-align: center;
  padding: 10px 16px;
  border: 1px solid var(--color-blue-dark);
}

table.table > tbody > tr > td {
  padding: 10px 20px;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
}

/* Let wide cross-referenced tables scroll horizontally instead of overflowing the page */
div[aria-describedby] {
  overflow-x: auto;
}

/* Neutralize Bootstrap's zebra striping so every table matches, striped or not */
table.table-striped > tbody > tr:nth-of-type(odd) > td,
table.table-striped > tbody > tr:nth-of-type(even) > td {
  background-color: var(--color-white);
}

/* Mobile overrides. Kept at the end of the file (rather than near the
   components they touch) so they win the cascade by source order alone —
   several of the base rules above (.resource-arrow, .resource-card,
   .partner-logo-item) set the same properties without a media query, and
   equal-specificity rules are decided by which one appears later. */
@media (max-width: 768px) {
  /* Sidesteps whatever is clipping the wide (521x269) bear logo on mobile
     rather than continuing to fight it with height/width tweaks — just
     show the text brand name on narrow screens. */
  .navbar-logo {
    display: none;
  }

  .quarto-title-banner {
    min-height: 250px !important;
    padding: 2rem !important;
    margin-bottom: 0 !important;
  }

  /* Shrink so it wraps to fewer/shorter lines and stays higher up, in the
     brighter sky part of the image, instead of extending down into the
     darker palm-tree silhouettes where contrast was poor. */
  .quarto-title-banner h1.title {
    font-size: 2rem;
  }

  /* Empty on this page (no author/date), but zero it out explicitly so it
     can't contribute stray height. */
  .quarto-title-meta {
    display: none;
  }

  /* Long subtitle text wrapped over the photo needs more image height on
     narrow screens, exposing busier/lower-contrast regions of the image
     behind it. Move it below the banner instead of shrinking it further. */
  .quarto-title-banner .subtitle {
    display: none;
  }

  /* Unscoped base rule (further up this file) adds 1rem of padding after
     the whole header block on every screen size; on mobile that stacks on
     top of the subtitle's own spacing and reads as a big empty gap. */
  #title-block-header {
    padding-bottom: 0;
  }

  .mobile-hero-subtitle {
    margin: 0 auto;
    max-width: 640px;
    text-align: center;
    color: var(--color-muted);
  }

  /* Arrow buttons assume cursor/hover precision and steal width from the
     cards on narrow screens; swipe-scrolling the carousel works fine
     without them, so hide them and let the cards use the freed-up space. */
  .resource-arrow {
    display: none;
  }

  /* .resource-explorer is a row-direction flex container, so the scroll
     track (a sibling of .resource-carousel-wrap, meant to sit below it)
     would otherwise land beside it instead, squeezed by the wrap's
     flex-grow. Stack them vertically. */
  .resource-explorer {
    flex-direction: column;
  }

  .resource-card {
    flex-basis: 80vw;
  }

  .resource-card-thumb {
    height: 45vw;
  }

  /* Fade hints that a partial card is peeking off the right edge, since
     the arrow buttons that used to signal scrollability are hidden here. */
  .resource-carousel-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--color-white));
    pointer-events: none;
  }

  .resource-scroll-track {
    display: block;
    width: 120px;
    height: 4px;
    margin: 0.75rem auto 0;
    border-radius: 2px;
    background: var(--color-border);
    overflow: hidden;
  }

  .resource-scroll-thumb {
    width: 40%;
    height: 100%;
    border-radius: 2px;
    background: var(--bs-primary);
  }

  /* Partner logos add little value at this size and the carousel
     mechanics (swipe + arrows) are more friction than they're worth for a
     row of static logos on a small screen — drop it entirely on mobile. */
  .partner-explorer {
    display: none;
  }
}